Merge branch 'styling' into 'dev'

[AFP-98] 🚧 Clean up code [@svalencia]

See merge request !8

src/components/Nav.tsx

@@ -24,7 +24,7 @@ const Nav = () => {
             <Spacer />
             <Box className="right-nav">
                 <Link className="nav-link" to="/account">{userIcon}</Link>
-                <Button><Link className="nav-link" to="/orders">All orders</Link></Button>
+                <Button><Link to="/orders">All orders</Link></Button>
                 <Button onClick={handleAuth}>{authLinkText}</Button>
             </Box>
         </Flex>

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"
-
-
-
-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>
-//     );
-}
-
-export default SearchOrder
-
-

src/components/index.ts

@@ -4,6 +4,5 @@ export {default as Nav} from './Nav'
 export {default as OrderDetails} from './OrderDetails'
 export {default as SignUpForm} from './SignUpForm'
 export {default as OrderShowDetails} from './OrderShowDetails'
-export {default as SearchOrder} from './SearchOrder'
 export {default as Login} from './Login'
 export {default as Logout} from './Logout'
\ No newline at end of file

src/index.css

@@ -86,6 +86,11 @@ li {
 }
 
 
+.nav-link {
+  margin-right: 15px;
+}
+
+
 .table-div {
   padding: 150px;
   padding-top: 80px;

src/pages/OrderIndexPage.tsx

 import React, {useState, useEffect} from 'react'
-import {OrderDetails, SearchOrder} from 'components'
+import {OrderDetails } from 'components'
 import { OrderService } from 'services';
 import { Order } from 'Order';
 import { useAllOrders } from 'hooks'
@@ -7,11 +7,8 @@ import {
     Table,
     Thead,
     Tbody,
-    Tfoot,
     Tr,
     Th,
-    Td,
-    TableCaption,
     Input
   } from "@chakra-ui/react"