[CHANGE] #204, react compiler

.github/workflows/eslint.yml

@@ -14,10 +14,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - run: npm ci # or yarn install
-      - name: Lint server-side code
-        run: npx eslint src/ --fix
-      - name: Lint client-side code
-        run: npx eslint httpdocs/js/ --fix
-      - name: Lint react code
-        run: npx eslint src/client/ --fix
+      - run: npm ci --legacy-peer-deps # or yarn install
+      - name: Lint  code
+        run: npx eslint  --fix
+

.github/workflows/main.yml

@@ -22,10 +22,10 @@ jobs:
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
-        node-version: '20'
+        node-version: '22'
         cache: 'npm'
     - run: echo "NODE_ENV = $NODE_ENV"
-    - run: npm ci
+    - run: npm ci --legacy-peer-deps
     - run: npm run build --if-present
     - name: Start server
       run: |

README.md

@@ -6,6 +6,13 @@ Leaflet Osmand React ExpressJS Coordinates (X)
 ## Goal
 Recieve and store coordinates via webhook and display them on a map through an interactive frontend.    
 
+## Tech Stack
+This project, uses TypeScript.<br />   
+ESLint, Vite to compile frontend.<br />  
+**Backend:** NODE.js, Express.js, Jest (for testing)<br />
+**Frontend:** React, *React Compiler*, MUI, Leaflet
+
+
 ## Installation
 ### Prerequisites
 Download [node](https://nodejs.org/en/download) for your system and install it.  
@@ -40,19 +47,19 @@ KEY=
 directly followed by your output
 
 #### 2nd Generate Password(s)
-Prerequisite: KEY already generated!
+*Prerequisite: KEY already generated!*
 _(may require server restart)_
 Run the build command from the package.json (npm run build)
 Then call the compiled version of this script using the key as environment variable like so:
-KEY=your-key node ./init/generatePassword.js
+`KEY=your-key node ./init/generatePassword.js`
 Enter your password
 Copy that to the Environment Variables and .env file
-USER_WHATEVER=
+`USER_XY=`
 followed by the output of the console
 
 > [!IMPORTANT]
 In order to run automatic tests and create example data is is highly recommended to have a USER_TEST with the password of `test`
-THe test user cannot be used in an production environment
+The test user cannot be used in an production environment
 
 Once completed rebuild / restart the server and open up localhost/login
 Login is now possible using the Username from the .env file in this example "WHATEVER" and the password that was created in the previous step.

eslint.config.mjs

@@ -15,7 +15,9 @@ export default [
         files: ['src/client/**/*.{js,jsx,ts,tsx}'],
         ignores: [
             "src/client/types.d.ts",
-            "src/client/types_easyButton.d.ts"
+            "src/client/types_easyButton.d.ts",
+            "src/client/vite.config.js",
+            "src/client/postcss.config.js"
         ],
         settings: {
             react: { version: '19' },

package.json

@@ -5,14 +5,14 @@
   "main": "index.js",
   "scripts": {
     "prebuild": "rm -rf dist/*",
-    "build": "tsc && webpack",
-    "build:prod": "tsc -p ./tsconfig.prod.json && webpack --mode production",
+    "build": "cross-env NODE_ENV=development vite build --config src/client/vite.config.js",
+    "build:prod": "cross-env NODE_ENV=production vite build --config src/client/vite.config.js",
     "postbuild": "cp -R httpdocs/ dist/",
     "start": "node dist/app.js",
     "dev": "npm run prebuild && npm run postbuild && concurrently \"npm:dev:*\"",
     "dev:ts": "nodemon --config nodemon-ts.json",
     "dev:static": "nodemon --config nodemon-static.json",
-    "dev:webpack": "webpack --watch",
+    "dev:vite": "cross-env NODE_ENV=development vite build --watch --config src/client/vite.config.js",
     "lint": "eslint . --fix",
     "test": "jest",
     "test:data": "cross-env MODE=DEV jest --config jest.testData.config.js",
@@ -61,14 +61,16 @@
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-decd7b8-20250118",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "html-webpack-plugin": "^5.6.0",
     "install": "^0.13.0",
     "jest": "^29.7.0",
     "nodemon": "^3.0.2",
     "npm": "^10.5.2",
+    "postcss": "^8.5.1",
+    "postcss-nesting": "^13.0.1",
     "react-compiler-webpack": "^0.1.2",
     "style-loader": "^4.0.0",
     "ts-jest": "^29.1.2",

src/client/components/LinearBuffer.tsx

@@ -11,11 +11,11 @@ export default function LinearBuffer({ msStart, msFinish, variant = "buffer" }:
       console.log("LinearProgress did not recieve correct data")
     }
     progressRef.current = () => {
-      let progressValue;
+      let progressValue:number;
       const duration = msFinish - msStart; // duration based on input props
       const date = new Date();
       const now = date.getTime();
-      const progressCalcValue = ((now - msStart) / duration) * 100;
+      const progressCalcValue = Math.min(((now - msStart) / duration) * 100, 100);
       progressValue = progressCalcValue;
       if (variant == "buffer") {
         const secondPhase = duration == 1000;

src/client/components/LocationButton.tsx

@@ -36,6 +36,6 @@ export const LocationButton = ({ lat, lon }: { lat: number, lon: number }) => {
 				justClicked.current = false;
 			});
 		}).addTo(map);
-	});
+	}, [map, gpsIcon, lat, lon]);
 	return null;
 };

