feat: picked order fetch data

src/App.tsx

@@ -26,7 +26,7 @@ function App() {
           <Route path='/AvailableOrder' element={<AvailableOrder/>}/>
           <Route path='/AvailableOrderDetail/:id' element={<AvailableOrderDetail/>}/>
           <Route path='/PickedOrder' element={<PickedOrder/>}/>
-          <Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
+          <Route path='/PickedOrderDetail/:id' element={<PickedOrderDetail/>}/>
           <Route path='/History' element={<History/>}/>
           <Route path='/HistoryDetail' element={<HistoryDetail/>}/>
           <Route path='/Profile' element={<Profile/>}/>

src/components/PickedOrderCard.tsx

@@ -15,6 +15,8 @@ import OrderInterface from '../interfaces/OrderInterface';
 type paramInterface = {order : OrderInterface};
 
 export default function PickedOrderCard({order} : paramInterface) {
+  const hrefLink = `/PickedOrderDetail/${order.id}`;
+  
   return (
   <Card
     width={"80%"}
@@ -26,7 +28,7 @@ export default function PickedOrderCard({order} : paramInterface) {
     <LinkBox>
       <CardHeader>
         <Heading>
-          <LinkOverlay href="/PickedOrderDetail">
+          <LinkOverlay href={hrefLink}>
             {order.alamat}
           </LinkOverlay>
         </Heading>

src/pages/PickedOrderDetail.tsx

@@ -16,42 +16,35 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import OrderDetail from '../interfaces/OrderDetail';
 import OrderInterface from '../interfaces/OrderInterface';
-  
-const orderDummy : OrderInterface = {
-  alamat : "jl.ngawi",
-  nama_penerima : "rusdi",
-  biaya_pengiriman : 69,
-  keterangan : "aku akan datang",
-}
+import { getOrderById, getOrderDetails } from '../utils/Order';
+import { useParams } from 'react-router-dom';
 
-const detailDummy : OrderDetail[] = [
-  {
-    nama_produk : "pisau cukur",
-    quantity : 69
-  },
-  {
-    nama_produk : "ivan gunawan",
-    quantity : 420
-  },
-  {
-    nama_produk : "pisau cukur 2",
-    quantity : 692
-  },
-  {
-    nama_produk : "ivan gunawan 2",
-    quantity : 4202
-  },
-]
 
 export default function PickedOrderDetail() {
-  const [order, setOrder] = useState<OrderInterface>(orderDummy);
-  const [orderDetails, setOrderDetails] = useState<OrderDetail[]>(detailDummy);
+  const { id } = useParams();
+  const orderId = parseInt(id ? id : "0");
+  const [order, setOrder] = useState<OrderInterface>();
+  const [orderDetails, setOrderDetails] = useState<OrderDetail[]>([]);
   const [newDescription, setNewDescription] = useState("");
-  // TODO : implement pick order functionality
 
+  useEffect(() => {
+    const orderResponse = getOrderById(orderId);
+    const detailResponse = getOrderDetails(orderId);
+
+    orderResponse.then((response) => {
+      setOrder(response.data);
+      console.log("order", response.data);
+    });
+
+    detailResponse.then((response) => {
+      setOrderDetails(response.data);
+      console.log("detail", response.data);
+    });
+  }, []);
+  
   return (
     <Box
       minH={"95vh"}
@@ -64,7 +57,7 @@ export default function PickedOrderDetail() {
         py={10}
         >
         <Heading p={5}>
-          {order.alamat}
+          {order?.alamat}
         </Heading>
         
         <Stack divider={<StackDivider/>} spacing={2}>
@@ -73,7 +66,7 @@ export default function PickedOrderDetail() {
               Nama Pemesan
             </Text>
             <Text>
-              {order.nama_penerima}
+              {order?.nama_penerima}
             </Text>
           </Box>
           <Box>
@@ -81,7 +74,7 @@ export default function PickedOrderDetail() {
               Ongkos Kirim
             </Text>
             <Text>
-              {order.biaya_pengiriman}
+              {order?.biaya_pengiriman}
             </Text>
           </Box>
           <Box>
@@ -100,7 +93,7 @@ export default function PickedOrderDetail() {
               <Tbody>
                 {orderDetails.map((detail) => (
                   <Tr>
-                    <Td>{detail.nama_produk}</Td>
+                    <Td>{detail?.nama_product}</Td>
                     <Td>{detail.quantity}</Td>
                   </Tr>
                 ))}
@@ -109,6 +102,14 @@ export default function PickedOrderDetail() {
           </TableContainer>
           
         <Stack spacing={4}>
+          <Box>
+            <Text fontSize={"lg"} fontWeight={"bold"}>
+              Keterangan
+            </Text>
+            <Text>
+              {order?.keterangan}
+            </Text>
+          </Box>
           <FormControl id="new-description">
               <FormLabel>Update Keterangan</FormLabel>
               <Input name="new-description" type="text" 
@@ -117,6 +118,7 @@ export default function PickedOrderDetail() {
               borderColor={"black"}
               />
           </FormControl>
+          {/* TODO : make button functionality */}
           <Button
               bg={'blue.400'}
               color={'white'}