From afad7c082499ef26c9a9f218aa000d9a78eac401 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Thu, 16 Nov 2023 23:36:09 +0700
Subject: [PATCH] feat: available order detail data show
---
src/App.tsx | 2 +-
src/api/Order.ts | 26 +++++++++++-
src/components/AvailableOrderCard.tsx | 4 +-
src/interfaces/OrderDetail.ts | 2 +-
src/pages/AvailableOrderDetail.tsx | 61 ++++++++++++---------------
src/utils/Order.ts | 12 +++++-
6 files changed, 69 insertions(+), 38 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index fef6093..4f806e8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -24,7 +24,7 @@ function App() {
<Routes>
<Route path='/Balance' element={<Balance/>}/>
<Route path='/AvailableOrder' element={<AvailableOrder/>}/>
- <Route path='/AvailableOrderDetail' element={<AvailableOrderDetail/>}/>
+ <Route path='/AvailableOrderDetail/:id' element={<AvailableOrderDetail/>}/>
<Route path='/PickedOrder' element={<PickedOrder/>}/>
<Route path='/PickedOrderDetail' element={<PickedOrderDetail/>}/>
<Route path='/History' element={<History/>}/>
diff --git a/src/api/Order.ts b/src/api/Order.ts
index ca415e0..e40bedb 100644
--- a/src/api/Order.ts
+++ b/src/api/Order.ts
@@ -1,5 +1,6 @@
import axios from "axios";
import OrderInterface from "../interfaces/OrderInterface";
+import OrderDetail from "../interfaces/OrderDetail";
const REST_URL = "http://localhost:5000"; // TODO : using env
@@ -12,4 +13,27 @@ export async function fetchAvailableOrder() {
alert(err);
throw err;
}
-}
\ No newline at end of file
+}
+
+export async function fetchOrderById(orderId : number) {
+ try {
+ const API_URL = REST_URL + "/order/order/" + orderId;
+ const response = await axios.get<OrderInterface>(API_URL);
+ return response;
+ } catch(err) {
+ alert(err);
+ throw err;
+ }
+}
+
+export async function fetchOrderDetails(orderId : number) {
+ try {
+ const API_URL = REST_URL + "/order/order-details/" + orderId;
+ const response = await axios.get<OrderDetail[]>(API_URL);
+ return response;
+ } catch(err) {
+ alert(err);
+ throw err;
+ }
+}
+
diff --git a/src/components/AvailableOrderCard.tsx b/src/components/AvailableOrderCard.tsx
index 7d2be41..1ca827c 100644
--- a/src/components/AvailableOrderCard.tsx
+++ b/src/components/AvailableOrderCard.tsx
@@ -15,6 +15,8 @@ import OrderInterface from '../interfaces/OrderInterface';
type paramInterface = {order : OrderInterface};
export default function AvailableOrderCard({order} : paramInterface) {
+ const hrefLink = `/AvailableOrderDetail/${order.id}`;
+
return (
<Card
width={"80%"}
@@ -26,7 +28,7 @@ export default function AvailableOrderCard({order} : paramInterface) {
<LinkBox>
<CardHeader>
<Heading>
- <LinkOverlay href="/AvailableOrderDetail">
+ <LinkOverlay href={hrefLink}>
{order.alamat}
</LinkOverlay>
</Heading>
diff --git a/src/interfaces/OrderDetail.ts b/src/interfaces/OrderDetail.ts
index 2c8d017..ce03053 100644
--- a/src/interfaces/OrderDetail.ts
+++ b/src/interfaces/OrderDetail.ts
@@ -1,7 +1,7 @@
export default interface OrderDetail {
id_pesanan ?: number
- nama_produk ?: string
+ nama_product ?: string
quantity ?: number
harga ?: number
}
\ No newline at end of file
diff --git a/src/pages/AvailableOrderDetail.tsx b/src/pages/AvailableOrderDetail.tsx
index 04f680c..cc02093 100644
--- a/src/pages/AvailableOrderDetail.tsx
+++ b/src/pages/AvailableOrderDetail.tsx
@@ -13,39 +13,33 @@ 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';
-
-// TODO : fetch data from SOAP
-const orderDummy : OrderInterface = {
- alamat : "jl.ngawi",
- nama_penerima : "rusdi",
- biaya_pengiriman : 69,
-}
-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
- },
-]
+import { useParams } from 'react-router-dom';
+import { getOrderById, getOrderDetails } from '../utils/Order';
+
export default function AvailableOrderDetail() {
- const [order, setOrder] = useState<OrderInterface>(orderDummy);
- const [orderDetails, setOrderDetails] = useState<OrderDetail[]>(detailDummy);
- // TODO : implement pick order functionality
+ const { id } = useParams();
+ const orderId = parseInt(id ? id : "0");
+ const [order, setOrder] = useState<OrderInterface>();
+ const [orderDetails, setOrderDetails] = useState<OrderDetail[]>([]);
+
+ 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
@@ -59,7 +53,7 @@ export default function AvailableOrderDetail() {
py={10}
>
<Heading p={5}>
- {order.alamat}
+ {order?.alamat}
</Heading>
<Stack divider={<StackDivider/>} spacing={2}>
@@ -68,7 +62,7 @@ export default function AvailableOrderDetail() {
Nama Pemesan
</Text>
<Text>
- {order.nama_penerima}
+ {order?.nama_penerima}
</Text>
</Box>
<Box>
@@ -76,7 +70,7 @@ export default function AvailableOrderDetail() {
Ongkos Kirim
</Text>
<Text>
- {order.biaya_pengiriman}
+ {order?.biaya_pengiriman}
</Text>
</Box>
<Box>
@@ -95,13 +89,14 @@ export default function AvailableOrderDetail() {
<Tbody>
{orderDetails.map((detail) => (
<Tr>
- <Td>{detail.nama_produk}</Td>
+ <Td>{detail.nama_product}</Td>
<Td>{detail.quantity}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
+ {/* TODO : implement pick order */}
<Button
display={{ base: 'none', md: 'inline-flex' }}
fontSize={'sm'}
diff --git a/src/utils/Order.ts b/src/utils/Order.ts
index ecf0873..63a48a6 100644
--- a/src/utils/Order.ts
+++ b/src/utils/Order.ts
@@ -1,6 +1,16 @@
-import { fetchAvailableOrder } from "../api/Order";
+import { fetchAvailableOrder, fetchOrderById, fetchOrderDetails } from "../api/Order";
export async function getAvailableOrder() {
const userDetail = await fetchAvailableOrder();
return userDetail;
+}
+
+export async function getOrderById(orderId : number) {
+ const userDetail = await fetchOrderById(orderId);
+ return userDetail;
+}
+
+export async function getOrderDetails(orderId : number) {
+ const userDetail = await fetchOrderDetails(orderId);
+ return userDetail;
}
\ No newline at end of file
--
GitLab