fix: loop

Author: Angular2Guy

.vscode/launch.json

@@ -0,0 +1,7 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": []
+}

frontend/src/components/Chart.tsx

@@ -48,6 +48,10 @@ export default function Chart(props: ChartProps) {
 
   // eslint-disable-next-line
   useEffect(() => {
+    updateChart();    
+  }, []);
+
+  function updateChart() {
     if (fuelType === FuelType.E5) {
       setLineColor('#8884d8')
       setAvgValue(props.timeSlots.reduce((acc, value) => value.e5 + acc, 0) / (props.timeSlots.length || 1));
@@ -61,10 +65,11 @@ export default function Chart(props: ChartProps) {
       setAvgValue(props.timeSlots.reduce((acc, value) => value.diesel + acc, 0) / (props.timeSlots.length || 1));
       setGsValues(props.timeSlots.map(myValue => ({ timestamp: myValue.x, price: myValue.diesel - avgValue } as GsPoint)))
     }
-  });
+  }
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {    
     setFuelType(((event.target as HTMLInputElement).value) as FuelType);
+    updateChart();    
   };
   return (<div>
     <ResponsiveContainer width="100%" height={300}>

frontend/src/components/Main.tsx

@@ -10,14 +10,16 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import { Tabs, Tab, Box } from '@mui/material';
+import { Box } from '@mui/material';
 import { useEffect, useState, SyntheticEvent } from 'react';
 import DataTable, { TableDataRow } from './DataTable';
 import GsMap, { GsValue } from './GsMap';
 import { useRecoilRefresher_UNSTABLE, useRecoilValue } from 'recoil';
 import GlobalState from '../GlobalState';
 import styles from './main.module.scss';
 import Chart, {TimeSlot} from './Chart';
+import { BrowserRouter, Outlet, Route, Routes, Link} from 'react-router-dom';
+
 
 interface GasPriceAvgs {
 	Postcode:        string
@@ -130,8 +132,7 @@ export default function Main() {
   const globalJwtTokenState = useRecoilValue(GlobalState.jwtTokenState);
   const globalUserUuidState = useRecoilValue(GlobalState.userUuidState);
   const globalUserDataState = useRecoilValue(GlobalState.userDataState);    
-  const refreshJwtTokenState = useRecoilRefresher_UNSTABLE(GlobalState.jwtTokenState);  
-
+  const refreshJwtTokenState = useRecoilRefresher_UNSTABLE(GlobalState.jwtTokenState);    
 
   const handleTabChange = (event: SyntheticEvent, newValue: number) => {
     setValue(newValue);
@@ -241,29 +242,69 @@ export default function Main() {
     .then(() => setController(null));
   }
 
+  const Area = () => {
+    return (
+      <>
+        <DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>
+      </>
+    )
+  };
+
+  const Target = () => {
+    return ( 
+      <>
+        <Chart timeSlots={avgTimeSlots}></Chart>
+        <DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>
+      </>
+    )
+  }
+
+  const Map = () => {
+    return (
+      <>
+        <GsMap gsValues={gsValues} center={globalUserDataState}></GsMap>  
+      </>
+    )
+  }
+
+  const Layout = () => {    
+    return (
+      <>
+        <div className={styles.headerTabs}>
+            <div className={styles.headerTab}>            
+              <Link className={styles.linkText} to="/area">Area Gas Prices</Link>
+              </div>
+              <div className={styles.headerTab}>
+              <Link className={styles.linkText} to="/target">Target Gas Prices</Link>
+              </div>
+              <div className={styles.headerTab}>
+              <Link className={styles.linkText} to="/map">Map Gas Prices</Link>
+                </div>          
+        </div>  
+        <Outlet />
+        </>      
+    );
+  }
+
   // eslint-disable-next-line
   useEffect(() => {
     if (globalJwtTokenState?.length > 10 && globalUserUuidState?.length > 10 && first) {
       setTimeout(() => handleTabChange({} as unknown as SyntheticEvent, value), 3000);
       setFirst(false);
-    }
+    }    
   });
 
   return (<Box sx={{ width: '100%' }}>
-    <Tabs value={value} onChange={handleTabChange} >
-      <Tab label="Current Prices" />
-      <Tab label="Last Price matches" />
-      <Tab label="Current Prices Map" />
-    </Tabs>
-    <TabPanel value={value} index={0}>
-      <DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>
-    </TabPanel>
-    <TabPanel value={value} index={1}>
-      <Chart timeSlots={avgTimeSlots}></Chart>
-      <DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>
-    </TabPanel>
-    <TabPanel value={value} index={2}>
-      <GsMap gsValues={gsValues} center={globalUserDataState}></GsMap>      
-    </TabPanel>
+        <BrowserRouter>        
+      <Routes>        
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Area />} />
+          <Route path="area" element={<Area />} />
+          <Route path="target" element={<Target />} />
+          <Route path="map" element={<Map />} />
+          <Route path="*" element={<Area />} />
+        </Route>
+      </Routes>
+    </BrowserRouter>    
   </Box>);
 }

frontend/src/components/main.module.scss

@@ -12,4 +12,22 @@
 */
 .myText {
     color: #000000;
+}
+
+.headerTabs {
+  display: flex;
+  justify-content: space-around;
+}
+
+.headerTab {
+  width: fit-content;
+  line-height: 2rem;  
+}
+
+.linkText {
+  color: rgb(25, 118, 210);
+  --Link-underlineColor: rgba(25, 118, 210, 0.4);
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  text-decoration-color: var(--Link-underlineColor);
 }