added types and refactored the code

vigneshshettyin · May 28, 2024 · 75c6914 · 75c6914
1 parent f0ba69b
commit 75c6914
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 130 deletions.
diff --git a/app/app/(dashboard)/links/[id]/page.tsx b/app/app/(dashboard)/links/[id]/page.tsx
@@ -64,8 +64,19 @@ export default function Page(params : any) {
     }
   };
 
-  const [title,setTitle] = useState(link.title);
-  const [shortCode,setShortcode] = useState(link.shortLink)
+  const fetchLink = {
+    id: 1,
+    user_id: 42,
+    short_code: 'e7b9f3',
+    long_url: 'https://example.com/e7b9f3a7-0a15-4b7d-8d62-0d5f1a52e73e',
+    created_at: new Date('2023-05-28T12:34:56Z'),
+    title: 'Sample Title'
+  }
+
+  const REDIRECT_URL:string = process.env.REDIRECT_URL || "https://eurl.vshetty.dev";
+  const [title,setTitle] = useState<string | null>(fetchLink.title);
+  const [shortCode,setShortcode] = useState<string>(fetchLink.short_code)
+  const shortLink:string = `${REDIRECT_URL}/${shortCode}`
 
   return (
     <div className="pl-5 md:pl-8 pr-2 pt-12">
@@ -88,17 +99,17 @@ export default function Page(params : any) {
             {title}
           </h1>
           <div className="hidden md:block">
-            <Button onClick={()=>{copyToClipboard(link.shortLink)}} variant="outline">
+            <Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
               <Copy size={15} className="mr-2" />
               Copy
             </Button>
-            <LinkShareDialog link={link}>
+            <LinkShareDialog link={fetchLink}>
             <Button variant="outline" className="ml-2">
               <Share2 size={15} className="mr-2" />
               Share
             </Button>
             </LinkShareDialog>
-            <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={{title:link.title,shortLink:link.shortLink}}>
+            <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={fetchLink}>
               <Button variant="outline" className="ml-2">
                 <Pencil size={15} className="mr-2" />
                 Edit
@@ -112,32 +123,32 @@ export default function Page(params : any) {
             </div>
             <div className="ml-4">
                 <h1 className="text-blue-400 mt-1 hover:underline cursor-pointer w-fit">
-                <a href={"https://"+link.shortLink}>{link.shortLink}</a>
+                <a href={shortLink}>{shortLink}</a>
                 </h1>
                 <h1 className="mt-2 text-sm hover:underline cursor-pointer w-fit">
-                <a href={link.longLink}>{link.longLink}</a>
+                <a href={fetchLink.long_url}>{fetchLink.long_url}</a>
                 </h1>
             </div>
         </div>
 
         <div className="flex mt-6 md:flex-row flex-col">
           <div className="flex mt-2 md:mt-0">
             <Calendar className="ml-0 md:ml-4 " size={20} />
-            <h1 className="text-sm ml-2">{months[link.dateCreated.getMonth()]} {link.dateCreated.getDate()} {link.dateCreated.getFullYear()}</h1>
+            <h1 className="text-sm ml-2">{months[fetchLink.created_at.getMonth()]} {fetchLink.created_at.getDate()} {fetchLink.created_at.getFullYear()}</h1>
           </div>
         </div>
       </div>
     </div>
     <div className="mt-8 ml-8 md:hidden">
-        <Button onClick={()=>{copyToClipboard(link.shortLink)}} variant="outline">
+        <Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
           <Copy size={15} />
         </Button>
-        <LinkShareDialog link={link}>
+        <LinkShareDialog link={fetchLink}>
         <Button variant="outline" className="ml-2">
           <Share2 size={15} />
         </Button>
         </LinkShareDialog>
-        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={{title:link.title,shortLink:link.shortLink}}>
+        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={fetchLink}>
         <Button className="ml-2 " variant="outline">
           <Pencil size={15}/>
         </Button>

diff --git a/app/app/(dashboard)/links/page.tsx b/app/app/(dashboard)/links/page.tsx
@@ -8,12 +8,14 @@ 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";
+
 
 
 export default function Page() {
 
-  const [filteredLinks,setFilteredLinks] = useState<any>([])
-  const [loading,setLoading] = useState(true)
+  const [filteredLinks,setFilteredLinks] = useState<linkType[] | undefined>([])
+  const [loading,setLoading] = useState<Boolean>(true)
   const current_date = new Date()
   const [date, setDate] = React.useState<DateRange | undefined>({
       to: new Date(current_date.getFullYear(), current_date.getMonth(), current_date.getDate()+1),
@@ -22,11 +24,11 @@ export default function Page() {
 
   useEffect(()=>{
       setLoading(true)
-      getLinks().then((res:any)=>{
-          const linkList = res.links;
-          const from:any = date?.from;
-          const to:any = date?.to;
-          const filterLinks = linkList?.filter((link:any)=>{
+      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)
@@ -47,7 +49,7 @@ export default function Page() {
         </div>
       </div>
 
-      {loading?<Loading/>:<div>{filteredLinks?.map((link:any) => (
+      {loading?<Loading/>:<div>{filteredLinks?.map((link) => (
         <LinkCard key={link.id} link={link} />
       ))}</div>}
 

diff --git a/app/app/(dashboard)/qrcodes/page.tsx b/app/app/(dashboard)/qrcodes/page.tsx
@@ -1,111 +1,28 @@
 "use client"
 
 import { QRCodeCardComponent } from "@/components/CardComponents/QRCodeCardComponent";
-import { QRCodeType } from "@/interfaces/types";
+import { QRCodeType, linkType } 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";
-
-const dummyQRCodeData: QRCodeType[] = [
-  {
-      id: 1,
-      title: "Exclusive Product Launch Event",
-      shortLink: "qr-shortlink-1",
-      longLink: "https://example.com/longlink-1",
-      scans: 128,
-      dateCreated: new Date("2024-04-30T08:00:00")
-  },
-  {
-      id: 2,
-      title: "Limited Time Offer: 50% Discount",
-      shortLink: "qr-shortlink-2",
-      longLink: "https://example.com/longlink-2",
-      scans: 75,
-      dateCreated: new Date("2024-03-29T12:30:00")
-  },
-  {
-      id: 3,
-      title: "Free Webinar on Digital Marketing Trends",
-      shortLink: "qr-shortlink-3",
-      longLink: "https://example.com/longlink-3",
-      scans: 250,
-      dateCreated: new Date("2024-02-28T15:45:00")
-  },
-  {
-      id: 4,
-      title: "New Feature Showcase: Mobile App",
-      shortLink: "qr-shortlink-4",
-      longLink: "https://example.com/longlink-4",
-      scans: 390,
-      dateCreated: new Date("2024-01-27T11:20:00")
-  },
-  {
-      id: 5,
-      title: "Exclusive Customer Rewards Program",
-      shortLink: "qr-shortlink-5",
-      longLink: "https://example.com/longlink-5",
-      scans: 563,
-      dateCreated: new Date("2023-12-26T09:10:00")
-  },
-  {
-      id: 6,
-      title: "Launch of New Product Line",
-      shortLink: "qr-shortlink-6",
-      longLink: "https://example.com/longlink-6",
-      scans: 197,
-      dateCreated: new Date("2023-11-25T14:00:00")
-  },
-  {
-      id: 7,
-      title: "Customer Feedback Survey",
-      shortLink: "qr-shortlink-7",
-      longLink: "https://example.com/longlink-7",
-      scans: 821,
-      dateCreated: new Date("2023-10-24T10:05:00")
-  },
-  {
-      id: 8,
-      title: "Special Holiday Season Offer",
-      shortLink: "qr-shortlink-8",
-      longLink: "https://example.com/longlink-8",
-      scans: 632,
-      dateCreated: new Date("2023-09-23T13:40:00")
-  },
-  {
-      id: 9,
-      title: "Product Launch Giveaway",
-      shortLink: "qr-shortlink-9",
-      longLink: "https://example.com/longlink-9",
-      scans: 448,
-      dateCreated: new Date("2023-08-22T16:55:00")
-  },
-  {
-      id: 10,
-      title: "Year-End Clearance Sale",
-      shortLink: "qr-shortlink-10",
-      longLink: "https://example.com/longlink-10",
-      scans: 914,
-      dateCreated: new Date("2023-07-21T08:30:00")
-  }
-];
 
 export default function QRCodePage(){
 
-    const [loading,setLoading] = useState(false);
-    const [links,setLinks] = useState<any>([])
+    const [loading,setLoading] = useState<Boolean>(false);
+    const [links,setLinks] = useState<linkType[] | undefined>([])
 
     useEffect(()=>{
         setLoading(true)
         getLinks().then((res)=>{
-            const linkList = res.links;
+            const linkList:linkType[] | undefined = res.links;
             setLinks(linkList)
             setLoading(false)
         })
     },[])
 
     return <div className="pr-6 pl-4 md:pl-8 pt-8">
     <Label className="text-3xl font-bold">QR Codes</Label>
-    {loading?<Loading/>:<div>{links.map((qr:any)=><QRCodeCardComponent key={qr.id} qrcode={qr}/>)}</div>}
+    {loading?<Loading/>:<div>{links?.map((qr)=><QRCodeCardComponent key={qr.id} qrcode={qr}/>)}</div>}
     </div>
 }
diff --git a/components/CardComponents/LinkCard.tsx b/components/CardComponents/LinkCard.tsx
@@ -16,7 +16,7 @@ import { Button } from "../ui/button";
 import { EditLinkDialog } from "../DialogComponents/EditLinkDialog";
 import { copyToClipboard } from "@/lib/utils";
 import { LinkShareDialog } from "../DialogComponents/LinkShareDialog";
-import { LinkType } from "@/interfaces/types";
+import { linkType } from "@/interfaces/types";
 import { useState } from "react";
 
 const months = [
@@ -27,12 +27,12 @@ const months = [
 export function LinkCard({
   link,
 }: {
-  link: any;
+  link: linkType;
 }) {
-  const REDIRECT_URL = process.env.REDIRECT_URL || "https://eurl.vshetty.dev";
-  const shortLink:string = `${REDIRECT_URL}/${link.short_code}`
-  const [shortCode,setShortcode] = useState(link.short_code); 
-  const [title,setTitle] = useState(link.title)
+  const REDIRECT_URL:string = process.env.REDIRECT_URL || "https://eurl.vshetty.dev";
+  const [shortCode,setShortcode] = useState<string>(link.short_code); 
+  const shortLink:string = `${REDIRECT_URL}/${shortCode}`
+  const [title,setTitle] = useState<string | null>(link.title)
 
   return (
     <div className="flex mt-6 p-6 flex-col rounded-xl border-[0.5px] shadow-md">
@@ -56,7 +56,7 @@ export function LinkCard({
                   Share
                 </Button>
               </LinkShareDialog>
-              <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={{title:link.title,shortLink:link.short_code,id:link.id}}>
+              <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
                 <Button variant="outline" className="ml-2">
                   <Pencil size={15} className="mr-2" />
                   Edit
@@ -86,7 +86,7 @@ export function LinkCard({
             <div className="flex">
               <BarChart2 size={20} />
               <h1 className="text-sm ml-2 hover:underline cursor-pointer">
-                {link.engagement}{" "}
+                1{" "}
                 <HoverCard>
                   <HoverCardTrigger>engagement</HoverCardTrigger>
                   <HoverCardContent>
@@ -111,7 +111,7 @@ export function LinkCard({
             <Share2 size={15} />
           </Button>
         </LinkShareDialog>
-        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={{title:link.title,shortLink:link.short_code,id:link.id}}>
+        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
           <Button className="ml-2" variant="outline">
             <Pencil size={15} />
           </Button>

diff --git a/components/DialogComponents/DatePickerWithRange.tsx b/components/DialogComponents/DatePickerWithRange.tsx
@@ -14,12 +14,11 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover"
 
-export function DatePickerWithRange({date,setDate,current_date}:any) {
-    // const current_date = new Date()
-    // const [date, setDate] = React.useState<DateRange | undefined>({
-    //     from: new Date(current_date.getFullYear(), current_date.getMonth(), current_date.getDate()),
-    //     to: addDays(new Date(2022, 0, 20), 20),
-    //   })
+export function DatePickerWithRange({date,setDate,current_date}:{
+  date:DateRange | undefined,
+  current_date:Date|undefined,
+  setDate: React.Dispatch<React.SetStateAction<DateRange | undefined>>
+}) {
 
   return (
     <div className={cn("grid gap-2")}>

diff --git a/components/DialogComponents/EditLinkDialog.tsx b/components/DialogComponents/EditLinkDialog.tsx
@@ -17,21 +17,22 @@ import { HTTP_STATUS } from "@/lib/constants";
 import { Lock } from "lucide-react";
 import { useState } from "react";
 import { toast } from "../ui/use-toast";
+import { linkType } from "@/interfaces/types";
 
 export function EditLinkDialog({ children,link,setShortcode,setParentTitle }: {
   children:React.ReactNode,
-  link: any,
-  setShortcode:any,
-  setParentTitle:any
+  link: linkType,
+  setShortcode:React.Dispatch<React.SetStateAction<string>>,
+  setParentTitle:React.Dispatch<React.SetStateAction<string | null>>
 }) {
-  const [title,setTitle] = useState(link.title)
-  const [shortLink,setShortLink] = useState(link.shortLink)
+  const [title,setTitle] = useState<string>(link.title || "")
+  const [shortLink,setShortLink] = useState(link.short_code)
 
   const updateLink = async () =>{
       const formdata = new FormData();
       formdata.append('title',title);
       formdata.append('short_code',shortLink)
-      formdata.append('linkId',link.id)
+      formdata.append('linkId',link.id.toString())
       const new_title = title;
       const new_short_code = shortLink;
 

diff --git a/components/DialogComponents/LinkShareDialog.tsx b/components/DialogComponents/LinkShareDialog.tsx
@@ -18,12 +18,14 @@ import {
   WhatsappShareButton
 } from "react-share";
 import { TwitterLogoIcon } from "@radix-ui/react-icons"
+import { linkType } from "@/interfaces/types"
+
 export function LinkShareDialog({children,link}:{
     children : React.ReactNode,
-    link:any
+    link: linkType
 }) {
 
-  const REDIRECT_URL = process.env.REDIRECT_URL || "https://eurl.vshetty.dev";
+  const REDIRECT_URL:string = process.env.REDIRECT_URL || "https://eurl.vshetty.dev";
   const shortLink:string = `${REDIRECT_URL}/${link.short_code}` 
 
   function copyToClipboard(){

diff --git a/interfaces/types.ts b/interfaces/types.ts
@@ -61,4 +61,13 @@ export type publicLinkType =  {
     longUrl : string;
     shortUrl : string,
     clicks? : string
+}
+
+export type linkType = {
+  id:number,
+  user_id: number;
+  short_code: string;
+  long_url: string;
+  created_at: Date;
+  title: string | null;
 }