[AFP-24] ✨ Integrate search feature in order index table [@svalencia]

src/components/Nav.tsx

@@ -4,7 +4,7 @@ import {useGoogleAuth} from 'hooks'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { Box, Heading, Flex, Spacer, Button } from "@chakra-ui/react"
-
+import Logo from '../img/logo.png'
 
 const Nav = () => {
     const { isSignedIn, signOut, signIn } = useGoogleAuth();
@@ -15,12 +15,11 @@ const Nav = () => {
 
     const userIcon = <FontAwesomeIcon icon={faUser} />
 
-    const logo =  require("../img/logo.png");
 
     return (
         <Flex>
             <Box>
-                <Heading>logo</Heading>
+                <Link to="/"><img src={Logo}/></Link>
             </Box>
             <Spacer />
             <Box>

src/components/SearchOrder.tsx

 import React, { useState, useEffect } from 'react'
-import { Link } from 'react-router-dom'
-import { OrderDetails } from 'components'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import {
-    Table,
-    Thead,
-    Tbody,
-    Tfoot,
-    Tr,
-    Th,
-    Td,
-    TableCaption,
-    Input,
-    Wrap,
-    WrapItem
-  } from "@chakra-ui/react"
+// import { Link } from 'react-router-dom'
+// import { OrderDetails } from 'components'
+// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// import { faSearch } from '@fortawesome/free-solid-svg-icons'
+// import {
+//     Table,
+//     Thead,
+//     Tbody,
+//     Tfoot,
+//     Tr,
+//     Th,
+//     Td,
+//     TableCaption,
+//     Input,
+//     Wrap,
+//     WrapItem
+//   } from "@chakra-ui/react"
 
 
 
 const SearchOrder = (props: any) => {
-    const { orders }  = props;
-
-    const [searchInput, setSearchInput] = useState("");
-    const [searchResult, setSearchResult] = useState<string[]>([]);
-
-    console.log("ORDERS", orders)
-
-    const searchIcon = <FontAwesomeIcon icon={faSearch} />
-
-
-    const handleSearchInput = (event: any) => {
-        setSearchInput(event.target.value);
-    }
-
-
-    useEffect(() => {
-        const filtered = orders.filter((order: any) => 
-            order.id.includes(searchInput) //|| order.date.includes(searchInput)
-        );
-        // debugger
-        setSearchResult(filtered);
-    }, [searchInput]);
-
-    const searchResultArr = searchResult.map((item: any, idx) => {
-        return <Tr key={idx}><OrderDetails
-            date={item.orderCreatedAt}
-            orderNumber={item.id}
-            status={item.orderStatus}/>
-        </Tr>
-    })
-
-
-    return (
-        <div>
-            <Wrap>
-                {/* <WrapItem>
-                    <span>Search</span> 
-                </WrapItem> */}
-                <WrapItem>
-                    {/* <input
-                        type="text"
-                        placeholder="Search"
-                        value={searchInput}
-                        onChange={handleSearchInput}
-                    /> */}
-                    <Input 
-                        focusBorderColor="gray.400" 
-                        type="text"
-                        placeholder="Search <%=searchIcon%>"
-                        value={searchInput}
-                        onChange={handleSearchInput}
-                    />
-                </WrapItem>
-
-            </Wrap>
-            <Table variant="striped" colorScheme="messenger" size="md">
-                <Thead>
-                    <Tr>
-                        <Th>Order number</Th>
-                        <Th>Created</Th>
-                        <Th>Order Status</Th>
-                    </Tr>
-                </Thead>
-                <Tbody>
-                    {searchResultArr}
-                </Tbody>
-            </Table>
-        </div>
-    );
+//     const { orders }  = props;
+
+//     const [searchInput, setSearchInput] = useState("");
+//     const [searchResult, setSearchResult] = useState<string[]>([]);
+
+//     console.log("ORDERS", orders)
+
+//     const searchIcon = <FontAwesomeIcon icon={faSearch} />
+
+
+//     const handleSearchInput = (event: any) => {
+//         setSearchInput(event.target.value);
+//     }
+
+
+//     useEffect(() => {
+//         const filtered = orders.filter((order: any) => 
+//             order.id.includes(searchInput) //|| order.date.includes(searchInput)
+//         );
+//         // debugger
+//         setSearchResult(filtered);
+//     }, [searchInput]);
+
+//     const searchResultArr = searchResult.map((item: any, idx) => {
+//         return <Tr key={idx}><OrderDetails
+//             date={item.orderCreatedAt}
+//             orderNumber={item.id}
+//             status={item.orderStatus}/>
+//         </Tr>
+//     })
+
+
+//     return (
+//         <div>
+//             <Wrap>
+//                 {/* <WrapItem>
+//                     <span>Search</span> 
+//                 </WrapItem> */}
+//                 <WrapItem>
+//                     {/* <input
+//                         type="text"
+//                         placeholder="Search"
+//                         value={searchInput}
+//                         onChange={handleSearchInput}
+//                     /> */}
+//                     <Input 
+//                         focusBorderColor="gray.400" 
+//                         type="text"
+//                         placeholder="Search <%=searchIcon%>"
+//                         value={searchInput}
+//                         onChange={handleSearchInput}
+//                     />
+//                 </WrapItem>
+
+//             </Wrap>
+//             <Table variant="striped" colorScheme="messenger" size="md">
+//                 <Thead>
+//                     <Tr>
+//                         <Th>Order number</Th>
+//                         <Th>Created</Th>
+//                         <Th>Order Status</Th>
+//                     </Tr>
+//                 </Thead>
+//                 <Tbody>
+//                     {searchResultArr}
+//                 </Tbody>
+//             </Table>
+//         </div>
+//     );
 }
 
 export default SearchOrder

src/pages/OrderIndexPage.tsx

@@ -12,13 +12,47 @@ import {
     Th,
     Td,
     TableCaption,
+    Input
   } from "@chakra-ui/react"
 
 const OrderIndexPage = () => {
     const { orders } = useAllOrders();
+    const [searchInput, setSearchInput] = useState("")
+    const [allOrders, setAllOrders] = useState<any>([])
 
+    useEffect(() => {
+        setAllOrders(orders)
+    }, [orders])
 
-    const orderDetailsArr = orders.map((order: Order, idx: any) => {
+    const handleChange = (e: any) => {
+        console.log("e.key", e.key)
+        if (e.key === "Enter") {
+            handleClick()
+        }
+        const value = e.target.value
+        setSearchInput(value)
+    }
+
+    const handleClick = () => {
+        console.log(searchInput)
+        console.log(allOrders)
+        const searchLength = searchInput.length
+        const newArray = []
+        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)
+        }
+    }
+
+    const orderDetailsArr = allOrders.map((order: Order, idx: any) => {
         return <Tr key={idx}><OrderDetails
             date={order.orderCreatedAt} 
             orderNumber={order.id}
@@ -28,7 +62,16 @@ const OrderIndexPage = () => {
 
     return (
         <div className="table-div">
-            <SearchOrder orders={orders}/>
+            <Input 
+                type="text" 
+                placeholder="Search by Order Number"
+                value={searchInput} 
+                onChange={handleChange} 
+                onKeyDown={handleChange}
+                >
+            </Input>
+            {/* <button onClick={handleClick}>Submit</button> */}
+            <br/>
             <div className="index-table">
                 <Table variant="striped" colorScheme="messenger" size="md">
                     <Thead>
@@ -39,7 +82,7 @@ const OrderIndexPage = () => {
                         </Tr>
                     </Thead>
                     <Tbody>
-                        {orderDetailsArr}
+                        { orderDetailsArr }
                     </Tbody>
                 </Table>
             </div>