WIP

2021-05-14 08:39:04 +10:00
parent 0d7d2cb64f
commit e172382765
8 changed files with 204 additions and 128 deletions
@@ -56,12 +56,7 @@ const App = () => {
    lastMeshInterraction,
    setLastMeshInterraction,
  ] = React.useState<number>(0);
-  const [
-    preferences,
-    setPreferences,
-  ] = React.useState<Protobuf.RadioConfig_UserPreferences>(
-    Protobuf.RadioConfig_UserPreferences.create(),
-  );
+
  const [language, setLanguage] = React.useState<LanguageEnum>(
    LanguageEnum.ENGLISH,
  );
@@ -136,14 +131,6 @@ const App = () => {
    const adminPacketEvent = connection.onAdminPacketEvent.subscribe(
      (adminMessage) => {
        switch (adminMessage.data.variant.oneofKind) {
-          case 'getRadioResponse':
-            if (adminMessage.data.variant.getRadioResponse.preferences) {
-              setPreferences(
-                adminMessage.data.variant.getRadioResponse.preferences,
-              );
-            }
-
-            break;
          case 'getChannelResponse':
            if (adminMessage.data.variant.getChannelResponse) {
              let message = adminMessage.data.variant.getChannelResponse;
@@ -183,7 +170,6 @@ const App = () => {
        connection={connection}
        nodes={nodes}
        channels={channels}
-        preferences={preferences}
        language={language}
        setLanguage={setLanguage}
        translations={translations}
@@ -17,7 +17,6 @@ interface MainProps {
  nodes: Types.NodeInfoPacket[];
  channels: Protobuf.Channel[];
  isReady: boolean;
-  preferences: Protobuf.RadioConfig_UserPreferences;
  language: LanguageEnum;
  setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
  translations: languageTemplate;
@@ -95,7 +94,6 @@ const Main = (props: MainProps) => {
        isReady={props.isReady}
        nodes={props.nodes}
        channels={props.channels}
-        preferences={props.preferences}
        connection={props.connection}
        language={props.language}
        setLanguage={props.setLanguage}
@@ -16,7 +16,6 @@ interface SidebarProps {
  isReady: boolean;
  nodes: Types.NodeInfoPacket[];
  channels: Protobuf.Channel[];
-  preferences: Protobuf.RadioConfig_UserPreferences;
  connection: IHTTPConnection;
  language: LanguageEnum;
  setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
@@ -42,7 +41,6 @@ const Sidebar = (props: SidebarProps) => {
      />
      <Device
        isReady={props.isReady}
-        preferences={props.preferences}
        connection={props.connection}
        translations={props.translations}
      />
@@ -37,7 +37,7 @@ const Channels = (props: ChannelsProps) => {
            <>
              {props.channels.map((channel, index) => {
                if (channel.role !== Protobuf.Channel_Role.DISABLED)
-                  return <Channel channel={channel} />;
+                  return <Channel key={index} channel={channel} />;
              })}
            </>
          </Disclosure.Panel>
@@ -1,19 +1,18 @@
-import React from 'react';
+import React, { Suspense } from 'react';

 import { Disclosure } from '@headlessui/react';
 import {
  AdjustmentsIcon,
  ChevronDownIcon,
  ChevronRightIcon,
-  SaveIcon,
 } from '@heroicons/react/outline';
-import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs';
+import type { IHTTPConnection } from '@meshtastic/meshtasticjs';

 import type { languageTemplate } from '../../../App';
+import Settings from './Settings';

 interface DeviceProps {
  isReady: boolean;
-  preferences: Protobuf.RadioConfig_UserPreferences;
  connection: IHTTPConnection;
  translations: languageTemplate;
 }
@@ -36,83 +35,13 @@ const Device = (props: DeviceProps) => {
          </Disclosure.Button>
          <Disclosure.Panel>
            <>
-              <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-                <div className="my-auto">
-                  {props.translations.device_region_title}
-                </div>
-                <div className="flex shadow-md rounded-md ml-2">
-                  <select
-                    value={
-                      props.preferences?.region ?? Protobuf.RegionCode.Unset
-                    }
-                    onChange={(e) => {
-                      props.preferences.region = parseInt(e.target.value);
-                    }}
-                  >
-                    <option value={Protobuf.RegionCode.ANZ}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.ANZ]}
-                    </option>
-                    <option value={Protobuf.RegionCode.CN}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.CN]}
-                    </option>
-                    <option value={Protobuf.RegionCode.EU433}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.EU433]}
-                    </option>
-                    <option value={Protobuf.RegionCode.EU865}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.EU865]}
-                    </option>
-                    <option value={Protobuf.RegionCode.JP}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.JP]}
-                    </option>
-                    <option value={Protobuf.RegionCode.KR}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.KR]}
-                    </option>
-                    <option value={Protobuf.RegionCode.TW}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.TW]}
-                    </option>
-                    <option value={Protobuf.RegionCode.US}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.US]}
-                    </option>
-                    <option value={Protobuf.RegionCode.Unset}>
-                      {Protobuf.RegionCode[Protobuf.RegionCode.Unset]}
-                    </option>
-                  </select>
-                </div>
-              </div>
-              <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-                <div className="my-auto">
-                  {props.translations.device_wifi_ssid}
-                </div>
-                <div className="flex shadow-md rounded-md ml-2">
-                  <input
-                    onChange={() => {}}
-                    type="text"
-                    value={props.preferences.wifiSsid}
-                  />
-                </div>
-              </div>
-              <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
-                <div className="my-auto">
-                  {props.translations.device_wifi_psk}
-                </div>
-                <div className="flex shadow-md rounded-md ml-2">
-                  <input
-                    type="password"
-                    value={props.preferences.wifiPassword}
-                  />
-                </div>
-              </div>
-              <div className="flex bg-gray-100 group p-1 cursor-pointer hover:bg-gray-200 border-b">
-                <div
-                  className="flex m-auto font-medium group-hover:text-gray-700"
-                  onClick={() => {
-                    props.connection.setPreferences(props.preferences);
-                  }}
-                >
-                  <SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
-                  {props.translations.save_changes_button}
-                </div>
-              </div>
+              <Suspense fallback={<div>loading</div>}>
+                <Settings
+                  connection={props.connection}
+                  isReady={props.isReady}
+                  translations={props.translations}
+                />
+              </Suspense>
            </>
          </Disclosure.Panel>
        </>
