feat(web): add event counter

apps/web/next.config.mjs

@@ -66,12 +66,6 @@ const config = {
   },
 };
 
-console.log({
-  "process.env.SENTRY_ORG": process.env.SENTRY_ORG,
-  "process.env.SENTRY_PROJECT": process.env.SENTRY_PROJECT,
-
-})
-
 const withSentry =
   process.env.SENTRY_ORG && process.env.SENTRY_PROJECT
     ? withSentryConfig

apps/web/src/components/EventCounter.tsx

@@ -0,0 +1,28 @@
+import {} from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { trpc } from "utils/trpc";
+
+export function EventCounter() {
+  const { data } = trpc.events.getEventCount.useQuery();
+
+  return (
+    <div className="p-8 text-xl font-bold text-primary mx-auto flex space-x-1">
+      <AnimatePresence mode="popLayout">
+        <motion.span
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -20, opacity: 0 }}
+          transition={{ duration: 0.3 }}
+          aria-live="polite"
+        >
+          {new Intl.NumberFormat("en", { notation: "compact" }).format(
+            data ?? 0
+          )}
+        </motion.span>
+      </AnimatePresence>
+      <span className="w-full text-white">
+        Events processed and counting...
+      </span>
+    </div>
+  );
+}

apps/web/src/components/UsedBy.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import DynabaseLogo from "../../public/img/companies/dynabase.svg";
 import IgusLogo from "../../public/img/companies/igus.svg";
-import MavenoidLogo from "../../public/img/companies/mavenoid.svg";
+
 import RBTXLogo from "../../public/img/companies/rbtx.svg";
 
 const COMPANIES = [
@@ -21,11 +21,6 @@ const COMPANIES = [
     logo: DynabaseLogo,
     companyUrl: "https://dynabase.de/",
   },
-  {
-    name: "Mavenoid",
-    logo: MavenoidLogo,
-    companyUrl: "https://mavenoid.com/",
-  },
 ] satisfies Array<{
   logo: React.ReactNode;
   name: string;

apps/web/src/pages/index.tsx

@@ -29,6 +29,7 @@ import { twMerge } from "tailwind-merge";
 import { generateCodeSnippets } from "utils/snippets";
 import abbyScreenshot from "../../public/screenshot.png";
 import type { NextPageWithLayout } from "./_app";
+import { EventCounter } from "components/EventCounter";
 
 const { useAbby, AbbyProvider, useFeatureFlag, __abby__, withDevtools } =
   createAbby({
@@ -137,6 +138,7 @@ const Home: NextPageWithLayout<
               Start free, scale at a fair price.
             </span>
           </div>
+          <EventCounter />
           {heroMediaVariant === "Image" && (
             <Image
               src={abbyScreenshot}

apps/web/src/server/trpc/router/events.ts

@@ -3,11 +3,12 @@ import { groupBy, uniqBy } from "lodash-es";
 import { EventService } from "server/services/EventService";
 import { ProjectService } from "server/services/ProjectService";
 import { z } from "zod";
-import { protectedProcedure, router } from "../trpc";
+import { protectedProcedure, publicProcedure, router } from "../trpc";
 import { AbbyEventType } from "@tryabby/core";
 import dayjs from "dayjs";
 import { getBaseEventsByInterval, TIME_INTERVAL } from "lib/events";
 import memoize from "memoize";
+import type { Context } from "../context";
 
 export const getEventData = memoize(
   async (testId: string, interval: string, potentialVariants: string[]) => {
@@ -325,4 +326,20 @@ export const eventRouter = router({
         )),
       };
     }),
+  getEventCount: publicProcedure.query(async ({ ctx }) => {
+    return await getTotalEventCount(ctx);
+  }),
 });
+
+const getTotalEventCount = memoize(
+  async (ctx: Context) => {
+    const [eventCount, apiRequestCount] = await Promise.all([
+      ctx.prisma.event.count(),
+      ctx.prisma.apiRequest.count(),
+    ]);
+    return eventCount + apiRequestCount;
+  },
+  {
+    maxAge: 1000 * 60,
+  }
+);