From c95ee5957cceaa1aebc13155edcf0b3807f1a1c4 Mon Sep 17 00:00:00 2001 From: gibbyb Date: Mon, 29 Jul 2024 14:54:29 -0500 Subject: [PATCH] General History Drawer now works --- .prod/update.sh | 0 src/app/api/get_paginated_history/route.ts | 2 +- src/components/ui/History_Drawer.tsx | 117 ++++++++++++++++----- src/server/functions.ts | 4 +- 4 files changed, 96 insertions(+), 27 deletions(-) mode change 100755 => 100644 .prod/update.sh diff --git a/.prod/update.sh b/.prod/update.sh old mode 100755 new mode 100644 diff --git a/src/app/api/get_paginated_history/route.ts b/src/app/api/get_paginated_history/route.ts index a49fd84..8fd3d7b 100644 --- a/src/app/api/get_paginated_history/route.ts +++ b/src/app/api/get_paginated_history/route.ts @@ -8,6 +8,7 @@ export const GET = async (request: Request) => { const url = new URL(request.url); const apiKey = url.searchParams.get('apikey'); const page = Number(url.searchParams.get('page')) || 1; + const perPage = Number(url.searchParams.get('per_page')) || 50; if (apiKey !== process.env.API_KEY) { const session = await auth(); if (!session) @@ -16,7 +17,6 @@ export const GET = async (request: Request) => { { status: 401 } ); } - const perPage = 50; const historyData = await getHistory(page, perPage); return NextResponse.json(historyData, { status: 200 }); } catch (error) { diff --git a/src/components/ui/History_Drawer.tsx b/src/components/ui/History_Drawer.tsx index af018ea..04674a0 100644 --- a/src/components/ui/History_Drawer.tsx +++ b/src/components/ui/History_Drawer.tsx @@ -1,3 +1,4 @@ +import React, { useState, useEffect } from "react"; import Image from "next/image"; import { Drawer, @@ -19,14 +20,56 @@ import { import { Pagination, PaginationContent, - PaginationEllipsis, PaginationItem, - PaginationLink, PaginationNext, PaginationPrevious, } from "~/components/ui/shadcn/pagination"; +// Type definitions for Paginated History API +type HistoryEntry = { + name: string; + status: string; + updatedAt: Date; +} +type PaginatedHistory = { + data: HistoryEntry[]; + meta: { + current_page: number; + per_page: number; + total_pages: number; + total_count: number; + } +} + export default function History_Drawer() { + const [history, setHistory] = useState([]); + const [page, setPage] = useState(1); + const [totalPages, setTotalPages] = useState(1); + const perPage = 5; + + useEffect(() => { + const fetchHistory = async (currentPage: number) => { + try { + const response = await fetch(`/api/get_paginated_history?page=${currentPage}&per_page=${perPage}`); + if (!response.ok) + throw new Error('Failed to fetch history'); + const data: PaginatedHistory = await response.json() as PaginatedHistory; + setHistory(data.data); + setTotalPages(data.meta.total_pages); + } catch (error) { + console.error('Error fetching history:', error); + } + }; + fetchHistory(page) + .catch((error) => { + console.error('Error fetching history:', error); + }); + }, [page]); + + const handlePageChange = (newPage: number) => { + setPage(newPage); + }; + return ( @@ -49,38 +92,50 @@ export default function History_Drawer() { - +
- Name + Name Status Updated At - - INV001 - Paid - Credit Card - + {history.map((entry, index) => ( + + {entry.name} + {entry.status} + {new Date(entry.updatedAt).toLocaleString()} + + ))}
- - - - - 1 - - - - - - - + {page > 1 && ( + + { + e.preventDefault(); + handlePageChange(page - 1); + }} + /> + + )} +

Page {page}

+ {page < totalPages && ( + + { + e.preventDefault(); + handlePageChange(page + 1); + }} + /> + + )}
@@ -88,5 +143,19 @@ export default function History_Drawer() {
- ); -}; + ); +} +// If you want to show all page numbers: +//{Array.from({ length: totalPages }).map((_, idx) => ( + // + // { + //e.preventDefault(); + //handlePageChange(idx + 1); + //}} + //>{idx + 1} + // + // +//))} + diff --git a/src/server/functions.ts b/src/server/functions.ts index 2e8c6f2..db4638e 100644 --- a/src/server/functions.ts +++ b/src/server/functions.ts @@ -53,12 +53,12 @@ export const updateEmployeeStatusByName = }; // Type definitions for Paginated History API -interface HistoryEntry { +type HistoryEntry = { name: string; status: string; updatedAt: Date; } -interface PaginatedHistory { +type PaginatedHistory = { data: HistoryEntry[]; meta: { current_page: number;