[AFP-97] ✨ Create 'useAllOrders' and 'useOrder' hooks for DRYer API calls (@asegers)"

src/hooks/index.ts

+export {default as useAllOrders} from './useAllOrders'
+export * from './useGoogleAuth'
+export {default as useOrder} from './useOrder'
\ No newline at end of file

src/hooks/useAllOrders.ts

+import  {useState, useEffect } from 'react'
+import { OrderService } from 'services'
+import { Order } from 'Order'
+
+enum ResStatus {
+    IDLE = "IDLE",
+    FETCHING = "FETCHING",
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR"
+}
+
+const useAllOrders = () => {
+    const [status, setStatus] = useState<ResStatus>(ResStatus.IDLE);
+    const [data, setData] = useState<Order[]>([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+    
+        const fetchOrders = async () => {
+            setStatus(ResStatus.FETCHING);
+            try {
+                const ordersData = await OrderService.allOrders()
+                setData(ordersData);
+                setStatus(ResStatus.SUCCESS)
+            } catch (err) {
+                setError(err)
+                setStatus(ResStatus.ERROR);
+            }
+        };
+
+        fetchOrders();
+    }, []);
+
+    return { status, data, orders: data, error, ResStatus };
+};
+
+export default useAllOrders;
\ No newline at end of file

src/hooks/useOrder.ts

+import  {useState, useEffect } from 'react'
+import { OrderService } from 'services'
+import { Order } from 'Order'
+
+enum ResStatus {
+    IDLE = "IDLE",
+    FETCHING = "FETCHING",
+    SUCCESS = "SUCCESS",
+    ERROR = "ERROR"
+}
+
+const useOrder = (orderId: string) => {
+    const [status, setStatus] = useState<ResStatus>(ResStatus.IDLE);
+    const [data, setData] = useState<Order | null>(null);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+    
+        const fetchOrders = async () => {
+            setStatus(ResStatus.FETCHING);
+            try {
+                const orderData = await OrderService.orderById(orderId)
+                setData(orderData);
+                setStatus(ResStatus.SUCCESS)
+            } catch (err) {
+                setError(err)
+                setStatus(ResStatus.ERROR);
+            }
+        };
+
+        fetchOrders();
+    }, []);
+
+    return { status, data, order: data, error, ResStatus };
+};
+
+export default useOrder;
\ No newline at end of file

src/pages/OrderIndexPage.tsx

 import React, {useState, useEffect} from 'react'
 import {OrderDetails} from 'components'
 import { Order } from 'Order';
+import { useAllOrders } from 'hooks'
 
 const OrderIndexPage = () => {
-    let [orders, setOrders] = useState([]);
-
-    useEffect(() => {
-        const apiUrl = 'http://localhost:8080/api/orders';
-        fetch(apiUrl).then((response) => response.json())
-            .then((data) => {
-                console.log('This is your data', data)
-                setOrders(data);
-            });
-    }, [setOrders])
+    const { orders } = useAllOrders();
 
     const orderDetailsArr = orders.map((order: Order, idx: any) => {
         return <tr key={idx}><OrderDetails

src/pages/OrderShowPage.tsx

-import React, {useState, useEffect} from 'react';
+import { useParams } from 'react-router-dom';
 import {OrderShowDetails} from 'components';
 import { Order, Item } from 'Order';
+import { useOrder } from 'hooks'
 
-const OrderShowPage = (props: any) => {
-    const location = props.match.params.id;
-    const apiUrl = 'http://localhost:8080/api/orders/' + location;
-    const [order, setOrder] = useState<Order>();
-    const [items, setItems] = useState<Item[]>()
-
-    useEffect(() => {
-        fetch(apiUrl).then((response) => response.json())
-            .then((data) => {
-                console.log('This is your order', data)
-                setOrder(data);
-                setItems(data.orderItems)
-            });
-    }, [setOrder, setItems, apiUrl])
+const OrderShowPage = () => {
+    const { id } = useParams<any>();
+    const { order} = useOrder(id)
 
     if (!order) {
         return(<></>);
     }
     
     return (
-        <>
+        <div>
             <span>
                 <h3>Order Date: {order.orderCreatedAt}</h3>
                 <h3>Order Number: {order.id}</h3>
                 <h3>Order Status: {order.orderStatus}</h3>
             </span>
             
-            <OrderShowDetails items={items}/>
-        </>
+            <OrderShowDetails items={order.orderItems}/>
+        </div>
     )
 }