Merge pull request #168 from Type-Style/167-refactor-context

167 refactor context

.env_example

@@ -1,6 +1,6 @@
 NODE_ENV=development
 ROOT=https://your-produciton-server.com
 KEY=
-USER_JOHNDOE=
+USER_XX=
 USER_TEST=
 MAPBOX=

.eslintrc.json

@@ -17,11 +17,8 @@
   },
   "plugins": ["jest", "@typescript-eslint"],
   "rules": {
-    //"no-console": "off",
-    //"import/prefer-default-export": "off",
-    //"@typescript-eslint/no-unused-vars": "warn"
     "jest/no-conditional-expect": "off"    
   },
-  "ignorePatterns": ["dist", "jest.config.js", "httpdocs", "webpack.config.js", "src/client", "init"]
+  "ignorePatterns": ["dist", "jest.config.js", "httpdocs", "webpack.config.js", "src/client", "init", "jest.testData.config.js"]
 
 }

.github/workflows/main.yml

@@ -39,6 +39,7 @@ jobs:
       run: npm run test:login
     - name: Run unit tests
       run: npm run test:unit
+    - run: echo "--- base tests complete ---"
     - name: Run integration tests
       run: npm run test:integration
 

.vscode/tasks.json

@@ -15,4 +15,4 @@
             "problemMatcher": "$tsc"
         }
     ]
-}
+}

init/generateKey.js

@@ -24,7 +24,7 @@ rl.question('Enter the string to be encoded: ', (input) => {
   const base64String = Buffer.from(escapedString).toString('base64');
 
   // print the result
-  console.log('Base64 Encoded String:', base64String);
+  console.log('encoded String:', base64String);
 
   rl.close();
 });

jest.config.js

@@ -7,4 +7,4 @@ module.exports = {
     '^@src/(.*)$': '<rootDir>/src/$1',
   },
   bail: true
-};
+};

jest.testData.config.js

@@ -1,4 +1,5 @@
 /** @type {import('ts-jest').JestConfigWithTsJest} */
+
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',

src/client/components/App.tsx

@@ -47,6 +47,8 @@ const App = () => {
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const [mapToken, setMapToken] = useState<string | null>(null);
 
+  const contextObj = {isLoggedIn, setLogin, userInfo, setUserInfo, mode, setMode, prefersDarkMode, mapToken}
+
   useEffect(() => {
     setMode(prefersDarkMode ? "dark" : "light");
   }, [prefersDarkMode, setMode]);
@@ -73,7 +75,7 @@ const App = () => {
   }, [isLoggedIn]);
 
   return (
-    <Context.Provider value={[isLoggedIn, setLogin, userInfo, setUserInfo, mode, setMode, prefersDarkMode, mapToken]}>
+    <Context.Provider value={[contextObj]}>
       <RouterProvider router={router} />
     </Context.Provider>
   );

src/client/components/Map.tsx

@@ -80,8 +80,8 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 	if (!entries?.length) {
 		return <span className="noData cut">No Data to be displayed</span>
 	}
-	const [, , , , mode, , , mapToken] = useContext(Context);
-	const [mapStyle, setMapStyle] = useState(mode);
+	const [contextObj] = useContext(Context);
+	const [mapStyle, setMapStyle] = useState(contextObj.mode);
 
 	const lastEntry = entries.at(-1);
 	const cleanEntries = entries.filter((entry) => !entry.ignore);
@@ -169,12 +169,12 @@ function Map({ entries }: { entries: Models.IEntry[] }) {
 						return (
 							<LayersControl.BaseLayer
 								key={index}
-								checked={layer.default == mode}
+								checked={layer.default == contextObj.mode}
 								name={layer.name}
 							>
 								<TileLayer
 									attribution={layer.attribution}
-									url={layer.url.includes(replaceKeyword) ? layer.url.replace(replaceKeyword, mapToken) : layer.url}
+									url={layer.url.includes(replaceKeyword) ? layer.url.replace(replaceKeyword, contextObj.mapToken) : layer.url}
 									tileSize={layer.size || 256}
 									zoomOffset={layer.zoomOffset || 0}
 									maxZoom={19}

src/client/components/MiniMap.tsx

@@ -5,7 +5,7 @@ import { Context } from "./App";
 
 export default function MiniMap({ layer, lastEntry, index }: client.MiniMapProps) {
 
-	const [, , , , , , , mapToken] = useContext(Context);
+	const [contextObj] = useContext(Context);
 
 	const replaceKeyword = "XXXREPLACEXXX";
 
@@ -30,7 +30,7 @@ export default function MiniMap({ layer, lastEntry, index }: client.MiniMapProps
 				<MapRecenter lat={lastEntry.lat} lon={lastEntry.lon} zoom={15} fly={false} />
 				<TileLayer
 					attribution={layer.attribution}
-					url={layer.url.includes(replaceKeyword) ? layer.url.replace(replaceKeyword, mapToken) : layer.url}
+					url={layer.url.includes(replaceKeyword) ? layer.url.replace(replaceKeyword, contextObj.mapToken) : layer.url}
 					tileSize={layer.size || 256}
 					zoomOffset={layer.zoomOffset || 0}
 				/>