Merge branch 'order-search' into 'dev'

Order search

See merge request !2

src/components/SearchOrder.tsx

+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { Order } from 'Order';
+
+
+
+const SearchOrder = (props: any) => {
+    const orders = props.orders;
+
+    const [searchInput, setSearchInput] = useState("");
+    const [searchResult, setSearchResult] = useState([]);
+
+    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.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: any, idx) => {
+                    // debugger
+                    return (
+                        <li key={idx}>
+                            <Link to={"/orders/" + item.orderNumber}>{item.orderNumber}</Link>
+                        </li>
+                    )
+                })} 
+            </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';
 import { Order } from 'Order';
 
 const OrderIndexPage = () => {
     let [orders, setOrders] = useState([]);
 
     useEffect(() => {
-        const apiUrl = 'http://localhost:8080/api/orders';
-        fetch(apiUrl).then((response) => response.json())
-            .then((data) => {
-                console.log('This is your data', data)
-                setOrders(data);
-            });
-    }, [setOrders])
+        OrderService.allOrders().then((res: any) => {
+            setOrders(res);
+        });
+    })
+    
+    
+    // const orderDetailsArr = orders.map((order: any, idx: any) => {
+    //     const apiUrl = 'http://localhost:8080/api/orders';
+    //     fetch(apiUrl).then((response) => response.json())
+    //         .then((data) => {
+    //             console.log('This is your data', data)
+    //             setOrders(data);
+    //         });
+    // }, [setOrders])
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails
@@ -34,6 +42,7 @@ const OrderIndexPage = () => {
                     {orderDetailsArr}
                 </tbody>
             </table>
+            <SearchOrder orders={orders}/>
         </>
     )
 }