mirror/web
1
0
Fork 0
mirror of https://github.com/meshtastic/web.git synced 2026-04-21 06:19:53 -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

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