@@ -0,0 +1,122 @@
+import React from 'react';
+
+import { ObservableResource, useObservableSuspense } from 'observable-hooks';
+import { useForm } from 'react-hook-form';
+import JSONPretty from 'react-json-pretty';
+import type { languageTemplate } from 'src/App';
+
+import { SaveIcon } from '@heroicons/react/outline';
+import { IHTTPConnection, Protobuf } from '@meshtastic/meshtasticjs';
+
+export interface SettingsProps {
+  isReady: boolean;
+  connection: IHTTPConnection;
+  translations: languageTemplate;
+}
+
+const Settings = (props: SettingsProps) => {
+  React.useEffect(() => {
+    const a = useObservableSuspense(
+      new ObservableResource(
+        props.connection.onAdminPacketEvent.asObservable(),
+      ),
+    );
+    const adminPacketEvent = props.connection.onAdminPacketEvent.subscribe(
+      (adminMessage) => {
+        switch (adminMessage.data.variant.oneofKind) {
+          case 'getRadioResponse':
+            if (adminMessage.data.variant.getRadioResponse.preferences) {
+              setPreferences(
+                adminMessage.data.variant.getRadioResponse.preferences,
+              );
+            }
+        }
+      },
+    );
+
+    return () => adminPacketEvent.unsubscribe();
+  }, []);
+
+  const [
+    preferences,
+    setPreferences,
+  ] = React.useState<Protobuf.RadioConfig_UserPreferences>();
+  const {
+    register,
+    setValue,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<Protobuf.RadioConfig_UserPreferences>({
+    defaultValues: preferences,
+  });
+
+  const onSubmit = handleSubmit((data) => console.log(data));
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
+        <div className="my-auto">{props.translations.device_region_title}</div>
+        <div className="flex shadow-md rounded-md ml-2">
+          <select
+            value={preferences.region ?? Protobuf.RegionCode.Unset}
+            // onChange={(e) => {
+            //   preferences.region = parseInt(e.target.value);
+            // }}
+          >
+            <option value={Protobuf.RegionCode.ANZ}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.ANZ]}
+            </option>
+            <option value={Protobuf.RegionCode.CN}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.CN]}
+            </option>
+            <option value={Protobuf.RegionCode.EU433}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.EU433]}
+            </option>
+            <option value={Protobuf.RegionCode.EU865}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.EU865]}
+            </option>
+            <option value={Protobuf.RegionCode.JP}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.JP]}
+            </option>
+            <option value={Protobuf.RegionCode.KR}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.KR]}
+            </option>
+            <option value={Protobuf.RegionCode.TW}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.TW]}
+            </option>
+            <option value={Protobuf.RegionCode.US}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.US]}
+            </option>
+            <option value={Protobuf.RegionCode.Unset}>
+              {Protobuf.RegionCode[Protobuf.RegionCode.Unset]}
+            </option>
+          </select>
+        </div>
+      </div>
+      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
+        <div className="my-auto">{props.translations.device_wifi_ssid}</div>
+        <div className="flex shadow-md rounded-md ml-2">
+          <input {...register('wifiSsid', {})} type="text" />
+        </div>
+      </div>
+      <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
+        <div className="my-auto">{props.translations.device_wifi_psk}</div>
+        <div className="flex shadow-md rounded-md ml-2">
+          <input {...register('wifiPassword', {})} type="password" />
+        </div>
+      </div>
+      <div className="flex bg-gray-100 group p-1 cursor-pointer hover:bg-gray-200 border-b">
+        <button
+          type="submit"
+          className="flex m-auto font-medium group-hover:text-gray-700"
+        >
+          <SaveIcon className="m-auto mr-2 group-hover:text-gray-700 w-5 h-5" />
+          {props.translations.save_changes_button}
+        </button>
+      </div>
+      <JSONPretty data={preferences} />
+    </form>
+  );
+};
+
+export default Settings;