@nualang/nualang-ui-components 0.1.1431 → 0.1.1432

package/dist/Dialogs/FindCoursesDialog/FindCoursesDialog.js

@@ -54,6 +54,39 @@ const DEFAULT_FILTERS = {
   difficulty: "all",
   sort: "popular"
 };
+const MY_LIBRARY_TAB = 0;
+// My library lists the user's own courses, so newest first is more useful
+// there than popularity. The Community tab keeps the "popular" default.
+const MY_LIBRARY_DEFAULT_SORT = "newest";
+
+// My library rows are fetched in full and filtered here, the same way the
+// Courses screen does it, so search never goes through the global course search.
+function filterLibraryCourses(courses, filters, search) {
+  const searchText = search.trim().toLowerCase();
+  const filtered = courses.filter(course => {
+    if (filters.learnLang !== "all" && course.learnLang !== filters.learnLang) {
+      return false;
+    }
+    if (filters.forLang !== "all" && course.forLang !== filters.forLang) {
+      return false;
+    }
+    if (filters.difficulty !== "all") {
+      const difficulties = Array.isArray(course.difficulty) ? course.difficulty : [course.difficulty];
+      if (!difficulties.includes(filters.difficulty)) {
+        return false;
+      }
+    }
+    if (searchText) {
+      const nameMatch = (course.courseName || "").toLowerCase().includes(searchText);
+      const descriptionMatch = (course.description || "").toLowerCase().includes(searchText);
+      if (!nameMatch && !descriptionMatch) {
+        return false;
+      }
+    }
+    return true;
+  });
+  return sortItems(filtered, filters.sort);
+}
 function CourseFilters({
   t,
   search,
@@ -368,6 +401,7 @@ export default function FindCoursesDialog({
   formatCourses,
   groupCourseIds = [],
   groupCoursesLimit = 100,
+  createdCoursesLimit = 1000,
   alreadyAddedCourseIds = [],
   isCommunityAccessRestricted = false,
   learnLangOptions = [],
@@ -382,16 +416,19 @@ export default function FindCoursesDialog({
   } = useInView({
     threshold: 0
   });
-  const [tab, setTab] = useState(0);
-  const effectiveTab = isCommunityAccessRestricted ? 0 : tab;
+  const [tab, setTab] = useState(MY_LIBRARY_TAB);
+  const effectiveTab = isCommunityAccessRestricted ? MY_LIBRARY_TAB : tab;
   const [selectedCourseIds, setSelectedCourseIds] = useState([]);
   const [search, setSearch] = useState("");
-  const defaultFilters = {
+  const getDefaultFilters = tabIndex => ({
     ...DEFAULT_FILTERS,
     learnLang: defaultLearnLang,
-    forLang: defaultForLang
-  };
-  const [filters, setFilters] = useState(defaultFilters);
+    forLang: defaultForLang,
+    ...(tabIndex === MY_LIBRARY_TAB && {
+      sort: MY_LIBRARY_DEFAULT_SORT
+    })
+  });
+  const [filters, setFilters] = useState(() => getDefaultFilters(MY_LIBRARY_TAB));
   // Every course object ever handed to this dialog, keyed by id. search/
   // difficulty/sort are now applied upstream (the caller only fetches
   // matching pages), so a course that's selected and then filtered out of
@@ -407,8 +444,8 @@ export default function FindCoursesDialog({
   const reset = () => {
     setSelectedCourseIds([]);
     setSearch("");
-    setFilters(defaultFilters);
-    setTab(0);
+    setFilters(getDefaultFilters(MY_LIBRARY_TAB));
+    setTab(MY_LIBRARY_TAB);
     setSearchResetKey(key => key + 1);
     setCourseCache(new Map());
   };
@@ -432,7 +469,7 @@ export default function FindCoursesDialog({
     if (isCommunityAccessRestricted) return;
     setTab(v);
     setSearch("");
-    setFilters(defaultFilters);
+    setFilters(getDefaultFilters(v));
     setSearchResetKey(key => key + 1);
   };
   const handleFilterChange = event => {
@@ -450,28 +487,19 @@ export default function FindCoursesDialog({
   // every page load - so the carousels below know when a reorder is a real
   // reset versus just more of the same sort settling in as data grows.
   const librarySortResetKey = `${search}|${filters.learnLang}|${filters.forLang}|${filters.difficulty}|${filters.sort}`;
+
+  // Search/filters/sort are applied client-side in libraryCreatedCourses, so
+  // changing them doesn't refetch
   const teachCoursesQuery = useInfiniteQuery({
-    queryKey: ["findCoursesDialog", "created", username, filters.learnLang, filters.forLang, filters.difficulty, search, filters.sort],
+    queryKey: ["findCoursesDialog", "created", username],
     queryFn: async ({
       pageParam = {}
     }) => {
       const response = await getCourses({
         createdBy: username,
         verbose: false,
-        limit: LIBRARY_PAGE_SIZE,
-        sort: filters.sort,
-        ...(filters.learnLang !== "all" && {
-          learnLang: filters.learnLang
-        }),
-        ...(filters.forLang !== "all" && {
-          forLang: filters.forLang
-        }),
-        ...(filters.difficulty !== "all" && {
-          difficulty: filters.difficulty
-        }),
-        ...(search && {
-          search
-        }),
+        // Get all using high limit, same as the Courses screen
+        limit: createdCoursesLimit,
         page: pageParam.page || 1,
         lastEvaluatedCourseId: pageParam.courseId || "",
         lastEvaluatedKey: pageParam.courseId || "",
@@ -488,6 +516,20 @@ export default function FindCoursesDialog({
     getNextPageParam: nextLibraryPageParam,
     enabled: !!username && open
   });
+  const {
+    hasNextPage: hasMoreCreated,
+    isFetchingNextPage: isFetchingMoreCreated,
+    isFetchNextPageError: isCreatedNextPageError
+  } = teachCoursesQuery;
+  useEffect(() => {
+    if (!open || !username || !hasMoreCreated || isFetchingMoreCreated || isCreatedNextPageError) {
+      return;
+    }
+    teachCoursesQuery.fetchNextPage({
+      cancelRefetch: false
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, username, hasMoreCreated, isFetchingMoreCreated, isCreatedNextPageError]);
   const learnCoursesQuery = useInfiniteQuery({
     queryKey: ["findCoursesDialog", "joined", username],
     queryFn: async ({
@@ -530,24 +572,9 @@ export default function FindCoursesDialog({
     const groupCourses = groupCoursesQuery.isSuccess && Array.isArray(groupCoursesQuery.data) ? groupCoursesQuery.data : [];
     const combined = [...learnCourses, ...groupCourses];
     const deduped = combined.filter((course, index) => combined.findIndex(c => c.courseId === course.courseId) === index);
-    const searchText = search.trim().toLowerCase();
-    const filtered = deduped.filter(course => {
-      if (filters.learnLang !== "all" && course.learnLang !== filters.learnLang) return false;
-      if (filters.forLang !== "all" && course.forLang !== filters.forLang) return false;
-      if (filters.difficulty !== "all") {
-        const difficulties = Array.isArray(course.difficulty) ? course.difficulty : [course.difficulty];
-        if (!difficulties.includes(filters.difficulty)) return false;
-      }
-      if (searchText) {
-        const nameMatch = (course.courseName || "").toLowerCase().includes(searchText);
-        const descriptionMatch = (course.description || "").toLowerCase().includes(searchText);
-        if (!nameMatch && !descriptionMatch) return false;
-      }
-      return true;
-    });
-    return sortItems(filtered, filters.sort);
-  }, [learnCoursesQuery.data, groupCoursesQuery.data, groupCoursesQuery.isSuccess, filters.learnLang, filters.forLang, filters.difficulty, search, filters.sort]);
-  const libraryCreatedCourses = useMemo(() => (teachCoursesQuery.data?.pages || []).flatMap(page => page.Items || []), [teachCoursesQuery.data]);
+    return filterLibraryCourses(deduped, filters, search);
+  }, [learnCoursesQuery.data, groupCoursesQuery.data, groupCoursesQuery.isSuccess, filters, search]);
+  const libraryCreatedCourses = useMemo(() => filterLibraryCourses((teachCoursesQuery.data?.pages || []).flatMap(page => page.Items || []), filters, search), [teachCoursesQuery.data, filters, search]);
   const communityCoursesQuery = courseQuerys.useCommunityCourses(async queryFilters => {
     const response = await getCourses(queryFilters);
     const formattedCourses = await formatCourses(response.Items, authData);

package/dist/Dialogs/FindCoursesDialog/FindCoursesDialog.test.js

@@ -1,10 +1,17 @@
 import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import "intersection-observer";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
-import { render, fireEvent, act } from "@testing-library/react";
+import { render, fireEvent, act, screen, waitFor, cleanup } from "@testing-library/react";
 import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { getCourses } from "@nualang/nualang-api-and-queries/APIs/Courses";
 import FindCoursesDialog from "./FindCoursesDialog";
 import { jsx as _jsx } from "react/jsx-runtime";
+vi.mock("@nualang/nualang-api-and-queries/APIs/Courses", () => ({
+  getCourses: vi.fn(async () => ({
+    Items: [],
+    Count: 0
+  }))
+}));
 const {
   QueryClient,
   QueryClientProvider
@@ -77,4 +84,252 @@ describe("FindCoursesDialog", () => {
       expect(searchInput.value).toBe("");
     });
   });
+  describe("My library search", () => {
+    const createdCourses = [{
+      courseId: "mine-1",
+      courseName: "Spanish Basics",
+      createdBy: "me",
+      learnLang: "spanish",
+      forLang: "english",
+      difficulty: "A1",
+      visibility: "private"
+    }, {
+      courseId: "mine-2",
+      courseName: "French Verbs",
+      createdBy: "me",
+      learnLang: "french",
+      forLang: "english",
+      difficulty: "A1",
+      visibility: "public"
+    }];
+    const joinedCourses = [{
+      courseId: "joined-1",
+      courseName: "Spanish Joined",
+      createdBy: "teacher",
+      learnLang: "spanish",
+      forLang: "english",
+      difficulty: "A1",
+      visibility: "public"
+    }];
+    const communityCourses = [{
+      courseId: "other-1",
+      courseName: "Spanish Community",
+      createdBy: "someone-else",
+      learnLang: "spanish",
+      forLang: "english",
+      difficulty: "A1",
+      visibility: "public"
+    }];
+    afterEach(() => {
+      cleanup();
+    });
+    beforeEach(() => {
+      // Earlier tests leave their dialog mounted - remove it so typeSearch
+      // targets this test's search input
+      cleanup();
+      getCourses.mockReset();
+      getCourses.mockImplementation(async filters => {
+        if (filters.createdBy) {
+          return {
+            Items: createdCourses,
+            Count: createdCourses.length
+          };
+        }
+        if (filters.memberId) {
+          return {
+            Items: joinedCourses,
+            Count: joinedCourses.length
+          };
+        }
+        return {
+          Items: communityCourses,
+          Count: communityCourses.length
+        };
+      });
+    });
+    const typeSearch = value => {
+      const searchInput = document.querySelector('[data-cy="find-courses-filter-search"] input');
+      act(() => {
+        fireEvent.change(searchInput, {
+          target: {
+            value
+          }
+        });
+      });
+    };
+    it("filters created courses client-side and never sends the search to the API", async () => {
+      renderDialog({
+        username: "me",
+        formatCourses: async items => items
+      });
+      await screen.findByText("French Verbs");
+      typeSearch("spanish");
+
+      // Allow for the 500ms search debounce
+      await waitFor(() => {
+        expect(screen.queryByText("French Verbs")).toBeNull();
+      }, {
+        timeout: 3000
+      });
+      expect(screen.getByText("Spanish Basics")).toBeTruthy();
+      // Other people's courses must not appear in My library
+      expect(screen.queryByText("Spanish Community")).toBeNull();
+      const createdCalls = getCourses.mock.calls.filter(([filters]) => filters.createdBy);
+      // Fetched once with only the creator - search/filters don't refetch
+      expect(createdCalls).toHaveLength(1);
+      expect(createdCalls[0][0]).not.toHaveProperty("search");
+      expect(createdCalls[0][0].createdBy).toBe("me");
+    });
+    it("defaults My library to newest and Community to popular", async () => {
+      getCourses.mockImplementation(async filters => {
+        if (filters.createdBy) {
+          return {
+            Items: [{
+              courseId: "old",
+              courseName: "Older Course",
+              createdBy: "me",
+              createdAt: 1000,
+              exerciseStartTotal: 50
+            }, {
+              courseId: "new",
+              courseName: "Newer Course",
+              createdBy: "me",
+              createdAt: 2000,
+              exerciseStartTotal: 0
+            }]
+          };
+        }
+        return {
+          Items: []
+        };
+      });
+      renderDialog({
+        username: "me",
+        formatCourses: async items => items
+      });
+      const sortInput = () => document.querySelector('input[name="sort"]');
+      expect(sortInput().value).toBe("newest");
+
+      // Newest first, even though the older course has more plays
+      await screen.findByText("Newer Course");
+      const names = screen.getAllByText(/^(Older|Newer) Course$/).map(el => el.textContent);
+      expect(names).toEqual(["Newer Course", "Older Course"]);
+      act(() => {
+        fireEvent.click(document.querySelector('[data-cy="find-courses-tab-community"]'));
+      });
+      expect(sortInput().value).toBe("popular");
+      act(() => {
+        fireEvent.click(document.querySelector('[data-cy="find-courses-tab-library"]'));
+      });
+      expect(sortInput().value).toBe("newest");
+    });
+    it("loads later created-course pages without scrolling when the first page has no matches", async () => {
+      const firstPage = [{
+        courseId: "mine-1",
+        courseName: "French Verbs",
+        createdBy: "me",
+        learnLang: "french",
+        forLang: "english",
+        difficulty: "A1"
+      }];
+      const secondPage = [{
+        courseId: "mine-2",
+        courseName: "Spanish Later Page",
+        createdBy: "me",
+        learnLang: "spanish",
+        forLang: "english",
+        difficulty: "A1"
+      }];
+      getCourses.mockImplementation(async filters => {
+        if (filters.createdBy) {
+          if (filters.page === 2) {
+            return {
+              Items: secondPage,
+              Count: secondPage.length
+            };
+          }
+          return {
+            Items: firstPage,
+            Count: firstPage.length,
+            LastEvaluatedKey: {
+              page: 2
+            }
+          };
+        }
+        if (filters.memberId) {
+          return {
+            Items: joinedCourses,
+            Count: joinedCourses.length
+          };
+        }
+        return {
+          Items: communityCourses,
+          Count: communityCourses.length
+        };
+      });
+      renderDialog({
+        username: "me",
+        formatCourses: async items => items,
+        createdCoursesLimit: 1
+      });
+      await screen.findByText("Spanish Joined");
+      typeSearch("spanish");
+
+      // Allow for the 500ms search debounce - no carousel scroll happens here
+      await waitFor(() => {
+        expect(screen.queryByText("French Verbs")).toBeNull();
+      }, {
+        timeout: 3000
+      });
+      expect(await screen.findByText("Spanish Later Page")).toBeTruthy();
+      expect(screen.queryByText("No created courses match these filters")).toBeNull();
+      const createdCalls = getCourses.mock.calls.filter(([filters]) => filters.createdBy);
+      expect(createdCalls).toHaveLength(2);
+      expect(createdCalls.map(([filters]) => filters.page)).toEqual([1, 2]);
+      createdCalls.forEach(([filters]) => {
+        expect(filters).not.toHaveProperty("search");
+        expect(filters.limit).toBe(1);
+      });
+
+      // Courses joined still filters client-side without search in its request
+      expect(screen.getByText("Spanish Joined")).toBeTruthy();
+      getCourses.mock.calls.filter(([filters]) => filters.memberId).forEach(([filters]) => {
+        expect(filters).not.toHaveProperty("search");
+      });
+
+      // Community still sends search to the API
+      act(() => {
+        fireEvent.click(document.querySelector('[data-cy="find-courses-tab-community"]'));
+      });
+      await screen.findByText("Spanish Community");
+      typeSearch("spanish");
+      await waitFor(() => {
+        const communityCalls = getCourses.mock.calls.filter(([filters]) => !filters.createdBy && !filters.memberId && !filters.courseIds);
+        expect(communityCalls.some(([filters]) => filters.search === "spanish")).toBe(true);
+      }, {
+        timeout: 3000
+      });
+    });
+    it("leaves Courses joined filtering unchanged", async () => {
+      renderDialog({
+        username: "me",
+        formatCourses: async items => items
+      });
+      await screen.findByText("Spanish Joined");
+      typeSearch("french");
+
+      // Allow for the 500ms search debounce
+      await waitFor(() => {
+        expect(screen.queryByText("Spanish Joined")).toBeNull();
+      }, {
+        timeout: 3000
+      });
+      expect(screen.getByText("French Verbs")).toBeTruthy();
+      const joinedCalls = getCourses.mock.calls.filter(([filters]) => filters.memberId);
+      expect(joinedCalls.length).toBeGreaterThan(0);
+      joinedCalls.forEach(([filters]) => {
+        expect(filters).not.toHaveProperty("search");
+      });
+    });
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nualang/nualang-ui-components",
-  "version": "0.1.1431",
+  "version": "0.1.1432",
   "type": "module",
   "main": "dist/index.js",
   "files": [