fixed some issues

vigneshshettyin · May 31, 2024 · 5b22bc1 · 5b22bc1
1 parent e39a949
commit 5b22bc1
Show file tree

Hide file tree

Showing 5 changed files with 273 additions and 124 deletions.
diff --git a/app/app/(dashboard)/links/create/page.tsx b/app/app/(dashboard)/links/create/page.tsx
@@ -78,21 +78,6 @@ export default function CreatePage() {
               />
             </div>
 
-            {/* <div>
-            <div className="flex mt-12">
-              <Label className="font-bold text-xl">QR Code</Label>
-              <Label className="ml-2 text-gray-400 text-xl">(optional)</Label>
-            </div>
-
-            <div className="mt-4 flex">
-              <Switch checked={requireQRCode} onClick={()=>setRequireQRCode(q=>!q)} />
-              <h1 className="ml-2 text-sm">
-                {" "}
-                Generate a QR Code to share anywhere people can see it{" "}
-              </h1>
-            </div>
-          </div> */}
-
             <div className="pr-4">
               <div className="mt-10">
                 <Label className="font-bold text-xl">Short Link</Label>

diff --git a/app/app/(dashboard)/links/page.tsx b/app/app/(dashboard)/links/page.tsx
@@ -8,7 +8,7 @@ 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,
@@ -19,6 +19,7 @@ import {
   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<linkType[] | undefined>(
@@ -35,97 +36,83 @@ export default function Page() {
     from: new Date(2024, 4, 18),
   });
 
-  const [totalPages,setTotalPages] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
 
-  enum paginateOperation {
-    NEXT,
-    PREV,
-    CLICK
-  }
-
-  enum pageOrder {
-    ONE = 0,
-    TWO = 1,
-    THREE = 2
-  }
-
-  type paginationType = {
-    value: number,
-    pageActive: pageOrder
-  }
-
-  const [paginator,setPaginator] = useState<paginationType>({
+  const [paginator, setPaginator] = useState<paginationType>({
     value: 1,
-    pageActive: pageOrder.ONE
-  })
+    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;
-      }
+  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}
-          })
-        }
+    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 {
-          setPaginator((c)=>{
-            return {...c,pageActive:page}
-          })
+    } 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)
-        );
-      });
+    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]);
+        setFilteredLinks(filterLinks);
+        setLoading(false);
+      }
+    );
+  }, [date, paginator]);
 
   return (
     <div className="pt-10 md:pl-6 pl-2 w-full pr-2">
@@ -156,24 +143,48 @@ export default function Page() {
       <Pagination className="mt-14">
         <PaginationContent>
           <PaginationItem>
-            <PaginationPrevious onClick={()=>pagination(0,paginateOperation.PREV)} href="#" />
+            <PaginationPrevious
+              onClick={() => pagination(0, paginateOperation.PREV)}
+              href="#"
+            />
           </PaginationItem>
           <PaginationItem>
-            <PaginationLink onClick={()=>pagination(pageOrder.ONE,paginateOperation.CLICK)} isActive={paginator.pageActive == pageOrder.ONE} href="#">{paginator.value}</PaginationLink>
+            <PaginationLink
+              onClick={() => pagination(pageOrder.ONE, paginateOperation.CLICK)}
+              isActive={paginator.pageActive == pageOrder.ONE}
+              href="#"
+            >
+              {paginator.value}
+            </PaginationLink>
           </PaginationItem>
           <PaginationItem>
-            <PaginationLink onClick={()=>pagination(pageOrder.TWO,paginateOperation.CLICK)} isActive={paginator.pageActive == pageOrder.TWO} href="#">
-            {paginator.value + 1}
+            <PaginationLink
+              onClick={() => pagination(pageOrder.TWO, paginateOperation.CLICK)}
+              isActive={paginator.pageActive == pageOrder.TWO}
+              href="#"
+            >
+              {paginator.value + 1}
             </PaginationLink>
           </PaginationItem>
           <PaginationItem>
-            <PaginationLink onClick={()=>pagination(pageOrder.THREE,paginateOperation.CLICK)} isActive={paginator.pageActive == pageOrder.THREE} href="#">{paginator.value + 2}</PaginationLink>
+            <PaginationLink
+              onClick={() =>
+                pagination(pageOrder.THREE, paginateOperation.CLICK)
+              }
+              isActive={paginator.pageActive == pageOrder.THREE}
+              href="#"
+            >
+              {paginator.value + 2}
+            </PaginationLink>
           </PaginationItem>
           <PaginationItem>
             <PaginationEllipsis />
           </PaginationItem>
           <PaginationItem>
-            <PaginationNext onClick={()=>pagination(0,paginateOperation.NEXT)} href="#" />
+            <PaginationNext
+              onClick={() => pagination(0, paginateOperation.NEXT)}
+              href="#"
+            />
           </PaginationItem>
         </PaginationContent>
       </Pagination>