[AFP-24] 🚧 Add searchOrder file to handle promises

src/components/SearchOrder.tsx

+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+const SearchOrder = (props: any) => {
+    const orders = props.orders;
+
+    const [searchInput, setSearchInput] = useState("");
+    const [searchResult, setSearchResult] = useState([]);
+
+    console.log("ORDERS", orders)
+
+    const handleSearchInput = (event: any) => {
+        setSearchInput(event.target.value);
+    }
+
+    const resetInputField = () => {
+        setSearchInput("");
+    }
+
+    useEffect(() => {
+    if (orders.length > 0) {
+            const res = orders.filter((order: any) => 
+                order.orderNumber.includes(searchInput) || order.date.includes(searchInput)
+                // console.log(orderNum)
+            );
+            // debugger
+            setSearchResult(res);
+        }
+    }, [searchInput]);
+
+
+    return (
+        <div>
+            <h1>Search</h1>
+            <input
+                type="text"
+                placeholder="Search"
+                value={searchInput}
+                onChange={handleSearchInput}
+            />
+            <ul>
+                {searchResult.map((item, idx) => {
+                    // debugger
+                    return (
+                        <tr key={idx}>
+                            <Link to={"/orders/" + item}>item</Link>
+                        </tr>
+                    )
+                })} 
+            </ul>
+        </div>
+    );
+}
+
+export default SearchOrder
+
+

src/components/index.ts

@@ -3,4 +3,5 @@ export {default as LoginForm} from './LoginForm'
 export {default as Nav} from './Nav'
 export {default as OrderDetails} from './OrderDetails'
 export {default as SignUpForm} from './SignUpForm'
-export {default as OrderShowDetails} from './OrderShowDetails'
\ No newline at end of file
+export {default as OrderShowDetails} from './OrderShowDetails'
+export {default as SearchOrder} from './SearchOrder'
\ No newline at end of file

src/pages/OrderIndexPage.tsx

 import React, {useState, useEffect} from 'react'
-import {OrderDetails} from 'components'
+import {OrderDetails, SearchOrder} from 'components'
 import { OrderService } from 'services';
 
 const OrderIndexPage = () => {
     let [orders, setOrders] = useState([]);
     useEffect(() => {
         OrderService.allOrders().then((res: any) => {
-            console.log(res)
             setOrders(res);
         });
     })
@@ -21,18 +20,19 @@ const OrderIndexPage = () => {
     })
 
     return (
-        <table>
-            <tbody>
-                <tr>
-                    <th>order number</th>
-                    <th>date</th>
-                    <th>status</th>
-                </tr>
-                {orderDetailsArr}
-            </tbody>
-            
-        </table>
-        
+        <>
+            <table>
+                <tbody>
+                    <tr>
+                        <th>order number</th>
+                        <th>date</th>
+                        <th>status</th>
+                    </tr>
+                    {orderDetailsArr}
+                </tbody>
+            </table>
+            <SearchOrder orders={orders}/>
+        </>
     )
 }