Skip to content

Commit ca7b0a2

Browse files
Angular2GuyAngular2Guy
committed
Revert "fix: state"
This reverts commit e32f0b0.
1 parent e32f0b0 commit ca7b0a2

File tree

6 files changed

+103
-181
lines changed

6 files changed

+103
-181
lines changed

‎frontend/package-lock.json‎

Lines changed: 0 additions & 61 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: 1 addition & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -28,36 +28,6 @@ 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-
6131
const GlobalState = {
6232
jwtToken: '',
6333
userNameState: atom({
@@ -95,18 +65,6 @@ const GlobalState = {
9565
webWorkerRefState: atom<null|Worker>({
9666
key: 'webWorkerRefState',
9767
default: null
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-
})
68+
}),
11169
}
11270
export default GlobalState;

‎frontend/src/components/Chart.tsx‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,28 @@ 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, useRecoilValue } from 'recoil';
20+
import { useRecoilState } from 'recoil';
2121

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

27-
export default function Chart() {
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) {
2839
//console.log(props.timeSlots);
2940
const [gsValues, setGsValues] = useState([] as GsPoint[]);
3041
const [fuelTypeState, setfuelTypeState] = useRecoilState(GlobalState.fuelTypeState);
31-
const avgTimeSlotsState = useRecoilValue(GlobalState.avgTimeSlotsState);
3242
const [lineColor, setLineColor] = useState('#8884d8');
3343
const [avgValue, setAvgValue] = useState(0.0);
3444

@@ -40,16 +50,16 @@ export default function Chart() {
4050
function updateChart() {
4151
if (fuelTypeState === FuelType.E5) {
4252
setLineColor('#8884d8')
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)))
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)))
4555
} else if (fuelTypeState === FuelType.E10) {
4656
setLineColor('#82ca9d')
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)))
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)))
4959
} else {
5060
setLineColor('#82caff')
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)))
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)))
5363
}
5464
}
5565

‎frontend/src/components/DataTable.tsx‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,19 @@ 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-
import GlobalState from '../GlobalState';
18-
import { useRecoilValue } from 'recoil';
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+
}
1930

2031
interface DataTableProps {
2132
location: string;
@@ -24,22 +35,22 @@ interface DataTableProps {
2435
e5: string;
2536
e10: string;
2637
diesel: string;
38+
rows: TableDataRow[];
2739
}
2840

2941
//function PriceChart(props: )
3042

3143
export default function DataTable(props: DataTableProps) {
32-
const rowsState = useRecoilValue(GlobalState.rowsState);
33-
/*
44+
3445
useMemo(() => {
35-
if(rowsState.length < 4) {
46+
if(props?.rows?.length < 4) {
3647
return;
3748
}
38-
const e5Arr = [...rowsState].filter(row => row.e5 > 10);
49+
const e5Arr = [...props.rows].filter(row => row.e5 > 10);
3950
e5Arr.sort((a,b) => a.e5 - b.e5);
40-
const e10Arr = [...rowsState].filter(row => row.e10 > 10);
51+
const e10Arr = [...props.rows].filter(row => row.e10 > 10);
4152
e10Arr.sort((a,b) => a.e10 - b.e10);
42-
const dieselArr = [...rowsState].filter(row => row.diesel > 10);
53+
const dieselArr = [...props.rows].filter(row => row.diesel > 10);
4354
dieselArr.sort((a,b) => a.diesel - b.diesel);
4455
if(e5Arr?.length >= 3) {
4556
e5Arr[0].e5Class = 'best-price';
@@ -56,8 +67,8 @@ export default function DataTable(props: DataTableProps) {
5667
dieselArr[1].dieselClass = 'good-price';
5768
dieselArr[2].dieselClass = 'good-price';
5869
}
59-
},[rowsState]);
60-
*/
70+
},[props.rows]);
71+
6172
return (
6273
<TableContainer component={Paper}>
6374
<Table sx={{ minWidth: '100%' }}>
@@ -71,7 +82,7 @@ export default function DataTable(props: DataTableProps) {
7182
</TableRow>
7283
</TableHead>
7384
<TableBody>
74-
{rowsState.map((row) => (
85+
{props.rows.map((row) => (
7586
<TableRow
7687
key={nanoid()}
7788
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}

‎frontend/src/components/GsMap.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,30 @@ 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-
import GlobalState, { GsValue } from '../GlobalState';
27-
import { useRecoilValue } from 'recoil';
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+
}
2836

2937
export interface CenterLocation {
3038
Longitude: number;
3139
Latitude: number;
3240
}
3341

3442
interface InputProps {
35-
center: CenterLocation;
43+
center: CenterLocation;
44+
gsValues: GsValue[];
3645
}
3746

3847
export default function GsMap(inputProps: InputProps) {
3948
let map: Map;
4049
let currentOverlay: Overlay | null = null;
41-
const gsValuesState = useRecoilValue(GlobalState.gsValuesState);
42-
4350
useEffect(() => {
4451
if (!map) {
4552
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -65,7 +72,7 @@ export default function GsMap(inputProps: InputProps) {
6572
}, []);
6673

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

0 commit comments

Comments
 (0)