feat: frontend

ordr-ui/app/components/ItemTableList.tsx

@@ -0,0 +1,27 @@
+import useAsyncEffect from "use-async-effect"
+import { useItemStore } from "../providers/ItemsProvider"
+import { Mutex } from "async-mutex"
+import { ItemTableListRow } from "./ItemTableListRow"
+
+const itemApiMutex = new Mutex()
+export const ItemTableList = () => {
+    const itemStore = useItemStore((state) => state)
+
+    useAsyncEffect( async () => {
+        if(itemStore.items.length === 0) {
+            const release = await itemApiMutex.acquire()
+
+            await itemStore.sync()
+
+            await release()
+        }
+    }, [])
+
+    return (
+        <ul>
+            {itemStore.items.map((i) => (
+                <ItemTableListRow item={i} key={i.ItemId}/>
+            ))}
+        </ul>
+    )
+}