From e39a94988b8cdaf71c7f6a89d3d62cb283e5ff49 Mon Sep 17 00:00:00 2001 From: Vijesh Shetty Date: Fri, 31 May 2024 23:32:53 +0530 Subject: [PATCH 1/2] added pgae navigator --- app/app/(dashboard)/links/create/page.tsx | 2 +- app/app/(dashboard)/links/page.tsx | 176 ++++++++++++++++++---- components/ui/pagination.tsx | 121 +++++++++++++++ lib/actions/getLinksAction.ts | 13 +- 4 files changed, 280 insertions(+), 32 deletions(-) create mode 100644 components/ui/pagination.tsx diff --git a/app/app/(dashboard)/links/create/page.tsx b/app/app/(dashboard)/links/create/page.tsx index 2c0159c..8edac2a 100644 --- a/app/app/(dashboard)/links/create/page.tsx +++ b/app/app/(dashboard)/links/create/page.tsx @@ -47,7 +47,7 @@ export default function CreatePage() { } setLongurl(""); setTitle(""); - + setShortLink(""); // setLoading(false); }); }} diff --git a/app/app/(dashboard)/links/page.tsx b/app/app/(dashboard)/links/page.tsx index 5010874..fab613e 100644 --- a/app/app/(dashboard)/links/page.tsx +++ b/app/app/(dashboard)/links/page.tsx @@ -1,7 +1,7 @@ -"use client" +"use client"; import { DatePickerWithRange } from "@/components/DialogComponents/DatePickerWithRange"; -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState } from "react"; import { FilterDialog } from "@/components/DialogComponents/FilterDialog"; import { LinkCard } from "@/components/CardComponents/LinkCard"; @@ -9,50 +9,174 @@ import { getLinks } from "@/lib/actions/getLinksAction"; import { DateRange } from "react-day-picker"; import Loading from "./loading"; import { linkType } from "@/interfaces/types"; +import { + Pagination, + PaginationContent, + PaginationEllipsis, + PaginationItem, + PaginationLink, + PaginationNext, + PaginationPrevious, +} from "@/components/ui/pagination"; +import { toast } from "@/components/ui/use-toast"; +export default function Page() { + const [filteredLinks, setFilteredLinks] = useState( + [] + ); + const [loading, setLoading] = useState(true); + const current_date = new Date(); + const [date, setDate] = React.useState({ + to: new Date( + current_date.getFullYear(), + current_date.getMonth(), + current_date.getDate() + 1 + ), + from: new Date(2024, 4, 18), + }); + const [totalPages,setTotalPages] = useState(0); -export default function Page() { + enum paginateOperation { + NEXT, + PREV, + CLICK + } - const [filteredLinks,setFilteredLinks] = useState([]) - const [loading,setLoading] = useState(true) - const current_date = new Date() - const [date, setDate] = React.useState({ - to: new Date(current_date.getFullYear(), current_date.getMonth(), current_date.getDate()+1), - from: new Date(2024, 4, 18), + enum pageOrder { + ONE = 0, + TWO = 1, + THREE = 2 + } + + type paginationType = { + value: number, + pageActive: pageOrder + } + + const [paginator,setPaginator] = useState({ + value: 1, + pageActive: pageOrder.ONE }) - useEffect(()=>{ - setLoading(true) - getLinks().then((res)=>{ - const linkList:linkType[] | undefined = res.links; - const from: Date | undefined = date?.from; - const to: Date | undefined = date?.to; - const filterLinks: linkType[] | undefined = linkList?.filter((link)=>{ - return (!from || link.created_at >=from) && (!to || link.created_at <= to) + const pagination = (page:pageOrder,action:paginateOperation)=>{ + if(page+paginator.value > totalPages && page+paginator.value != 1 || (paginator.pageActive +paginator.value + 1 > totalPages && action == paginateOperation.NEXT)){ + toast({ + title: "End of the links", + description:"That's all we have" + }) + return; + } + + if(paginateOperation.NEXT == action){ + if(paginator.pageActive == pageOrder.ONE) { + setPaginator((c)=>{ + return {...c,pageActive:pageOrder.TWO} + }) + } + else if(paginator.pageActive == pageOrder.TWO){ + setPaginator((c)=>{ + return {...c,pageActive:pageOrder.THREE} + }) + } + else{ + setPaginator((c)=>{ + return {value:c.value+1,pageActive:pageOrder.THREE} + }) + } + } + else if(paginateOperation.PREV == action){ + if(paginator.pageActive == pageOrder.THREE) { + setPaginator((c)=>{ + return {...c,pageActive:pageOrder.TWO} }) - setFilteredLinks(filterLinks) - setLoading(false) - }) + } + else if(paginator.pageActive == pageOrder.TWO){ + setPaginator((c)=>{ + return {...c,pageActive:pageOrder.ONE} + }) + } + else{ + setPaginator((c)=>{ + return {value:c.value - Number(c.value != 1) ,pageActive:pageOrder.ONE} + }) + } + } + else { + setPaginator((c)=>{ + return {...c,pageActive:page} + }) + } + } + + useEffect(() => { + setLoading(true); + getLinks((paginator.value + paginator.pageActive).toString()).then((res) => { + const linkList: linkType[] | undefined = res.links; + setTotalPages(res.total_pages || 0) + const from: Date | undefined = date?.from; + const to: Date | undefined = date?.to; + const filterLinks: linkType[] | undefined = linkList?.filter((link) => { + return ( + (!from || link.created_at >= from) && (!to || link.created_at <= to) + ); + }); + + setFilteredLinks(filterLinks); + setLoading(false); + }); + }, [date,paginator]); - },[date]) - return (

Links

- +
- {loading?:
{filteredLinks?.map((link) => ( - - ))}
} + {loading ? ( + + ) : ( +
+ {filteredLinks?.map((link) => ( + + ))} +
+ )} + + + + pagination(0,paginateOperation.PREV)} href="#" /> + + + pagination(pageOrder.ONE,paginateOperation.CLICK)} isActive={paginator.pageActive == pageOrder.ONE} href="#">{paginator.value} + + + pagination(pageOrder.TWO,paginateOperation.CLICK)} isActive={paginator.pageActive == pageOrder.TWO} href="#"> + {paginator.value + 1} + + + + pagination(pageOrder.THREE,paginateOperation.CLICK)} isActive={paginator.pageActive == pageOrder.THREE} href="#">{paginator.value + 2} + + + + + + pagination(0,paginateOperation.NEXT)} href="#" /> + + +
); } diff --git a/components/ui/pagination.tsx b/components/ui/pagination.tsx new file mode 100644 index 0000000..7715f05 --- /dev/null +++ b/components/ui/pagination.tsx @@ -0,0 +1,121 @@ +import * as React from "react" +import { + ChevronLeftIcon, + ChevronRightIcon, + DotsHorizontalIcon, +} from "@radix-ui/react-icons" + +import { cn } from "@/lib/utils" +import { ButtonProps, buttonVariants } from "@/components/ui/button" + +const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( +