[AFP-98] 🚧 Style ui using chakra [@svalencia]

src/components/SearchOrder.tsx

 import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
-import { Order } from 'Order';
+// import { Order } from 'Order';
+import { useAllOrders } from 'hooks'
 
 
 
 const SearchOrder = (props: any) => {
-    const orders = props.orders;
+    // const orders = props.orders;
+    const { orders } = useAllOrders();
 
     const [searchInput, setSearchInput] = useState("");
     const [searchResult, setSearchResult] = useState([]);
@@ -26,12 +28,11 @@ const SearchOrder = (props: any) => {
     useEffect(() => {
         if (orders.length > 0) {
             const res = orders.filter((order: any) => 
-                order.orderNumber.includes(searchInput) //|| order.date.includes(searchInput)
+                order.id.includes(searchInput) //|| order.date.includes(searchInput)
                 // console.log(orderNum)
-
             );
             // debugger
-            setSearchResult(res);
+            // setSearchResult(res);
         }
     }, [searchInput]);
 

src/index.css

@@ -15,7 +15,7 @@ code {
     monospace;
 }
 
-tbody, tr, th, span, td {
+/* tbody, tr, th, span, td {
   border: 2px solid orangered;
 }
 
@@ -72,4 +72,4 @@ li {
 
 .nav-link:hover {
   background-color: black;
-}
\ No newline at end of file
+} */
\ No newline at end of file

src/pages/OrderIndexPage.tsx

@@ -3,14 +3,20 @@ import {OrderDetails, SearchOrder} from 'components'
 import { OrderService } from 'services';
 import { Order } from 'Order';
 import { useAllOrders } from 'hooks'
+import {
+    Table,
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+    TableCaption,
+  } from "@chakra-ui/react"
 
 const OrderIndexPage = () => {
-    // const { orders } = useAllOrders();
-    let [orders, setOrders] = useState([]);
+    const { orders } = useAllOrders();
 
-    useEffect(() => {
-        OrderService.allOrders().then((data) => setOrders(data));
-    }, [])
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails
@@ -22,16 +28,16 @@ const OrderIndexPage = () => {
 
     return (
         <>
-            <table>
-                <tbody>
-                    <tr>
-                        <th>Order number</th>
-                        <th>Created</th>
-                        <th>Order Status</th>
-                    </tr>
+            <Table variant="striped" colorScheme="teal" size="lg">
+                <Tbody>
+                    <Tr>
+                        <Th>Order number</Th>
+                        <Th>Created</Th>
+                        <Th>Order Status</Th>
+                    </Tr>
                     {orderDetailsArr}
-                </tbody>
-            </table>
+                </Tbody>
+            </Table>
             <SearchOrder orders={orders}/>
         </>
     )

src/router/MainRouter.tsx

@@ -4,23 +4,27 @@ import { Nav } from 'components'
 import { AccountPage, AuthPage, OrderIndexPage, OrderShowPage } from 'pages';
 import { GoogleAuthProvider } from 'hooks'
 import { PublicRoute, PrivateRoute } from 'router'
+import { StyleProvider } from 'styles'
 
 const MainRouter: React.FC = () => {
     return (
-        <BrowserRouter>
-            <GoogleAuthProvider>
-                <Nav />
-                <main>
-                    <Switch>
-                        <PrivateRoute path="/account" component={AccountPage} />
-                        <PublicRoute exact path="/" component={AuthPage} />
-                        <PrivateRoute path="/orders/:id" component={OrderShowPage} />
-                        <PrivateRoute path="/orders" component={OrderIndexPage} />
-                        {/* <Route component={NotFoundPage} /> */}
-                    </Switch>
-                </main>
-            </GoogleAuthProvider>
-        </BrowserRouter>
+        <StyleProvider>
+            <BrowserRouter>
+                <GoogleAuthProvider>
+                    <Nav />
+                    <main>
+                        <Switch>
+                            <PrivateRoute path="/account" component={AccountPage} />
+                            <PublicRoute exact path="/" component={AuthPage} />
+                            <PrivateRoute path="/orders/:id" component={OrderShowPage} />
+                            <PrivateRoute path="/orders" component={OrderIndexPage} />
+                            {/* <Route component={NotFoundPage} /> */}
+                        </Switch>
+                    </main>
+                </GoogleAuthProvider>
+            </BrowserRouter>
+
+        </StyleProvider>
     )
 }
 

src/styles/StyleProvider.tsx

 import { ChakraProvider } from "@chakra-ui/react"
+import {Nav} from 'components'
+
+
 
 import { extendTheme } from "@chakra-ui/react"
 // 2. Extend the theme to include custom colors, fonts, etc
@@ -9,12 +12,15 @@ const colors = {
     700: "#2a69ac",
   },
 }
+
+
+
 const theme = extendTheme({ colors })
 
-const StyleProvider = () => {
+const StyleProvider: React.FC = ({children}) => {
     return (
         <ChakraProvider theme={theme}>
-            
+            {children}
         </ChakraProvider>
     )
 }

src/styles/index.tsx

+export {default as StyleProvider} from './StyleProvider'
\ No newline at end of file