diff --git a/app/app/(dashboard)/links/[id]/page.tsx b/app/app/(dashboard)/links/[id]/page.tsx index 973970d..e8c7438 100644 --- 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(fetchLink.title); + const [shortCode,setShortcode] = useState(fetchLink.short_code) + const shortLink:string = `${REDIRECT_URL}/${shortCode}` return (
@@ -88,17 +99,17 @@ export default function Page(params : any) { {title}
- - + - +

- {link.shortLink} + {shortLink}

- {link.longLink} + {fetchLink.long_url}

@@ -123,21 +134,21 @@ export default function Page(params : any) {
-

{months[link.dateCreated.getMonth()]} {link.dateCreated.getDate()} {link.dateCreated.getFullYear()}

+

{months[fetchLink.created_at.getMonth()]} {fetchLink.created_at.getDate()} {fetchLink.created_at.getFullYear()}

- - + - + diff --git a/app/app/(dashboard)/links/page.tsx b/app/app/(dashboard)/links/page.tsx index 497282b..5010874 100644 --- 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([]) - const [loading,setLoading] = useState(true) + 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), @@ -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() {
- {loading?:
{filteredLinks?.map((link:any) => ( + {loading?:
{filteredLinks?.map((link) => ( ))}
} diff --git a/app/app/(dashboard)/qrcodes/page.tsx b/app/app/(dashboard)/qrcodes/page.tsx index 603e63c..5e827ca 100644 --- a/app/app/(dashboard)/qrcodes/page.tsx +++ b/app/app/(dashboard)/qrcodes/page.tsx @@ -1,104 +1,21 @@ "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([]) + const [loading,setLoading] = useState(false); + const [links,setLinks] = useState([]) useEffect(()=>{ setLoading(true) getLinks().then((res)=>{ - const linkList = res.links; + const linkList:linkType[] | undefined = res.links; setLinks(linkList) setLoading(false) }) @@ -106,6 +23,6 @@ export default function QRCodePage(){ return
- {loading?:
{links.map((qr:any)=>)}
} + {loading?:
{links?.map((qr)=>)}
}
} \ No newline at end of file diff --git a/components/CardComponents/LinkCard.tsx b/components/CardComponents/LinkCard.tsx index 9f84e09..29357e8 100644 --- 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(link.short_code); + const shortLink:string = `${REDIRECT_URL}/${shortCode}` + const [title,setTitle] = useState(link.title) return (
@@ -56,7 +56,7 @@ export function LinkCard({ Share - + - + diff --git a/components/DialogComponents/DatePickerWithRange.tsx b/components/DialogComponents/DatePickerWithRange.tsx index e248876..5a3414e 100644 --- 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({ - // 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> +}) { return (
diff --git a/components/DialogComponents/EditLinkDialog.tsx b/components/DialogComponents/EditLinkDialog.tsx index 1042b69..006fa0c 100644 --- 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>, + setParentTitle:React.Dispatch> }) { - const [title,setTitle] = useState(link.title) - const [shortLink,setShortLink] = useState(link.shortLink) + const [title,setTitle] = useState(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 index 180decc..6e4ec59 100644 --- 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 index e1eeb40..413604f 100644 --- 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; } \ No newline at end of file