blob: 22d5722680e1165c1d325f8b00c6b0a33b2552c5 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
'use client';
import { useEffect, useState, Suspense } from 'react'
import Search from './url'
import Header from '../components/Header'
interface TrackData {
sender: string;
receiver: string;
express: boolean;
signature: boolean;
abandon: boolean;
delivered: boolean
country_code: string;
handler: string;
history: { info: string, location: string, time: string }[];
}
export default function Track() {
return (
<>
<Header title="Track" description="Tracking your packages" />
<div className="sm:px-40 px-10 py-5 bg-zinc-800">
<form action="/track">
<div className="flex flex-row gap-1">
<input type="text" name="trackingNumber" className="border py-2 px-2 rounded-md" placeholder="Tracking Number" />
<button type="submit" className="px-5 py-2 bg-blue-600 hover:bg-blue-500 active:bg-blue-700 rounded-md">Track</button>
</div>
</form>
<Suspense fallback={<div>Loading...</div>}>
<TrackContent />
</Suspense>
</div>
</>
)
}
function TrackContent() {
const [data, setData] = useState<TrackData | null>(null);
const params = Search();
useEffect(() => {
async function fetchData() {
if (params == null) return;
const res = await fetch(`https://haystack-khaki.vercel.app/api/pkg/${params}`);
const json = await res.json();
setData(json);
}
fetchData();
}, [params]);
if (!params) return null;
if (!data) return <div>Loading...</div>;
return (
<div className="pt-2">
{!data.abandon && !data.delivered && (
<div className="p-3 bg-indigo-800 rounded-sm my-2">Package is in transit</div>
)}
{data.signature && (
<div className="p-3 bg-yellow-800 rounded-sm my-2">Signature is required when the package arrive</div>
)}
{data.abandon && (
<div className="p-3 bg-red-800 rounded-sm my-2">Package has been abandoned</div>
)}
{data.delivered && (
<div className="p-3 bg-green-800 rounded-sm my-2">Package has delivered</div>
)}
<div className="p-3 bg-gray-700 rounded-sm">
<h1 className="text-xl">Origin: {data.sender}</h1>
<h1 className="text-xl">Delivering to: {data.receiver}</h1>
</div>
<h1 className="text-lg my-2">Delivery progress</h1>
<div className="flex flex-col gap-2">
{[...data.history]
.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
.map((history, idx) => (
<div key={idx} className="p-3 bg-gray-700 rounded-sm">
<div>{history.info}</div>
<div className="text-sm">{history.location}</div>
<div>{new Date(history.time).toLocaleString()}</div>
</div>
))}
</div>
</div>
)
}
|
