[AFP-24] 🚧 Fix search issues with backend data [@svalencia]

src/components/SearchOrder.tsx

 import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 // import { Order } from 'Order';
-import { useAllOrders } from 'hooks'
+// import { useAllOrders } from 'hooks'
 
 
 
 const SearchOrder = (props: any) => {
-    // const orders = props.orders;
-    const { orders } = useAllOrders();
+    const { orders }  = props;
 
     const [searchInput, setSearchInput] = useState("");
-    const [searchResult, setSearchResult] = useState([]);
+    const [searchResult, setSearchResult] = useState<string[]>([]);
 
     console.log("ORDERS", orders)
 
-    // console.log("props", props)
-
 
     const handleSearchInput = (event: any) => {
         setSearchInput(event.target.value);
     }
 
-    const resetInputField = () => {
-        setSearchInput("");
-    }
 
     useEffect(() => {
-        if (orders.length > 0) {
-            const res = orders.filter((order: any) => 
-                order.id.includes(searchInput) //|| order.date.includes(searchInput)
-                // console.log(orderNum)
-            );
-            // debugger
-            // setSearchResult(res);
-        }
+        const filtered = orders.filter((order: any) => 
+            order.id.includes(searchInput) //|| order.date.includes(searchInput)
+        );
+        // debugger
+        setSearchResult(filtered);
     }, [searchInput]);
 
 
@@ -52,7 +43,7 @@ const SearchOrder = (props: any) => {
                     // debugger
                     return (
                         <li key={idx}>
-                            <Link to={"/orders/" + item.orderNumber}>{item.orderNumber}</Link>
+                            <Link to={"/orders/" + item.id}>{item.id}</Link>
                         </li>
                     )
                 })} 

src/pages/OrderIndexPage.tsx

@@ -28,6 +28,7 @@ const OrderIndexPage = () => {
 
     return (
         <div className="table-div">
+            <SearchOrder orders={orders}/>
             <Table variant="striped" colorScheme="linkedin" size="lg">
                 <Tbody>
                     <Tr>
@@ -38,7 +39,6 @@ const OrderIndexPage = () => {
                     {orderDetailsArr}
                 </Tbody>
             </Table>
-            <SearchOrder orders={orders}/>
         </div>
     )
 }