Merge pull request #160 from CSSLab/copilot/fix-153

Add realtime user indicator to home page

Author: kevinjosethomas

__tests__/api/active-users.test.ts

@@ -0,0 +1,25 @@
+import { createMocks } from 'node-mocks-http'
+import handler from 'src/pages/api/active-users'
+
+global.fetch = jest.fn()
+
+describe('/api/active-users', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    delete process.env.POSTHOG_PROJECT_ID
+    delete process.env.POSTHOG_API_KEY
+  })
+
+  it('should return 405 for non-GET requests', async () => {
+    const { req, res } = createMocks({
+      method: 'POST',
+    })
+
+    await handler(req, res)
+
+    expect(res._getStatusCode()).toBe(405)
+    const data = JSON.parse(res._getData())
+    expect(data.success).toBe(false)
+    expect(data.error).toBe('Method not allowed')
+  })
+})

__tests__/api/home/activeUsers.test.ts

@@ -0,0 +1,41 @@
+import { getActiveUserCount } from 'src/api/home/activeUsers'
+
+// Mock fetch for API calls
+global.fetch = jest.fn()
+
+describe('getActiveUserCount', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should return a positive number', async () => {
+    // Mock successful API response
+    ;(fetch as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        activeUsers: 15,
+        success: true,
+      }),
+    })
+
+    const count = await getActiveUserCount()
+    expect(count).toBeGreaterThanOrEqual(0)
+    expect(Number.isInteger(count)).toBe(true)
+  })
+
+  it('should call the internal API endpoint', async () => {
+    // Mock successful API response
+    ;(fetch as jest.Mock).mockResolvedValueOnce({
+      ok: true,
+      json: async () => ({
+        activeUsers: 10,
+        success: true,
+      }),
+    })
+
+    const count = await getActiveUserCount()
+
+    expect(fetch).toHaveBeenCalledWith('/api/active-users')
+    expect(count).toBe(10)
+  })
+})

package.json

@@ -61,6 +61,7 @@
     "eslint-plugin-react": "^7.28.0",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^30.0.4",
+    "node-mocks-http": "^1.17.2",
     "postcss": "^8.4.45",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.6",

src/api/home/activeUsers.ts

@@ -0,0 +1,19 @@
+/**
+ * Get the count of active users in the last 30 minutes
+ * Calls our secure server-side API endpoint that handles PostHog integration
+ */
+export const getActiveUserCount = async (): Promise<number> => {
+  try {
+    const response = await fetch('/api/active-users')
+
+    const data = await response.json()
+
+    if (data.success && typeof data.activeUsers === 'number') {
+      return data.activeUsers
+    }
+  } catch (error) {
+    console.error('Failed to fetch active user count:', error)
+  }
+
+  return 0
+}

src/api/home/index.ts

@@ -1 +1,2 @@
 export * from './home'
+export * from './activeUsers'

src/api/index.ts

@@ -6,3 +6,4 @@ export * from './turing'
 export * from './play'
 export * from './profile'
 export * from './opening'
+export { getActiveUserCount } from './home'

src/components/Home/HomeHero.tsx

@@ -15,7 +15,7 @@ import {
   BotOrNotIcon,
 } from 'src/components/Common/Icons'
 import { PlayType } from 'src/types'
-import { getGlobalStats } from 'src/api'
+import { getGlobalStats, getActiveUserCount } from 'src/api'
 import { AuthContext, ModalContext } from 'src/contexts'
 import { AnimatedNumber } from 'src/components/Common/AnimatedNumber'
 
@@ -120,6 +120,7 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
     puzzle_games_total: number
     turing_games_total: number
   }>()
+  const [activeUsers, setActiveUsers] = useState<number>(0)
   const { setPlaySetupModalProps } = useContext(ModalContext)
   const { user, connectLichess } = useContext(AuthContext)
 
@@ -130,11 +131,36 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
     [setPlaySetupModalProps],
   )
 
