Internal rework

src/App.tsx

@@ -1,34 +1,14 @@
 import React from 'react';
 
-import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
-import { DeviceStatusDropdown } from '@components/menu/buttons/DeviceStatusDropdown';
+import { DeviceStatus } from '@app/components/menu/buttons/DeviceStatus';
+import { useAppSelector } from '@app/hooks/redux';
+import { Connection } from '@components/Connection';
 import { MobileNavToggle } from '@components/menu/buttons/MobileNavToggle';
 import { ThemeToggle } from '@components/menu/buttons/ThemeToggle';
 import { Logo } from '@components/menu/Logo';
 import { MobileNav } from '@components/menu/MobileNav';
 import { Navigation } from '@components/menu/Navigation';
-import { connection, setConnection } from '@core/connection';
 import { useRoute } from '@core/router';
-import {
-  addChannel,
-  addMessage,
-  addNode,
-  addPosition,
-  addUser,
-  setDeviceStatus,
-  setLastMeshInterraction,
-  setMyNodeInfo,
-  setPreferences,
-  setReady,
-} from '@core/slices/meshtasticSlice';
-import {
-  IBLEConnection,
-  IHTTPConnection,
-  ISerialConnection,
-  Protobuf,
-  SettingsManager,
-  Types,
-} from '@meshtastic/meshtasticjs';
 import { Messages } from '@pages/Messages';
 import { Nodes } from '@pages/Nodes/Index';
 import { Settings } from '@pages/settings/Index';
@@ -36,128 +16,13 @@ import { Settings } from '@pages/settings/Index';
 import { NotFound } from './pages/NotFound';
 import { Plugins } from './pages/Plugins/Index';
 
-const App = (): JSX.Element => {
-  const dispatch = useAppDispatch();
+export const App = (): JSX.Element => {
   const route = useRoute();
-
-  const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
   const darkMode = useAppSelector((state) => state.app.darkMode);
-  const hostOverrideEnabled = useAppSelector(
-    (state) => state.meshtastic.hostOverrideEnabled,
-  );
-
-  const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
-
-  const connectionURL = hostOverrideEnabled
-    ? hostOverride
-    : import.meta.env.PROD
-    ? window.location.hostname
-    : (import.meta.env.VITE_PUBLIC_DEVICE_IP as string) ??
-      'http://meshtastic.local';
-
-  React.useEffect(() => {
-    const connectionMethod = localStorage.getItem('connectionMethod');
-
-    switch (connectionMethod) {
-      case 'serial':
-        setConnection(new ISerialConnection());
-        //show connection dialogue
-        break;
-      case 'bluetooth':
-        setConnection(new IBLEConnection());
-        //show connection dialogue
-        break;
-      default:
-        setConnection(new IHTTPConnection());
-        void connection.connect({
-          address: connectionURL,
-          tls: false,
-          receiveBatchRequests: false,
-          fetchInterval: 2000,
-        });
-        break;
-    }
-    SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
-  }, [hostOverrideEnabled, hostOverride, connectionURL]);
-
-  React.useEffect(() => {
-    connection.onDeviceStatus.subscribe((status) => {
-      dispatch(setDeviceStatus(status));
-
-      if (status === Types.DeviceStatusEnum.DEVICE_CONFIGURED) {
-        dispatch(setReady(true));
-      }
-      if (status === Types.DeviceStatusEnum.DEVICE_DISCONNECTED) {
-        dispatch(setReady(false));
-      }
-    });
-
-    connection.onMyNodeInfo.subscribe((nodeInfo) => {
-      dispatch(setMyNodeInfo(nodeInfo));
-    });
-
-    connection.onUserPacket.subscribe((user) => {
-      dispatch(addUser(user));
-    });
-
-    connection.onPositionPacket.subscribe((position) => {
-      dispatch(addPosition(position));
-    });
-
-    connection.onNodeInfoPacket.subscribe(
-      (nodeInfoPacket): void | { payload: Protobuf.NodeInfo; type: string } => {
-        dispatch(addNode(nodeInfoPacket.data));
-      },
-    );
-
-    connection.onAdminPacket.subscribe((adminPacket) => {
-      switch (adminPacket.data.variant.oneofKind) {
-        case 'getChannelResponse':
-          dispatch(addChannel(adminPacket.data.variant.getChannelResponse));
-          break;
-        case 'getRadioResponse':
-          if (adminPacket.data.variant.getRadioResponse.preferences) {
-            dispatch(
-              setPreferences(
-                adminPacket.data.variant.getRadioResponse.preferences,
-              ),
-            );
-          }
-          break;
-      }
-    });
-
-    connection.onMeshHeartbeat.subscribe(
-      (date): void | { payload: number; type: string } =>
-        dispatch(setLastMeshInterraction(date.getTime())),
-    );
-
-    connection.onTextPacket.subscribe((message) => {
-      dispatch(
-        addMessage({
-          message: message,
-          ack: message.packet.from !== myNodeInfo.myNodeNum,
-          isSender: message.packet.from === myNodeInfo.myNodeNum,
-          received: new Date(message.packet.rxTime),
-        }),
-      );
-    });
-
-    return (): void => {
-      connection.onDeviceStatus.cancelAll();
-      connection.onMyNodeInfo.cancelAll();
-      connection.onNodeInfoPacket.cancelAll();
-      connection.onAdminPacket.cancelAll();
-      connection.onMeshHeartbeat.cancelAll();
-      connection.onTextPacket.cancelAll();
-      connection.onRoutingPacket.cancelAll();
-    };
-  }, [dispatch, myNodeInfo.myNodeNum]);
 
   return (
-    <div
-      className={`h-screen w-screen ${darkMode ? 'dark rs-theme-dark' : ''}`}
-    >
+    <div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
+      <Connection />
       <div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
         <div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
           <div className="w-full overflow-hidden bg-white border-b border-gray-300 md:mt-6 md:mx-6 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
@@ -168,7 +33,7 @@ const App = (): JSX.Element => {
               <Navigation className="hidden md:flex" />
               <MobileNavToggle />
               <div className="flex items-center space-x-2">
-                <DeviceStatusDropdown />
+                <DeviceStatus />
                 <ThemeToggle />
               </div>
             </div>
@@ -189,5 +54,3 @@ const App = (): JSX.Element => {
     </div>
   );
 };
-
-export default App;