prod-wag-backend-automate-services-2/web_services/web-controllers/app/test/page.tsx

'use client';
import React, { useState, useEffect } from "react";
import {
    apiGetFetcher,
    apiPostFetcher,
    apiPutFetcher,
    apiDeleteFetcher,
    apiPatchFetcher,
} from "@/lib/fetcher";
import { Input } from "@/components/mutual/shadcnui/input";
import { Textarea } from "@/components/mutual/shadcnui/textarea";
import { Button } from "@/components/mutual/shadcnui/button";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/mutual/shadcnui/table";
import { Label } from "@/components/mutual/shadcnui/label";

const TestPage = () => {
    const baseUrl = "http://localhost:3000/api";
    const [postData, setPostData] = useState<any>(null);
    const [page, setPage] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(10);
    const [orderField, setOrderField] = useState<string[]>([]);
    const [orderType, setOrderType] = useState<string[]>([]);
    const [query, setQuery] = useState<any>({});

    const [pagination, setPagination] = useState<any>({
        onPage: 1,
        onPageCount: 10,
        totalPage: 1,
        totalCount: 1,
        next: false,
        back: false,
    });

    const handleBack = async () => {
        setPage(page > 1 ? page - 1 : page);
        await fetchData();
    }

    const handleNext = async () => {
        setPage(page < pagination.totalPage ? page + 1 : page);
        await fetchData();
    }
    const fetchData = async () => {
        const response = await apiPostFetcher({
            url: `${baseUrl}/tst`,
            isNoCache: true,
            body: {
                page: page,
                size: pagination.onPageCount,
                orderField: orderField,
                orderType: orderType,
                query: query,
            },
        });

        // Check if response and response.data exist before setting state
        if (response && response.data) {
            setPostData(response.data);
            // Check if pagination exists in the response
            if (response.data.pagination) {
                setPagination(response.data.pagination);
            }
        }
    };
    useEffect(() => {
        fetchData();
    }, [page, query, orderField, orderType]);


    return (
        <div>
            <Label>Page Size</Label>
            <Input
                type="number"
                value={pageSize}
                onChange={(e) => setPageSize(Number(e.target.value))}
            />
            <Label>Order Field</Label>
            <Input
                type="text"
                value={orderField.join(",")}
                onChange={(e) => setOrderField(e.target.value.split(","))}
            />
            <Label>Order Type</Label>
            <Input
                type="text"
                value={orderType.join(",")}
                onChange={(e) => setOrderType(e.target.value.split(","))}
            />
            <div>
                <p>Page: {pagination.onPage}</p>
                <p>Page Count: {pagination.onPageCount}</p>
                <p>Total Page: {pagination.totalPage}</p>
                <p>Total Count: {pagination.totalCount}</p>
                <p>Next: {pagination.next ? "true" : "false"}</p>
                <p>Back: {pagination.back ? "true" : "false"}</p>
            </div>
            <div className="flex flex-col items-center justify-start my-6">
                <h1>Post Data Page</h1>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Row</TableHead>
                            <TableHead>UUID</TableHead>
                            <TableHead>First Name</TableHead>
                            <TableHead>Last Name</TableHead>
                            <TableHead>Email</TableHead>
                            <TableHead>Phone Number</TableHead>
                            <TableHead>Country</TableHead>
                            <TableHead>Description</TableHead>
                            <TableHead>Is Deleted</TableHead>
                            <TableHead>Is Confirmed</TableHead>
                            <TableHead>Created At</TableHead>
                            <TableHead>Updated At</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {postData?.data?.map((item: any, index: number) => (
                            <TableRow key={item.uuid}>
                                <TableCell>{index + 1}</TableCell>
                                <TableCell>{item.uuid}</TableCell>
                                <TableCell>{item.firstName}</TableCell>
                                <TableCell>{item.lastName}</TableCell>
                                <TableCell>{item.email}</TableCell>
                                <TableCell>{item.phoneNumber}</TableCell>
                                <TableCell>{item.country}</TableCell>
                                <TableCell>{item.description}</TableCell>
                                <TableCell>{item.isDeleted}</TableCell>
                                <TableCell>{item.isConfirmed}</TableCell>
                                <TableCell>{item.createdAt}</TableCell>
                                <TableCell>{item.updatedAt}</TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
            <div className="absolute bottom-10 left-0 right-0">
                <div className="flex items-center justify-center gap-2 bg-amber-300 p-6">
                    {
                        pagination.back && (
                            <Button className="w-20" onClick={() => handleBack()}>Back</Button>
                        )
                    }
                    {
                        pagination.next && (
                            <Button className="w-20" onClick={() => handleNext()}>Next</Button>
                        )
                    }
                </div>
            </div>



        </div >
    );
}

export default TestPage;