Merge pull request #177 from Type-Style/175-improve-code-architechture

175 improve code architechture

package.json

@@ -52,6 +52,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "html-webpack-plugin": "^5.6.0",
     "install": "^0.13.0",
     "jest": "^29.7.0",
     "nodemon": "^3.0.2",
@@ -62,6 +63,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
     "webpack": "^5.94.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
@@ -98,5 +100,6 @@
   },
   "_moduleAliases": {
     "@src": "dist"
-  }
+  },
+  "sideEffects": false
 }

src/client/components/App.tsx

@@ -1,11 +1,13 @@
-import React, { createContext, useEffect, useState } from 'react';
+import React, { Suspense, createContext, useEffect, useState } from 'react';
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { useColorScheme } from '@mui/material/styles';
-import { useMediaQuery } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import Start from '../pages/Start';
-import Login from '../pages/Login';
 import axios from "axios";
 
+
+const Login = React.lazy(() => import('../pages/Login'));
+
 export const Context = createContext([]);
 
 export function convertJwt() {
@@ -35,7 +37,11 @@ const router = createBrowserRouter([
   },
   {
     path: "/login",
-    element: <Login />,
+    element: (
+      <Suspense fallback={<div>Loading...</div>}>
+        <Login />
+      </Suspense>
+    )
   }
 ]);
 

src/client/components/LinearBuffer.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
 import LinearProgress from '@mui/material/LinearProgress';
+import React, { useState, useRef, useEffect } from "react";
 
 export default function LinearBuffer({ msStart, msFinish, variant = "buffer" }: { msStart: number, msFinish: number, variant?: "buffer" | "determinate" }) {
-  const [progress, setProgress] = React.useState(0);
-  const [buffer, setBuffer] = React.useState(10);
+  const [progress, setProgress] = useState(0);
+  const [buffer, setBuffer] = useState(10);
 
-  const progressRef = React.useRef(() => { });
-  React.useEffect(() => {
+  const progressRef = useRef(() => { });
+  useEffect(() => {
     if (!msStart || !msFinish) {
       console.log("LinearProgress did not recieve correct data")
     }
@@ -30,7 +30,7 @@ export default function LinearBuffer({ msStart, msFinish, variant = "buffer" }:
     };
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     const timer = setInterval(() => {
       progressRef.current();
     }, 300);

src/client/components/Map.tsx

@@ -23,7 +23,7 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] })
 	const calculateHue = function (currentSpeed, maxSpeed, calcSpeed) {
 		let speed = currentSpeed;
 		if (calcSpeed > currentSpeed) {
-			speed = Math.sqrt(currentSpeed * calcSpeed);
+			speed = 2 * (currentSpeed * calcSpeed) / (currentSpeed + calcSpeed); // Harmonic Meangit
 		}
 		const hue = (speed / maxSpeed) * 200;
 
@@ -43,7 +43,7 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] })
 	if (useRelativeColors) {
 		maxSpeed = getMaxSpeed(cleanEntries);
 	}
