From 4099fb60c2fcc114b30657ba7d6a7bd66937ff16 Mon Sep 17 00:00:00 2001
From: Sacha Weatherstone <sachaw100@hotmail.com>
Date: Sat, 27 Aug 2022 20:01:52 +0930
Subject: [PATCH] Add help and Region dialog

---
 src/components/Dialog/HelpDialog.tsx   | 43 ++++++++++++++--
 src/components/Dialog/RegionDialog.tsx | 68 ++++++++++++++++++++++++++
 src/components/layout/Header.tsx       | 17 ++++++-
 3 files changed, 123 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Dialog/RegionDialog.tsx

diff --git a/src/components/Dialog/HelpDialog.tsx b/src/components/Dialog/HelpDialog.tsx
index 4a401e97..87cb2dff 100644
--- a/src/components/Dialog/HelpDialog.tsx
+++ b/src/components/Dialog/HelpDialog.tsx
@@ -1,7 +1,44 @@
 import type React from "react";
 
-import { Pane } from "evergreen-ui";
+import { CogIcon, Dialog, Text } from "evergreen-ui";
 
-export const HelpDialog = (): JSX.Element => {
-  return <Pane></Pane>;
+import { TabbedContent, TabType } from "../layout/page/TabbedContent.js";
+
+export interface HelpDialogProps {
+  isOpen: boolean;
+  close: () => void;
+}
+
+export const HelpDialog = ({ isOpen, close }: HelpDialogProps): JSX.Element => {
+  const tabs: TabType[] = [
+    {
+      name: "Device Config",
+      icon: CogIcon,
+      element: () => (
+        <div>
+          <Text>Title</Text>
+        </div>
+      ),
+    },
+    {
+      name: "Device Config",
+      icon: CogIcon,
+      element: () => (
+        <div>
+          <Text>Title 2</Text>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <Dialog
+      isShown={isOpen}
+      onCloseComplete={close}
+      title="Meshtastic Web Help"
+      hasFooter={true}
+    >
+      <TabbedContent direction="vertical" tabs={tabs} />
+    </Dialog>
+  );
 };
diff --git a/src/components/Dialog/RegionDialog.tsx b/src/components/Dialog/RegionDialog.tsx
new file mode 100644
index 00000000..250e4375
--- /dev/null
+++ b/src/components/Dialog/RegionDialog.tsx
@@ -0,0 +1,68 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+
+import { Dialog, SelectField } from "evergreen-ui";
+import { useForm } from "react-hook-form";
+
+import { LoRaValidation } from "@app/validation/config/lora.js";
+import { useDevice } from "@core/providers/useDevice.js";
+import { renderOptions } from "@core/utils/selectEnumOptions.js";
+import { classValidatorResolver } from "@hookform/resolvers/class-validator";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+import { Form } from "../form/Form.js";
+
+export interface RegionDialogProps {
+  isOpen: boolean;
+}
+
+export const RegionDialog = ({ isOpen }: RegionDialogProps): JSX.Element => {
+  const { config, connection } = useDevice();
+  const [loading, setLoading] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isDirty },
+    reset,
+  } = useForm<LoRaValidation>({
+    defaultValues: config.lora,
+    resolver: classValidatorResolver(LoRaValidation),
+  });
+
+  useEffect(() => {
+    reset(config.lora);
+  }, [reset, config.lora]);
+
+  const onSubmit = handleSubmit((data) => {
+    setLoading(true);
+    void connection?.setConfig(
+      {
+        payloadVariant: {
+          oneofKind: "lora",
+          lora: data,
+        },
+      },
+      async () => {
+        reset({ ...data });
+        setLoading(false);
+        await Promise.resolve();
+      }
+    );
+  });
+
+  return (
+    <Dialog isShown={isOpen} title="Generate QR Code" hasFooter={false}>
+      <Form loading={loading} dirty={isDirty} onSubmit={onSubmit}>
+        <SelectField
+          label="Region"
+          description="This is a description."
+          isInvalid={!!errors.region?.message}
+          validationMessage={errors.region?.message}
+          {...register("region", { valueAsNumber: true })}
+        >
+          {renderOptions(Protobuf.Config_LoRaConfig_RegionCode)}
+        </SelectField>
+      </Form>
+    </Dialog>
+  );
+};
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 83aea1eb..d23954ce 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -18,8 +18,9 @@ import {
 } from "evergreen-ui";
 import { FiGithub } from "react-icons/fi";
 
-import { useAppStore } from "@app/core/stores/appStore.js";
+import { HelpDialog } from "@components/Dialog/HelpDialog.js";
 import { NewDevice } from "@components/SlideSheets/NewDevice.js";
+import { useAppStore } from "@core/stores/appStore.js";
 import { useDeviceStore } from "@core/stores/deviceStore.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { Types } from "@meshtastic/meshtasticjs";
@@ -27,6 +28,7 @@ import { Types } from "@meshtastic/meshtasticjs";
 export const Header = (): JSX.Element => {
   const { getDevices, removeDevice } = useDeviceStore();
   const [newConnectionOpen, setNewConnectionOpen] = useState(false);
+  const [helpDialogOpen, setHelpDialogOpen] = useState(false);
   const { selectedDevice, setSelectedDevice } = useAppStore();
 
   return (
@@ -142,7 +144,18 @@ export const Header = (): JSX.Element => {
             </Button>
           </Link>
         </Tooltip>
-        <IconButton icon={HelpIcon} />
+        <IconButton
+          icon={HelpIcon}
+          onClick={() => {
+            setHelpDialogOpen(true);
+          }}
+        />
+        <HelpDialog
+          isOpen={helpDialogOpen}
+          close={() => {
+            setHelpDialogOpen(false);
+          }}
+        />
         <Tooltip content="Visit Meshtastic.org">
           <Link target="_blank" href="https://meshtastic.org/">
             <IconButton icon={GlobeIcon} />