feat: frontend

ordr-ui/app/components/OrderTableList.tsx

@@ -0,0 +1,44 @@
+'for client'
+import { useOrderStore } from "../providers/OrderProvider"
+import { useShallow } from "zustand/shallow"
+import useAsyncEffect from "use-async-effect"
+import { OrderTableRow } from "./OrderTableRow"
+import { Mutex } from "async-mutex"
+import styled from "styled-components"
+
+type OrderTableProps = {
+    page: number,
+    filter: number,
+    orderer: string,
+    dateDue: string,
+    datePlaced: string
+}
+
+const OrderList = styled.ul`
+`
+
+const mutex = new Mutex()
+
+export const OrderTableList = ({page, filter, orderer, dateDue, datePlaced}: OrderTableProps) => {
+        const orderStore = useOrderStore(useShallow((state) => ({
+            ...state
+        })))
+
+        useAsyncEffect(async () => {
+            const release = await mutex.acquire()
+            await orderStore.sync(page, filter, {
+                orderer:  orderer,
+                date_due: dateDue,
+                date_placed: datePlaced
+            })
+            release()
+        }, [page, filter, orderer, dateDue, datePlaced])
+
+        return (
+            <OrderList>
+                {orderStore.orders.map((o) => (
+                    <OrderTableRow key={o.Id} orderId={o.Id} orderer={o.Orderer} dateDue={o.DateDue} datePlaced={o.DatePlaced} amountPaid={o.AmountPaid} orderTotal={o.OrderTotal} amountDue={o.AmountDue} filled={o.Filled} delivered={o.Delivered} />
+                ))}
+            </OrderList>
+        )
+}