Updates

package.json

@@ -1,14 +1,13 @@
 {
   "scripts": {
-    "start": "snowpack dev",
+    "start": "NODE_ENV=development snowpack dev",
     "build": "snowpack build",
     "test": "web-test-runner \"src/**/*.test.tsx\"",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
   },
   "dependencies": {
-    "@meshtastic/meshtasticjs": "^0.6.5",
-    "@snowpack/plugin-webpack": "^2.3.1",
+    "@meshtastic/meshtasticjs": "^0.6.6",
     "add": "^2.0.6",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -21,17 +20,13 @@
     "@snowpack/plugin-postcss": "^1.2.2",
     "@snowpack/plugin-react-refresh": "^2.4.0",
     "@snowpack/plugin-typescript": "^1.2.0",
-    "@snowpack/web-test-runner-plugin": "^0.2.0",
-    "@testing-library/react": "^11.0.0",
-    "@types/chai": "^4.2.13",
-    "@types/mocha": "^8.2.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/snowpack-env": "^2.3.2",
-    "@web/test-runner": "^0.12.0",
     "autoprefixer": "^10.2.5",
-    "chai": "^4.2.0",
-    "postcss": "^8.2.9",
+    "gzipper": "^4.4.0",
+    "postcss": "^8.2.10",
+    "postcss-cli": "^8.3.1",
     "prettier": "^2.0.5",
     "snowpack": "^3.0.1",
     "tailwindcss": "^2.1.1",

snowpack.config.js

@@ -5,9 +5,9 @@ module.exports = {
     src: { url: '/dist' },
   },
   plugins: [
+    '@snowpack/plugin-postcss',
     '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
-    '@snowpack/plugin-postcss',
     [
       '@snowpack/plugin-typescript',
       {
@@ -15,23 +15,19 @@ module.exports = {
         ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),
       },
     ],
-    // [
-    //   '@snowpack/plugin-webpack',
-    //   {
-    //     outputPattern: {
-    //       js: 'index.js',
-    //       css: 'index.css',
-    //     },
-    //   },
-    // ],
   ],
   routes: [
     /* Enable an SPA Fallback in development: */
     // {"match": "routes", "src": ".*", "dest": "/index.html"},
   ],
   optimize: {
-    /* Example: Bundle your final build: */
-    // "bundle": true,
+    bundle: true,
+    sourcemap: false,
+    splitting: true,
+    treeshake: true,
+    manifest: false,
+    minify: true,
+    target: 'es2020',
   },
   packageOptions: {
     /* ... */

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);
   }, []);
 

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
-  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
+  mode: 'jit',
+  purge: ['./public/**/*.html', './src/**/*.tsx'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},