Add store and forward settings

src/components/connection/Serial.tsx

@@ -38,7 +38,6 @@ export const Serial = (): JSX.Element => {
           </div>
           <IconButton
             onClick={async (): Promise<void> => {
-              dispatch(setConnType(parseInt(e.target.value)));
               await setConnection(connType.SERIAL);
             }}
             icon={<FiCheck />}

src/core/slices/appSlice.ts

@@ -74,17 +74,9 @@ export const appSlice = createSlice({
         params: Types.ConnectionParameters;
       }>,
     ) {
-      switch (action.payload.type) {
-        case connType.BLE:
-          state.connectionParams.BLE = action.payload.params;
-          break;
-        case connType.HTTP:
-          state.connectionParams.HTTP = action.payload.params;
-          break;
-        case connType.SERIAL:
-          state.connectionParams.SERIAL = action.payload.params;
-          break;
-      }
+      // @ts-ignore tmp
+      state.connectionParams[connType[action.payload.type]] =
+        action.payload.params;
     },
   },
 });

src/core/slices/meshtasticSlice.ts

@@ -86,6 +86,8 @@ export const meshtasticSlice = createSlice({
         node.user = action.payload.data;
         // todo: use rx time
         node.lastHeard = new Date();
+      } else {
+        console.log('Node not in DB');
       }
     },
     addPosition: (state, action: PayloadAction<Types.PositionPacket>) => {
@@ -110,8 +112,6 @@ export const meshtasticSlice = createSlice({
         node.lastHeard = new Date(action.payload.lastHeard * 1000);
         node.snr.push(action.payload.snr);
       } else {
-        console.log('node does not exist');
-
         state.nodes.push({
           number: action.payload.num,
           lastHeard: new Date(action.payload.lastHeard * 1000),

src/pages/Plugins/Index.tsx

@@ -1,6 +1,12 @@
 import type React from 'react';
 
-import { FiAlignLeft, FiBell, FiFileText, FiRss } from 'react-icons/fi';
+import {
+  FiAlignLeft,
+  FiBell,
+  FiFastForward,
+  FiFileText,
+  FiRss,
+} from 'react-icons/fi';
 
 import { PageLayout } from '@components/templates/PageLayout';
 
@@ -8,6 +14,7 @@ import { ExternalNotification } from './ExternalNotification';
 import { Files } from './Files';
 import { RangeTest } from './RangeTest';
 import { Serial } from './Serial';
+import { StoreAndForward } from './StoreAndForward';
 
 export const Plugins = (): JSX.Element => {
   return (
@@ -34,12 +41,18 @@ export const Plugins = (): JSX.Element => {
           description: 'Send serial data over the mesh',
           icon: <FiAlignLeft className="flex-shrink-0 w-6 h-6" />,
         },
+        {
+          title: 'Store & Forward',
+          description: 'Retrive message history',
+          icon: <FiFastForward className="flex-shrink-0 w-6 h-6" />,
+        },
       ]}
       panels={[
         <RangeTest key={1} />,
         <Files key={2} />,
         <ExternalNotification key={3} />,
         <Serial key={4} />,
+        <StoreAndForward key={5} />,
       ]}
     />
   );

src/pages/Plugins/StoreAndForward.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { useForm, useWatch } from 'react-hook-form';
+import { FiMenu } from 'react-icons/fi';
+
+import { useAppSelector } from '@app/hooks/redux';
+import { FormFooter } from '@components/FormFooter';
+import { Card } from '@components/generic/Card';
+import { Checkbox } from '@components/generic/form/Checkbox';
+import { Input } from '@components/generic/form/Input';
+import { IconButton } from '@components/generic/IconButton';
+import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
+import { connection } from '@core/connection';
+import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
+
+export interface StoreAndForwardProps {
+  navOpen?: boolean;
+  setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export const StoreAndForward = ({
+  navOpen,
+  setNavOpen,
+}: StoreAndForwardProps): JSX.Element => {
+  const preferences = useAppSelector(
+    (state) => state.meshtastic.radio.preferences,
+  );
+
+  const { register, handleSubmit, formState, reset, control } =
+    useForm<RadioConfig_UserPreferences>({
+      defaultValues: {
+        storeForwardPluginEnabled: preferences.storeForwardPluginEnabled,
+        storeForwardPluginRecords: preferences.storeForwardPluginRecords,
+      },
+    });
+
+  React.useEffect(() => {
+    reset({
+      storeForwardPluginEnabled: preferences.storeForwardPluginEnabled,
+      storeForwardPluginRecords: preferences.storeForwardPluginRecords,
+    });
+  }, [reset, preferences]);
+
+  const onSubmit = handleSubmit((data) => {
+    void connection.setPreferences(data);
+  });
+
+  const watchStoreForwardPluginEnabled = useWatch({
+    control,
+    name: 'storeForwardPluginEnabled',
+    defaultValue: false,
+  });
+
+  return (
+    <PrimaryTemplate
+      title="Serial"
+      tagline="Plugin"
+      leftButton={
+        <IconButton
+          icon={<FiMenu className="w-5 h-5" />}
+          onClick={(): void => {
+            setNavOpen && setNavOpen(!navOpen);
+          }}
+        />
+      }
+      footer={
+        <FormFooter
+          dirty={formState.isDirty}
+          saveAction={onSubmit}
+          clearAction={reset}
+        />
+      }
+    >
+      <div className="w-full space-y-4">
+        <Card>
+          <div className="w-full max-w-3xl p-10 md:max-w-xl">
+            <form onSubmit={onSubmit}>
+              <Checkbox
+                label="Plugin Enabled"
+                {...register('storeForwardPluginEnabled')}
+              />
+              <Input
+                type="number"
+                label="Number of records"
+                disabled={!watchStoreForwardPluginEnabled}
+                {...register('storeForwardPluginRecords', {
+                  valueAsNumber: true,
+                })}
+              />
+            </form>
+          </div>
+        </Card>
+      </div>
+    </PrimaryTemplate>
+  );
+};