feat: make tracking work with async fetch library (#54)

apps/next-app/pages/analytics/index.tsx

@@ -1,27 +1,42 @@
-import { LineChart, Line, CartesianGrid, XAxis, YAxis } from "recharts";
+import {
+  LineChart,
+  Line,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+} from "recharts";
 import { trpc } from "@chair-flight/trpc/client";
+import { getTrpcHelper } from "@chair-flight/trpc/server";
 import type { NextPage } from "next";
 
-const data = [{ name: "Page A", uv: 400, pv: 2400, amt: 2400 }];
-
 const useVisitsPerDay = trpc.analytics.visitsPerDay.useSuspenseQuery;
 
 const AnalyticsPage: NextPage = () => {
-  useVisitsPerDay();
+  const [{ views, paths }] = useVisitsPerDay();
   return (
-    <LineChart width={400} height={400} data={data}>
-      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
+    <LineChart width={400} height={400} data={views}>
+      {paths.map((path) => (
+        <Line key={path} type="monotone" dataKey={path} stroke="#8884d8" />
+      ))}
       <CartesianGrid stroke="#ccc" />
       <XAxis dataKey="name" />
       <YAxis />
+      <Tooltip />
+      <Legend />
     </LineChart>
   );
 };
 
 export async function getStaticProps() {
+  const helper = await getTrpcHelper();
+
+  await helper.analytics.visitsPerDay.prefetch();
+
   return {
     props: {
-      posts: [],
+      trpcState: helper.dehydrate(),
     },
     revalidate: 60 * 15,
   };

apps/next-app/project.json

@@ -6,7 +6,7 @@
   "targets": {
     "dev": {
       "executor": "@nx/next:server",
-      "dependsOn": ["^migrate"],
+      "dependsOn": ["^deploy"],
       "options": {
         "port": 4200,
         "buildTarget": "next-app:build",
@@ -16,7 +16,7 @@
     "build": {
       "executor": "@nx/next:build",
       "outputs": ["{options.outputPath}"],
-      "dependsOn": ["^migrate", "docs:build"],
+      "dependsOn": ["^deploy", "docs:build"],
       "options": {
         "root": "apps/next-app",
         "outputPath": ".dist/apps/next-app"

libs/base/types/src/lib/analytics.ts

@@ -10,7 +10,7 @@ export type PageEvent = {
 };
 
 export type TrackEventMap = {
-  "exploreQuestions.click": Record<string, unknown>;
+  "themeButton.switch": Record<string, never>;
 };
 
 export type TrackEventName = keyof TrackEventMap;

libs/content/interview-flashcards/project.json

@@ -4,7 +4,7 @@
   "projectType": "library",
   "sourceRoot": "libs/content/interview-flashcards/src",
   "targets": {
-    "migrate": {
+    "deploy": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [

libs/content/question-bank-737/project.json

@@ -4,7 +4,7 @@
   "projectType": "library",
   "sourceRoot": "libs/content/question-bank-737/src",
   "targets": {
-    "migrate": {
+    "deploy": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [

libs/content/question-bank-atpl/project.json

@@ -4,7 +4,7 @@
   "projectType": "library",
   "sourceRoot": "libs/content/question-bank-atpl/src",
   "targets": {
-    "migrate": {
+    "deploy": {
       "executor": "nx:run-commands",
       "options": {
         "commands": [

libs/content/question-bank-atpl/src/question-bank-atpl.ts

@@ -24,7 +24,6 @@ let subjects: Subject[];
 
 export const getAllQuestionTemplates = async () => {
   if (!questions) {
-    console.log(API_PATH_QUESTIONS);
     const response = await fetch(API_PATH_QUESTIONS);
     questions = (await response.json()) as QuestionTemplate[];
   }

libs/core/analytics/prisma/migrations/20230726204525_init/migration.sql → libs/core/analytics/prisma/migrations/20231119122436_create_initial_tables/migration.sql

@@ -4,23 +4,37 @@ CREATE TABLE "PageEvent" (
     "timestamp" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "anonymousId" TEXT NOT NULL,
     "title" TEXT NOT NULL,
-    "url" TEXT NOT NULL,
     "referrer" TEXT NOT NULL,
     "height" INTEGER NOT NULL,
     "width" INTEGER NOT NULL,
-    "hash" TEXT NOT NULL,
-    "timeOnPage" INTEGER NOT NULL,
+    "environment" TEXT NOT NULL,
+    "path" TEXT NOT NULL,
+    "resolvedPath" TEXT NOT NULL,
 
     CONSTRAINT "PageEvent_pkey" PRIMARY KEY ("id")
 );
 
+-- CreateTable
+CREATE TABLE "PageEventDailyCount" (
+    "id" TEXT NOT NULL,
+    "environment" TEXT NOT NULL,
+    "count" INTEGER NOT NULL,
+    "path" TEXT NOT NULL,
+    "timestamp" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "PageEventDailyCount_pkey" PRIMARY KEY ("id")
+);
+
 -- CreateTable
 CREATE TABLE "TrackEvent" (
     "id" TEXT NOT NULL,
     "timestamp" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "anonymousId" TEXT NOT NULL,
     "eventName" TEXT NOT NULL,
     "properties" JSONB NOT NULL,
+    "environment" TEXT NOT NULL,
+    "path" TEXT NOT NULL,
+    "resolvedPath" TEXT NOT NULL,
 
     CONSTRAINT "TrackEvent_pkey" PRIMARY KEY ("id")
 );

libs/core/analytics/prisma/schema.prisma

@@ -1,5 +1,5 @@
 generator client {
-  provider        = "prisma-client-js"
+  provider = "prisma-client-js"
 }
 
 datasource db {
@@ -23,10 +23,10 @@ model PageEvent {
 
 model PageEventDailyCount {
   id          String   @id @default(uuid())
-  timestamp   DateTime
   environment String
   count       Int
   path        String
+  timestamp   DateTime
 }
 
 model TrackEvent {

libs/core/analytics/project.json

@@ -40,6 +40,42 @@
         }
       }
     },
+    "deploy": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "libs/core/analytics",
+        "command": "prisma migrate deploy"
+      },
+      "configurations": {
+        "local": {
+          "command": "env-cmd -f ../../../.env.local prisma migrate deploy"
+        },
+        "dev": {
+          "command": "env-cmd -f ../../../.env.dev prisma migrate deploy"
+        },
+        "prod": {
+          "command": "env-cmd -f ../../../.env.prod prisma migrate deploy"
+        }
+      }
+    },
+    "studio": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "libs/core/analytics",
+        "command": "prisma studio"
+      },
+      "configurations": {
+        "local": {
+          "command": "env-cmd -f ../../../.env.local prisma migrate dev"
+        },
+        "dev": {
+          "command": "env-cmd -f ../../../.env.dev prisma migrate dev"
+        },
+        "prod": {
+          "command": "env-cmd -f ../../../.env.prod prisma migrate dev"
+        }
+      }
+    },
     "lint": {
       "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],

libs/core/analytics/src/functions/page-visits-analytics.ts

@@ -4,7 +4,7 @@ import { prisma } from "../config/postgres-connection";
 const FirstDateWeCareAbout = new Date("2023-07-30");
 
 export const getPageVisits = async () => {
-  return await prisma.pageEventDailyCount.findMany({
+  const data = await prisma.pageEventDailyCount.findMany({
     where: {
       timestamp: {
         gte: FirstDateWeCareAbout,
@@ -14,6 +14,26 @@ export const getPageVisits = async () => {
       timestamp: "asc",
     },
   });
+
+  const views = data.reduce<Array<Record<string, string | number>>>(
+    (acc, curr) => {
+      const { timestamp, path, count } = curr;
+      const name = DateTime.fromJSDate(timestamp).toFormat("yyyy-MM-dd");
+      let existingDate = acc.find((item) => item["name"] === name);
+      if (!existingDate) acc.push({ name });
+      existingDate ??= acc.at(-1)!;
+      existingDate[path] = count;
+      return acc;
+    },
+    [],
+  );
+
+  const paths = data.reduce<string[]>((acc, curr) => {
+    const { path } = curr;
+    if (!acc.includes(path)) acc.push(path);
+    return acc;
+  }, []);
+  return { views, paths };
 };
 
 export const generateDailyCounts = async () => {
@@ -35,16 +55,24 @@ export const generateDailyCounts = async () => {
   };
 
   const dailyCounts = await prisma.$queryRaw<DailyCount[]>`
-        SELECT 
-          COUNT(*) as "count"
-          Date(timestamp) as "timestamp"
-          environment as "environment"
-          path as "path"
-        FROM "PageEvent"
-        GROUP BY "date", "path", "environment"
-        ORDER BY "date" ASC
-        WHERE "timestamp" >= ${firstDay}
-    `;
+    SELECT 
+      count,
+      "timestamp2" as "timestamp",
+      environment,
+      path
+    FROM (
+          SELECT 
+            COUNT(*)::integer as "count",
+            DATE_TRUNC('day', timestamp) as "timestamp2",
+            environment as "environment",
+            path as "path"
+          FROM "PageEvent"
+          WHERE "timestamp" >= ${firstDay}
+          GROUP BY "timestamp2", "path", "environment"
+          ORDER BY "timestamp2" ASC
+    ) as subquery
+    ORDER BY "timestamp2" ASC;
+  `;
 
   await prisma.pageEventDailyCount.createMany({
     data: dailyCounts,

libs/react/analytics/src/use-analytics-plugin.ts

@@ -50,10 +50,10 @@ export const useAnalyticsPlugin = (): AnalyticsPlugin => {
     },
     track: (props: OriginalTrackEventProps) => {
       trackEvent.mutate({
-        path: router.pathname,
-        resolvedPath: router.asPath,
         eventName: props.payload.event,
         anonymousId: props.payload.anonymousId,
+        path: router.pathname,
+        resolvedPath: router.asPath,
         properties: props.payload.properties,
         timestamp: Date.now(),
       });