New frontend project

2 files changed, 65 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;
diff --git a/frontend/src/components/ElementView.tsx b/frontend/src/components/ElementView.tsx
new file mode 100644
index 0000000..4f9d489
--- /dev/null
+++ b/frontend/src/components/ElementView.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { Element } from '../types';
+
+interface ElementViewProps {
+  element: Element;
+}
+
+const ElementView: FC<ElementViewProps> = ({ element }) => {
+  return (
+    <div className='flex flex-row m-2 rounded-md border border-gray-300 bg-gray-100 w-fit h-fit'>
+      <div className='flex flex-col items-center'>
+        <img src={`data:image/png;base64,${element.icon}`} width='80px' height='80px'/>
+        <p className='my-1 mx-2 text-sm'>{element.name}</p>
+      </div>
+    </div>
+  );
+};
+
+export default ElementView;