Updates

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 import {
   Client,
@@ -35,25 +35,25 @@ export interface languageTemplate {
 }
 
 const App = () => {
-  const [deviceStatus, setDeviceStatus] = useState(
+  const [deviceStatus, setDeviceStatus] = React.useState(
     {} as Types.DeviceStatusEnum,
   );
-  const [myNodeInfo, setMyNodeInfo] = useState({} as Protobuf.MyNodeInfo);
-  const [messages, setMessages] = useState(
+  const [myNodeInfo, setMyNodeInfo] = React.useState({} as Protobuf.MyNodeInfo);
+  const [messages, setMessages] = React.useState(
     [] as { message: Types.TextPacket; ack: false }[],
   );
-  const [channels, setChannels] = useState([] as Protobuf.Channel[]);
-  const [nodes, setNodes] = useState([] as Types.NodeInfoPacket[]);
-  const [connection, setConnection] = useState({} as IHTTPConnection);
-  const [isReady, setIsReady] = useState(false);
-  const [lastMeshInterraction, setLastMeshInterraction] = useState(0);
-  const [preferences, setPreferences] = useState(
+  const [channels, setChannels] = React.useState([] as Protobuf.Channel[]);
+  const [nodes, setNodes] = React.useState([] as Types.NodeInfoPacket[]);
+  const [connection, setConnection] = React.useState({} as IHTTPConnection);
+  const [isReady, setIsReady] = React.useState(false);
+  const [lastMeshInterraction, setLastMeshInterraction] = React.useState(0);
+  const [preferences, setPreferences] = React.useState(
     {} as Protobuf.RadioConfig_UserPreferences,
   );
-  const [language, setLanguage] = useState(LanguageEnum.ENGLISH);
-  const [translations, setTranslations] = useState(Translations_English);
+  const [language, setLanguage] = React.useState(LanguageEnum.ENGLISH);
+  const [translations, setTranslations] = React.useState(Translations_English);
 
-  useEffect(() => {
+  React.useEffect(() => {
     switch (language) {
       case LanguageEnum.ENGLISH:
         setTranslations(Translations_English);
@@ -67,12 +67,13 @@ const App = () => {
     }
   }, [language]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const client = new Client();
     const connection = client.createHTTPConnection();
+    setConnection(connection);
     // connection.connect(window.location.hostname, undefined, true);
     connection.connect({
-      address: '192.168.105.71',
+      address: '192.168.13.71',
       receiveBatchRequests: false,
       tls: false,
       fetchInterval: 2000,

src/Main.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { FaBars, FaPaperPlane } from 'react-icons/fa';
 
@@ -21,13 +21,13 @@ interface MainProps {
   IsReady: boolean;
   Preferences: Protobuf.RadioConfig_UserPreferences;
   Language: LanguageEnum;
-  SetLanguage: Function;
+  SetLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
   Translations: languageTemplate;
 }
 
 const Main = (props: MainProps) => {
-  const [currentMessage, setCurrentMessage] = useState('');
-  const [mobileNavOpen, setMobileNavOpen] = useState(true);
+  const [currentMessage, setCurrentMessage] = React.useState('');
+  const [mobileNavOpen, setMobileNavOpen] = React.useState(true);
 
   const sendMessage = () => {
     if (props.IsReady) {

src/components/Header.tsx

@@ -4,6 +4,8 @@ import { FaBroadcastTower, FaMobileAlt } from 'react-icons/fa';
 
 import { Types } from '@meshtastic/meshtasticjs';
 
+import typelogo from '../../public/typelogo.svg';
+
 interface HeaderProps {
   status: Types.DeviceStatusEnum;
   IsReady: boolean;
@@ -14,7 +16,8 @@ const Header = (props: HeaderProps) => {
   return (
     <nav className="w-full shadow-md">
       <div className="flex w-full container mx-auto justify-between px-6 py-4">
-        <img src="/typelogo.svg" height="30" width="200" />
+        <img src={typelogo} height="30" width="200" />
+        <div></div>
 
         <div className="flex items-center">
           <div className="flex pl-4">

src/components/NavItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React from 'react';
 
 import { FaCaretDown, FaCaretRight, FaSpinner } from 'react-icons/fa';
 
@@ -6,19 +6,19 @@ interface NavItemProps {
   isDropdown: boolean;
   open: boolean;
   isNested: boolean;
-  titleContent: ReactNode;
-  dropdownContent?: ReactNode;
+  titleContent: React.ReactNode;
+  dropdownContent?: React.ReactNode;
   onClick?: Function;
   isLoading?: boolean;
 }
 
 const NavItem = (props: NavItemProps) => {
-  useEffect(() => {
+  React.useEffect(() => {
     if (props.open) {
       setNavItemOpen(props.open);
     }
   }, []);
-  const [navItemOpen, setNavItemOpen] = useState(false);
+  const [navItemOpen, setNavItemOpen] = React.useState(false);
   return (
     <>
       <div

src/components/Sidebar.tsx

@@ -20,7 +20,7 @@ interface SidebarProps {
   Connection: IHTTPConnection;
   MobileNavOpen: boolean;
   Language: LanguageEnum;
-  SetLanguage: Function;
+  SetLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
   Translations: languageTemplate;
   myId: number;
 }

src/components/Sidebar/SidebarUISettings.tsx

@@ -10,7 +10,7 @@ import NavItem from '../NavItem';
 
 interface SidebarUISettingsProps {
   Language: LanguageEnum;
-  SetLanguage: Function;
+  SetLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
   Translations: languageTemplate;
 }
 

src/components/basic/Timeline.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface TimelineProps {}
-
-const Timeline = (props: TimelineProps) => {
-  return <div></div>;
-};
-
-export default Timeline;

src/components/basic/TimelineItem.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-interface TimelineItemProps {
-  time: number;
-  color: string;
-}
-
-const TimelineItem = (props: TimelineItemProps) => {
-  return <div className={`rounded-full h-6 w-6 bg-${props.color}`}>Test</div>;
-};
-
-export default TimelineItem;

src/components/basic/ToggleSwitch.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 interface ToggleSwitchProps {
   active: boolean;
@@ -6,9 +6,9 @@ interface ToggleSwitchProps {
 }
 
 const ToggleSwitch = (props: ToggleSwitchProps) => {
-  const [active, setActive] = useState(false);
+  const [active, setActive] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setActive(props.active);
   }, []);