[AFP-135] 🐛 Fix search bar (@asegers)

src/hooks/useOrders.ts

@@ -11,22 +11,22 @@ enum ResStatus {
 }
 
 const initialConstraints: OrdersRequestBody = {
-    pagination: { page: 0, size: 15},
+    pagination: { page: 0, size: 1000},
     date: { start: null, end: null, filter: null },
-    search: { by: 'orderTrackingCode', query: "" },
+    search: { by: 'customerEmailAddress', query: "" },
     status: { received: false, fulfilled: false, cancelled: false }
 }
 
-
 const useOrders = (args : OrdersRequestBody = initialConstraints) => {
     const [status, setStatus] = useState<ResStatus>(ResStatus.IDLE);
     const [dataMap, setDataMap] = useState<{string: Order} | {}>({});
+    const [dataArr, setDataArr] = useState<Order[] | []>([]);
     const [error, setError] = useState(null);
     const [pagFilters, setPagFilters] = useState(args.pagination)
     const [dateFilters, setDateFilters] = useState(args.date)
     const [searchFilters, setSearchFilters] = useState(args.search)
     const [statusFilters, setStatusFilters] = useState(args.status)
-
+    // const [wipeData, setWipeData] = useState(false)
 
     const buildDataMap = (ordersArr: Order[]) => {
         const newDataMap: any = {}
@@ -35,18 +35,28 @@ const useOrders = (args : OrdersRequestBody = initialConstraints) => {
         return newDataMap
     }
 
-
     const fetchOrders = async (requestBody: OrdersRequestBody) => {
         setStatus(ResStatus.FETCHING);
         try {
             const ordersData: Order[] = await OrderService.orders(requestBody)
-            setDataMap(prevData => ({ ...prevData, ...buildDataMap(ordersData) }));
+            // if (wipeData) {
+                setDataArr(ordersData);
+            //     setWipeData(false)
+            // } else {
+            //     setDataArr(prevDataArr => [...prevDataArr, ...ordersData]);
+            // }
+            // setDataMap(prevData => ({ ...prevData, ...buildDataMap(ordersData) }));
             setStatus(ResStatus.SUCCESS)
         } catch (err) {
             setError(err)
             setStatus(ResStatus.ERROR);
         }
     };
+
+    // useEffect(() => {
+    //     setPagFilters((prev: any) => ({...prev, page: 0}))
+    // }, [ statusFilters.status, searchFilters.by, dateFilters.end, dateFilters.start, searchFilters.query ])
+
     useEffect(() => {
         fetchOrders({
             pagination: pagFilters,
@@ -56,15 +66,17 @@ const useOrders = (args : OrdersRequestBody = initialConstraints) => {
         });
     }, [ pagFilters, dateFilters, searchFilters, statusFilters ]);
 
+    // const orders: Order[] = useMemo(() => {
+    //    return Object.values(dataMap).sort((o1, o2) => o2.orderUpdatedAt - o1.orderUpdatedAt)
+    // }, [dataMap])
 
-    const orders: Order[] = useMemo(() => {
-       return Object.values(dataMap).sort((o1, o2) => o2.orderUpdatedAt - o1.orderUpdatedAt)
-    }, [dataMap])
-
+    const sortedOrders: Order[] = useMemo(() => {
+        return dataArr.sort((o1, o2) => o2.orderUpdatedAt - o1.orderUpdatedAt)
+    }, [dataArr])
 
     return { 
         status, 
-        orders,
+        orders: sortedOrders,
         error,
         fetchOrders,
         ResStatus,

src/pages/OrdersPage/OrderSearchBar.component.tsx

@@ -16,10 +16,11 @@ const OrderSearchBar = ({ searchFilters, setSearchFilters, status, STATUSES } :
 
     const handleInputChange = (e: any) => {
         const { currentTarget: { value } } = e
-        const trimmedValue = value.trim().toLowerCase()
-        if (trimmedValue.length) {
-            setSearchFilters({by: searchBy, query: trimmedValue });
-        }
+        console.log(value)
+        // const trimmedValue = value.toLowerCase()
+        // if (trimmedValue.length) {
+            setSearchFilters({by: searchBy, query: value.toLowerCase() });
+        // }
         setSearchQuery(value)
     }
 
@@ -42,12 +43,10 @@ const OrderSearchBar = ({ searchFilters, setSearchFilters, status, STATUSES } :
                     // variant="filled"
                     // focusBorderColor="telegram.400"
                     value={searchQuery} 
-                    onChange={handleInputChange} 
-                    onKeyDown={handleInputChange}
+                    onChange={handleInputChange}
                 />
-                <InputRightElement children={<CheckIcon color="green.500" />} />
             </InputGroup>
-            <Select maxWidth="10rem" defaultValue="id" onChange={handleSelectChange}>
+            <Select maxWidth="10rem" defaultValue="customerEmailAddress" onChange={handleSelectChange}>
                 <option value="id">Order #</option>
                 <option value="customerEmailAddress">Email</option>
                 <option value="orderTrackingCode">Tracking #</option>

src/pages/OrdersPage/OrdersPage.component.tsx

@@ -9,7 +9,7 @@ import {
     Tag,
     VisuallyHidden
 } from '@chakra-ui/react'
-// import { ChevronDownIcon } from '@chakra-ui/icons'
+import { Link } from 'react-router-dom'
 import moment from 'moment'
 
 import { Order } from 'Order';
@@ -26,11 +26,9 @@ const OrderRow = ({
         orderItems
     } 
 }: { order: Order }) => {
-    // const parseDate = (unixDate: number) => new Date(unixDate).toLocaleDateString()
-
     return (
         <Tr>
-            <Td fontSize="sm" fontWeight="semibold">{id}</Td>
+            <Td fontSize="sm" fontWeight="semibold"><Link to={`/orders/${id}`}>{id}</Link></Td>
             <Td><Tag colorScheme={tagColorMap.get(orderStatus)}>{orderStatus}</Tag></Td>
             <Td fontSize="sm" paddingX={10}>{orderItems.length} item{orderItems.length > 1 && "s"}</Td>
             <Td fontSize="sm">{customerEmailAddress}</Td>
@@ -59,26 +57,26 @@ const OrdersPage = () => {
 
     const $loader = useRef<any>();
 
-    const handleObserver = (entities: any) => {
-        const target = entities[0];
-        if (target.isIntersecting && !isLoading) {   
-            setPagFilters((prev: any) => ({...prev, page: prev.page + 1}))
-        }
-    }
+    // const handleObserver = (entities: any) => {
+    //     const target = entities[0];
+    //     if (target.isIntersecting && !isLoading) {   
+    //         setPagFilters((prev: any) => ({...prev, page: prev.page + 1}))
+    //     }
+    // }
 
-    useEffect(() => {
-         var options = {
-            root: null,
-            rootMargin: "20px",
-            threshold: 1.0
-         };
-        // initialize IntersectionObserver
-        // and attaching to Load More div
-         const observer = new IntersectionObserver(handleObserver, options);
-         if ($loader.current) {
-            observer.observe($loader.current)
-         }
-    }, []);
+    // useEffect(() => {
+    //      var options = {
+    //         root: null,
+    //         rootMargin: "20px",
+    //         threshold: 1.0
+    //      };
+    //     // initialize IntersectionObserver
+    //     // and attaching to Load More div
+    //      const observer = new IntersectionObserver(handleObserver, options);
+    //      if ($loader.current) {
+    //         observer.observe($loader.current)
+    //      }
+    // }, []);
 
     return (
         <div>

src/services/OrderService.ts

@@ -17,8 +17,8 @@ export const orderById = (apiUrl: string) => {
 
 export const orders = async (body: OrdersRequestBody): Promise<Order[]> => {
     try {
-        await sleep(1200)
         const response = await Axios.post(`${BASE_PATH}/filtered`, body)
+        await sleep(400)
         return response.data;
     } catch (error) {
         error as AxiosError;