Gather analytics on the usage of the application (#150)

* init

* refactor logging

* fiw linting

prisma/schema.prisma

@@ -110,3 +110,9 @@ model VerificationToken {
 
   @@unique([identifier, token])
 }
+
+model UsageMetrics {
+  id            String    @id @default(cuid())
+  action        String
+  createdAt     DateTime @default(now())
+}

src/app/find-the-expert/[role]/page.tsx

@@ -7,6 +7,7 @@ import ButtonSkeleton from "~/components/loading/button-loader";
 import { Login } from "~/components/login";
 import ShowDataTable from "~/components/show-data-table";
 import { getServerAuthSession } from "~/server/auth";
+import { api } from "~/trpc/server";
 import {
   extractUniqueIds,
   fetchUserAnswersForRole,
@@ -39,7 +40,8 @@ const ContentSection = () => (
 
 const FindTheExpertPage = async () => {
   const session = await getServerAuthSession();
-
+  await api.usageMetricLogger.logUsageMetric.mutate({logMessage: 'find-the-expert-page-filtered-on-role'});
+
   return (
     <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
       <h1 className="text-center text-5xl font-extrabold tracking-tight">

src/app/result/[role]/page.tsx

@@ -1,7 +1,6 @@
 import React, { Suspense } from "react";
 import { db } from "~/server/db";
 import {
-  type Role,
   type QuestionResult,
   type TransformedData,
 } from "~/models/types";

src/components/additional-buttons-homepage.tsx

@@ -5,8 +5,15 @@ import { Login } from "./login";
 import { Button } from "./ui/button";
 import { ArrowRightDarkModeFriendly } from "./svg";
 import { signIn } from "next-auth/react";
+import { api } from "~/trpc/react";
 
 const Buttons = ({ session }: { session: Session | null }) => {
+  const {mutate: logUsageMetric} = api.usageMetricLogger.logUsageMetric.useMutation();
+
+  const handleLogging = () => {
+    logUsageMetric({logMessage:'find-the-expert-page-accessed'});
+  }
+
   return (
     <div className="mt-5 flex justify-center">
       <div className="mt-5 flex flex-col items-center gap-6 md:flex-row">
@@ -24,8 +31,10 @@ const Buttons = ({ session }: { session: Session | null }) => {
               <ArrowRightDarkModeFriendly />
             </Button>
             <Button
-              onClick={() =>
-                signIn("azure-ad", { callbackUrl: "/find-the-expert/general" })
+              onClick={async () => {
+                  handleLogging();
+                  await signIn("azure-ad", { callbackUrl: "/find-the-expert/general" });
+                }
               }
               variant="outline"
               className="border-2 border-[#bed62f]"

src/components/select-role.tsx

@@ -30,6 +30,7 @@ export default function SelectRoles({
   } = api.survey.setRole.useMutation();
   const { mutate: setDefaultRoleMutate, isSuccess: setDefaultRoleIsSuccess } =
     api.survey.setDefaultRole.useMutation();
+  const {mutate: logUsageMetric} = api.usageMetricLogger.logUsageMetric.useMutation();
 
   // Show a toast notification on role mutation error
   useEffect(() => {
@@ -85,6 +86,10 @@ export default function SelectRoles({
       roleIds: selectedRoles,
     });
   };
+
+  const handleLogging = () => {
+    logUsageMetric({logMessage:'find-the-expert-page-accessed'});
+  }
 
   const [communicationMethodIsLoading, setCommunicationMethodIsLoading] =
     useState(false);
@@ -168,6 +173,7 @@ export default function SelectRoles({
           </Link>
           <Link href="/find-the-expert/general">
             <SpinnerButton
+              onClick={handleLogging}
               state={communicationMethodIsLoading}
               variant="outline"
               className="border-2 border-[#bed62f]"

src/server/api/root.ts

@@ -1,5 +1,6 @@
 import { surveyRouter } from "~/server/api/routers/survey";
 import { createTRPCRouter } from "~/server/api/trpc";
+import { usageMetricLogger } from "../log";
 
 /**
  * This is the primary router for your server.
@@ -8,6 +9,7 @@ import { createTRPCRouter } from "~/server/api/trpc";
  */
 export const appRouter = createTRPCRouter({
   survey: surveyRouter,
+  usageMetricLogger: usageMetricLogger
 });
 
 // export type definition of API

src/server/log.ts

@@ -0,0 +1,16 @@
+import { createTRPCRouter, publicProcedure } from "./api/trpc";
+import { z } from "zod";
+import { db } from "./db"
+
+
+export const usageMetricLogger = createTRPCRouter({
+    logUsageMetric: publicProcedure
+        .input(z.object({logMessage: z.string()}))
+        .mutation(async ({input}) => {
+                await db.usageMetrics.create({
+                    data: {
+                        action: input.logMessage
+                    }
+                });
+        })
+})