fix: item history page now live updates

ordr-ui/app/client/controllers/ItemController.ts

@@ -25,16 +25,15 @@ export const CreateItem = async (query: CreateItemQuery): Promise<ItemPriceRespo
 	return res.data
 }
 
-export const SetItemPrice = async (query: SetItemPriceQuery) => {
+export const SetItemPrice = async (query: SetItemPriceQuery): Promise<ItemPriceResponse> => {
 	const queryParams = new URLSearchParams({
 		item_id: query.item_id,
 		item_price: query.item_price
 	})
 
 	const res = await axios.put(process.env.NEXT_PUBLIC_API_URL + `/item/price?${queryParams.toString()}`, {}, {withCredentials: true})
-	if (res.data.Location) {
-		window.location.href = res.data.Location
-	}
+	
+	return res.data as ItemPriceResponse
 
 }
 

ordr-ui/app/components/ItemHistoryTable.tsx

@@ -1,9 +1,7 @@
 import { Mutex } from "async-mutex"
-import { useState } from "react"
 import styled from "styled-components"
 import useAsyncEffect from "use-async-effect"
-import { GetItemHistory } from "../client/controllers"
-import { ItemHistoryResponse } from "../client/response"
+import { useItemStore } from "../providers/ItemsProvider"
 
 type ItemHistoryTableProps = {
     itemId: number
@@ -39,17 +37,15 @@ const ItemHistoryTableRow = styled.tr`
 const itemHistoryMutex = new Mutex()
 
 export const ItemHistoryTable = ({itemId}: ItemHistoryTableProps) => {
-    const [itemPriceHistory, setItemPriceHistory] = useState<ItemHistoryResponse[]>([])
+    const itemStore = useItemStore((state) => state)
 
     useAsyncEffect(async () => {
-        if(itemPriceHistory.length === 0) {
+        if(itemStore.itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId).length === 0) {
             const release = await itemHistoryMutex.acquire()
-            setItemPriceHistory(await GetItemHistory(itemId))
+            await itemStore.getItemHistory(itemId)
             await release()
         }
-    }, [])
-
-    console.log(itemPriceHistory)
+    }, [itemStore.itemHistories])
 
     return (
         <ItemHistoryTableStyle>
@@ -70,7 +66,7 @@ export const ItemHistoryTable = ({itemId}: ItemHistoryTableProps) => {
                 </tr>
             </ItemHistoryTableHead>
             <ItemHistoryTableBody>
-                {itemPriceHistory.map((iph) => (
+                {itemStore.itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId).map((iph) => (
                     <ItemHistoryTableRow key = {iph.ItemId + new Date(iph.ValidFrom).getMilliseconds()}>
                         <ItemHistoryTableItem>
                             {iph.ItemName}

ordr-ui/app/page.tsx

@@ -1,11 +1,10 @@
 'use client'
-import Image from "next/image";
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 import { useAsyncEffect } from 'use-async-effect'
 import { useShallow } from 'zustand/react/shallow'
 import { UserResponse } from './client/response'
 import { useCurrentAuthenticatedUserStore, UserActions } from './providers'
-import { useRouter } from "next/navigation";
-import { useEffect } from "react";
 
 export default function Home() {
   const authenticatedUserStore: UserResponse & UserActions = useCurrentAuthenticatedUserStore(useShallow((state) => ({

ordr-ui/app/providers/ItemsProvider.ts

@@ -2,11 +2,12 @@ import { create } from 'zustand'
 import * as ItemController from '../client/controllers/ItemController'
 import { CreateItemQuery } from '../client/queries/CreateItemQuery'
 import { SetItemPriceQuery } from '../client/queries/SetItemPriceQuery'
-import { ItemPriceResponse, OrderFilledResponse, OrderItemPriceResponse } from '../client/response'
+import { ItemHistoryResponse, ItemPriceResponse, OrderFilledResponse, OrderItemPriceResponse } from '../client/response'
 
 export type ItemData = {
 	items: ItemPriceResponse[],
 	orderItems: OrderItemPriceResponse[]
+	itemHistories: ItemHistoryResponse[]
 }
 
 export type ItemActions = {
@@ -20,11 +21,13 @@ export type ItemActions = {
 	setItemQuantity: (orderId: number, itemId: number, quantity: number) => Promise<OrderFilledResponse>
 	deleteOrderItem: (orderId: number, itemId: number) => Promise<void>
 	deleteItem: (itemId: number) => Promise<void>
+	getItemHistory: (itemId: number) => Promise<ItemHistoryResponse[]>
 }
 
 export const useItemStore = create<ItemData & ItemActions>((set, get) => ({
 	items: [],
 	orderItems: [],
+	itemHistories: [],
 	sync: async (): Promise<void> => {
 		const itemPrices = await ItemController.GetItems()
 		set((state) => ({
@@ -52,7 +55,7 @@ export const useItemStore = create<ItemData & ItemActions>((set, get) => ({
 			item_price: price.toString()
 		}
 
-		await ItemController.SetItemPrice(itemPriceQuery)
+		const itemPrice = await ItemController.SetItemPrice(itemPriceQuery)
 
 		set((state) => {
 			const item = state.items.filter((i) => i.ItemId === itemId)[0]
@@ -68,7 +71,14 @@ export const useItemStore = create<ItemData & ItemActions>((set, get) => ({
 					if(!a.InSeason && b.InSeason)
 						return -1
 					return a.ItemId - b.ItemId
-				})
+				}),
+				itemHistories: [...state.itemHistories, {
+					ItemId: itemPrice.ItemId.toString(),
+					ItemName: itemPrice.ItemName,
+					ItemPrice: (Math.trunc(itemPrice.ItemPrice * 100) / 100).toString(),
+					ValidFrom: new Date().toLocaleDateString(),
+					ValidTo: new Date().toLocaleDateString()
+				} as ItemHistoryResponse]
 			}
 		})
 	},
@@ -183,5 +193,18 @@ export const useItemStore = create<ItemData & ItemActions>((set, get) => ({
 				orderItems: orderItemsWithoutItem
 			}
 		})
+	},
+	getItemHistory: async (itemId: number): Promise<ItemHistoryResponse[]> => {
+		const currHist = get().itemHistories.filter((ih) => parseInt(ih.ItemId) === itemId)
+		if(currHist.length > 0)
+			return currHist
+		const itemHistory = await ItemController.GetItemHistory(itemId)
+
+		set((state) => ({
+			...state,
+			itemHistories: [...state.itemHistories, ...itemHistory]
+		}))
+
+		return itemHistory
 	}
 }))

ordr-ui/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  
 };
 
 export default nextConfig;