Use global counts from teerank in the frontend

Author: needs

apps/frontend/app/all/clans/page.tsx

@@ -1,6 +1,7 @@
 import { ClanList } from '../../../components/ClanList';
-import { getGlobalCounts } from '../../../utils/globalCounts';
+import { getGlobalCounts } from '@teerank/teerank';
 import prisma from '../../../utils/prisma';
+import redis from '../../../utils/redis';
 import { searchParamSchema } from '../schema';
 
 export const metadata = {
@@ -15,7 +16,7 @@ export default async function Index({
 }) {
   const { page } = searchParamSchema.parse(searchParams);
 
-  const [clans, { clanCount }] = await Promise.all([
+  const [clans, globalCounts] = await Promise.all([
     prisma.clan.findMany({
       select: {
         name: true,
@@ -31,12 +32,12 @@ export default async function Index({
       skip: (page - 1) * 100,
     }),
 
-    getGlobalCounts(),
+    getGlobalCounts(redis),
   ]);
 
   return (
     <ClanList
-      clanCount={clanCount}
+      clanCount={globalCounts.clans}
       clans={clans.map((clan, index) => ({
         rank: (page - 1) * 100 + index + 1,
         name: clan.name,

apps/frontend/app/all/layout.tsx

@@ -1,23 +1,20 @@
-import { getGlobalCounts } from '../../utils/globalCounts';
+import { getGlobalCounts } from '@teerank/teerank';
+import redis from '../../utils/redis';
 import { LayoutTabs } from './LayoutTabs';
 
 export default async function Index({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const {
-    playerCount,
-    clanCount,
-    gameServerCount,
-  } = await getGlobalCounts();
+  const globalCounts = await getGlobalCounts(redis);
 
   return (
     <div className="flex flex-col gap-4 py-8">
       <LayoutTabs
-        playerCount={playerCount}
-        clanCount={clanCount}
-        serverCount={gameServerCount}
+        playerCount={globalCounts.players}
+        clanCount={globalCounts.clans}
+        serverCount={globalCounts.gameServers}
       />
 
       {children}

apps/frontend/app/all/page.tsx

@@ -1,7 +1,8 @@
 import { PlayerList } from '../../components/PlayerList';
-import { getGlobalCounts } from '../../utils/globalCounts';
+import { getGlobalCounts } from '@teerank/teerank';
 import prisma from '../../utils/prisma';
 import { searchParamSchema } from './schema';
+import redis from '../../utils/redis';
 
 export const metadata = {
   title: 'All Players - Teerank',
@@ -44,15 +45,15 @@ export default async function Index({
     skip: (page - 1) * 100,
   });
 
-  const { playerCount } = await getGlobalCounts();
+  const globalCounts = await getGlobalCounts(redis);
 
   return (
     <>
       <p className="hidden">
         {`Teerank is a simple and fast ranking system for Teeworlds.`}
       </p>
       <PlayerList
-        playerCount={playerCount}
+        playerCount={globalCounts.players}
         rankMethod={null}
         showLastSeen={true}
         players={players.map((player, index) => ({

apps/frontend/app/all/servers/page.tsx

@@ -1,8 +1,9 @@
 import { ServerList } from '../../../components/ServerList';
-import { getGlobalCounts } from '../../../utils/globalCounts';
+import { getGlobalCounts } from '@teerank/teerank';
 import prisma from '../../../utils/prisma';
 import { searchParamSchema } from '../schema';
 import { ComponentProps } from 'react';
+import redis from '../../../utils/redis';
 
 export const metadata = {
   title: 'All Servers - Teerank',
@@ -28,7 +29,7 @@ export default async function Index({
     skip: (page - 1) * 100,
   });
 
-  const { gameServerCount } = await getGlobalCounts();
+  const globalCounts = await getGlobalCounts(redis);
 
   const servers = gameServerStates.map((gameServerState, index) => ({
     rank: (page - 1) * 100 + index + 1,
@@ -41,5 +42,10 @@ export default async function Index({
     port: gameServerState.gameServer.port,
   }));
 
-  return <ServerList serverCount={gameServerCount} servers={servers} />;
+  return (
+    <ServerList
+      serverCount={globalCounts.gameServers}
+      servers={servers}
+    />
+  );
 }

apps/frontend/app/page.tsx

@@ -1,9 +1,10 @@
 import Link from 'next/link';
 import { twMerge } from 'tailwind-merge';
 import prisma from '../utils/prisma';
-import { getGlobalCounts } from '../utils/globalCounts';
+import { getGlobalCounts } from '@teerank/teerank';
 import { formatInteger } from '../utils/format';
 import { encodeString } from '../utils/encoding';
+import redis from '../utils/redis';
 
 export const metadata = {
   title: 'Teerank',
@@ -88,8 +89,7 @@ export default async function Index() {
     players,
     clans,
     gameTypes,
-    gameTypesCount,
-    { playerCount, clanCount },
+    globalCounts,
   ] = await Promise.all([
     prisma.player.findMany({
       select: {
@@ -128,8 +128,7 @@ export default async function Index() {
       take: 3,
     }),
 
-    prisma.gameType.count(),
-    getGlobalCounts(),
+    getGlobalCounts(redis),
   ]);
 
   return (
@@ -141,7 +140,7 @@ export default async function Index() {
         <RankCard
           title="Players"
           titleHref="/all"
-          count={playerCount}
+          count={globalCounts.players}
           rankings={players.map((player) => player.name)}
           formatRankingHref={(playerName) =>
             `/player/${encodeString(playerName)}`
@@ -150,15 +149,15 @@ export default async function Index() {
         <RankCard
           title="Clans"
           titleHref="/all/clans"
-          count={clanCount}
+          count={globalCounts.clans}
           rankings={clans.map((clan) => clan.name)}
           formatRankingHref={(clanName) => `/clan/${encodeString(clanName)}`}
         />
         <RankCard
           title="Gametypes"
           titleHref="/gametypes"
-          count={gameTypesCount}
-          rankings={gameTypes.map((gameTypes) => gameTypes.name)}
+          count={globalCounts.gameTypes}
+          rankings={gameTypes.map((gameType) => gameType.name)}
           formatRankingHref={(gameType) =>
             `/gametype/${encodeString(gameType)}`
           }

apps/frontend/utils/globalCounts.ts

@@ -0,0 +1,17 @@
+import { Redis } from 'ioredis'
+
+const redisClientSingleton = () => {
+  return new Redis()
+}
+
+type RedisClientSingleton = ReturnType<typeof redisClientSingleton>
+
+const globalForRedis = globalThis as unknown as {
+  redis: RedisClientSingleton | undefined
+}
+
+const redis = globalForRedis.redis ?? redisClientSingleton()
+
+export default redis
+
+if (process.env.NODE_ENV !== 'production') globalForRedis.redis = redis