90 lines
2.4 KiB
TypeScript
90 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { deleteSampleItem, useSampleItems } from "@/hooks/use-sample-items";
|
|
import { Suspense } from "react";
|
|
import Image from 'next/image';
|
|
import Link from "next/link";
|
|
import Loader from '../../components/ui/loader.svg';
|
|
|
|
export default function Sample() {
|
|
const formatDate = (date: Date) =>
|
|
Intl.DateTimeFormat("en-US").format(new Date(date));
|
|
let refreshData: any;
|
|
|
|
const DeleteButton = (itemId: any) => {
|
|
return (
|
|
<button
|
|
className="button deleteBtn"
|
|
value="Delete"
|
|
onClick={async () => {await deleteSampleItem(itemId.itemId); refreshData()}}
|
|
>
|
|
Delete
|
|
</button>
|
|
);
|
|
};
|
|
|
|
const ItemsData = () => {
|
|
const { items, error, isLoading, mutate } = useSampleItems();
|
|
refreshData = mutate;
|
|
if (!isLoading && !error && items != null) {
|
|
return items.map((item) => (
|
|
<tr key={item.id}>
|
|
<td>
|
|
<Link href={`sample/${item.id}`}>{item.testName}</Link>
|
|
</td>
|
|
<td>{item.statusCode}</td>
|
|
<td>{item.numValue}</td>
|
|
<td>{formatDate(item.createdAt)}</td>
|
|
<td>
|
|
<div className="flex flex-nowrap">
|
|
<Link className="button editBtn" href={`sample/${item.id}`}>
|
|
Edit
|
|
</Link>
|
|
<DeleteButton itemId={item.id}></DeleteButton>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
));
|
|
} else return Loading();
|
|
};
|
|
|
|
const Loading = () => (
|
|
<tr>
|
|
<td className="flex align-items-end" colSpan={5}><Image src={Loader} alt='Loading' width={62} />Loading</td>
|
|
</tr>
|
|
);
|
|
return (
|
|
|
|
<div id="container" className="flex align-items-start place-content-center">
|
|
<div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th colSpan={5}>
|
|
<Link className="button" href={`sample/create`}>
|
|
<span>Add new</span>
|
|
</Link>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Status</th>
|
|
<th>Value</th>
|
|
<th>Created At</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<Suspense fallback={Loading()}>
|
|
<ItemsData></ItemsData>
|
|
</Suspense>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{process.env.PUBLIC_API_URL}
|
|
</div>
|
|
|
|
|
|
);
|
|
}
|