-	console.group();
+
 	return cleanEntries.map((entry, index) => {
 		if (!index || entry.time.diff > 300) { return false; }
 
@@ -55,9 +55,6 @@ const MultiColorPolyline = ({ cleanEntries }: { cleanEntries: Models.IEntry[] })
 		color.h = calculateHue(currentSpeed, maxSpeed, calcSpeed);
 		color.l = calculateLightness(color.h);
 
-		console.log("index: " + index + "\t speed: " + currentSpeed.toFixed(1) + "\t hue: " + color.h.toFixed(1) + "\t light: " + color.l.toFixed(1));
-
-
 		const correctedColor = toGamut('rgb', 'oklch', null)(color); // map OKLCH to the RGB gamut
 
 		let strokeDashArray = null;
@@ -80,6 +77,7 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 	if (!entries?.length) {
 		return <span className="noData cut">No Data to be displayed</span>
 	}
+
 	const [contextObj] = useContext(Context);
 	const [mapStyle, setMapStyle] = useState(contextObj.mode);
 
@@ -189,7 +187,6 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 					{cleanEntries.map((entry) => {
 						const iconObj = getClassName(entry);
 						if (iconObj.className != "none") { return } // exclude start and end from being in cluster group;
-
 						return renderMarker(entry, iconObj);
 					})}
 				</MarkerClusterGroup>

src/client/components/ModeSwitcher.tsx

@@ -1,7 +1,9 @@
 import React, { useContext } from 'react';
 import { Context } from "../components/App";
-import { Button } from '@mui/material';
-import { LightMode, Nightlight } from '@mui/icons-material';
+import Button from '@mui/material/Button';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import NightlightIcon from '@mui/icons-material/Nightlight';
+
 import * as css from "../css/modeSwticher.module.css";
 
 function ModeSwitcher() {
@@ -11,7 +13,7 @@ function ModeSwitcher() {
     <Button
       className={css.modeSwitcher}
       variant='outlined' size='large'
-      startIcon={contextObj.mode === 'dark' ? <Nightlight /> : <LightMode />}
+      startIcon={contextObj.mode === 'dark' ? <NightlightIcon /> : <LightModeIcon />}
       onClick={() => {
         if (contextObj.mode === 'light') {
           contextObj.setMode('dark');

src/client/components/Status.tsx

@@ -7,8 +7,9 @@ import SpeedIcon from '@mui/icons-material/Speed';
 import BoltIcon from '@mui/icons-material/Bolt';
 import ShowChartIcon from '@mui/icons-material/ShowChart';
 import EastIcon from '@mui/icons-material/East';
-import WatchIcon from '@mui/icons-material/WatchLaterOutlined';
-import Finish from '@mui/icons-material/SportsScore';
+import WatchLaterOutlinedIcon from '@mui/icons-material/WatchLaterOutlined';
+import SportsScoreIcon from '@mui/icons-material/SportsScore';
+
 
 function getStatusData(entries) {
 	const cleanEntries = entries.filter((entry: Models.IEntry) => !entry.ignore);
@@ -158,7 +159,7 @@ function Status({ entries }: { entries: Models.IEntry[] }) {
 
 				{statusData.eda &&
 					<tr>
-						<td><Finish /></td>
+						<td><SportsScoreIcon /></td>
 						<th>EDA</th>
 						<td>
 							<span>{statusData.eda}km</span>
@@ -168,7 +169,7 @@ function Status({ entries }: { entries: Models.IEntry[] }) {
 
 				{statusData.eta &&
 					<tr>
-						<td><WatchIcon /></td>
+						<td><WatchLaterOutlinedIcon /></td>
 						<th>ETA</th>
 						<td>
 							<span>{statusData.eta}</span>

src/client/css/start.css

@@ -129,10 +129,10 @@
 			}
 
 			.MuiLinearProgress-root {
-				margin: -0.5em 0 1em -0.8em;
+				margin: -0.5em 1em 1em -0.8em;
 
 				@media (min-width: 30em) {
-					margin: -0.7em -1em 1em -2em;
+					margin: -0.7em 1em 1em -2em;
 				}
 			}
 

src/client/pages/Login.tsx

@@ -1,6 +1,13 @@
 import React, { useContext, useState } from 'react';
-import { TextField, Button, InputAdornment, CircularProgress } from '@mui/material';
-import { AccountCircle, Lock, HighlightOff, Login as LoginIcon, Check } from '@mui/icons-material';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import InputAdornment from '@mui/material/InputAdornment';
+import CircularProgress from '@mui/material/CircularProgress';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import LockIcon from '@mui/icons-material/Lock';
+import HighlightOffIcon from '@mui/icons-material/HighlightOff';
+import LoginIcon from '@mui/icons-material/Login';
+import CheckIcon from '@mui/icons-material/Check';
 import "../css/login.css";
 import ModeSwitcher from '../components/ModeSwitcher';
 import axios from 'axios';
@@ -90,7 +97,7 @@ function Login() {
       const token = response.data.token;
       localStorage.setItem("jwt", token);
       contextObj.setLogin(true);
-      setMessageObj({ isError: false, status: <Check />, message: "Success!" })
+      setMessageObj({ isError: false, status: <CheckIcon />, message: "Success!" })
 
       // update linearBar for delay until redirect
       const date = new Date();
@@ -138,12 +145,12 @@ function Login() {
               name: "user",
               startAdornment: (
                 <InputAdornment position="start">
-                  <AccountCircle />
+                  <AccountCircleIcon />
                 </InputAdornment>
               ),
               endAdornment: formInfo.user.isError ? (
                 <InputAdornment position="end">
-                  <HighlightOff color="error" />
+                  <HighlightOffIcon color="error" />
                 </InputAdornment>
               ) : null
             }}
@@ -167,12 +174,12 @@ function Login() {
               name: "password",
               startAdornment: (
                 <InputAdornment position="start">
-                  <Lock />
+                  <LockIcon />
                 </InputAdornment>
               ),
               endAdornment: formInfo.password.isError ? (
                 <InputAdornment position="end">
-                  <HighlightOff color="error" />
+                  <HighlightOffIcon color="error" />
                 </InputAdornment>
               ) : null
             }}