diff --git a/app/app/(dashboard)/links/page.tsx b/app/app/(dashboard)/links/page.tsx
index 5010874..76b173a 100644
--- a/app/app/(dashboard)/links/page.tsx
+++ b/app/app/(dashboard)/links/page.tsx
@@ -1,58 +1,193 @@
-"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";
import { getLinks } from "@/lib/actions/getLinksAction";
import { DateRange } from "react-day-picker";
import Loading from "./loading";
-import { linkType } from "@/interfaces/types";
+import { linkType, paginationType } from "@/interfaces/types";
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination";
+import { toast } from "@/components/ui/use-toast";
+import { pageOrder, paginateOperation } from "@/lib/constants";
+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() {
+ const [paginator, setPaginator] = useState({
+ value: 1,
+ pageActive: pageOrder.ONE,
+ });
+
+ 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 };
+ });
+ } 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]);
- 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),
- })
-
- 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)
- })
- setFilteredLinks(filterLinks)
- setLoading(false)
- })
-
- },[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/app/app/(dashboard)/qrcodes/page.tsx b/app/app/(dashboard)/qrcodes/page.tsx
index 5e827ca..8937cb6 100644
--- a/app/app/(dashboard)/qrcodes/page.tsx
+++ b/app/app/(dashboard)/qrcodes/page.tsx
@@ -1,28 +1,162 @@
-"use client"
+"use client";
import { QRCodeCardComponent } from "@/components/CardComponents/QRCodeCardComponent";
-import { QRCodeType, linkType } from "@/interfaces/types";
+import { QRCodeType, linkType, paginationType } from "@/interfaces/types";
import { getLinks } from "@/lib/actions/getLinksAction";
import { Label } from "@radix-ui/react-label";
import { useEffect, useState } from "react";
import Loading from "./loading";
-
-export default function QRCodePage(){
-
- const [loading,setLoading] = useState(false);
- const [links,setLinks] = useState([])
-
- useEffect(()=>{
- setLoading(true)
- getLinks().then((res)=>{
- const linkList:linkType[] | undefined = res.links;
- setLinks(linkList)
- setLoading(false)
- })
- },[])
-
- return
-
- {loading?
:
{links?.map((qr)=>)}
}
+import { pageOrder, paginateOperation } from "@/lib/constants";
+import { toast } from "@/components/ui/use-toast";
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination";
+
+export default function QRCodePage() {
+ const [loading, setLoading] = useState
(false);
+ const [links, setLinks] = useState([]);
+
+ const [totalPages, setTotalPages] = useState(0);
+
+ const [paginator, setPaginator] = useState({
+ value: 1,
+ pageActive: pageOrder.ONE,
+ });
+
+ 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 };
+ });
+ } 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);
+ setLinks(linkList);
+ setLoading(false);
+ }
+ );
+ }, [paginator]);
+
+ return (
+
+
+ {loading ? (
+
+ ) : (
+
+ {links?.map((qr) => (
+
+ ))}
+
+
+
+
+ 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="#"
+ />
+
+
+
+
+ )}