Fix changing settings.

src/Main.tsx

@@ -95,6 +95,7 @@ const Main = (props: MainProps): JSX.Element => {
           sidebarOpen={sidebarOpen}
           darkmode={props.darkmode}
           setDarkmode={props.setDarkmode}
+          connection={props.connection}
         />
       </div>
     </TranslationsContext.Provider>

src/components/Sidebar.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
 
+import type {
+  IBLEConnection,
+  IHTTPConnection,
+  ISerialConnection,
+} from '@meshtastic/meshtasticjs';
+
 import Channels from './Sidebar/Channels/Index';
 import Device from './Sidebar/Device/Index';
 import Nodes from './Sidebar/Nodes/Index';
@@ -10,6 +16,7 @@ interface SidebarProps {
   sidebarOpen: boolean;
   darkmode: boolean;
   setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
+  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
 }
 
 const Sidebar = (props: SidebarProps): JSX.Element => {
@@ -20,7 +27,7 @@ const Sidebar = (props: SidebarProps): JSX.Element => {
       } flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
     >
       <Nodes myId={props.myId} />
-      <Device />
+      <Device connection={props.connection} />
       <Channels />
       <div className="flex-grow border-b"></div>
       <UI darkmode={props.darkmode} setDarkmode={props.setDarkmode} />

src/components/Sidebar/Device/Index.tsx

@@ -6,11 +6,20 @@ import {
   ChevronDownIcon,
   ChevronRightIcon,
 } from '@heroicons/react/outline';
+import type {
+  IBLEConnection,
+  IHTTPConnection,
+  ISerialConnection,
+} from '@meshtastic/meshtasticjs';
 
 import { TranslationsContext } from '../../../translations/TranslationsContext';
 import Settings from './Settings';
 
-const Device = (): JSX.Element => {
+interface DeviceProps {
+  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
+}
+
+const Device = (props: DeviceProps): JSX.Element => {
   const { translations } = React.useContext(TranslationsContext);
   return (
     <Disclosure>
@@ -36,7 +45,7 @@ const Device = (): JSX.Element => {
                   </div>
                 }
               >
-                <Settings />
+                <Settings connection={props.connection} />
               </React.Suspense>
             </>
           </Disclosure.Panel>

src/components/Sidebar/Device/Settings.tsx

@@ -2,15 +2,23 @@ import React from 'react';
 
 import { useObservableSuspense } from 'observable-hooks';
 import { useForm } from 'react-hook-form';
-import JSONPretty from 'react-json-pretty';
 
 import { SaveIcon } from '@heroicons/react/outline';
+import type {
+  IBLEConnection,
+  IHTTPConnection,
+  ISerialConnection,
+} from '@meshtastic/meshtasticjs';
 import { Protobuf } from '@meshtastic/meshtasticjs';
 
 import { preferencesResource } from '../../../streams';
 import { TranslationsContext } from '../../../translations/TranslationsContext';
 
-const Settings = (): JSX.Element => {
+interface SettingsProps {
+  connection: ISerialConnection | IHTTPConnection | IBLEConnection;
+}
+
+const Settings = (props: SettingsProps): JSX.Element => {
   const { translations } = React.useContext(TranslationsContext);
   const preferences = useObservableSuspense(preferencesResource);
 
@@ -19,13 +27,19 @@ const Settings = (): JSX.Element => {
       defaultValues: preferences,
     });
 
-  const onSubmit = handleSubmit((data) => console.log(data));
+  const onSubmit = handleSubmit((data) =>
+    props.connection.setPreferences(data),
+  );
   return (
     <form onSubmit={onSubmit}>
       <div className="flex bg-gray-50 whitespace-nowrap p-3 justify-between border-b">
         <div className="my-auto">{translations.device_region_title}</div>
         <div className="flex shadow-md rounded-md ml-2">
-          <select value={preferences?.region ?? Protobuf.RegionCode.Unset}>
+          <select
+            {...register('region', {
+              valueAsNumber: true,
+            })}
+          >
             <option value={Protobuf.RegionCode.ANZ}>
               {Protobuf.RegionCode[Protobuf.RegionCode.ANZ]}
             </option>
@@ -77,7 +91,6 @@ const Settings = (): JSX.Element => {
           {translations.save_changes_button}
         </button>
       </div>
-      <JSONPretty data={preferences} />
     </form>
   );
 };