Improve players stats page

Author: vtm9

apps/codebattle/assets/js/__tests__/PopoverStickOnHover.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import PopoverStickOnHover from '../widgets/components/PopoverStickOnHover';
+
+describe('PopoverStickOnHover', () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test('keeps the delayed hover timer across parent rerenders', () => {
+    vi.useFakeTimers();
+
+    const component = <span>user details</span>;
+    const view = render(
+      <PopoverStickOnHover id="user-info" delay={400} component={component}>
+        <button type="button">Ada</button>
+      </PopoverStickOnHover>,
+    );
+
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Ada' }));
+
+    view.rerender(
+      <PopoverStickOnHover id="user-info" delay={400} component={component}>
+        <button type="button">Ada</button>
+      </PopoverStickOnHover>,
+    );
+
+    act(() => vi.advanceTimersByTime(399));
+    expect(screen.queryByText('user details')).not.toBeInTheDocument();
+
+    act(() => vi.advanceTimersByTime(1));
+    expect(screen.getByText('user details')).toBeInTheDocument();
+  });
+});

apps/codebattle/assets/js/__tests__/UserInfo.test.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode } from 'react';
 
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import UserInfo from '../widgets/components/UserInfo';
@@ -21,10 +21,20 @@ vi.mock('../widgets/slices', () => ({
 }));
 
 vi.mock('../widgets/components/PopoverStickOnHover', () => ({
-  default: ({ children, component }: { children: ReactNode; component: ReactNode }) => (
+  default: ({
+    children,
+    component,
+    delay,
+  }: {
+    children: ReactNode;
+    component: ReactNode;
+    delay?: number;
+  }) => (
     <>
       {children}
-      <div data-testid="popover-content">{component}</div>
+      <div data-delay={delay} data-testid="popover-content">
+        {component}
+      </div>
     </>
   ),
 }));
@@ -34,10 +44,16 @@ vi.mock('../widgets/components/UserName', () => ({
 }));
 
 vi.mock('../widgets/components/UserStats', () => ({
-  default: () => <div>user details</div>,
+  default: ({ data }: { data?: unknown }) => (
+    <div>{data ? 'loaded user details' : 'loading user details'}</div>
+  ),
 }));
 
 describe('UserInfo', () => {
+  beforeEach(() => {
+    dispatch.mockClear();
+  });
+
   test('renders only bot text in the tooltip without preloading user details', () => {
     const fetchMock = vi.fn();
     globalThis.fetch = fetchMock;
@@ -47,4 +63,32 @@ describe('UserInfo', () => {
     expect(screen.getByTestId('popover-content')).toHaveTextContent(/^bot$/);
     expect(fetchMock).not.toHaveBeenCalled();
   });
+
+  test('delays user popovers and shares cached requests for the same user', async () => {
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue({ achievements: [], metrics: {} }),
+    });
+    globalThis.fetch = fetchMock;
+
+    const view = render(
+      <>
+        <UserInfo user={{ id: 101, name: 'Ada' }} />
+        <UserInfo user={{ id: 101, name: 'Ada' }} />
+      </>,
+    );
+
+    expect(screen.getAllByTestId('popover-content')[0]).toHaveAttribute('data-delay', '150');
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      expect(screen.getAllByText('loaded user details')).toHaveLength(2);
+    });
+
+    view.unmount();
+    render(<UserInfo user={{ id: 101, name: 'Ada' }} />);
+
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('loaded user details')).toBeInTheDocument();
+  });
 });

apps/codebattle/assets/js/widgets/components/PopoverStickOnHover.tsx

