Skip to content

Commit e32f0b0

Browse files
Angular2GuyAngular2Guy
committed
fix: state
1 parent 5ac8553 commit e32f0b0

File tree

6 files changed

+181
-103
lines changed

6 files changed

+181
-103
lines changed

‎frontend/package-lock.json‎

Lines changed: 61 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/GlobalState.ts‎

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,36 @@ export enum FuelType {
2828
Diesel = 'diesel'
2929
}
3030

31+
export interface TableDataRow {
32+
location: string;
33+
e5: number;
34+
e10: number;
35+
diesel: number;
36+
date: Date;
37+
longitude: number;
38+
latitude: number;
39+
e5Class: string;
40+
e10Class: string;
41+
dieselClass: string;
42+
}
43+
44+
export interface TimeSlot {
45+
x: string;
46+
e5: number;
47+
e10: number;
48+
diesel: number;
49+
}
50+
51+
export interface GsValue {
52+
location: string;
53+
e5: number;
54+
e10: number;
55+
diesel: number;
56+
date: Date;
57+
longitude: number;
58+
latitude: number;
59+
}
60+
3161
const GlobalState = {
3262
jwtToken: '',
3363
userNameState: atom({
@@ -65,6 +95,18 @@ const GlobalState = {
6595
webWorkerRefState: atom<null|Worker>({
6696
key: 'webWorkerRefState',
6797
default: null
68-
}),
98+
}),
99+
rowsState: atom({
100+
key: 'rowsState',
101+
default: [] as TableDataRow[]
102+
}),
103+
avgTimeSlotsState: atom({
104+
key: 'avgTimeSlotsState',
105+
default: [] as TimeSlot[]
106+
}),
107+
gsValuesState: atom({
108+
key: 'gsValuesState',
109+
default: [] as GsValue[]
110+
})
69111
}
70112
export default GlobalState;

‎frontend/src/components/Chart.tsx‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,28 +17,18 @@ import RadioGroup from '@mui/material/RadioGroup';
1717
import FormControlLabel from '@mui/material/FormControlLabel';
1818
import FormControl from '@mui/material/FormControl';
1919
import GlobalState, { FuelType } from '../GlobalState';
20-
import { useRecoilState } from 'recoil';
20+
import { useRecoilState, useRecoilValue } from 'recoil';
2121

2222
export interface GsPoint {
2323
timestamp: string;
2424
price: number;
2525
}
2626

27-
export interface TimeSlot {
28-
x: string;
29-
e5: number;
30-
e10: number;
31-
diesel: number;
32-
}
33-
34-
export interface ChartProps {
35-
timeSlots: TimeSlot[];
36-
}
37-
38-
export default function Chart(props: ChartProps) {
27+
export default function Chart() {
3928
//console.log(props.timeSlots);
4029
const [gsValues, setGsValues] = useState([] as GsPoint[]);
4130
const [fuelTypeState, setfuelTypeState] = useRecoilState(GlobalState.fuelTypeState);
31+
const avgTimeSlotsState = useRecoilValue(GlobalState.avgTimeSlotsState);
4232
const [lineColor, setLineColor] = useState('#8884d8');
4333
const [avgValue, setAvgValue] = useState(0.0);
4434

@@ -50,16 +40,16 @@ export default function Chart(props: ChartProps) {
5040
function updateChart() {
5141
if (fuelTypeState === FuelType.E5) {
5242
setLineColor('#8884d8')
53-
setAvgValue(props.timeSlots.reduce((acc, value) => value.e5 + acc, 0) / (props.timeSlots.length || 1));
54-
setGsValues(props.timeSlots.map(myValue => ({ timestamp: myValue.x, price: myValue.e5 - avgValue } as GsPoint)))
43+
setAvgValue(avgTimeSlotsState.reduce((acc, value) => value.e5 + acc, 0) / (avgTimeSlotsState.length || 1));
44+
setGsValues(avgTimeSlotsState.map(myValue => ({ timestamp: myValue.x, price: myValue.e5 - avgValue } as GsPoint)))
5545
} else if (fuelTypeState === FuelType.E10) {
5646
setLineColor('#82ca9d')
57-
setAvgValue(props.timeSlots.reduce((acc, value) => value.e10 + acc, 0) / (props.timeSlots.length || 1));
58-
setGsValues(props.timeSlots.map(myValue => ({ timestamp: myValue.x, price: myValue.e10 - avgValue } as GsPoint)))
47+
setAvgValue(avgTimeSlotsState.reduce((acc, value) => value.e10 + acc, 0) / (avgTimeSlotsState.length || 1));
48+
setGsValues(avgTimeSlotsState.map(myValue => ({ timestamp: myValue.x, price: myValue.e10 - avgValue } as GsPoint)))
5949
} else {
6050
setLineColor('#82caff')
61-
setAvgValue(props.timeSlots.reduce((acc, value) => value.diesel + acc, 0) / (props.timeSlots.length || 1));
62-
setGsValues(props.timeSlots.map(myValue => ({ timestamp: myValue.x, price: myValue.diesel - avgValue } as GsPoint)))
51+
setAvgValue(avgTimeSlotsState.reduce((acc, value) => value.diesel + acc, 0) / (avgTimeSlotsState.length || 1));
52+
setGsValues(avgTimeSlotsState.map(myValue => ({ timestamp: myValue.x, price: myValue.diesel - avgValue } as GsPoint)))
6353
}
6454
}
6555

‎frontend/src/components/DataTable.tsx‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,8 @@ import {TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody}
1414
import { nanoid } from 'nanoid';
1515
import { useMemo } from 'react';
1616
import styles from "./datatable.module.scss";
17-
18-
export interface TableDataRow {
19-
location: string;
20-
e5: number;
21-
e10: number;
22-
diesel: number;
23-
date: Date;
24-
longitude: number;
25-
latitude: number;
26-
e5Class: string;
27-
e10Class: string;
28-
dieselClass: string;
29-
}
17+
import GlobalState from '../GlobalState';
18+
import { useRecoilValue } from 'recoil';
3019

3120
interface DataTableProps {
3221
location: string;
@@ -35,22 +24,22 @@ interface DataTableProps {
3524
e5: string;
3625
e10: string;
3726
diesel: string;
38-
rows: TableDataRow[];
3927
}
4028

4129
//function PriceChart(props: )
4230

4331
export default function DataTable(props: DataTableProps) {
44-
32+
const rowsState = useRecoilValue(GlobalState.rowsState);
33+
/*
4534
useMemo(() => {
46-
if(props?.rows?.length < 4) {
35+
if(rowsState.length < 4) {
4736
return;
4837
}
49-
const e5Arr = [...props.rows].filter(row => row.e5 > 10);
38+
const e5Arr = [...rowsState].filter(row => row.e5 > 10);
5039
e5Arr.sort((a,b) => a.e5 - b.e5);
51-
const e10Arr = [...props.rows].filter(row => row.e10 > 10);
40+
const e10Arr = [...rowsState].filter(row => row.e10 > 10);
5241
e10Arr.sort((a,b) => a.e10 - b.e10);
53-
const dieselArr = [...props.rows].filter(row => row.diesel > 10);
42+
const dieselArr = [...rowsState].filter(row => row.diesel > 10);
5443
dieselArr.sort((a,b) => a.diesel - b.diesel);
5544
if(e5Arr?.length >= 3) {
5645
e5Arr[0].e5Class = 'best-price';
@@ -67,8 +56,8 @@ export default function DataTable(props: DataTableProps) {
6756
dieselArr[1].dieselClass = 'good-price';
6857
dieselArr[2].dieselClass = 'good-price';
6958
}
70-
},[props.rows]);
71-
59+
},[rowsState]);
60+
*/
7261
return (
7362
<TableContainer component={Paper}>
7463
<Table sx={{ minWidth: '100%' }}>
@@ -82,7 +71,7 @@ export default function DataTable(props: DataTableProps) {
8271
</TableRow>
8372
</TableHead>
8473
<TableBody>
85-
{props.rows.map((row) => (
74+
{rowsState.map((row) => (
8675
<TableRow
8776
key={nanoid()}
8877
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}

‎frontend/src/components/GsMap.tsx‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -23,30 +23,23 @@ import myStyle from './gsmap.module.scss';
2323
import { Icon, Style } from 'ol/style.js';
2424
import { useEffect } from 'react';
2525
import { nanoid } from 'nanoid';
26-
27-
export interface GsValue {
28-
location: string;
29-
e5: number;
30-
e10: number;
31-
diesel: number;
32-
date: Date;
33-
longitude: number;
34-
latitude: number;
35-
}
26+
import GlobalState, { GsValue } from '../GlobalState';
27+
import { useRecoilValue } from 'recoil';
3628

3729
export interface CenterLocation {
3830
Longitude: number;
3931
Latitude: number;
4032
}
4133

4234
interface InputProps {
43-
center: CenterLocation;
44-
gsValues: GsValue[];
35+
center: CenterLocation;
4536
}
4637

4738
export default function GsMap(inputProps: InputProps) {
4839
let map: Map;
4940
let currentOverlay: Overlay | null = null;
41+
const gsValuesState = useRecoilValue(GlobalState.gsValuesState);
42+
5043
useEffect(() => {
5144
if (!map) {
5245
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -72,7 +65,7 @@ export default function GsMap(inputProps: InputProps) {
7265
}, []);
7366

7467
function createOverlays(): Overlay[] {
75-
return inputProps.gsValues.map((gsValue, index) => {
68+
return gsValuesState.map((gsValue, index) => {
7669
const element = document.createElement('div');
7770
element.id = nanoid();
7871
element.innerHTML = `${gsValue.location}<br/>E5: ${gsValue.e5}<br/>E10: ${gsValue.e10}<br/>Diesel: ${gsValue.diesel}`;

0 commit comments

Comments
 (0)