From 9e331de44ef2cde626b049e693ee46034cf7c591 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Fri, 7 Oct 2022 19:06:42 +1030 Subject: [PATCH] Updated form toasts --- src/components/PageComponents/Channel.tsx | 53 +++++++++++-------- .../PageComponents/Config/Bluetooth.tsx | 42 ++++++++------- .../PageComponents/Config/Device.tsx | 43 ++++++++------- .../PageComponents/Config/Display.tsx | 43 ++++++++------- src/components/PageComponents/Config/LoRa.tsx | 42 ++++++++------- .../PageComponents/Config/Network.tsx | 43 ++++++++------- .../PageComponents/Config/Position.tsx | 42 ++++++++------- .../PageComponents/Config/Power.tsx | 43 ++++++++------- src/components/PageComponents/Config/User.tsx | 27 +++++----- .../ModuleConfig/CannedMessage.tsx | 43 ++++++++------- .../ModuleConfig/ExternalNotification.tsx | 44 ++++++++------- .../PageComponents/ModuleConfig/MQTT.tsx | 43 ++++++++------- .../PageComponents/ModuleConfig/RangeTest.tsx | 44 ++++++++------- .../PageComponents/ModuleConfig/Serial.tsx | 44 ++++++++------- .../ModuleConfig/StoreForward.tsx | 44 ++++++++------- .../PageComponents/ModuleConfig/Telemetry.tsx | 43 ++++++++------- src/components/form/Form.tsx | 8 --- 17 files changed, 377 insertions(+), 314 deletions(-) diff --git a/src/components/PageComponents/Channel.tsx b/src/components/PageComponents/Channel.tsx index 4bebfa45..47f099f9 100644 --- a/src/components/PageComponents/Channel.tsx +++ b/src/components/PageComponents/Channel.tsx @@ -3,6 +3,7 @@ import { useEffect, useState } from "react"; import { fromByteArray, toByteArray } from "base64-js"; import { Controller, useForm } from "react-hook-form"; +import toast from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Form } from "@components/form/Form"; @@ -23,7 +24,6 @@ export interface SettingsPanelProps { export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { const { connection } = useDevice(); - const [loading, setLoading] = useState(false); const [keySize, setKeySize] = useState<128 | 256>(256); const [pskHidden, setPskHidden] = useState(true); @@ -62,27 +62,35 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { }); }, [channel, reset]); - const onSubmit = handleSubmit(async (data) => { - setLoading(true); - const channelData = Protobuf.Channel.create({ - role: - channel?.role === Protobuf.Channel_Role.PRIMARY - ? Protobuf.Channel_Role.PRIMARY - : data.enabled - ? Protobuf.Channel_Role.SECONDARY - : Protobuf.Channel_Role.DISABLED, - index: channel?.index, - settings: { - ...data, - psk: toByteArray(data.psk ?? ""), - }, - }); - - await connection?.setChannel(channelData, (): Promise => { - reset({ ...data }); - setLoading(false); - return Promise.resolve(); - }); + const onSubmit = handleSubmit((data) => { + if (connection) { + void toast.promise( + connection.setChannel( + { + role: + channel?.role === Protobuf.Channel_Role.PRIMARY + ? Protobuf.Channel_Role.PRIMARY + : data.enabled + ? Protobuf.Channel_Role.SECONDARY + : Protobuf.Channel_Role.DISABLED, + index: channel?.index, + settings: { + ...data, + psk: toByteArray(data.psk ?? ""), + }, + }, + (): Promise => { + reset({ ...data }); + return Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Channel", + error: "No response received", + } + ); + } }); return ( @@ -108,7 +116,6 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => { psk: fromByteArray(channel?.settings?.psk ?? new Uint8Array(0)), }) } - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Bluetooth.tsx b/src/components/PageComponents/Config/Bluetooth.tsx index 47831dcf..34889f51 100644 --- a/src/components/PageComponents/Config/Bluetooth.tsx +++ b/src/components/PageComponents/Config/Bluetooth.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Bluetooth = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, @@ -34,21 +33,27 @@ export const Bluetooth = (): JSX.Element => { }, [reset, config.bluetooth]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "bluetooth", - bluetooth: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Bluetooth Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "bluetooth", + bluetooth: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Bluetooth Config, Restarting Node", + error: "No response received", + } + ); + } }); const pairingMode = useWatch({ @@ -62,7 +67,6 @@ export const Bluetooth = (): JSX.Element => { title="Bluetooth Config" breadcrumbs={["Config", "Bluetooth"]} reset={() => reset(config.bluetooth)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Device.tsx b/src/components/PageComponents/Config/Device.tsx index 47b7c7e6..a8fc4bb8 100644 --- a/src/components/PageComponents/Config/Device.tsx +++ b/src/components/PageComponents/Config/Device.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Select } from "@app/components/form/Select.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -15,7 +15,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Device = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -32,28 +31,34 @@ export const Device = (): JSX.Element => { }, [reset, config.device]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "device", - device: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Device Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "device", + device: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Device Config, Restarting Node", + error: "No response received", + } + ); + } }); + return (
reset(config.device)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Display.tsx b/src/components/PageComponents/Config/Display.tsx index bcaf36bb..e6a88bf8 100644 --- a/src/components/PageComponents/Config/Display.tsx +++ b/src/components/PageComponents/Config/Display.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Display = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -33,28 +32,34 @@ export const Display = (): JSX.Element => { }, [reset, config.display]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "display", - display: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Display Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "display", + display: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Display Config, Restarting Node", + error: "No response received", + } + ); + } }); + return ( reset(config.display)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/LoRa.tsx b/src/components/PageComponents/Config/LoRa.tsx index 5ce50681..edd7f604 100644 --- a/src/components/PageComponents/Config/LoRa.tsx +++ b/src/components/PageComponents/Config/LoRa.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const LoRa = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, @@ -40,21 +39,27 @@ export const LoRa = (): JSX.Element => { }, [reset, config.lora]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "lora", - lora: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved LoRa Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "lora", + lora: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved LoRa Config, Restarting Node", + error: "No response received", + } + ); + } }); return ( @@ -62,7 +67,6 @@ export const LoRa = (): JSX.Element => { title="LoRa Config" breadcrumbs={["Config", "LoRa"]} reset={() => reset(config.lora)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Network.tsx b/src/components/PageComponents/Config/Network.tsx index 387b7813..6c163f3c 100644 --- a/src/components/PageComponents/Config/Network.tsx +++ b/src/components/PageComponents/Config/Network.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const Network = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -39,28 +38,34 @@ export const Network = (): JSX.Element => { }, [reset, config.network]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "network", - network: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Network Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "network", + network: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Network Config, Restarting Node", + error: "No response received", + } + ); + } }); + return ( reset(config.network)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Position.tsx b/src/components/PageComponents/Config/Position.tsx index 4776bc46..54774aea 100644 --- a/src/components/PageComponents/Config/Position.tsx +++ b/src/components/PageComponents/Config/Position.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const Position = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -30,21 +29,27 @@ export const Position = (): JSX.Element => { }, [reset, config.position]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "position", - position: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Position Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "position", + position: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Position Config, Restarting Node", + error: "No response received", + } + ); + } }); return ( @@ -52,7 +57,6 @@ export const Position = (): JSX.Element => { title="Position Config" breadcrumbs={["Config", "Position"]} reset={() => reset(config.position)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/Power.tsx b/src/components/PageComponents/Config/Power.tsx index 6810cca0..52653a57 100644 --- a/src/components/PageComponents/Config/Power.tsx +++ b/src/components/PageComponents/Config/Power.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const Power = (): JSX.Element => { const { config, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -30,28 +29,34 @@ export const Power = (): JSX.Element => { }, [reset, config.power]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setConfig( - { - payloadVariant: { - oneofKind: "power", - power: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Power Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setConfig( + { + payloadVariant: { + oneofKind: "power", + power: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Power Config, Restarting Node", + error: "No response received", + } + ); + } }); + return ( reset(config.power)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/Config/User.tsx b/src/components/PageComponents/Config/User.tsx index e7e09a84..0394ace7 100644 --- a/src/components/PageComponents/Config/User.tsx +++ b/src/components/PageComponents/Config/User.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { base16 } from "rfc4648"; import { Input } from "@app/components/form/Input.js"; @@ -17,7 +17,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const User = (): JSX.Element => { const { hardware, nodes, connection } = useDevice(); - const [loading, setLoading] = useState(false); const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum); @@ -41,15 +40,18 @@ export const User = (): JSX.Element => { }, [reset, myNode]); const onSubmit = handleSubmit((data) => { - setLoading(true); - - if (myNode?.data.user) { - void connection?.setOwner({ ...myNode.data.user, ...data }, async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved User Config, Restarting Node"); - await Promise.resolve(); - }); + if (connection && myNode?.data.user) { + void toast.promise( + connection.setOwner({ ...myNode.data.user, ...data }, async () => { + reset({ ...data }); + await Promise.resolve(); + }), + { + loading: "Saving...", + success: "Saved User, Restarting Node", + error: "No response received", + } + ); } }); @@ -64,7 +66,6 @@ export const User = (): JSX.Element => { isLicensed: myNode?.data.user?.isLicensed, }); }} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/CannedMessage.tsx b/src/components/PageComponents/ModuleConfig/CannedMessage.tsx index 270d5185..31d95a07 100644 --- a/src/components/PageComponents/ModuleConfig/CannedMessage.tsx +++ b/src/components/PageComponents/ModuleConfig/CannedMessage.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Select } from "@app/components/form/Select.js"; @@ -16,7 +16,6 @@ import { Protobuf } from "@meshtastic/meshtasticjs"; export const CannedMessage = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -39,28 +38,34 @@ export const CannedMessage = (): JSX.Element => { }, [reset, moduleConfig.cannedMessage]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "cannedMessage", - cannedMessage: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Canned Message Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "cannedMessage", + cannedMessage: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Canned Message Config, Restarting Node", + error: "No response received", + } + ); + } }); + return ( reset(moduleConfig.cannedMessage)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx b/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx index 8cb015be..4698d02f 100644 --- a/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx +++ b/src/components/PageComponents/ModuleConfig/ExternalNotification.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const ExternalNotification = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -28,22 +27,28 @@ export const ExternalNotification = (): JSX.Element => { reset(moduleConfig.externalNotification); }, [reset, moduleConfig.externalNotification]); - const onSubmit = handleSubmit(async (data) => { - setLoading(true); - await connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "externalNotification", - externalNotification: data, - }, - }, - async (): Promise => { - reset({ ...data }); - setLoading(false); - toast.success("Saved External Notification Config, Restarting Node"); - await Promise.resolve(); - } - ); + const onSubmit = handleSubmit((data) => { + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "externalNotification", + externalNotification: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved External Notification Config, Restarting Node", + error: "No response received", + } + ); + } }); const moduleEnabled = useWatch({ @@ -57,7 +62,6 @@ export const ExternalNotification = (): JSX.Element => { title="External Notification Config" breadcrumbs={["Module Config", "External Notification"]} reset={() => reset(moduleConfig.externalNotification)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/MQTT.tsx b/src/components/PageComponents/ModuleConfig/MQTT.tsx index 19d2e6e6..799f827f 100644 --- a/src/components/PageComponents/ModuleConfig/MQTT.tsx +++ b/src/components/PageComponents/ModuleConfig/MQTT.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const MQTT = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -36,28 +35,34 @@ export const MQTT = (): JSX.Element => { }, [reset, moduleConfig.mqtt]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "mqtt", - mqtt: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved MQTT Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "mqtt", + mqtt: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved MQTT Config, Restarting Node", + error: "No response received", + } + ); + } }); + return ( reset(moduleConfig.mqtt)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/RangeTest.tsx b/src/components/PageComponents/ModuleConfig/RangeTest.tsx index 2e8a0f4b..28d5a8c8 100644 --- a/src/components/PageComponents/ModuleConfig/RangeTest.tsx +++ b/src/components/PageComponents/ModuleConfig/RangeTest.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const RangeTest = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -29,22 +28,28 @@ export const RangeTest = (): JSX.Element => { reset(moduleConfig.rangeTest); }, [reset, moduleConfig.rangeTest]); - const onSubmit = handleSubmit(async (data) => { - setLoading(true); - await connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "rangeTest", - rangeTest: data, - }, - }, - async (): Promise => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Range Test Config, Restarting Node"); - await Promise.resolve(); - } - ); + const onSubmit = handleSubmit((data) => { + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "rangeTest", + rangeTest: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Range Test Config, Restarting Node", + error: "No response received", + } + ); + } }); const moduleEnabled = useWatch({ @@ -58,7 +63,6 @@ export const RangeTest = (): JSX.Element => { title="Range Test Config" breadcrumbs={["Module Config", "Range Test"]} reset={() => reset(moduleConfig.rangeTest)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/Serial.tsx b/src/components/PageComponents/ModuleConfig/Serial.tsx index 6b68260b..1f8b5272 100644 --- a/src/components/PageComponents/ModuleConfig/Serial.tsx +++ b/src/components/PageComponents/ModuleConfig/Serial.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const Serial = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -29,22 +28,28 @@ export const Serial = (): JSX.Element => { reset(moduleConfig.serial); }, [reset, moduleConfig.serial]); - const onSubmit = handleSubmit(async (data) => { - setLoading(true); - await connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "serial", - serial: data, - }, - }, - async (): Promise => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Serial Config, Restarting Node"); - await Promise.resolve(); - } - ); + const onSubmit = handleSubmit((data) => { + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "serial", + serial: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Serial Config, Restarting Node", + error: "No response received", + } + ); + } }); const moduleEnabled = useWatch({ @@ -58,7 +63,6 @@ export const Serial = (): JSX.Element => { title="Serial Config" breadcrumbs={["Module Config", "Serial"]} reset={() => reset(moduleConfig.serial)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/StoreForward.tsx b/src/components/PageComponents/ModuleConfig/StoreForward.tsx index 09ecc1c3..61203319 100644 --- a/src/components/PageComponents/ModuleConfig/StoreForward.tsx +++ b/src/components/PageComponents/ModuleConfig/StoreForward.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm, useWatch } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const StoreForward = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -29,22 +28,28 @@ export const StoreForward = (): JSX.Element => { reset(moduleConfig.storeForward); }, [reset, moduleConfig.storeForward]); - const onSubmit = handleSubmit(async (data) => { - setLoading(true); - await connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "storeForward", - storeForward: data, - }, - }, - async (): Promise => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Stora & Forward Config, Restarting Node"); - await Promise.resolve(); - } - ); + const onSubmit = handleSubmit((data) => { + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "storeForward", + storeForward: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Store & Forward Config, Restarting Node", + error: "No response received", + } + ); + } }); const moduleEnabled = useWatch({ @@ -58,7 +63,6 @@ export const StoreForward = (): JSX.Element => { title="Store & Forward Config" breadcrumbs={["Module Config", "Store & Forward"]} reset={() => reset(moduleConfig.storeForward)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/PageComponents/ModuleConfig/Telemetry.tsx b/src/components/PageComponents/ModuleConfig/Telemetry.tsx index fe5e4a5a..91ed90a4 100644 --- a/src/components/PageComponents/ModuleConfig/Telemetry.tsx +++ b/src/components/PageComponents/ModuleConfig/Telemetry.tsx @@ -1,8 +1,8 @@ import type React from "react"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; -import toast from "react-hot-toast"; +import { toast } from "react-hot-toast"; import { Input } from "@app/components/form/Input.js"; import { Toggle } from "@app/components/form/Toggle.js"; @@ -13,7 +13,6 @@ import { classValidatorResolver } from "@hookform/resolvers/class-validator"; export const Telemetry = (): JSX.Element => { const { moduleConfig, connection } = useDevice(); - const [loading, setLoading] = useState(false); const { register, handleSubmit, @@ -30,28 +29,34 @@ export const Telemetry = (): JSX.Element => { }, [reset, moduleConfig.telemetry]); const onSubmit = handleSubmit((data) => { - setLoading(true); - void connection?.setModuleConfig( - { - payloadVariant: { - oneofKind: "telemetry", - telemetry: data, - }, - }, - async () => { - reset({ ...data }); - setLoading(false); - toast.success("Saved Telemetry Config, Restarting Node"); - await Promise.resolve(); - } - ); + if (connection) { + void toast.promise( + connection.setModuleConfig( + { + payloadVariant: { + oneofKind: "telemetry", + telemetry: data, + }, + }, + async () => { + reset({ ...data }); + await Promise.resolve(); + } + ), + { + loading: "Saving...", + success: "Saved Telemetry Config, Restarting Node", + error: "No response received", + } + ); + } }); + return ( reset(moduleConfig.telemetry)} - loading={loading} dirty={isDirty} onSubmit={onSubmit} > diff --git a/src/components/form/Form.tsx b/src/components/form/Form.tsx index ae8fcf68..b962a59d 100644 --- a/src/components/form/Form.tsx +++ b/src/components/form/Form.tsx @@ -5,7 +5,6 @@ import { FiSave } from "react-icons/fi"; import { Button } from "@components/Button.js"; import { - ArrowPathIcon, ArrowUturnLeftIcon, ChevronRightIcon, HomeIcon, @@ -16,7 +15,6 @@ export interface FormProps extends HTMLProps { breadcrumbs: string[]; reset: () => void; onSubmit: (event: React.FormEvent) => Promise; - loading: boolean; dirty: boolean; } @@ -24,7 +22,6 @@ export const Form = ({ title, breadcrumbs, reset, - loading, dirty, children, onSubmit, @@ -33,11 +30,6 @@ export const Form = ({ return ( // eslint-disable-next-line @typescript-eslint/no-misused-promises - {loading && ( -
- -
- )}