refactor logging

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

@@ -7,7 +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 { logUsageMetric } from "~/server/log";
+import { api } from "~/trpc/server";
 import {
   extractUniqueIds,
   fetchUserAnswersForRole,
@@ -40,7 +40,7 @@ const ContentSection = () => (
 
 const FindTheExpertPage = async (context: { params: { role: any; }; }) => {
   const session = await getServerAuthSession();
-  await logUsageMetric("Find The Expert Page Accessed For Role: " + context.params.role);
+  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">

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={() => {
+                  handleLogging();
+                  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

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