mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-03-13 03:16:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

Updated form toasts

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-10-07 19:06:42 +10:30
parent 04f5eeaf47
commit 9e331de44e
17 changed files with 377 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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">