mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Updated form toasts

pull/43/head
Sacha Weatherstone 4 years ago
parent
04f5eeaf47
commit
9e331de44e
17 changed files with 377 additions and 314 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 53
      src/components/PageComponents/Channel.tsx
  2. 42
      src/components/PageComponents/Config/Bluetooth.tsx
  3. 43
      src/components/PageComponents/Config/Device.tsx
  4. 43
      src/components/PageComponents/Config/Display.tsx
  5. 42
      src/components/PageComponents/Config/LoRa.tsx
  6. 43
      src/components/PageComponents/Config/Network.tsx
  7. 42
      src/components/PageComponents/Config/Position.tsx
  8. 43
      src/components/PageComponents/Config/Power.tsx
  9. 27
      src/components/PageComponents/Config/User.tsx
  10. 43
      src/components/PageComponents/ModuleConfig/CannedMessage.tsx
  11. 44
      src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
  12. 43
      src/components/PageComponents/ModuleConfig/MQTT.tsx
  13. 44
      src/components/PageComponents/ModuleConfig/RangeTest.tsx
  14. 44
      src/components/PageComponents/ModuleConfig/Serial.tsx
  15. 44
      src/components/PageComponents/ModuleConfig/StoreForward.tsx
  16. 43
      src/components/PageComponents/ModuleConfig/Telemetry.tsx
  17. 8
      src/components/form/Form.tsx

53
src/components/PageComponents/Channel.tsx
View File

@ -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<void> => {
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<void> => {
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}
>

42
src/components/PageComponents/Config/Bluetooth.tsx
View File

@ -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}
>

43
src/components/PageComponents/Config/Device.tsx
View File

@ -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 (
<Form
title="Device Config"
breadcrumbs={["Config", "Device"]}
reset={() => reset(config.device)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

43
src/components/PageComponents/Config/Display.tsx
View File

@ -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 (
<Form
title="Display Config"
breadcrumbs={["Config", "Display"]}
reset={() => reset(config.display)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

42
src/components/PageComponents/Config/LoRa.tsx
View File

@ -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}
>

43
src/components/PageComponents/Config/Network.tsx
View File

@ -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 (
<Form
title="Network Config"
breadcrumbs={["Config", "Network"]}
reset={() => reset(config.network)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

42
src/components/PageComponents/Config/Position.tsx
View File

@ -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}
>

43
src/components/PageComponents/Config/Power.tsx
View File

@ -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 (
<Form
title="Power Config"
breadcrumbs={["Config", "Power"]}
reset={() => reset(config.power)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

27
src/components/PageComponents/Config/User.tsx
View File

@ -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}
>

43
src/components/PageComponents/ModuleConfig/CannedMessage.tsx
View File

@ -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 (
<Form
title="Canned Message Config"
breadcrumbs={["Module Config", "Canned Message"]}
reset={() => reset(moduleConfig.cannedMessage)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

44
src/components/PageComponents/ModuleConfig/ExternalNotification.tsx
View File

@ -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<void> => {
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}
>

43
src/components/PageComponents/ModuleConfig/MQTT.tsx
View File

@ -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 (
<Form
title="MQTT Config"
breadcrumbs={["Module Config", "MQTT"]}
reset={() => reset(moduleConfig.mqtt)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

44
src/components/PageComponents/ModuleConfig/RangeTest.tsx
View File

@ -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<void> => {
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}
>

44
src/components/PageComponents/ModuleConfig/Serial.tsx
View File

@ -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<void> => {
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}
>

44
src/components/PageComponents/ModuleConfig/StoreForward.tsx
View File

@ -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<void> => {
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}
>

43
src/components/PageComponents/ModuleConfig/Telemetry.tsx
View File

@ -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 (
<Form
title="Telemetry Config"
breadcrumbs={["Module Config", "Telemetry"]}
reset={() => reset(moduleConfig.telemetry)}
loading={loading}
dirty={isDirty}
onSubmit={onSubmit}
>

8
src/components/form/Form.tsx
View File

@ -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<HTMLFormElement> {
breadcrumbs: string[];
reset: () => void;
onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
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
<form className="w-full" onSubmit={onSubmit} {...props}>
{loading && (
<div className="absolute z-10 flex h-full w-full rounded-md bg-slate-600">
<ArrowPathIcon className="m-auto h-8 animate-spin" />
</div>
)}
<div className="select-none rounded-md bg-gray-700 p-4">
<ol className="flex gap-4">
<li className="cursor-pointer text-gray-400 hover:text-gray-200">

Write Preview
Loading…
Cancel
Save