From c502f7393d381d5c260fd06847171c3235edd84a Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Wed, 25 Jan 2023 16:47:11 +1000 Subject: [PATCH] cleanup dialog state --- src/components/CommandPalette/Index.tsx | 17 ++---- src/components/Dialog/DialogManager.tsx | 29 +++------ src/components/Dialog/RebootDialog.tsx | 6 +- src/components/Dialog/ShutdownDialog.tsx | 8 ++- src/core/stores/deviceStore.ts | 76 ++++++++++-------------- src/pages/Channels.tsx | 6 +- 6 files changed, 56 insertions(+), 86 deletions(-) diff --git a/src/components/CommandPalette/Index.tsx b/src/components/CommandPalette/Index.tsx index f48f0651..58018be4 100644 --- a/src/components/CommandPalette/Index.tsx +++ b/src/components/CommandPalette/Index.tsx @@ -77,14 +77,7 @@ export const CommandPalette = (): JSX.Element => { } = useAppStore(); const { getDevices } = useDeviceStore(); - const { - setQRDialogOpen, - setImportDialogOpen, - setShutdownDialogOpen, - setRebootDialogOpen, - setActivePage, - connection - } = useDevice(); + const { setDialogOpen, setActivePage, connection } = useDevice(); const groups: Group[] = [ { @@ -182,14 +175,14 @@ export const CommandPalette = (): JSX.Element => { name: "Generator", icon: , action() { - setQRDialogOpen(true); + setDialogOpen("QR", true); } }, { name: "Import", icon: , action() { - setImportDialogOpen(true); + setDialogOpen("import", true); } } ] @@ -207,14 +200,14 @@ export const CommandPalette = (): JSX.Element => { name: "Schedule Shutdown", icon: PowerIcon, action() { - setShutdownDialogOpen(true); + setDialogOpen("shutdown", true); } }, { name: "Schedule Reboot", icon: ArrowPathIcon, action() { - setRebootDialogOpen(true); + setDialogOpen("reboot", true); } }, { diff --git a/src/components/Dialog/DialogManager.tsx b/src/components/Dialog/DialogManager.tsx index cb95b77e..7fdba7e2 100644 --- a/src/components/Dialog/DialogManager.tsx +++ b/src/components/Dialog/DialogManager.tsx @@ -8,46 +8,35 @@ import { ShutdownDialog } from "./ShutdownDialog.js"; import { ImportDialog } from "./ImportDialog.js"; export const DialogManager = (): JSX.Element => { - const { - channels, - config, - importDialogOpen, - setImportDialogOpen, - QRDialogOpen, - setQRDialogOpen, - shutdownDialogOpen, - setShutdownDialogOpen, - rebootDialogOpen, - setRebootDialogOpen - } = useDevice(); + const { channels, config, dialog, setDialogOpen } = useDevice(); return ( <> { - setQRDialogOpen(false); + setDialogOpen("QR", false); }} channels={channels.map((ch) => ch.config)} loraConfig={config.lora} /> { - setImportDialogOpen(false); + setDialogOpen("import", false); }} channels={channels.map((ch) => ch.config)} loraConfig={config.lora} /> { - setShutdownDialogOpen(false); + setDialogOpen("shutdown", false); }} /> { - setRebootDialogOpen(false); + setDialogOpen("reboot", false); }} /> diff --git a/src/components/Dialog/RebootDialog.tsx b/src/components/Dialog/RebootDialog.tsx index fd9ebfbd..385476b9 100644 --- a/src/components/Dialog/RebootDialog.tsx +++ b/src/components/Dialog/RebootDialog.tsx @@ -17,7 +17,7 @@ export const RebootDialog = ({ isOpen, close }: RebootDialogProps): JSX.Element => { - const { connection, setRebootDialogOpen } = useDevice(); + const { connection, setDialogOpen } = useDevice(); const [time, setTime] = useState(5); @@ -38,7 +38,7 @@ export const RebootDialog = ({ action() { connection ?.reboot(time * 60) - .then(() => setRebootDialogOpen(false)); + .then(() => setDialogOpen("reboot", false)); } }} /> @@ -46,7 +46,7 @@ export const RebootDialog = ({ className="w-24" iconBefore={} onClick={() => { - connection?.reboot(2).then(() => setRebootDialogOpen(false)); + connection?.reboot(2).then(() => setDialogOpen("reboot", false)); }} > Now diff --git a/src/components/Dialog/ShutdownDialog.tsx b/src/components/Dialog/ShutdownDialog.tsx index e180efef..74a8bfdf 100644 --- a/src/components/Dialog/ShutdownDialog.tsx +++ b/src/components/Dialog/ShutdownDialog.tsx @@ -17,7 +17,7 @@ export const ShutdownDialog = ({ isOpen, close }: ShutdownDialogProps): JSX.Element => { - const { connection, setShutdownDialogOpen } = useDevice(); + const { connection, setDialogOpen } = useDevice(); const [time, setTime] = useState(5); @@ -38,7 +38,7 @@ export const ShutdownDialog = ({ action() { connection ?.shutdown(time * 60) - .then(() => setShutdownDialogOpen(false)); + .then(() => setDialogOpen("shutdown", false)); } }} /> @@ -46,7 +46,9 @@ export const ShutdownDialog = ({ className="w-24" iconBefore={} onClick={() => { - connection?.shutdown(2).then(() => setShutdownDialogOpen(false)); + connection + ?.shutdown(2) + .then(() => setDialogOpen("shutdown", false)); }} > Now diff --git a/src/core/stores/deviceStore.ts b/src/core/stores/deviceStore.ts index 73745c8a..cc55fc74 100644 --- a/src/core/stores/deviceStore.ts +++ b/src/core/stores/deviceStore.ts @@ -52,6 +52,18 @@ export interface processPacketParams { time: number; } +export type WorkingConfig = [ + Protobuf.Config_DeviceConfig?, + Protobuf.Config_PositionConfig?, + Protobuf.Config_PowerConfig?, + Protobuf.Config_NetworkConfig?, + Protobuf.Config_DisplayConfig?, + Protobuf.Config_LoRaConfig?, + Protobuf.Config_BluetoothConfig? +]; + +export type DialogVariant = "import" | "QR" | "shutdown" | "reboot"; + export interface Device { id: number; ready: boolean; @@ -68,12 +80,15 @@ export interface Device { waypoints: Protobuf.Waypoint[]; regionUnset: boolean; currentMetrics: Protobuf.DeviceMetrics; - importDialogOpen: boolean; - QRDialogOpen: boolean; - shutdownDialogOpen: boolean; - rebootDialogOpen: boolean; pendingSettingsChanges: boolean; messageDraft: string; + workingConfig: WorkingConfig; + dialog: { + import: boolean; + QR: boolean; + shutdown: boolean; + reboot: boolean; + }; setReady(ready: boolean): void; setStatus: (status: Types.DeviceStatusEnum) => void; @@ -101,10 +116,7 @@ export interface Device { messageId: number, state: MessageState ) => void; - setImportDialogOpen: (open: boolean) => void; - setQRDialogOpen: (open: boolean) => void; - setShutdownDialogOpen: (open: boolean) => void; - setRebootDialogOpen: (open: boolean) => void; + setDialogOpen: (dialog: DialogVariant, open: boolean) => void; processPacket: (data: processPacketParams) => void; setMessageDraft: (message: string) => void; } @@ -142,12 +154,15 @@ export const useDeviceStore = create((set, get) => ({ waypoints: [], regionUnset: false, currentMetrics: new Protobuf.DeviceMetrics(), - importDialogOpen: false, - QRDialogOpen: false, - shutdownDialogOpen: false, - rebootDialogOpen: false, + dialog: { + import: false, + QR: false, + shutdown: false, + reboot: false + }, pendingSettingsChanges: false, messageDraft: "", + workingConfig: [], setReady: (ready: boolean) => { set( @@ -486,43 +501,14 @@ export const useDeviceStore = create((set, get) => ({ }) ); }, - setImportDialogOpen: (open: boolean) => { - set( - produce((draft) => { - const device = draft.devices.get(id); - if (device) { - device.importDialogOpen = open; - } - }) - ); - }, - setQRDialogOpen: (open: boolean) => { - set( - produce((draft) => { - const device = draft.devices.get(id); - if (device) { - device.QRDialogOpen = open; - } - }) - ); - }, - setShutdownDialogOpen: (open: boolean) => { + setDialogOpen: (dialog: DialogVariant, open: boolean) => { set( produce((draft) => { const device = draft.devices.get(id); - if (device) { - device.shutdownDialogOpen = open; - } - }) - ); - }, - setRebootDialogOpen: (open: boolean) => { - set( - produce((draft) => { - const device = draft.devices.get(id); - if (device) { - device.rebootDialogOpen = open; + if (!device) { + return; } + device.dialog[dialog] = open; }) ); }, diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx index 3a020b1c..ad502389 100644 --- a/src/pages/Channels.tsx +++ b/src/pages/Channels.tsx @@ -11,7 +11,7 @@ import { import { Protobuf } from "@meshtastic/meshtasticjs"; export const ChannelsPage = (): JSX.Element => { - const { channels, setQRDialogOpen, setImportDialogOpen } = useDevice(); + const { channels, setDialogOpen } = useDevice(); const tabs: TabType[] = channels.map((channel) => { return { @@ -30,11 +30,11 @@ export const ChannelsPage = (): JSX.Element => { actions={[ { icon: , - action: () => setImportDialogOpen(true) + action: () => setDialogOpen("import", true) }, { icon: , - action: () => setQRDialogOpen(true) + action: () => setDialogOpen("QR", true) } ]} />