hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions 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
src/components/PageComponents/Config/Bluetooth.tsx
+23 -19
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}
>
src/components/PageComponents/Config/Device.tsx
+24 -19
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}
>
src/components/PageComponents/Config/Display.tsx
+24 -19
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}
>
src/components/PageComponents/Config/LoRa.tsx
+23 -19
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}
>
src/components/PageComponents/Config/Network.tsx
+24 -19
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}
>
src/components/PageComponents/Config/Position.tsx
+23 -19
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}
>
src/components/PageComponents/Config/Power.tsx
+24 -19
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}
>
src/components/PageComponents/Config/User.tsx
+14 -13
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}
>