src/client/hooks/useGetData.ts

@@ -9,30 +9,30 @@ export const useGetData = (index: number, fetchIntervalMs: number, setEntries) =
 		const token = localStorage.getItem("jwt");
 		let response: AxiosResponse<Models.IEntries>;
 
-		let returnObj: client.entryData = { isError: false, status: 200, message: "", fetchTimeData: { last: null, next: null }}
+		let returnObj: client.entryData = { isError: false, status: 200, message: "", fetchTimeData: { last: null, next: null } }
 
 		if (!token) {
 			contextObj.setLogin(false);
 			return { ...returnObj, isError: true, status: 403, message: "No valid login" };
 		}
 
 		try {
-			const now = new Date().getTime();
-			returnObj.fetchTimeData.last = now;
+			const startTime = Date.now();
 
 			response = await axios<Models.IEntries>({
 				method: 'get',
-				url: "/read?index=" + (Math.max(index - 1, 0)) + "&noCache=" + now,
+				url: "/read?index=" + (Math.max(index - 1, 0)) + "&noCache=" + startTime,
 				headers: {
 					'Authorization': `Bearer ${token}`
 				}
 			});
 
+
 			const newEntries: Array<Models.IEntry> = response.data.entries;
 
 			if (newEntries.length) {
-				setEntries((prevEntries:Array<Models.IEntry>) => {
-					let allButLastPrevEntries:Array<Models.IEntry>, mergedEntries: Array<Models.IEntry> = [];
+				setEntries((prevEntries: Array<Models.IEntry>) => {
+					let allButLastPrevEntries: Array<Models.IEntry>, mergedEntries: Array<Models.IEntry> = [];
 
 					if (prevEntries.length) {
 						allButLastPrevEntries = prevEntries.slice(0, prevEntries.length - 1);
@@ -46,18 +46,25 @@ export const useGetData = (index: number, fetchIntervalMs: number, setEntries) =
 
 			}
 
-			return{ isError: false, status: 200, message: "", fetchTimeData: { ...returnObj.fetchTimeData, next: new Date().getTime() + fetchIntervalMs } }
+			const endTime = Date.now();
+			const delay = endTime - startTime;
+
+			returnObj.fetchTimeData.last = 	endTime;
+			returnObj.fetchTimeData.next = endTime + fetchIntervalMs + delay;
+
+			return returnObj;
 
 		} catch (error) {
 			console.log("error fetching data %o", error);
+			returnObj.isError = true;
 
 			if (!error.response) {
-				return { isError: true, status: 499, message: error.message || "offline", fetchTimeData: { ...returnObj.fetchTimeData, next: new Date().getTime() + fetchIntervalMs } }
+				return { ...returnObj, status: 499, message: error.message || "offline", fetchTimeData: { ...returnObj.fetchTimeData, next: new Date().getTime() + fetchIntervalMs } }
 			}
 
 			if (error.response.status == 403) { contextObj.setLogin(false) }
 
-			return { isError: true, status: error.response.data.status || error.response.status, message: error.response.data.message || error.message, fetchTimeData: { last: null, next: null } }
+			return { ...returnObj, status: error.response.data.status || error.response.status, message: error.response.data.message || error.message, fetchTimeData: { last: null, next: null } }
 		}
 	}
 

src/client/pages/Login.tsx

@@ -8,14 +8,14 @@ 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';
 import qs from 'qs';
 import { Context } from '../context';
 import { convertJwt } from "../scripts/convertJwt";
 import { useNavigate } from 'react-router-dom';
 import LinearBuffer from '../components/LinearBuffer';
+import "../css/login.css";
 
 function Login() {
   const [finish, setFinish] = useState(1);