blob: 20b27dd7d4f680b25588e46feabb5e677ee4d7fa (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
import { FC, useEffect, useState } from 'react';
import {Element} from '../types';
import ElementView from './ElementView';
const ElementList: FC = () => {
const [elements, setElements] = useState<Element[]>([]);
useEffect(() => {
const initialElements: number[] = [1, 2, 3, 4];
const elementStateString = localStorage.getItem('elementState');
if (elementStateString != null) {
setElements(JSON.parse(elementStateString));
return;
}
const fetchElements = async () => {
const elems: Element[] = [];
for (const elemId of initialElements) {
const response = await fetch(`/api/element/${elemId}`);
const elem: Element = await response.json();
elems.push(elem);
}
localStorage.setItem('elementState', JSON.stringify(elems));
setElements(elems);
};
fetchElements().catch(console.error);
}, []);
useEffect(() => {
if (elements.length != 0) {
localStorage.setItem('elementState', JSON.stringify(elements));
}
}, [elements])
return (
<>
{elements.map(elem => <ElementView key={elem.id} element={elem} />)}
</>
);
};
export default ElementList;
|
