WIP

src/components/Sidebar.tsx

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

src/components/Sidebar/Channels/Index.tsx

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

src/components/Sidebar/Device/Index.tsx

@@ -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>
         </>

src/components/Sidebar/Device/Settings.tsx

@@ -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;