New frontend project

1 files changed, 46 insertions, 0 deletions

diff --git a/frontend/src/components/ElementList.tsx b/frontend/src/components/ElementList.tsx
new file mode 100644
index 0000000..20b27dd
--- /dev/null
+++ b/frontend/src/components/ElementList.tsx
@@ -0,0 +1,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;