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