Merge pull request #97 from vigneshshettyin/new_link

app/[short_id]/route.ts

@@ -5,19 +5,32 @@ import {
   publishUserAgent,
 } from "@/lib/services/redisPublicGenerate";
 import { NextRequest } from "next/server";
+import PrismaClientManager from "@/lib/services/pgConnect";
 
 export async function GET(req: NextRequest) {
   const path = req.nextUrl.pathname;
   const shortCode = path.replace("/", "");
 
   if (!checkIfShortCodePublic(shortCode)) {
-    return RESPONSE(
-      {
-        error: "Invalid input",
-        moreinfo: "We are currently not supporting private short codes",
-      },
-      HTTP_STATUS.BAD_REQUEST
-    );
+      // click analytics yet to be added
+      const prisma = PrismaClientManager.getInstance().getPrismaClient();
+      const link:any = await prisma.links.findFirst({
+        where:{
+          short_code:shortCode
+        }
+      })
+
+      if(!link){
+        return RESPONSE(
+          {
+            error: "Invalid input",
+            moreinfo: "Short link generated is invalid or expired",
+          },
+          HTTP_STATUS.BAD_REQUEST
+        );
+      }
+
+      return Response.redirect(link?.long_url,301)
   }
 
   const long_url = await getLongUrl(shortCode);

app/app/(dashboard)/links/[id]/page.tsx

@@ -17,6 +17,7 @@ import { LinkShareDialog } from "@/components/DialogComponents/LinkShareDialog";
 import { EditLinkDialog } from "@/components/DialogComponents/EditLinkDialog";
 import { copyToClipboard } from "@/lib/utils";
 import { LinkType } from "@/interfaces/types";
+import { useState } from "react";
 
 const months = [
   "January", "February", "March", "April", "May", "June",
@@ -63,6 +64,20 @@ export default function Page(params : any) {
     }
   };
 
+  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">
       <Link href="/app/links">
@@ -81,20 +96,20 @@ export default function Page(params : any) {
       <div className="flex flex-col ml-6 w-full">
         <div className="flex justify-between ">
           <h1 className="text-xl font-bold">
-            {link.title}
+            {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 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
@@ -108,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 link={{title:link.title,shortLink:link.shortLink}}>
+        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={fetchLink}>
         <Button className="ml-2 " variant="outline">
           <Pencil size={15}/>
         </Button>

app/app/(dashboard)/links/create/page.tsx

@@ -116,7 +116,7 @@ export default function CreatePage() {
                   <Label className="text-gray-400 ml-2">(Optional)</Label>
                 </div>
                 <Input
-                  name="shortLink"
+                  name="short_code"
                   value={shortLink}
                   onChange={(e) => setShortLink(e.target.value)}
                   className="mt-2 md:mt-0"

app/app/(dashboard)/links/page.tsx

@@ -1,21 +1,21 @@
 "use client"
 
 import { DatePickerWithRange } from "@/components/DialogComponents/DatePickerWithRange";
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { FilterDialog } from "@/components/DialogComponents/FilterDialog";
 import { LinkCard } from "@/components/CardComponents/LinkCard";
-import { LinkType } from "@/interfaces/types";
+
 import { getLinks } from "@/lib/actions/getLinksAction";
 import { DateRange } from "react-day-picker";
-import { addDays } from "date-fns";
-import { Divide } from "lucide-react";
 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),
@@ -24,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)
@@ -49,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>}
 

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>
 }

app/page.tsx

@@ -22,7 +22,7 @@ export default function Home() {
 
   useEffect(() => {
     setLoading(true);
-    const dataString: any = localStorage.getItem("links");
+    const dataString = localStorage.getItem("links") as string;
     parsePublicRecords(dataString).then((s) => {
       setPublicLinks(s);
       setLoading(false);
@@ -51,7 +51,7 @@ export default function Home() {
       description: "The link is valid only for 2hrs !!",
     });
     setLongurlInput("");
-    updateLocalStorage({ shortUrl: response.shortUrl, longUrl: longurlInput });
+    updateLocalStorage({ shortUrl: response.shortUrl as string, longUrl: longurlInput });
   };
 
   return (

components/CardComponents/LinkCard.tsx

@@ -16,7 +16,8 @@ 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 = [
   "January", "February", "March", "April", "May", "June",
@@ -26,10 +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 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">
@@ -40,7 +43,7 @@ export function LinkCard({
         <div className="flex flex-col ml-6 w-full">
           <div className="flex justify-between ">
             <h1 className="text-lg font-bold hover:underline cursor-pointer">
-              {link.title}
+              {title}
             </h1>
             <div className="hidden md:block">
               <Button onClick={()=>{copyToClipboard(shortLink)}} variant="outline">
@@ -53,7 +56,7 @@ export function LinkCard({
                   Share
                 </Button>
               </LinkShareDialog>
-              <EditLinkDialog link={{title:link.title,shortLink:link.short_code}}>
+              <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
                 <Button variant="outline" className="ml-2">
                   <Pencil size={15} className="mr-2" />
                   Edit
@@ -83,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>
@@ -108,7 +111,7 @@ export function LinkCard({
             <Share2 size={15} />
           </Button>
         </LinkShareDialog>
-        <EditLinkDialog link={{title:link.title,shortLink:link.short_code}}>
+        <EditLinkDialog setShortcode={setShortcode} setParentTitle={setTitle} link={link}>
           <Button className="ml-2" variant="outline">
             <Pencil size={15} />
           </Button>