Skip to content

Commit

Permalink
Merge pull request #116 from vigneshshettyin/clicks
Browse files Browse the repository at this point in the history 
added analytics
  • Loading branch information
@VijeshVS
VijeshVS authored Jun 11, 2024
2 parents eee045a + 62f1a8a commit 4d71583
Show file tree
Hide file tree
Showing 29 changed files with 612 additions and 152 deletions.
98 changes: 58 additions & 40 deletions app/app/(dashboard)/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,29 @@ import {
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
import { gettingStartedStatus } from "@/interfaces/types";
import Link from "next/link";
import { useEffect, useState } from "react";
import { getTutorialStatus } from "@/lib/actions/getStatusAction";
import { HTTP_STATUS } from "@/lib/constants";
import { useRouter } from "next/navigation";
import Loading from "./loading";
import { toast } from "@/components/ui/use-toast";

export default function HomePage() {
const checkboxConfig: gettingStartedStatus = {
clickLink: true,
createLink: true,
checkAnalytics: false,
};

checkboxConfig.progressValue = Math.round(
((Number(checkboxConfig.clickLink) +
Number(checkboxConfig.createLink) +
Number(checkboxConfig.checkAnalytics)) /
3) *
100
);
const [linkId,setlinkId] = useState(-1)
const [loading,setLoading] = useState(false)
const router = useRouter()

useEffect(()=>{
setLoading(true)
getTutorialStatus().then((res)=>{
setlinkId(res.linkId)
setLoading(false)
})
},[])

if(loading) return <Loading/>

return (
<div className="pt-8 pl-2 md:pl-4 w-full pr-4">
Expand Down Expand Up @@ -96,7 +102,18 @@ export default function HomePage() {
</div>
<div className="flex-1 flex justify-center items-center flex-col py-2 md:py-0">
<h1 className="font-bold text-sm">View Analytics</h1>
<Button variant="outline" size="sm" className="text-sm mt-2">
<Button onClick={()=>{
if(linkId != -1){
router.push(`/app/links/${linkId}`)
}
else{
toast({
title:"Create a link",
description:"Create atleast one link to continue"
})
router.push('/app/links/create')
}
}} variant="outline" size="sm" className="text-sm mt-2">
Go to Analysis
</Button>
</div>
Expand All @@ -112,20 +129,17 @@ export default function HomePage() {
Getting Started with EatMyUrl
</h1>
<div className="flex">
<h1>{checkboxConfig.progressValue}%</h1>

</div>
</div>

<Accordion className="mt-3" type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="flex items-center">
<input
checked={checkboxConfig.createLink}
type="checkbox"
className="checkbox checkbox-success checkbox-sm pointer-events-none"
readOnly
/>
<h1 className="ml-2 ">Make a short link</h1>
<div className="w-4 h-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#3c7cec" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</div>
<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">
Expand All @@ -141,12 +155,9 @@ export default function HomePage() {
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="flex items-center">
<input
checked={checkboxConfig.clickLink}
type="checkbox"
className="checkbox checkbox-success checkbox-sm pointer-events-none "
readOnly
/>
<div className="w-4 h-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#3c7cec" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</div>
<h1 className="ml-2">Click it, scan it, or share it.</h1>
</AccordionTrigger>
<AccordionContent className="flex px-6 md:flex-row flex-col">
Expand All @@ -173,16 +184,24 @@ export default function HomePage() {
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="flex items-center">
<input
checked={checkboxConfig.checkAnalytics}
type="checkbox"
className="checkbox checkbox-success checkbox-sm pointer-events-none "
readOnly
/>
<div className="w-4 h-4 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#3c7cec" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</div>
<h1 className="ml-2">Check out EatMyUrl Analytics</h1>
</AccordionTrigger>
<AccordionContent className="flex px-6">
<Button size="sm" className="py-3" variant="default">
<Button onClick={()=>{
if(linkId != -1){
router.push(`/app/links/${linkId}`)
}
else{
toast({
title:"Create a link",
description:"Create atleast one link to continue"
})
router.push('/app/links/create')
}
}} size="sm" className="py-3" variant="default">
<BarChart />
View Analytics
</Button>
Expand All @@ -192,14 +211,13 @@ export default function HomePage() {
</div>
<div className="flex-1 flex flex-col border-2 rounded-xl p-6 shadow-md md:ml-12 mt-4 md:mt-0 justify-center h-fit">
<h1 className="font-bold text-xl">
Replace “eurl.dev” with your brand.
Custom ShortCodes
</h1>
<h1 className="mt-3 text-gray-500">
Get a custom domain to create links that represent you. Add your own
short domain or choose a complimentary one when you upgrade.
Get a custom shortened url only on EatMyUrl. Its brief and easy to remember.
</h1>
<Button className="mt-4 w-36" variant="destructive">
View our plans
<Button onClick={()=>router.push('/app/links/create')} className="mt-4 w-36" variant='default'>
Create a link
</Button>
</div>
</div>
Expand Down
133 changes: 93 additions & 40 deletions app/app/(dashboard)/links/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,42 +16,37 @@ import { Button } from "@/components/ui/button";
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";
import { LinkType, linkType } from "@/interfaces/types";
import { useEffect, useState } from "react";
import {getAnalyticsAction} from "@/lib/actions/getAnalyticsAction";
import { getLinkDetails } from "@/lib/actions/getLinksAction";
import AuthenticatingComponent from "@/components/LoadingComponents/AuthenticatingComponent";
import { HTTP_STATUS } from "@/lib/constants";
import { toast } from "@/components/ui/use-toast";
import { useRouter } from "next/navigation";
import { LinkPageLoading } from "@/components/LoadingComponents/LinkPageLoading";
import { NoDataLoading } from "@/components/LoadingComponents/NoDataLoading";

const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];

export default function Page(params : any) {
const id = params.id; // id to make request to the server
export default function Page({params}:{
params: {
id:string
}
}) {

const link: LinkType = {
id: 1,
title: "Tech Trends Webinar",
shortLink: "tech-trends-webinar",
longLink: "https://example.com/tech-trends-webinar",
const [link,setLink] = useState({
engagement: 1200,
dateCreated: new Date(),
last7DaysEngage: 900,
weeklyChange: -25,
locations: [
{ id: 1, country: "United States", engagements: 600, percentage: 50 },
{ id: 2, country: "United Kingdom", engagements: 300, percentage: 25 },
{ id: 3, country: "Canada", engagements: 180, percentage: 15 },
{ id: 4, country: "Australia", engagements: 120, percentage: 10 }
],
devices: {
Desktop: 720,
Mobile: 420,
Tablet: 60
},
refs:{
google: 20,
direc: 210,
"dub.co": 60
},
os:{
windows10:100,
windows11:48,
Expand All @@ -61,41 +56,87 @@ export default function Page(params : any) {
chrome:45,
firefox:50,
safari:70
}
};
},
locations: [
{ id: 1, country: "United States", engagements: 600, percentage: 50 },
{ id: 2, country: "United Kingdom", engagements: 300, percentage: 25 },
{ id: 3, country: "Canada", engagements: 180, percentage: 15 },
{ id: 4, country: "Australia", engagements: 120, percentage: 10 }
]
})

const [NoDataSet,setNoDataSet] = useState(Object.keys(link.devices).length)

const fetchLink = {
const [fetchLink,setfetchLink] = useState<linkType>({
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 router = useRouter();

useEffect(()=>{
setLoading(true)
getLinkDetails(params.id).then((res)=>{
if(res.status == HTTP_STATUS.NOT_FOUND){
toast({
title: "Link not found"
})
router.push('/app/links')
return;
}

if(res.link){
//@ts-ignore
setfetchLink(res.link)
//@ts-ignore
setTitle(res.link.title)
//@ts-ignore
setShortcode(res.link.short_code)
}
//@ts-ignore
getAnalyticsAction(res.link.short_code).then((e)=>{

//@ts-ignore
setLink(e)
setNoDataSet(Object.keys(e.devices).length)
setLoading(false)
})

})

},[])

const [loading,setLoading] = useState(false)
const REDIRECT_URL:string = process.env.REDIRECT_URL || "https://eurl.dev";
const [title,setTitle] = useState<string | null>(fetchLink.title);
const [shortCode,setShortcode] = useState<string>(fetchLink.short_code)
const shortLink:string = `${REDIRECT_URL}/${shortCode}`

if(loading){
return <LinkPageLoading/>
}

return (
<div className="pl-5 md:pl-8 pr-2 pt-12">
<Link href="/app/links">

<div
className="flex cursor-pointer w-fit"
className="flex cursor-pointer w-fit" onClick={()=>router.push('/app/links')}
>
<ArrowLeft size={20} />
<h1 className="ml-2 text-sm font-medium">Back to list</h1>
</div>
</Link>




<div className="flex mt-6 py-6 pr-4 flex-col rounded-xl border-[0.5px] shadow-md">
<div className="flex">
<div className="flex flex-col ml-6 w-full">
<div className="flex justify-between ">
<h1 className="text-xl font-bold">
<h1 className="text-xl font-bold w-[70%]">
{title}
</h1>
<div className="hidden md:block">
Expand All @@ -117,16 +158,26 @@ export default function Page(params : any) {
</EditLinkDialog>
</div>
</div>
<div className="flex">
<div className="h-8 w-8 md:h-12 md:w-12 border-[0.5px] shadow-md rounded-full flex justify-center items-center">
<div className="flex mt-3">
<div className="h-8 w-8 md:h-12 md:w-12 border-[0.5px] shadow-md rounded-full flex justify-center items-center">
<LinkIcon className="h-4 w-4 md:h-6 md:w-6" />
</div>
<div className="ml-4">
<h1 className="text-blue-400 mt-1 hover:underline cursor-pointer w-fit">
<a href={shortLink}>{shortLink}</a>
<h1 onClick={()=>{
window.open(
shortLink,
"_blank"
)
}} className="text-blue-400 mt-1 hover:underline cursor-pointer w-fit">
{shortLink}
</h1>
<h1 className="mt-2 text-sm hover:underline cursor-pointer w-fit">
<a href={fetchLink.long_url}>{fetchLink.long_url}</a>
<h1 onClick={()=>{
window.open(
fetchLink.long_url,
"_blank"
)
}} className="mt-2 text-sm hover:underline cursor-pointer w-fit">
{fetchLink.long_url}
</h1>
</div>
</div>
Expand Down Expand Up @@ -191,7 +242,7 @@ export default function Page(params : any) {
</TableHeader>
<TableBody>

{link.locations?.map((location)=>{
{link.locations.map((location:any)=>{
return <TableRow key={location.id}>
<TableCell className="font-medium">{location.id}</TableCell>
<TableCell>{location.country}</TableCell>
Expand All @@ -208,23 +259,25 @@ export default function Page(params : any) {

<div className="flex md:flex-row flex-col">
<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 className="mt-6 md:w-[300px] md:h-[300px] w-[250px] h-[250px]">
{NoDataSet == 1?<div><NoDataLoading/></div>:<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">OS</Label>
<div className="mt-4 md:w-[300px] md:h-[300px] w-[250px] h-[250px]">
<PieChart devices={Object.keys(link.os ?? {})} data={Object.values(link.os ?? {})}/>
{NoDataSet == 1?<div><NoDataLoading/></div>:<PieChart devices={Object.keys(link.os ?? {})} data={Object.values(link.os ?? {})}/>}
</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">Browser</Label>
<div className="mt-4 md:w-[300px] md:h-[300px] w-[250px] h-[250px]">
<PieChart devices={Object.keys(link.browser ?? {})} data={Object.values(link.browser ?? {})}/>
{NoDataSet == 1?<div><NoDataLoading/></div>:<PieChart devices={Object.keys(link.browser ?? {})} data={Object.values(link.browser ?? {})}/>}
</div>
</div>

Expand Down
Loading

0 comments on commit 4d71583

Please sign in to comment.