[AFP-104] ✨ Search now filters orders list based on search input. [@kkaminski]

src/pages/OrderIndexPage.tsx

 import React, {useState, useEffect} from 'react'
 import {OrderDetails } from 'components'
-import { OrderService } from 'services';
 import { Order } from 'Order';
 import { useAllOrders } from 'hooks'
 import {
@@ -15,47 +14,46 @@ import {
 const OrderIndexPage = () => {
     const { orders } = useAllOrders();
     const [searchInput, setSearchInput] = useState("")
-    const [allOrders, setAllOrders] = useState<any>([])
+    const [allOrders, setAllOrders] = useState<Order[]>([])
+    const [filteredOrders, setFilteredOrders] = useState<Order[]>([])
+    const [orderDetailsArr, setOrderDetailsArr] = useState<any>([])
+    const orderDetailsArrCreator = (orders: Order[]) => {
+        return orders.map((order: Order, idx: any) => {
+        return <Tr key={idx}><OrderDetails
+            date={order.orderCreatedAt} 
+            orderNumber={order.id}
+            status={order.orderStatus}
+            /></Tr>
+        })
+    }
+
 
     useEffect(() => {
         setAllOrders(orders)
     }, [orders])
 
-    const handleChange = (e: any) => {
-        console.log("e.key", e.key)
-        if (e.key === "Enter") {
-            handleClick()
+    useEffect(() => {
+        if (searchInput.length !== 0) {
+            setOrderDetailsArr(orderDetailsArrCreator(filteredOrders))
+        } else {
+            setOrderDetailsArr(orderDetailsArrCreator(allOrders))
         }
-        const value = e.target.value
-        setSearchInput(value)
-    }
-
-    const handleClick = () => {
-        console.log(searchInput)
-        console.log(allOrders)
-        const searchLength = searchInput.length
-        const newArray = []
+    }, [searchInput, allOrders, filteredOrders])
+    
+    useEffect(() => {
+        const newArray: Order[] = []
         for (const ele of allOrders) {
-            // const snippet = ele.id.slice(0, searchLength).toString()
             if (ele.id.includes(searchInput)) {
                 newArray.push(ele)
             }
         }
-        console.log("newarray", newArray)
-        if (searchLength !== 0) {
-            setAllOrders(newArray)
-        } else {
-            setAllOrders(orders)
-        }
-    }
+        setFilteredOrders(newArray)
+    }, [searchInput, allOrders])
 
-    const orderDetailsArr = allOrders.map((order: Order, idx: any) => {
-        return <Tr key={idx}><OrderDetails
-            date={order.orderCreatedAt} 
-            orderNumber={order.id}
-            status={order.orderStatus}
-            /></Tr>
-    })
+    const handleChange = (e: any) => {
+        console.log(e.target.value)
+        setSearchInput(e.target.value)
+    }
 
     return (
         <div className="table-div">
@@ -68,7 +66,6 @@ const OrderIndexPage = () => {
                 onKeyDown={handleChange}
                 >
             </Input>
-            {/* <button onClick={handleClick}>Submit</button> */}
             <br/>
             <div className="index-table">
                 <Table variant="striped" colorScheme="messenger" size="md">