+  // Fetch global stats and set up periodic updates
   useEffect(() => {
-    ;(async () => {
+    const fetchGlobalStats = async () => {
       const data = await getGlobalStats()
       setGlobalStats(data)
-    })()
+    }
+
+    // Fetch immediately
+    fetchGlobalStats()
+
+    // Update every 20 seconds
+    const interval = setInterval(fetchGlobalStats, 20000)
+
+    return () => clearInterval(interval)
+  }, [])
+
+  // Fetch active users count and set up periodic updates
+  useEffect(() => {
+    const fetchActiveUsers = async () => {
+      const count = await getActiveUserCount()
+      setActiveUsers(count)
+    }
+
+    // Fetch immediately
+    fetchActiveUsers()
+
+    // Update every 20 seconds
+    const interval = setInterval(fetchActiveUsers, 20000)
+
+    return () => clearInterval(interval)
   }, [])
 
   return (
@@ -227,28 +253,43 @@ export const HomeHero: React.FC<Props> = ({ scrollHandler }: Props) => {
             />
           </div>
         </div>
-        <motion.div className="grid grid-cols-3 gap-6 px-2 md:flex">
+        <motion.div className="grid grid-cols-2 gap-6 px-2 md:flex md:gap-6">
+          {activeUsers > 0 ? (
+            <p className="text-center text-base text-primary/80">
+              <AnimatedNumber
+                value={activeUsers}
+                className="font-bold text-human-2"
+              />{' '}
+              users online
+            </p>
+          ) : (
+            <></>
+          )}
           <p className="text-center text-base text-primary/80">
             <AnimatedNumber
               value={globalStats?.play_moves_total || 0}
-              className="font-bold"
+              className="font-bold text-human-2"
             />{' '}
             moves played
           </p>
           <p className="text-center text-base text-primary/80">
             <AnimatedNumber
               value={globalStats?.puzzle_games_total || 0}
-              className="font-bold"
+              className="font-bold text-human-2"
             />{' '}
             puzzle games solved
           </p>
-          <p className="text-center text-base text-primary/80">
-            <AnimatedNumber
-              value={globalStats?.turing_games_total || 0}
-              className="font-bold"
-            />{' '}
-            turing games played
-          </p>
+          {activeUsers <= 0 ? (
+            <p className="text-center text-base text-primary/80">
+              <AnimatedNumber
+                value={globalStats?.turing_games_total || 0}
+                className="font-bold"
+              />{' '}
+              turing games played
+            </p>
+          ) : (
+            <></>
+          )}
         </motion.div>
       </div>
     </Fragment>

src/pages/api/active-users.ts

@@ -0,0 +1,96 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+type Data = {
+  activeUsers: number
+  success: boolean
+  error?: string
+}
+
+/**
+ * API endpoint to get active user count from PostHog
+ * This keeps the PostHog API key secure on the server side
+ */
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<Data>,
+) {
+  if (req.method !== 'GET') {
+    return res.status(405).json({
+      activeUsers: 0,
+      success: false,
+      error: 'Method not allowed',
+    })
+  }
+
+  try {
+    const activeUsers = await fetchActiveUsersFromPostHog()
+
+    if (activeUsers !== null) {
+      return res.status(200).json({
+        activeUsers,
+        success: true,
+      })
+    }
+  } catch (error) {
+    console.error('Error in active-users API:', error)
+    return res.status(500).json({
+      activeUsers: 0,
+      success: false,
+    })
+  }
+}
+
+/**
+ * Fetch active users from PostHog Insights API (server-side only)
+ */
+async function fetchActiveUsersFromPostHog(): Promise<number | null> {
+  const posthogUrl = process.env.POSTHOG_URL || 'https://us.posthog.com'
+  const projectId = process.env.POSTHOG_PROJECT_ID
+  const personalApiKey = process.env.POSTHOG_API_KEY
+
+  const url = `${posthogUrl}/api/projects/${projectId}/query/`
+
+  const now = new Date()
+  const thirtyMinutesAgo = new Date(
+    now.getTime() - 30 * 60 * 1000,
+  ).toISOString()
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${personalApiKey}`,
+      },
+      body: JSON.stringify({
+        query: {
+          kind: 'HogQLQuery',
+          query: `
+            SELECT count(DISTINCT person_id) as recent_users
+            FROM events
+            WHERE event = '$pageview'
+              AND timestamp > toDateTime('${thirtyMinutesAgo}')
+          `,
+        },
+      }),
+    })
+
+    console.log(`
+            SELECT count(DISTINCT person_id) as recent_users
+            FROM events
+            WHERE event = '$pageview'
+              AND timestamp > TIMESTAMP '${thirtyMinutesAgo}'
+          `)
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      throw new Error(errorText)
+    }
+
+    const data = await response.json()
+    return data.results[0][0]
+  } catch (error) {
+    console.error('Error fetching recent users:', error)
+    return null
+  }
+}