From ef2fc70222401291e5bd34259571daf7388cacca Mon Sep 17 00:00:00 2001
From: Shanelle Valencia <svalencia@nisum.com>
Date: Wed, 5 May 2021 13:50:33 -0700
Subject: [PATCH] [AFP-24] :construction: Add searchOrder file to handle
 promises

---
 src/components/SearchOrder.tsx | 57 ++++++++++++++++++++++++++++++++++
 src/components/index.ts        |  3 +-
 src/pages/OrderIndexPage.tsx   | 28 ++++++++---------
 3 files changed, 73 insertions(+), 15 deletions(-)
 create mode 100644 src/components/SearchOrder.tsx

diff --git a/src/components/SearchOrder.tsx b/src/components/SearchOrder.tsx
new file mode 100644
index 0000000..1d29bb0
--- /dev/null
+++ b/src/components/SearchOrder.tsx
@@ -0,0 +1,57 @@
+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
+
+
diff --git a/src/components/index.ts b/src/components/index.ts
index 990328c..be09a48 100644
--- a/src/components/index.ts
+++ b/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
diff --git a/src/pages/OrderIndexPage.tsx b/src/pages/OrderIndexPage.tsx
index 0f37acf..8fb3938 100644
--- a/src/pages/OrderIndexPage.tsx
+++ b/src/pages/OrderIndexPage.tsx
@@ -1,12 +1,11 @@
 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}/>
+        </>
     )
 }
 
-- 
2.18.1