@@ -23,23 +23,34 @@ function PopoverStickOnHover({
 }: PopoverStickOnHoverProps) {
   const [showPopover, setShowPopover] = useState(false);
   const childNode = useRef<unknown>(null);
-  let setTimeoutConst: ReturnType<typeof setTimeout> | null = null;
+  const showTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(() => () => {
-    if (setTimeoutConst) {
-      clearTimeout(setTimeoutConst);
-    }
-  });
+  useEffect(
+    () => () => {
+      if (showTimeout.current) {
+        clearTimeout(showTimeout.current);
+      }
+    },
+    [],
+  );
 
   const handleMouseEnter = () => {
-    setTimeoutConst = setTimeout(() => {
+    if (showTimeout.current) {
+      clearTimeout(showTimeout.current);
+    }
+
+    showTimeout.current = setTimeout(() => {
       setShowPopover(true);
       onMouseEnter();
     }, delay);
   };
 
   const handleMouseLeave = () => {
-    clearTimeout(setTimeoutConst as ReturnType<typeof setTimeout>);
+    if (showTimeout.current) {
+      clearTimeout(showTimeout.current);
+      showTimeout.current = null;
+    }
+
     setShowPopover(false);
   };
 

apps/codebattle/assets/js/widgets/components/UserInfo.tsx

@@ -20,46 +20,69 @@ interface UserPopoverContentProps {
   user: UserNameUser;
 }
 
-function UserPopoverContent({ user }: UserPopoverContentProps) {
-  // TODO: store stats in global redux state
-  const dispatch = useDispatch<AppDispatch>();
+type UserStatsData = React.ComponentProps<typeof UserStats>['data'];
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [stats, setStats] = useState<any>(null);
+const userStatsCache = new Map<UserNameUser['id'], UserStatsData>();
+const userStatsRequests = new Map<UserNameUser['id'], Promise<UserStatsData>>();
 
-  useEffect(() => {
-    const userId = user.id;
-    const controller = new AbortController();
+const fetchUserStats = (userId: UserNameUser['id']) => {
+  const cached = userStatsCache.get(userId);
+
+  if (cached) {
+    return Promise.resolve(cached);
+  }
+
+  const pendingRequest = userStatsRequests.get(userId);
+
+  if (pendingRequest) {
+    return pendingRequest;
+  }
 
-    fetch(`/api/v1/user/${userId}/achievements`, {
-      signal: controller.signal,
+  const request = fetch(`/api/v1/user/${userId}/achievements`)
+    .then(async (response) => {
+      if (!response.ok) {
+        throw new Error(`Request failed with status ${response.status}`);
+      }
+
+      return camelizeKeys(await response.json()) as UserStatsData;
     })
-      .then(async (response) => {
-        if (!response.ok) {
-          throw new Error(`Request failed with status ${response.status}`);
-        }
+    .then((data) => {
+      userStatsCache.set(userId, data);
+      return data;
+    })
+    .finally(() => {
+      userStatsRequests.delete(userId);
+    });
+
+  userStatsRequests.set(userId, request);
+  return request;
+};
+
+function UserPopoverContent({ user }: UserPopoverContentProps) {
+  const dispatch = useDispatch<AppDispatch>();
+  const [stats, setStats] = useState<UserStatsData>(() => userStatsCache.get(user.id));
 
-        const data = await response.json();
+  useEffect(() => {
+    const userId = user.id;
+    let mounted = true;
 
-        if (!controller.signal.aborted) {
-          setStats(camelizeKeys(data));
+    setStats(userStatsCache.get(userId));
+    fetchUserStats(userId)
+      .then((data) => {
+        if (mounted) {
+          setStats(data);
         }
       })
       .catch((error) => {
-        // Aborting the in-flight request on hover-out (below) rejects with an
-        // AbortError — that's expected teardown, not a real failure, so don't
-        // surface it as a global error.
-        if (controller.signal.aborted || (error as { name?: string })?.name === 'AbortError') {
-          return;
+        if (mounted) {
+          dispatch(actions.setError(error));
         }
-
-        dispatch(actions.setError(error));
       });
 
     return () => {
-      controller.abort();
+      mounted = false;
     };
-  }, [dispatch, setStats, user.id]);
+  }, [dispatch, user.id]);
 
   // UserStats expects a stricter user shape (numeric id); UserNameUser is broader.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -141,7 +164,12 @@ function UserInfo({
   }
 
   return (
-    <PopoverStickOnHover id={`user-info-${user?.id}`} placement={placement} component={content}>
+    <PopoverStickOnHover
+      id={`user-info-${user?.id}`}
+      delay={150}
+      placement={placement}
+      component={content}
+    >
       <div>
         <UserName
           className={userClassName}

apps/codebattle/lib/codebattle/game/context.ex

@@ -457,16 +457,15 @@ defmodule Codebattle.Game.Context do
   end
 
   def get_active_game_id(user_id) do
-    Game
-    |> where([g], g.state == "playing")
-    |> where([g], fragment("? = ANY(player_ids)", ^user_id))
-    # |> where([g], g.inserted_at > fragment("now() - interval '30 minutes'"))
-    |> order_by([g], desc: g.id)
-    |> Repo.all()
-    |> case do
-      [%Game{id: id} | _] -> id
-      _ -> nil
-    end
+    Repo.one(
+      from(g in Game,
+        where: g.state == "playing",
+        where: fragment("? @> ARRAY[?]::integer[]", g.player_ids, ^user_id),
+        order_by: [desc: g.id],
+        limit: 1,
+        select: g.id
+      )
+    )
   end
 
   def report_on_player(game_id, reporter, offender_id) do

apps/codebattle/lib/codebattle/user/stats.ex

@@ -15,7 +15,7 @@ defmodule Codebattle.User.Stats do
     user_games_stats =
       Repo.all(
         from(ug in UserGame,
-          select: %{result: ug.result, lang: ug.lang, count: count(ug.id)},
+          select: %{result: ug.result, lang: ug.lang, count: count()},
           where: ug.user_id == ^user_id,
           where: ug.result in ["won", "lost", "gave_up"],
           group_by: [ug.result, ug.lang]

apps/codebattle/lib/codebattle_web/controllers/api/v1/user_controller.ex

@@ -276,8 +276,8 @@ defmodule CodebattleWeb.Api.V1.UserController do
 
       user ->
         active_game_id = Game.Context.get_active_game_id(id)
-        stats = UserStats.get_game_stats(id)
         achievements = Achievements.get_user_achievements(id)
+        stats = if include_stats, do: UserStats.get_game_stats(id), else: %{games: %{}, all: []}
         metrics = build_metrics_from_achievements(achievements, stats)
 
         payload = %{

apps/codebattle/priv/repo/migrations/20260802120000_add_user_profile_query_indexes.exs

@@ -0,0 +1,26 @@
+defmodule Codebattle.Repo.Migrations.AddUserProfileQueryIndexes do
+  @moduledoc false
+  use Ecto.Migration
+
+  @disable_ddl_transaction true
+  @disable_migration_lock true
+
+  def up do
+    execute("""
+    CREATE INDEX CONCURRENTLY IF NOT EXISTS user_games_user_id_result_lang_stats_idx
+    ON user_games (user_id, result, lang)
+    WHERE result IN ('won', 'lost', 'gave_up')
+    """)
+
+    execute("""
+    CREATE INDEX CONCURRENTLY IF NOT EXISTS games_playing_player_ids_idx
+    ON games USING gin (player_ids)
+    WHERE state = 'playing'
+    """)
+  end
+
+  def down do
+    execute("DROP INDEX CONCURRENTLY IF EXISTS user_games_user_id_result_lang_stats_idx")
+    execute("DROP INDEX CONCURRENTLY IF EXISTS games_playing_player_ids_idx")
+  end
+end

apps/codebattle/test/codebattle_web/controllers/api/v1/user_controller_test.exs

@@ -300,6 +300,36 @@ defmodule CodebattleWeb.Api.V1.UserControllerTest do
       assert is_list(achievements)
     end
 
+    test "uses denormalized achievements without scanning user games", %{conn: conn} do
+      user = insert(:user)
+      game = insert(:game, state: "game_over")
+      insert(:user_game, user: user, game: game, result: "won", lang: "js")
+      :ok = Achievements.recalculate_user(user.id)
+
+      handler_id = "user-achievements-query-test-#{System.unique_integer()}"
+      test_process = self()
+
+      :ok =
+        :telemetry.attach(
+          handler_id,
+          [:codebattle, :repo, :query],
+          fn _event, _measurements, %{query: query}, _config ->
+            if String.contains?(query, ~s[FROM "user_games"]) do
+              send(test_process, :queried_user_games)
+            end
+          end,
+          nil
+        )
+
+      on_exit(fn -> :telemetry.detach(handler_id) end)
+
+      conn
+      |> get(Routes.api_v1_user_path(conn, :achievements, user.id))
+      |> json_response(200)
+
+      refute_receive :queried_user_games
+    end
+
     test "returns 404 for missing user", %{conn: conn} do
       resp_body =
         conn