From 83e9023118c4706596761c92fff3930806120ea2 Mon Sep 17 00:00:00 2001
From: DewanaGustavus <76590469+DewanaGustavus@users.noreply.github.com>
Date: Fri, 17 Nov 2023 02:59:37 +0700
Subject: [PATCH] feat: history detail fetch data
---
src/api/History.ts | 23 +++++++++
src/components/HistoryCard.tsx | 6 +--
src/interfaces/HistoryDetailInterface.ts | 11 ++---
src/interfaces/HistoryInterface.ts | 12 +++--
src/pages/History.tsx | 1 -
src/pages/HistoryDetail.tsx | 63 +++++++++++-------------
src/utils/History.ts | 14 +++++-
7 files changed, 80 insertions(+), 50 deletions(-)
diff --git a/src/api/History.ts b/src/api/History.ts
index 1057526..41c7f69 100644
--- a/src/api/History.ts
+++ b/src/api/History.ts
@@ -1,5 +1,6 @@
import axios from "axios";
import HistoryInterface from "../interfaces/HistoryInterface";
+import HistoryDetailInterface from "../interfaces/HistoryDetailInterface";
const REST_URL = "http://localhost:5000"; // TODO : using env
@@ -14,3 +15,25 @@ export async function fetchHistory(username : string) {
}
}
+export async function fetchHistoryById(historyId : number) {
+ try {
+ const API_URL = REST_URL + "/history/history/" + historyId;
+ const response = await axios.get<HistoryInterface>(API_URL);
+ return response;
+ } catch(err) {
+ alert(err);
+ throw err;
+ }
+}
+
+export async function fetchHistoryDetails(historyId : number) {
+ try {
+ const API_URL = REST_URL + "/history/detail/" + historyId;
+ const response = await axios.get<HistoryDetailInterface[]>(API_URL);
+ return response;
+ } catch(err) {
+ alert(err);
+ throw err;
+ }
+}
+
diff --git a/src/components/HistoryCard.tsx b/src/components/HistoryCard.tsx
index 5c83e14..6e4d352 100644
--- a/src/components/HistoryCard.tsx
+++ b/src/components/HistoryCard.tsx
@@ -29,7 +29,7 @@ export default function HistoryCard({history} : paramInterface) {
<CardHeader>
<Heading>
<LinkOverlay href={hrefLink}>
- {history.address}
+ {history.alamat_tujuan}
</LinkOverlay>
</Heading>
</CardHeader>
@@ -40,7 +40,7 @@ export default function HistoryCard({history} : paramInterface) {
Nama Pemesan
</Text>
<Text>
- {history.customerName}
+ {history.nama_penerima}
</Text>
</Box>
<Box>
@@ -48,7 +48,7 @@ export default function HistoryCard({history} : paramInterface) {
Ongkos Kirim
</Text>
<Text>
- {history.salary}
+ {history.biaya_pengiriman}
</Text>
</Box>
<Box>
diff --git a/src/interfaces/HistoryDetailInterface.ts b/src/interfaces/HistoryDetailInterface.ts
index c4403ff..43d5480 100644
--- a/src/interfaces/HistoryDetailInterface.ts
+++ b/src/interfaces/HistoryDetailInterface.ts
@@ -1,9 +1,8 @@
-import OrderDetail from "./OrderDetail"
export default interface HistoryDetailInterface {
- address : string
- customerName : string
- salary : number
- rating : number
- orderDetails : OrderDetail[]
+ id: number
+ history_id : number
+ product_name: string
+ quantity: number
+ price : number
}
diff --git a/src/interfaces/HistoryInterface.ts b/src/interfaces/HistoryInterface.ts
index 59a10c4..3a9c6b7 100644
--- a/src/interfaces/HistoryInterface.ts
+++ b/src/interfaces/HistoryInterface.ts
@@ -1,8 +1,10 @@
-export default interface HistoryInterface {
- id : number;
- address : string
- customerName : string
- salary : number
+export default interface History {
+ id: number
+ user_id : number
+ alamat_tujuan : string
+ id_penerima : number
+ nama_penerima : string
+ biaya_pengiriman : number
rating : number
}
diff --git a/src/pages/History.tsx b/src/pages/History.tsx
index 23d6507..ad57adf 100644
--- a/src/pages/History.tsx
+++ b/src/pages/History.tsx
@@ -8,7 +8,6 @@ import { useEffect, useState } from 'react'
import HistoryCard from '../components/HistoryCard';
import { getUser } from '../utils/LocalStorage';
import { getHistory } from '../utils/History';
-import { getUserDetail } from '../utils/Profile';
export default function History() {
diff --git a/src/pages/HistoryDetail.tsx b/src/pages/HistoryDetail.tsx
index ad6647b..a579257 100644
--- a/src/pages/HistoryDetail.tsx
+++ b/src/pages/HistoryDetail.tsx
@@ -12,38 +12,33 @@ import {
Thead,
Tr,
} from '@chakra-ui/react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom';
+import HistoryInterface from '../interfaces/HistoryInterface';
+import { getHistoryById, getHistoryDetails } from '../utils/History';
import HistoryDetailInterface from '../interfaces/HistoryDetailInterface';
-// TODO : fetch data from SOAP
-const dummyData : HistoryDetailInterface = {
- address : "jl.ngawi",
- customerName : "rusdi",
- salary : 69,
- rating : 0,
- orderDetails : [
- {
- 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 HistoryDetail() {
- const [history, setHistory] = useState<HistoryDetailInterface>(dummyData);
- // TODO : implement pick history functionality
+ const { id } = useParams();
+ const historyId= parseInt(id ? id : "0");
+ const [history, setHistory] = useState<HistoryInterface>();
+ const [historyDetails, setHistoryDetails] = useState<HistoryDetailInterface[]>([]);
+
+ useEffect(() => {
+ const historyResponse = getHistoryById(historyId);
+ const detailResponse = getHistoryDetails(historyId);
+
+ historyResponse.then((response) => {
+ setHistory(response);
+ console.log("history", response);
+ });
+
+ detailResponse.then((response) => {
+ setHistoryDetails(response);
+ console.log("detail", response);
+ });
+ }, []);
return (
<Box
@@ -57,7 +52,7 @@ export default function HistoryDetail() {
py={10}
>
<Heading p={5}>
- {history.address}
+ {history?.alamat_tujuan}
</Heading>
<Stack divider={<StackDivider/>} spacing={2}>
@@ -66,7 +61,7 @@ export default function HistoryDetail() {
Nama Pemesan
</Text>
<Text>
- {history.customerName}
+ {history?.nama_penerima}
</Text>
</Box>
<Box>
@@ -74,7 +69,7 @@ export default function HistoryDetail() {
Ongkos Kirim
</Text>
<Text>
- {history.salary}
+ {history?.biaya_pengiriman}
</Text>
</Box>
<Box>
@@ -82,7 +77,7 @@ export default function HistoryDetail() {
Rating
</Text>
<Text>
- {history.rating === 0 ? "Belum di rating" : history.rating}
+ {history?.rating === 0 ? "Belum di rating" : history?.rating}
</Text>
</Box>
<Box>
@@ -99,9 +94,9 @@ export default function HistoryDetail() {
</Tr>
</Thead>
<Tbody>
- {history.orderDetails.map((detail) => (
+ {historyDetails?.map((detail) => (
<Tr>
- <Td>{detail.nama_produk}</Td>
+ <Td>{detail.product_name}</Td>
<Td>{detail.quantity}</Td>
</Tr>
))}
diff --git a/src/utils/History.ts b/src/utils/History.ts
index 332f45b..f366baa 100644
--- a/src/utils/History.ts
+++ b/src/utils/History.ts
@@ -1,7 +1,19 @@
-import { fetchHistory } from "../api/History";
+import { fetchHistory, fetchHistoryById, fetchHistoryDetails } from "../api/History";
export async function getHistory(username : string) {
const response = await fetchHistory(username);
const histories = response.data;
return histories;
}
+
+export async function getHistoryById(historyId : number) {
+ const response = await fetchHistoryById(historyId);
+ const histories = response.data;
+ return histories;
+}
+
+export async function getHistoryDetails(historyId : number) {
+ const response = await fetchHistoryDetails(historyId);
+ const histories = response.data;
+ return histories;
+}
--
GitLab