spec: deliver deep-module spec line to main

apps/console/package.json

@@ -39,6 +39,7 @@
     "@ulticode/i18n-completeness": "workspace:*",
     "@ulticode/locale-preference": "workspace:*",
     "@ulticode/markdown-utils": "workspace:*",
+    "@ulticode/request-state": "workspace:*",
     "@ulticode/sidebar-menu": "workspace:*",
     "@ulticode/submission-status": "workspace:*",
     "@ulticode/theme": "workspace:*",

apps/console/src/api/__tests__/problem.spec.ts

@@ -84,7 +84,8 @@ describe("fetchProblems", () => {
       totalPages: 4,
     });
 
-    const result = await fetchProblems({ search: "two sum" }, 2, 1);
+    const signal = new AbortController().signal;
+    const result = await fetchProblems({ search: "two sum" }, 2, 1, signal);
 
     expect(result.items[0]?.title).toBe("Two Sum");
     expect(result.total).toBe(4);
@@ -93,6 +94,7 @@ describe("fetchProblems", () => {
     expect(result.totalPages).toBe(4);
     expect(apiGet).toHaveBeenCalledWith(
       "/problems?page=2&pageSize=1&search=two+sum",
+      { signal },
     );
   });
 });

apps/console/src/api/problem.ts

@@ -29,6 +29,7 @@ export async function fetchProblems(
   filters: ProblemFilters = {},
   page: number = 1,
   pageSize: number = 50,
+  signal?: AbortSignal,
 ): Promise<PageResult<Problem>> {
   const params = new URLSearchParams();
   params.append("page", String(page));
@@ -44,7 +45,7 @@ export async function fetchProblems(
   if (filters.sortBy) params.append("sortBy", filters.sortBy);
   if (filters.sortOrder) params.append("sortOrder", filters.sortOrder);
 
-  const response = await apiGet<unknown>(`/problems?${params.toString()}`);
+  const response = await apiGet<unknown>(`/problems?${params.toString()}`, { signal });
   const pageResult = readPage<unknown>(response);
   return {
     ...pageResult,

apps/console/src/components/problem/composables/useProblemExplorer.ts

@@ -5,6 +5,7 @@ import type { Component } from "vue";
 import type { ProblemExplorerProps } from "../type";
 import { CheckCircle2, FileEdit } from "lucide-vue-next";
 import { fetchProblems } from "@/api/problem";
+import { createValueRequest } from "@ulticode/request-state";
 import { toast } from "vue-sonner";
 import { useRouter } from "vue-router";
 import { PROBLEM_CATEGORIES } from "@/constants/problem-categories";
@@ -33,11 +34,15 @@ export function useProblemExplorer(props: ProblemExplorerProps) {
   const page = ref(1);
   const total = ref(0);
   const totalPages = ref(1);
-  const isLoading = ref(false);
+  const problemRequest = createValueRequest({
+    errorMessage: "Failed to load problems",
+    onError: (error) => {
+      console.error("Failed to load problems", error);
+      toast.error(t("problem.explorer.failedToLoad"));
+    },
+  });
+  const isLoading = problemRequest.loading;
   const searchDebounceTimer = ref<ReturnType<typeof setTimeout> | null>(null);
-  // Monotonic request token: a fresh search/filter bumps it so an in-flight
-  // response that was superseded can detect it is stale and discard itself.
-  const latestRequestToken = ref(0);
 
   const selectedCategory = ref(props.initialCategory || "all");
 
@@ -68,46 +73,28 @@ export function useProblemExplorer(props: ProblemExplorerProps) {
   };
 
   const loadProblems = async (append = false) => {
-    // Supplied mode: the caller passed its own problem list, so there is no
-    // fetch to perform and the watchers/clearFilters/onMounted stay no-op.
     if (props.problems !== undefined) return;
-    // Serialize pagination (scroll-driven load-more can fan); fresh
-    // searches/filters go through and supersede via latestRequestToken.
     if (append && isLoading.value) return;
-    const myToken = ++latestRequestToken.value;
-    isLoading.value = true;
-    try {
-      const currentPage = append ? page.value : 1;
-      const result = await fetchProblems(
-        buildFilters(),
-        currentPage,
-        PROBLEMS_PER_PAGE,
-      );
-      // A newer search/filter superseded this request — discard the stale
-      // response so it cannot overwrite newer state.
-      if (myToken !== latestRequestToken.value) return;
-      if (append) {
-        fallbackProblems.value = [...fallbackProblems.value, ...result.items];
-      } else {
-        fallbackProblems.value = result.items;
-        page.value = 1;
-      }
-      total.value = result.total;
-      totalPages.value = result.totalPages;
-    } catch (error) {
-      if (myToken !== latestRequestToken.value) return;
-      console.error("Failed to load problems", error);
-      toast.error(t("problem.explorer.failedToLoad"));
-      if (!append) {
+    const currentPage = append ? page.value : 1;
+    const result = await problemRequest.run((signal) =>
+      fetchProblems(buildFilters(), currentPage, PROBLEMS_PER_PAGE, signal),
+    );
+    if (!result) {
+      if (problemRequest.error.value && !append) {
         fallbackProblems.value = [];
         total.value = 0;
         totalPages.value = 1;
       }
-    } finally {
-      if (myToken === latestRequestToken.value) {
-        isLoading.value = false;
-      }
+      return;
+    }
+    if (append) {
+      fallbackProblems.value = [...fallbackProblems.value, ...result.items];
+    } else {
+      fallbackProblems.value = result.items;
+      page.value = 1;
     }
+    total.value = result.total;
+    totalPages.value = result.totalPages;
   };
 
   onMounted(() => {

apps/console/src/composables/useSearch.ts

@@ -1,5 +1,6 @@
 import { onScopeDispose, ref, type Ref } from "vue";
 import { searchApi } from "@/api/search";
+import { createValueRequest } from "@ulticode/request-state";
 import type { SearchResult } from "@/types/search";
 
 export interface UseSearchOptions {
@@ -29,32 +30,24 @@ export function useSearch(options: UseSearchOptions = {}): UseSearchReturn {
 
   const query = ref("");
   const results = ref<SearchResult[]>([]);
-  const loading = ref(false);
-  const error = ref<string | null>(null);
+  const request = createValueRequest({ errorMessage: "Search failed" });
+  const { loading, error } = request;
   const total = ref(0);
   const selectedIndex = ref(0);
   const isOpen = ref(false);
 
   let debounceTimer: ReturnType<typeof setTimeout> | null = null;
-  let activeController: AbortController | null = null;
-  let latestRequest = 0;
-
   function cancelPendingSearch(): void {
-    latestRequest += 1;
+    request.cancel();
 
     if (debounceTimer) {
       clearTimeout(debounceTimer);
       debounceTimer = null;
     }
-
-    activeController?.abort();
-    activeController = null;
-    loading.value = false;
   }
 
   const search = (q: string): void => {
     cancelPendingSearch();
-    const requestId = latestRequest;
 
     query.value = q;
     error.value = null;
@@ -68,42 +61,12 @@ export function useSearch(options: UseSearchOptions = {}): UseSearchReturn {
 
     debounceTimer = setTimeout(() => {
       debounceTimer = null;
-      if (requestId !== latestRequest) {
-        return;
-      }
-
-      const controller = new AbortController();
-      activeController = controller;
-      loading.value = true;
-
-      void searchApi
-        .search({ query: q, limit }, controller.signal)
-        .then((response) => {
-          if (requestId !== latestRequest || controller.signal.aborted) {
-            return;
-          }
-
-          results.value = response.results;
-          total.value = response.total;
-          selectedIndex.value = 0;
-        })
-        .catch((err: unknown) => {
-          if (requestId !== latestRequest || controller.signal.aborted) {
-            return;
-          }
-
-          error.value = err instanceof Error ? err.message : "Search failed";
-          results.value = [];
-          total.value = 0;
-        })
-        .finally(() => {
-          if (requestId === latestRequest) {
-            loading.value = false;
-            if (activeController === controller) {
-              activeController = null;
-            }
-          }
-        });
+      void request.run((signal) => searchApi.search({ query: q, limit }, signal)).then((response) => {
+        if (!response) return;
+        results.value = response.results;
+        total.value = response.total;
+        selectedIndex.value = 0;
+      });
     }, debounceMs);
   };
 

apps/console/src/stores/__tests__/contestBrowse.spec.ts

@@ -82,12 +82,25 @@ describe("useContestBrowseStore loading state", () => {
 
     expect(store.loadingContests).toBe(false);
   });
-  it("does not write past-load failures into shared browse error", async () => {
-    vi.mocked(fetchPastContests).mockRejectedValue(new Error("past failed"));
+  it("keeps past-only pagination out of page-wide loading", async () => {
+    type ContestPage = PaginatedResult<ContestListItem>;
+
+    const past = deferred<ContestPage>();
+    vi.mocked(fetchPastContests).mockReturnValue(past.promise);
+
     const store = useContestBrowseStore();
-    store.error = "ongoing failed";
+    const pastLoad = store.loadPastContests(1, 10);
+    expect(store.loadingContests).toBe(false);
 
+    past.resolve({ items: [], total: 0, page: 1, pageSize: 10, totalPages: 0 });
+    await pastLoad;
+    expect(store.loadingContests).toBe(false);
+  });
+
+  it("exposes past-load failures from request-state", async () => {
+    vi.mocked(fetchPastContests).mockRejectedValue(new Error("past failed"));
+    const store = useContestBrowseStore();
     await expect(store.loadPastContests()).rejects.toThrow("past failed");
-    expect(store.error).toBe("ongoing failed");
+    expect(store.error).toBe("past failed");
   });
 });

apps/console/src/stores/achievement.ts

@@ -3,12 +3,15 @@ import { ref, computed } from "vue";
 import type { Achievement, AchievementProgress } from "@/types/achievement";
 import { achievementApi } from "@/api/achievement";
 import { getSocketManager, NotificationEvent } from "@/lib/socket";
+import { createValueRequest } from "@ulticode/request-state";
 
 export const useAchievementStore = defineStore("achievement", () => {
   const achievements = ref<Achievement[]>([]);
   const userAchievements = ref<AchievementProgress[]>([]);
   const totalPoints = ref(0);
-  const loading = ref(false);
+  const allRequest = createValueRequest({ errorMessage: "Failed to load achievements", rethrow: true });
+  const userRequest = createValueRequest({ errorMessage: "Failed to load user achievements", rethrow: true });
+  const loading = computed(() => allRequest.loading.value || userRequest.loading.value);
   const initialized = ref(false);
   const error = ref<string | null>(null);
 
@@ -42,39 +45,39 @@ export const useAchievementStore = defineStore("achievement", () => {
 
   // Actions
   async function fetchAll(params?: { category?: string }) {
-    loading.value = true;
     error.value = null;
+    allRequest.error.value = null;
+    userRequest.error.value = null;
     try {
-      const result = await achievementApi.getAll(params);
+      const result = await allRequest.run(() => achievementApi.getAll(params));
+      if (!result) return null;
       achievements.value = result.items;
       return result;
     } catch (err) {
-      error.value =
-        err instanceof Error ? err.message : "Failed to load achievements";
+      error.value = allRequest.error.value;
       throw err;
-    } finally {
-      loading.value = false;
     }
   }
 
   async function fetchUserAchievements() {
-    loading.value = true;
     error.value = null;
+    allRequest.error.value = null;
+    userRequest.error.value = null;
     try {
-      const result = await achievementApi.getUserAchievements();
+      const result = await userRequest.run(() => achievementApi.getUserAchievements());
+      if (!result) return null;
       userAchievements.value = result;
       return result;
     } catch (err) {
-      error.value =
-        err instanceof Error ? err.message : "Failed to load user achievements";
+      error.value = userRequest.error.value;
       throw err;
-    } finally {
-      loading.value = false;
     }
   }
 
   async function fetchUserPoints() {
     error.value = null;
+    allRequest.error.value = null;
+    userRequest.error.value = null;
     try {
       const result = await achievementApi.getUserPoints();
       totalPoints.value = result.points;
@@ -90,6 +93,8 @@ export const useAchievementStore = defineStore("achievement", () => {
     if (initialized.value) return;
 
     error.value = null;
+    allRequest.error.value = null;
+    userRequest.error.value = null;
     try {
       await Promise.all([fetchUserAchievements(), fetchUserPoints()]);
       initialized.value = true;
@@ -134,6 +139,8 @@ export const useAchievementStore = defineStore("achievement", () => {
 
   function clearError() {
     error.value = null;
+    allRequest.error.value = null;
+    userRequest.error.value = null;
   }
 
   return {