From e22fec1e66fda765ce5c7a34e180fa5ca43b20c9 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Sun, 25 Apr 2021 20:17:50 +1000 Subject: [PATCH] Updates --- package.json | 15 +- snowpack.config.js | 20 +- src/App.tsx | 31 +- src/Main.tsx | 8 +- src/components/Header.tsx | 5 +- src/components/NavItem.tsx | 10 +- src/components/Sidebar.tsx | 2 +- src/components/Sidebar/SidebarUISettings.tsx | 2 +- src/components/basic/Timeline.tsx | 9 - src/components/basic/TimelineItem.tsx | 12 - src/components/basic/ToggleSwitch.tsx | 6 +- tailwind.config.js | 3 +- yarn.lock | 6344 +----------------- 13 files changed, 349 insertions(+), 6118 deletions(-) delete mode 100644 src/components/basic/Timeline.tsx delete mode 100644 src/components/basic/TimelineItem.tsx diff --git a/package.json b/package.json index 48c65cd2..eff7f17d 100644 --- a/package.json +++ b/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", diff --git a/snowpack.config.js b/snowpack.config.js index f4b4cdba..20d22dbd 100644 --- a/snowpack.config.js +++ b/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: { /* ... */ diff --git a/src/App.tsx b/src/App.tsx index 47b6a39b..7999e02a 100644 --- a/src/App.tsx +++ b/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, diff --git a/src/Main.tsx b/src/Main.tsx index 1e35ab36..a726dfa8 100644 --- a/src/Main.tsx +++ b/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>; 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) { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 1fc543ba..07e0b40e 100644 --- a/src/components/Header.tsx +++ b/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 (