Fix changing settings.

package.json

@@ -20,7 +20,6 @@
     "react-dom": "^18.0.0-alpha-dbe3363cc",
     "react-flags-select": "^2.1.2",
     "react-hook-form": "^7.8.6",
-    "react-json-pretty": "^2.2.0",
     "rxjs": "^7.1.0"
   },
   "devDependencies": {

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

yarn.lock

@@ -3242,7 +3242,7 @@ promise-retry@^2.0.1:
     err-code "^2.0.2"
     retry "^0.12.0"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -3312,13 +3312,6 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-json-pretty@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-json-pretty/-/react-json-pretty-2.2.0.tgz#9ba907d2b08d87e90456d87b6025feeceb8f63cf"
-  integrity sha512-3UMzlAXkJ4R8S4vmkRKtvJHTewG4/rn1Q18n0zqdu/ipZbUPLVZD+QwC7uVcD/IAY3s8iNVHlgR2dMzIUS0n1A==
-  dependencies:
-    prop-types "^15.6.2"
-
 react-refresh@^0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"