Browse Source

cleanup dialog state

pull/82/head
Sacha Weatherstone 3 years ago
parent
commit
c502f7393d
No known key found for this signature in database GPG Key ID: 7AB2D7E206124B31
  1. 17
      src/components/CommandPalette/Index.tsx
  2. 29
      src/components/Dialog/DialogManager.tsx
  3. 6
      src/components/Dialog/RebootDialog.tsx
  4. 8
      src/components/Dialog/ShutdownDialog.tsx
  5. 76
      src/core/stores/deviceStore.ts
  6. 6
      src/pages/Channels.tsx

17
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: <QueueListIcon className="w-4" />,
action() {
setQRDialogOpen(true);
setDialogOpen("QR", true);
}
},
{
name: "Import",
icon: <ArrowDownOnSquareStackIcon className="w-4" />,
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);
}
},
{

29
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 (
<>
<QRDialog
isOpen={QRDialogOpen}
isOpen={dialog.QR}
close={() => {
setQRDialogOpen(false);
setDialogOpen("QR", false);
}}
channels={channels.map((ch) => ch.config)}
loraConfig={config.lora}
/>
<ImportDialog
isOpen={importDialogOpen}
isOpen={dialog.import}
close={() => {
setImportDialogOpen(false);
setDialogOpen("import", false);
}}
channels={channels.map((ch) => ch.config)}
loraConfig={config.lora}
/>
<ShutdownDialog
isOpen={shutdownDialogOpen}
isOpen={dialog.shutdown}
close={() => {
setShutdownDialogOpen(false);
setDialogOpen("shutdown", false);
}}
/>
<RebootDialog
isOpen={rebootDialogOpen}
isOpen={dialog.reboot}
close={() => {
setRebootDialogOpen(false);
setDialogOpen("reboot", false);
}}
/>
</>

6
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<number>(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={<ArrowPathIcon className="w-4" />}
onClick={() => {
connection?.reboot(2).then(() => setRebootDialogOpen(false));
connection?.reboot(2).then(() => setDialogOpen("reboot", false));
}}
>
Now

8
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<number>(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={<PowerIcon className="w-4" />}
onClick={() => {
connection?.shutdown(2).then(() => setShutdownDialogOpen(false));
connection
?.shutdown(2)
.then(() => setDialogOpen("shutdown", false));
}}
>
Now

76
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<DeviceState>((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<DeviceState>((set, get) => ({
})
);
},
setImportDialogOpen: (open: boolean) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.importDialogOpen = open;
}
})
);
},
setQRDialogOpen: (open: boolean) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.QRDialogOpen = open;
}
})
);
},
setShutdownDialogOpen: (open: boolean) => {
setDialogOpen: (dialog: DialogVariant, open: boolean) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.shutdownDialogOpen = open;
}
})
);
},
setRebootDialogOpen: (open: boolean) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.rebootDialogOpen = open;
if (!device) {
return;
}
device.dialog[dialog] = open;
})
);
},

6
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: <ArrowDownOnSquareStackIcon className="w-4" />,
action: () => setImportDialogOpen(true)
action: () => setDialogOpen("import", true)
},
{
icon: <QrCodeIcon className="w-4" />,
action: () => setQRDialogOpen(true)
action: () => setDialogOpen("QR", true)
}
]}
/>

Loading…
Cancel
Save