[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 { OrderDetails } from 'components'
+import {
+    Table,
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+    TableCaption,
+  } from "@chakra-ui/react"
 
 
 
@@ -27,6 +36,14 @@ const SearchOrder = (props: any) => {
         setSearchResult(filtered);
     }, [searchInput]);
 
+    const searchResultArr = searchResult.map((item: any, idx) => {
+        return <Tr key={idx}><OrderDetails
+            date={item.orderCreatedAt}
+            orderNumber={item.id}
+            status={item.orderStatus}/>
+        </Tr>
+    })
+
 
     return (
         <div>
@@ -37,17 +54,16 @@ const SearchOrder = (props: any) => {
                 value={searchInput}
                 onChange={handleSearchInput}
             />
-            <ul>
-
-                {searchResult.map((item: any, idx) => {
-                    // debugger
-                    return (
-                        <li key={idx}>
-                            <Link to={"/orders/" + item.id}>{item.id}</Link>
-                        </li>
-                    )
-                })} 
-            </ul>
+            <Table variant="striped" colorScheme="linkedin" size="lg">
+                <Tbody>
+                    <Tr>
+                        {/* <Th>Order number</Th>
+                        <Th>Created</Th>
+                        <Th>Order Status</Th> */}
+                    </Tr>
+                    {searchResultArr}
+                </Tbody>
+            </Table>
         </div>
     );
 }

src/pages/OrderIndexPage.tsx

@@ -19,11 +19,11 @@ const OrderIndexPage = () => {
 
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
-        return <tr key={idx}><OrderDetails
+        return <Tr key={idx}><OrderDetails
             date={order.orderCreatedAt} 
             orderNumber={order.id}
             status={order.orderStatus}
-            /></tr>
+            /></Tr>
     })
 
     return (