From 04f5eeaf47e2392c22e5d2df41b0c5c7c3ba4c98 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Fri, 7 Oct 2022 16:11:45 +1030 Subject: [PATCH] Add toasts --- package.json | 1 + pnpm-lock.yaml | 22 +++++++++++++++++++ src/App.tsx | 6 +++++ .../PageComponents/Config/Bluetooth.tsx | 2 ++ .../PageComponents/Config/Device.tsx | 3 ++- .../PageComponents/Config/Display.tsx | 2 ++ src/components/PageComponents/Config/LoRa.tsx | 2 ++ .../PageComponents/Config/Network.tsx | 3 ++- .../PageComponents/Config/Position.tsx | 2 ++ .../PageComponents/Config/Power.tsx | 2 ++ src/components/PageComponents/Config/User.tsx | 2 ++ .../ModuleConfig/CannedMessage.tsx | 2 ++ .../ModuleConfig/ExternalNotification.tsx | 2 ++ .../PageComponents/ModuleConfig/MQTT.tsx | 2 ++ .../PageComponents/ModuleConfig/RangeTest.tsx | 2 ++ .../PageComponents/ModuleConfig/Serial.tsx | 2 ++ .../ModuleConfig/StoreForward.tsx | 2 ++ .../PageComponents/ModuleConfig/Telemetry.tsx | 2 ++ src/core/subscriptions.ts | 5 +++++ 19 files changed, 64 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 7d2faa3b..d3ad53f0 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.37.0", + "react-hot-toast": "^2.4.0", "react-icons": "^4.4.0", "react-json-pretty": "^2.2.0", "react-map-gl": "^7.0.19", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3c23383..3a5a9f12 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,7 @@ specifiers: react: ^18.2.0 react-dom: ^18.2.0 react-hook-form: ^7.37.0 + react-hot-toast: ^2.4.0 react-icons: ^4.4.0 react-json-pretty: ^2.2.0 react-map-gl: ^7.0.19 @@ -66,6 +67,7 @@ dependencies: react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-hook-form: 7.37.0_react@18.2.0 + react-hot-toast: 2.4.0_biqbaboplfbrettd7655fr4n2y react-icons: 4.4.0_react@18.2.0 react-json-pretty: 2.2.0_biqbaboplfbrettd7655fr4n2y react-map-gl: 7.0.19_6eczaga5xxiwzxtfiyk6fioasq @@ -2401,6 +2403,12 @@ packages: merge2: 1.4.1 slash: 3.0.0 + /goober/2.1.11: + resolution: {integrity: sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==} + peerDependencies: + csstype: ^3.0.10 + dev: false + /grapheme-splitter/1.0.4: resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==} dev: false @@ -3339,6 +3347,20 @@ packages: react: 18.2.0 dev: false + /react-hot-toast/2.4.0_biqbaboplfbrettd7655fr4n2y: + resolution: {integrity: sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==} + engines: {node: '>=10'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + dependencies: + goober: 2.1.11 + react: 18.2.0 + react-dom: 18.2.0_react@18.2.0 + transitivePeerDependencies: + - csstype + dev: false + /react-icons/4.4.0_react@18.2.0: resolution: {integrity: sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==} peerDependencies: diff --git a/src/App.tsx b/src/App.tsx index 9045a216..8d9ac723 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ import type React from "react"; +import { Toaster } from "react-hot-toast"; import { MapProvider } from "react-map-gl"; import { useAppStore } from "@app/core/stores/appStore.js"; @@ -24,6 +25,11 @@ export const App = (): JSX.Element => { {device && ( + diff --git a/src/components/PageComponents/Config/Bluetooth.tsx b/src/components/PageComponents/Config/Bluetooth.tsx index d9ed83a1..47831dcf 100644 --- a/src/components/PageComponents/Config/Bluetooth.tsx +++ b/src/components/PageComponents/Config/Bluetooth.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -44,6 +45,7 @@ export const Bluetooth = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved Bluetooth Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/Device.tsx b/src/components/PageComponents/Config/Device.tsx index d4dea00f..47b7c7e6 100644 --- a/src/components/PageComponents/Config/Device.tsx +++ b/src/components/PageComponents/Config/Device.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { Select } from "@app/components/form/Select.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,9 +41,9 @@ export const Device = (): JSX.Element => { }, }, async () => { - // toaster.success("Successfully updated device config"); reset({ ...data }); setLoading(false); + toast.success("Saved Device Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/Display.tsx b/src/components/PageComponents/Config/Display.tsx index d5f12178..bcaf36bb 100644 --- a/src/components/PageComponents/Config/Display.tsx +++ b/src/components/PageComponents/Config/Display.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -43,6 +44,7 @@ export const Display = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved Display Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/LoRa.tsx b/src/components/PageComponents/Config/LoRa.tsx index f1580b26..5ce50681 100644 --- a/src/components/PageComponents/Config/LoRa.tsx +++ b/src/components/PageComponents/Config/LoRa.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -50,6 +51,7 @@ export const LoRa = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved LoRa Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/Network.tsx b/src/components/PageComponents/Config/Network.tsx index 46fd8175..387b7813 100644 --- a/src/components/PageComponents/Config/Network.tsx +++ b/src/components/PageComponents/Config/Network.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -47,9 +48,9 @@ export const Network = (): JSX.Element => { }, }, async () => { - // toaster.success("Successfully updated Network config"); reset({ ...data }); setLoading(false); + toast.success("Saved Network Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/Position.tsx b/src/components/PageComponents/Config/Position.tsx index 436f0e92..4776bc46 100644 --- a/src/components/PageComponents/Config/Position.tsx +++ b/src/components/PageComponents/Config/Position.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,6 +41,7 @@ export const Position = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved Position Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/Power.tsx b/src/components/PageComponents/Config/Power.tsx index d54d26b5..6810cca0 100644 --- a/src/components/PageComponents/Config/Power.tsx +++ b/src/components/PageComponents/Config/Power.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,6 +41,7 @@ export const Power = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved Power Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/Config/User.tsx b/src/components/PageComponents/Config/User.tsx index 145c51a1..e7e09a84 100644 --- a/src/components/PageComponents/Config/User.tsx +++ b/src/components/PageComponents/Config/User.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { base16 } from "rfc4648"; import { Input } from "@app/components/form/Input.js"; @@ -46,6 +47,7 @@ export const User = (): JSX.Element => { void connection?.setOwner({ ...myNode.data.user, ...data }, async () => { reset({ ...data }); setLoading(false); + toast.success("Saved User Config, Restarting Node"); await Promise.resolve(); }); } diff --git a/src/components/PageComponents/ModuleConfig/CannedMessage.tsx b/src/components/PageComponents/ModuleConfig/CannedMessage.tsx index 1ce5640f..270d5185 100644 --- a/src/components/PageComponents/ModuleConfig/CannedMessage.tsx +++ b/src/components/PageComponents/ModuleConfig/CannedMessage.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -49,6 +50,7 @@ export const CannedMessage = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved Canned Message Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx b/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx index cbb32f8e..8cb015be 100644 --- a/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx +++ b/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -39,6 +40,7 @@ export const ExternalNotification = (): JSX.Element => { async (): Promise => { reset({ ...data }); setLoading(false); + toast.success("Saved External Notification Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/ModuleConfig/MQTT.tsx b/src/components/PageComponents/ModuleConfig/MQTT.tsx index a5649431..19d2e6e6 100644 --- a/src/components/PageComponents/ModuleConfig/MQTT.tsx +++ b/src/components/PageComponents/ModuleConfig/MQTT.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -46,6 +47,7 @@ export const MQTT = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved MQTT Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/ModuleConfig/RangeTest.tsx b/src/components/PageComponents/ModuleConfig/RangeTest.tsx index 3615b91b..2e8a0f4b 100644 --- a/src/components/PageComponents/ModuleConfig/RangeTest.tsx +++ b/src/components/PageComponents/ModuleConfig/RangeTest.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,6 +41,7 @@ export const RangeTest = (): JSX.Element => { async (): Promise => { reset({ ...data }); setLoading(false); + toast.success("Saved Range Test Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/ModuleConfig/Serial.tsx b/src/components/PageComponents/ModuleConfig/Serial.tsx index 72369216..6b68260b 100644 --- a/src/components/PageComponents/ModuleConfig/Serial.tsx +++ b/src/components/PageComponents/ModuleConfig/Serial.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,6 +41,7 @@ export const Serial = (): JSX.Element => { async (): Promise => { reset({ ...data }); setLoading(false); + toast.success("Saved Serial Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/ModuleConfig/StoreForward.tsx b/src/components/PageComponents/ModuleConfig/StoreForward.tsx index 438bba5b..09ecc1c3 100644 --- a/src/components/PageComponents/ModuleConfig/StoreForward.tsx +++ b/src/components/PageComponents/ModuleConfig/StoreForward.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,6 +41,7 @@ export const StoreForward = (): JSX.Element => { async (): Promise => { reset({ ...data }); setLoading(false); + toast.success("Saved Stora & Forward Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/components/PageComponents/ModuleConfig/Telemetry.tsx b/src/components/PageComponents/ModuleConfig/Telemetry.tsx index b9d6fc0a..fe5e4a5a 100644 --- a/src/components/PageComponents/ModuleConfig/Telemetry.tsx +++ b/src/components/PageComponents/ModuleConfig/Telemetry.tsx @@ -2,6 +2,7 @@ import type React from "react"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -40,6 +41,7 @@ export const Telemetry = (): JSX.Element => { async () => { reset({ ...data }); setLoading(false); + toast.success("Saved Telemetry Config, Restarting Node"); await Promise.resolve(); } ); diff --git a/src/core/subscriptions.ts b/src/core/subscriptions.ts index 821ba396..c60169d8 100644 --- a/src/core/subscriptions.ts +++ b/src/core/subscriptions.ts @@ -1,3 +1,5 @@ +import toast from "react-hot-toast"; + import type { Device } from "@core/stores/deviceStore.js"; import { Protobuf, Types } from "@meshtastic/meshtasticjs"; @@ -53,6 +55,9 @@ export const subscribeAll = ( }); connection.onNodeInfoPacket.subscribe((nodeInfo) => { + toast(`New Node Discovered: ${nodeInfo.data.user?.shortName ?? "UNK"}`, { + icon: "🔎", + }); device.addNodeInfo(nodeInfo); });