add analytics

Author: steven-tey

app/projects/[slug]/[[...tab]]/page.tsx

@@ -1,3 +1,4 @@
+import ProjectAnalytics from "@/components/projects/project-analytics";
 import { getProjectBySlug } from "@/lib/actions/get-project";
 import prisma from "@/lib/prisma";
 import { notFound } from "next/navigation";
@@ -23,9 +24,19 @@ export default async function Project({
     notFound();
   }
 
-  return (
-    project.image && (
-      <img src={project.image} alt={project.name} className="mt-4 rounded-xl" />
-    )
-  );
+  if (!tab) {
+    return (
+      project.image && (
+        <img
+          src={project.image}
+          alt={project.name}
+          className="mt-4 rounded-xl"
+        />
+      )
+    );
+  }
+
+  if (tab[0] === "analytics") {
+    return <ProjectAnalytics project={project} />;
+  }
 }

app/projects/[slug]/layout.tsx

@@ -50,10 +50,7 @@ export default async function ProjectLayout({
     notFound();
   }
 
-  const githubLink = project.links.find((link) => link.type === "GITHUB")!;
-  const websiteLink = project.links.find((link) => link.type === "WEBSITE");
-
-  const { stars } = await getRepo(githubLink.url);
+  const { stars } = await getRepo(project.githubLink.url);
 
   if (stars !== project.stars) {
     await prisma.project.update({
@@ -67,13 +64,7 @@ export default async function ProjectLayout({
   }
 
   return (
-    <ProjectProvider
-      props={{
-        ...project,
-        githubLink,
-        websiteLink,
-      }}
-    >
+    <ProjectProvider props={project}>
       <div className="aspect-[4/1] w-full rounded-t-2xl bg-gradient-to-tr from-purple-100 via-violet-50 to-blue-100" />
       <div className="-mt-8 flex items-center justify-between px-4 sm:-mt-12 sm:items-end md:pr-0">
         <Image
@@ -88,16 +79,16 @@ export default async function ProjectLayout({
             <EditProjectButton projectId={project.id} />
           </Suspense>
           <a
-            href={githubLink.shortLink}
+            href={project.githubLink.shortLink}
             target="_blank"
             className={buttonLinkVariants({ variant: "secondary" })}
           >
             <Star className="h-4 w-4" />
             <p className="text-sm">{nFormatter(stars, { full: true })}</p>
           </a>
-          {websiteLink && (
+          {project.websiteLink && (
             <a
-              href={websiteLink.shortLink}
+              href={project.websiteLink.shortLink}
               target="_blank"
               className={buttonLinkVariants()}
             >
@@ -107,14 +98,16 @@ export default async function ProjectLayout({
           )}
         </div>
       </div>
-      <div className="max-w-lg p-4">
+      <div className="max-w-lg p-4 pb-0">
         <div className="flex items-center space-x-2">
           <h1 className="font-display text-3xl font-bold">{project.name}</h1>
           {project.verified && (
             <BadgeCheck className="h-8 w-8 text-white" fill="#1c9bef" />
           )}
         </div>
         <p className="mt-2 text-gray-500">{project.description}</p>
+      </div>
+      <div className="px-4">
         <ProjectLayoutTabs />
         {children}
       </div>

components/projects/project-analytics-client.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { nFormatter } from "@dub/utils";
+import { AreaChart } from "@tremor/react";
+
+export default function ProjectAnalyticsClient({
+  chartData,
+  categories,
+}: {
+  chartData: any[];
+  categories: string[];
+}) {
+  return (
+    <AreaChart
+      className="h-80"
+      data={chartData}
+      index="start"
+      categories={categories}
+      colors={["blue", "rose"]}
+      valueFormatter={nFormatter}
+      yAxisWidth={60}
+      onValueChange={(v) => console.log(v)}
+    />
+  );
+}

components/projects/project-analytics-placeholder.tsx

@@ -0,0 +1,10 @@
+import { LoadingSpinner } from "@dub/ui";
+
+export default function ProjectAnalyticsPlacholder() {
+  return (
+    <div className="flex h-80 w-full flex-col items-center justify-center space-y-4">
+      <LoadingSpinner />
+      <p className="text-sm text-gray-500">Loading analytics...</p>
+    </div>
+  );
+}

components/projects/project-analytics.tsx

@@ -0,0 +1,56 @@
+import { dub, getDomainAndKey } from "@/lib/dub";
+import { ProjectWithLinks } from "@/lib/types";
+import { Suspense } from "react";
+import ProjectAnalyticsClient from "./project-analytics-client";
+import ProjectAnalyticsPlacholder from "./project-analytics-placeholder";
+
+export default function ProjectAnalytics({
+  project,
+}: {
+  project: ProjectWithLinks;
+}) {
+  return (
+    <Suspense fallback={<ProjectAnalyticsPlacholder />}>
+      <ProjectAnalyticsRSC project={project} />
+    </Suspense>
+  );
+}
+
+async function ProjectAnalyticsRSC({ project }: { project: ProjectWithLinks }) {
+  const { links } = project;
+
+  const analytics = await Promise.all(
+    links.map(async (link) => {
+      const { domain, key } = getDomainAndKey(link.shortLink);
+      return await dub.analytics.timeseries({
+        domain,
+        key,
+        interval: "30d",
+      });
+    }),
+  );
+
+  const chartData = analytics[0].map(
+    (data: { start: string; clicks: number }, i) => {
+      return {
+        start: new Date(data.start).toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+        }),
+        [links[0].type]: analytics[0][i].clicks,
+        [links[1].type]: analytics[1][i].clicks,
+      };
+    },
+  );
+
+  console.log({ analytics, chartData });
+
+  return (
+    <div className="mt-4">
+      <ProjectAnalyticsClient
+        chartData={chartData}
+        categories={[links[0].type, links[1].type]}
+      />
+    </div>
+  );
+}

lib/actions/get-project.ts

@@ -1,13 +1,24 @@
 import { cache } from "react";
 import prisma from "../prisma";
+import { ProjectWithLinks } from "../types";
 
 export const getProjectBySlug = cache(async (slug: string) => {
-  return await prisma.project.findUnique({
+  const project = await prisma.project.findUnique({
     where: {
       slug,
     },
     include: {
       links: true,
     },
   });
+  if (!project) {
+    return null;
+  }
+  const githubLink = project.links.find((link) => link.type === "GITHUB")!;
+  const websiteLink = project.links.find((link) => link.type === "WEBSITE");
+  return {
+    ...project,
+    githubLink,
+    websiteLink,
+  } as ProjectWithLinks;
 });

lib/dub.ts

@@ -3,7 +3,8 @@ import { Link } from "@prisma/client";
 import { Dub } from "dub";
 
 export const dub = new Dub({
-  workspaceId: "ws_clv9jxuxp0006gpq847kwrcwj",
+  // workspaceId: "ws_clv9jxuxp0006gpq847kwrcwj",
+  workspaceId: "ws_cl7pj5kq4006835rbjlt2ofka",
 });
 
 export async function shortenAndCreateLink({
@@ -34,11 +35,11 @@ export async function editShortLink({
   link: Link;
   newUrl: string;
 }) {
-  const shortLinkUrl = new URL(link.shortLink);
+  const { domain, key } = getDomainAndKey(link.shortLink);
 
   const { id: dubLinkId } = await dub.links.get({
-    domain: shortLinkUrl.hostname,
-    key: shortLinkUrl.pathname.slice(1),
+    domain,
+    key,
   });
 
   await dub.links.update(dubLinkId, {
@@ -54,3 +55,11 @@ export async function editShortLink({
     },
   });
 }
+
+export function getDomainAndKey(url: string) {
+  const link = new URL(url);
+  return {
+    domain: link.hostname,
+    key: link.pathname.slice(1),
+  };
+}

package.json

@@ -15,8 +15,10 @@
     "@dub/tailwind-config": "^0.0.4",
     "@dub/ui": "^0.1.11",
     "@dub/utils": "^0.0.48",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@prisma/client": "^4.16.2",
     "@sindresorhus/slugify": "^2.2.1",
+    "@tremor/react": "^3.16.1",
     "class-variance-authority": "^0.7.0",
     "dub": "^0.24.1",
     "framer-motion": "^11.1.7",