Merge pull request #85 from vigneshshettyin/link_qr

Fixed some bugs and added some functionalities

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

@@ -125,7 +125,7 @@ export default function HomePage() {
                   className="checkbox checkbox-success checkbox-sm pointer-events-none"
                   readOnly
                 />
-                <h1 className="ml-2 ">Make a short link or QR Code</h1>
+                <h1 className="ml-2 ">Make a short link</h1>
               </AccordionTrigger>
               <AccordionContent className="flex px-6 md:flex-row flex-col">
                 <Link href="/app/links/create">
@@ -134,16 +134,6 @@ export default function HomePage() {
                     <h1 className="ml-1">Create a link</h1>
                   </Button>
                 </Link>
-                <Link href="/app/qrcodes/create">
-                  <Button
-                    size="sm"
-                    variant="default"
-                    className="md:ml-2 py-3 mt-2 md:mt-0 w-fit"
-                  >
-                    <QrCode />
-                    <h1 className="ml-1">Create a QR Code</h1>
-                  </Button>
-                </Link>
               </AccordionContent>
             </AccordionItem>
           </Accordion>

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

@@ -45,11 +45,16 @@ export default function Page(params : any) {
       Desktop: 720,
       Mobile: 420,
       Tablet: 60
+    },
+    refs:{
+      google: 20,
+      direc: 210,
+      "dub.co": 60
     }
   };
 
   return (
-    <div className="pl-5 md:pl-8 pr-2">
+    <div className="pl-5 md:pl-8 pr-2 pt-12">
       <Link href="/app/links">
       <div
         className="flex cursor-pointer w-fit"
@@ -175,14 +180,23 @@ export default function Page(params : any) {
 
       </div>
       <div className="flex justify-center md:justify-start">
+
+      <div className="flex">
       <div className="mt-8 shadow-md p-6 rounded-xl w-fit border-[0.5px]">
         <Label className="font-bold ml-3 text-lg">Devices</Label>
         <div className="mt-4 md:w-[300px] md:h-[300px] w-[250px] h-[250px]">
-
           <PieChart devices={Object.keys(link.devices ?? {})} data={Object.values(link.devices ?? {})}/>
-
         </div>
       </div>
+
+      <div className="mt-8 shadow-md p-6 rounded-xl w-fit border-[0.5px] md:ml-8 ml-0">
+        <Label className="font-bold ml-3 text-lg">Referer</Label>
+        <div className="mt-4 md:w-[300px] md:h-[300px] w-[250px] h-[250px]">
+          <PieChart devices={Object.keys(link.refs ?? {})} data={Object.values(link.refs ?? {})}/>
+        </div>
+      </div>  
+      </div>
+
       </div>
     </div>
   );

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

@@ -18,8 +18,8 @@ export default function Page() {
   const [loading,setLoading] = useState(true)
   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(2024, 4, 24), 20),
+      to: new Date(current_date.getFullYear(), current_date.getMonth(), current_date.getDate()+1),
+      from: new Date(2024, 4, 18),
   })
 
   useEffect(()=>{

components/CardComponents/LinkCard.tsx

@@ -53,7 +53,7 @@ export function LinkCard({
                   Share
                 </Button>
               </LinkShareDialog>
-              <EditLinkDialog link={{title:link.title,shortLink:shortLink}}>
+              <EditLinkDialog link={{title:link.title,shortLink:link.short_code}}>
                 <Button variant="outline" className="ml-2">
                   <Pencil size={15} className="mr-2" />
                   Edit
@@ -108,7 +108,7 @@ export function LinkCard({
             <Share2 size={15} />
           </Button>
         </LinkShareDialog>
-        <EditLinkDialog link={{title:link.title,shortLink:shortLink}}>
+        <EditLinkDialog link={{title:link.title,shortLink:link.short_code}}>
           <Button className="ml-2" variant="outline">
             <Pencil size={15} />
           </Button>

components/CardComponents/QRCodeCardComponent.tsx

@@ -54,7 +54,7 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
       <div className="flex justify-center md:justify-start">
         <div className="p-4 bg-white rounded-2xl">
           <div ref={qrCodeRef}>
-            <QRCodeCanvas value="https://reactjs.org/" size={140} />
+            <QRCodeCanvas value={shortLink} size={140} />
           </div>
         </div>
       </div>
@@ -69,15 +69,17 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
               <Download size={20} />
             </Button>
           </DownloadQRDropDown>
-            <Button variant="outline" className="ml-4">
-              <Pencil size={20} />
-            </Button>
           </div>
         </div>
         <Label className="font-medium mt-2">Website</Label>
         <div className="flex mt-2 items-center">
           <CornerDownRightIcon size="16" />
-          <Label className="hover:underline ml-2 text-sm cursor-pointer">
+          <Label onClick={()=>{
+            window.open(
+              qrcode.long_url,
+              "_blank"
+            )
+          }} className="hover:underline ml-2 text-sm cursor-pointer">
             {qrcode.long_url}
           </Label>
         </div>
@@ -97,7 +99,12 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
           </div>
           <div className="flex mt-2 md:mt-0">
             <LinkIcon className="ml-0 md:ml-4 " size={20} />
-            <h1 className="text-sm ml-2 hover:underline cursor-pointer">
+            <h1 onClick={()=>{
+            window.open(
+              shortLink,
+              "_blank"
+            )
+          }} className="text-sm ml-2 hover:underline cursor-pointer">
               {shortLink}
             </h1>
           </div>
@@ -108,9 +115,6 @@ export function QRCodeCardComponent({ qrcode }: { qrcode: any }) {
             <Download size={20} />
           </Button>
           </DownloadQRDropDown>
-          <Button variant="outline" className="ml-4">
-            <Pencil size={20} />
-          </Button>
         </div>
       </div>
     </div>

components/DialogComponents/LinkShareDialog.tsx

@@ -8,10 +8,16 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
-import { Copy, Facebook, Instagram, MessageCircleCodeIcon } from "lucide-react"
+import { Copy, Facebook, MessageCircleCodeIcon,LinkedinIcon } from "lucide-react"
 import React from "react"
 import { toast } from "../ui/use-toast"
-
+import {
+  FacebookShareButton,
+  LinkedinShareButton,
+  TwitterShareButton,
+  WhatsappShareButton
+} from "react-share";
+import { TwitterLogoIcon } from "@radix-ui/react-icons"
 export function LinkShareDialog({children,link}:{
     children : React.ReactNode,
     link:any
@@ -49,15 +55,26 @@ export function LinkShareDialog({children,link}:{
           </Button>
           </div>
         <div className="flex justify-center">
+        <WhatsappShareButton url={shortLink} title="EatMyUrl">
           <div className="flex cursor-pointer justify-center items-center h-14 w-14 mt-4 rounded-full border-2">
               <MessageCircleCodeIcon size={35}/>
           </div>
+          </WhatsappShareButton>
+          <LinkedinShareButton url={shortLink} title="Empower your links with EatMyURL's effortless shortening. Streamline sharing and make every link count. Try it now: ">
           <div className="flex ml-4 cursor-pointer justify-center items-center h-14 w-14 mt-4 rounded-full border-2">
-              <Instagram size={30}/>
+              <LinkedinIcon size={30}/>
           </div>
+          </LinkedinShareButton>
+          <FacebookShareButton url={shortLink} title="Empower your links with EatMyURL's effortless shortening. Streamline sharing and make every link count. Try it now: " >
           <div className="flex ml-4 cursor-pointer justify-center items-center h-14 w-14 mt-4 rounded-full border-2">
               <Facebook size={30}/>
           </div>
+          </FacebookShareButton>
+          <TwitterShareButton url={shortLink} title="Empower your links with EatMyURL's effortless shortening. Streamline sharing and make every link count. Try it now: ">
+          <div className="flex ml-4 cursor-pointer justify-center items-center h-14 w-14 mt-4 rounded-full border-2">
+              <TwitterLogoIcon />
+          </div>
+          </TwitterShareButton>
         </div>
         </div>
       </DialogContent>

components/NavigationBars/SideNavBar.tsx

@@ -33,9 +33,9 @@ export function SideNavBar() {
       ) : (
         <div>
           <div className="flex justify-center">
-            <CreateNewDropDown>
-              <Button className="mt-12">Create New</Button>
-            </CreateNewDropDown>
+          <Link href='/app/links/create'>
+          <Button className="mt-12">Create New</Button>
+          </Link> 
           </div>
           {/* this is a seperator */}
           <div className="border-t-2 my-4"></div>

interfaces/types.ts

@@ -12,7 +12,6 @@ export interface locationsDetails {
   percentage: number;
 }
 
-export type devicesDetails = Record<string, number>;
 
 export interface LinkType {
   id: number;
@@ -24,7 +23,8 @@ export interface LinkType {
   last7DaysEngage?: number;
   weeklyChange?: number;
   locations?: locationsDetails[];
-  devices?: devicesDetails;
+  devices?: Record<string, number>;
+  refs?: Record<string, number>
 }
 
 

lib/actions/createLinkAction.ts

@@ -1,6 +1,5 @@
 "use server"
 
-import { HTTP_STATUS } from "../constants"
 import { createPrivateLink } from "../services/privateLinkManager"
 
 export async function createLinkAction (formdata:FormData){

lib/services/privateLinkManager.ts

@@ -1,5 +1,4 @@
 import { base62_encode } from "@/lib/services/base62";
-import { NextRequest } from "next/server";
 
 import incrementCounter from "@/lib/services/counter";
 import { getServerSession } from "next-auth";
@@ -14,7 +13,7 @@ export async function createPrivateLink(formdata : FormData) {
 
   const posgresInstance = PrismaClientManager.getInstance();
   const prisma = posgresInstance.getPrismaClient();
-  const { title,long_url, status, msg } =  validateURLCreateReq(formdata);
+  const { title,long_url, status } =  await validateURLCreateReq(formdata);
   const session: ISessionType | null = await getServerSession(authOptions);
 
   if (!status) {

lib/validations/url_create.ts

@@ -1,28 +1,36 @@
-import { NextRequest } from "next/server";
 import { urlSchema } from "../zod/url";
+import cheerio from 'cheerio';
 
-import { IUrlCreateReq } from "@/interfaces/url";
+const validateURLCreateReq = async (formdata: FormData) => {
+  try {
+    const long_url = formdata.get("longUrl");
+    let title:any = formdata.get("title");
 
-const validateURLCreateReq =  (formdata: FormData) => {
-    try {
-
-      const long_url = formdata.get("longUrl");
-      const title = formdata.get("title");
-
-      // validation of title need to be done
-      const errors = urlSchema.safeParse({
-        long_url,
-      });
-      return { title,long_url, status: errors.success, msg: errors.error };
-    } catch (e) {
-      return {
-        title: "",
-        long_url: "",
-        status: false,
-        msg : JSON.stringify(e)
-      };
+    // validation of title need to be done
+    const errors = urlSchema.safeParse({
+      long_url,
+    });
+
+    const urlHit: any = long_url;
+
+    if (title?.toString().length == 0) {
+        const response = await fetch(urlHit);
+        const html = await response.text();
+        const $ = cheerio.load(html);
+        const newTitle = $('title').text();
+        title = newTitle;
     }
-  };
 
+    return { title, long_url, status: errors.success, msg: errors.error };
+  } catch (e) {
+    console.log(e)
+    return {
+      title: "",
+      long_url: "",
+      status: false,
+      msg: JSON.stringify(e),
+    };
+  }
+};
 
-export default validateURLCreateReq;
+export default validateURLCreateReq;

lib/zod/url.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 const urlSchema = z.object({
-  long_url: z.string().url(),
+  long_url: z.string().url()
 });
 
 export { urlSchema };