@nualang/nualang-ui-components 0.1.1411 → 0.1.1412

package/dist/Dialogs/QuickCreateClassroomDialog/QuickCreateClassroomDialog.js

@@ -133,7 +133,7 @@ export default function QuickCreateClassroomDialog({
     return String(Math.floor(Math.random() * 90000) + 10000);
   };
   const handleSubmit = async () => {
-    if (!classroomName.trim() || !classroomDescription.trim()) return;
+    if (!classroomName.trim() || !classroomDescription.trim() || !classroomLearnLang || !classroomForLang) return;
     setIsLoading(true);
     try {
       const createdClassroom = await handleCreate({
@@ -187,7 +187,7 @@ export default function QuickCreateClassroomDialog({
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
     dialogTitle: t("create_classroom") || "Create Classroom",
-    isSubmitDisabled: !classroomName.trim() || !classroomDescription.trim() || isLoading,
+    isSubmitDisabled: !classroomName.trim() || !classroomDescription.trim() || !classroomLearnLang || !classroomForLang || isLoading,
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: ClassroomDialogPaper,

package/dist/Dialogs/QuickCreateCourseDialog/QuickCreateCourseDialog.js

@@ -133,7 +133,7 @@ export default function QuickCreateCourseDialog({
     return String(Math.floor(Math.random() * 90000) + 10000);
   };
   const handleSubmit = async () => {
-    if (!courseName.trim() || !courseDescription.trim() || !difficulty) return;
+    if (!courseName.trim() || !courseDescription.trim() || !difficulty || !courseLearnLang || !courseForLang) return;
     setIsLoading(true);
     try {
       const createdCourse = await handleCreate({
@@ -185,7 +185,7 @@ export default function QuickCreateCourseDialog({
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
     dialogTitle: t("create_course") || "Create Course",
-    isSubmitDisabled: !courseName.trim() || !difficulty || isLoading,
+    isSubmitDisabled: !courseName.trim() || !courseDescription.trim() || !difficulty || !courseLearnLang || !courseForLang || isLoading,
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: CourseDialogPaper,

package/dist/Dialogs/QuickCreateTopicDialog/QuickCreateTopicDialog.js

@@ -142,7 +142,7 @@ export default function QuickCreateTopicDialog({
     setPicture(inheritCourseImage ? coursePicture : "");
   };
   const handleSubmit = async () => {
-    if (!topicName.trim() || !topicDifficulty) return;
+    if (!topicName.trim() || !topicDifficulty || !learnLang || !forLang) return;
     setIsLoading(true);
     try {
       const createdTopic = await handleCreate({
@@ -190,7 +190,7 @@ export default function QuickCreateTopicDialog({
     handleClose: isLoading ? undefined : resetAndClose,
     handleSubmit: handleSubmit,
     dialogTitle: t("create_topic") || "Create Topic",
-    isSubmitDisabled: !topicName.trim() || !topicDifficulty || isLoading,
+    isSubmitDisabled: !topicName.trim() || !topicDifficulty || !learnLang || !forLang || isLoading,
     closeText: t("cancel") || "Cancel",
     submitText: t("create") || "Create",
     PaperComponent: TopicDialogPaper,

package/dist/Forms/ChipInput/ChipInput.js

@@ -1,6 +1,6 @@
 import { useState } from "react"; // already present, just ensure it's used
 
-import CustomChipInput from "../../Misc/CustomChipInput/CustomChipInput";
+import CustomChipInput, { DefaultChipRenderer } from "../../Misc/CustomChipInput/CustomChipInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 function ChipInput(props) {
   const {
@@ -11,6 +11,13 @@ function ChipInput(props) {
     label,
     delimiter = /[\s,]+/
   } = props;
+  // `chipLabels` is a display-only map of { chipValue: label }. When provided,
+  // chips render the mapped label while their stored value stays unchanged.
+  // Strip it from the props spread so it doesn't leak onto the DOM node.
+  const {
+    chipLabels,
+    ...rest
+  } = props;
   const [errorMessage, setErrorMessage] = useState("");
   const genericDomains = ["gmail.com", "yahoo.com", "hotmail.com", "outlook.com", "icloud.com"];
   const handleAddChip = chip => {
@@ -61,14 +68,21 @@ function ChipInput(props) {
       }
     });
   };
+  const labelledChipRenderer = chipLabels ? (chipProps, key) => DefaultChipRenderer({
+    ...chipProps,
+    text: chipLabels[chipProps.value] ?? chipProps.text
+  }, key) : undefined;
   return /*#__PURE__*/_jsx(CustomChipInput, {
     label: label,
-    ...props,
+    ...rest,
     onAdd: handleAddChip,
     onDelete: deleteChip,
     delimiter: delimiter,
     helperText: errorMessage || props.helperText,
-    error: !!errorMessage || props.error
+    error: !!errorMessage || props.error,
+    ...(labelledChipRenderer ? {
+      chipRenderer: labelledChipRenderer
+    } : {})
   });
 }
 export default ChipInput;

package/dist/Forms/CreateClassroom/Steps/ClassroomSettings/ClassroomSettings.js

@@ -21,7 +21,8 @@ function ClassroomSettings({
   setScrollToDiscuss,
   scrollToDynamicResponses = false,
   setScrollToDynamicResponses,
-  isVideoChatEnabled
+  isVideoChatEnabled,
+  collaboratorLabels
 }) {
   const {
     visibility,
@@ -351,6 +352,7 @@ function ClassroomSettings({
           "data-cy": "collaborators",
           label: t("collaborators"),
           value: collaborators || [],
+          chipLabels: collaboratorLabels,
           name: "collaborators",
           helperText: touched.collaborators ? t(errors.collaborators) : t("add_collaborator_tag"),
           error: touched.collaborators && Boolean(errors.collaborators),
@@ -370,6 +372,7 @@ function ClassroomSettings({
             "data-cy": "collaborators",
             label: t("collaborators"),
             value: collaborators || [],
+            chipLabels: collaboratorLabels,
             name: "collaborators",
             helperText: touched.collaborators ? errors.collaborators : t("add_collaborator_tag"),
             error: touched.collaborators && Boolean(errors.collaborators),

package/dist/Forms/UpdateClassroom/UpdateClassroom.js

@@ -45,7 +45,8 @@ export default function UpdateClassroom({
   setScrollToDynamicResponses,
   isClassroomArchived = false,
   verificationStatus,
-  isVideoChatEnabled
+  isVideoChatEnabled,
+  collaboratorLabels
 }) {
   const {
     classes
@@ -230,6 +231,7 @@ export default function UpdateClassroom({
                   scrollToDynamicResponses: scrollToDynamicResponses,
                   setScrollToDynamicResponses: setScrollToDynamicResponses,
                   isVideoChatEnabled: isVideoChatEnabled,
+                  collaboratorLabels: collaboratorLabels,
                   ...otherProps
                 })
               }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(CardActions, {

package/dist/Lists/Courses/Courses.js

@@ -1,9 +1,11 @@
-import { memo } from "react";
+import { memo, useMemo, useState } from "react";
 import PropTypes from "prop-types";
-import { Grid } from "@mui/material";
+import { Box, FormControl, Grid, InputLabel, MenuItem, Select } from "@mui/material";
 import CourseCard from "../../Cards/Course/Course";
 import useListScroll from "../../hooks/useListScroll";
 import { SingleLineGridList, SingleLineGridListItem, GridListItem } from "../ListElements";
+import { getStudentSortOrder, setStudentSortOrder } from "../../utils/studentSort";
+import { CLASSROOM_COURSES_SORT_ORDER_KEY, compareCoursesBySortOrder, compareCoursesByLastVisit, getCourseVisits, recordCourseVisit } from "../../utils/courseSort";
 
 // import { propsAreEqual } from '../../utils';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -154,11 +156,99 @@ function CourseList({
     })
   });
 }
-function Courses(props) {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(CourseList, {
-      ...props
-    })
+function Courses({
+  t = text => text,
+  courses,
+  showSortControl = false,
+  handleViewCourse,
+  handleStartCourse,
+  handleViewCourseTopic,
+  ...otherProps
+}) {
+  const [sortOrder, setSortOrder] = useState(() => getStudentSortOrder(CLASSROOM_COURSES_SORT_ORDER_KEY, "newest"));
+  // Snapshot taken on mount so opening a course doesn't reshuffle the list
+  // under the user mid-click; the fresh order shows on the way back in.
+  const [visits, setVisits] = useState(getCourseVisits);
+  const handleSortOrderChange = value => {
+    setSortOrder(value);
+    setStudentSortOrder(CLASSROOM_COURSES_SORT_ORDER_KEY, value);
+    // Switching to this order is an explicit ask for the current history,
+    // including any course opened since this list mounted.
+    if (value === "recentlyViewed") setVisits(getCourseVisits());
+  };
+  console.log("Courses.jsx: sortOrder:", sortOrder, "visits:", visits);
+  const trackedHandlers = useMemo(() => {
+    // Wraps a card action so opening a course records it as the most recent
+    // one. Handlers are passed through untouched when absent, since the card
+    // treats a missing handler as "this action isn't available".
+    const trackVisit = (handler, getCourseId) => typeof handler === "function" ? (...args) => {
+      recordCourseVisit(getCourseId(...args));
+      return handler(...args);
+    } : handler;
+    return {
+      handleViewCourse: trackVisit(handleViewCourse, courseId => courseId),
+      handleStartCourse: trackVisit(handleStartCourse, (course = {}) => course.courseId),
+      handleViewCourseTopic: trackVisit(handleViewCourseTopic, courseId => courseId)
+    };
+  }, [handleViewCourse, handleStartCourse, handleViewCourseTopic]);
+  const sortedCourses = useMemo(() => {
+    if (!courses) return courses;
+    // Newest-first is the baseline order; for recentlyViewed it also decides
+    // where never-opened courses land, since the visit sort is stable.
+    const newestFirst = [...courses].reverse();
+    if (sortOrder === "newest") return newestFirst;
+    if (sortOrder === "recentlyViewed") {
+      return newestFirst.sort((a, b) => compareCoursesByLastVisit(a, b, visits));
+    }
+    return [...courses].sort((a, b) => compareCoursesBySortOrder(a, b, sortOrder));
+  }, [courses, sortOrder, visits]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showSortControl && courses && courses.length > 1 && /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: "flex",
+        justifyContent: "flex-start",
+        alignItems: "center",
+        mb: 3,
+        mt: "8px"
+      },
+      children: /*#__PURE__*/_jsxs(FormControl, {
+        size: "large",
+        sx: {
+          minWidth: 170,
+          marginTop: 1
+        },
+        children: [/*#__PURE__*/_jsx(InputLabel, {
+          id: "courses-sort-by-label",
+          children: t("sort_by")
+        }), /*#__PURE__*/_jsxs(Select, {
+          labelId: "courses-sort-by-label",
+          id: "courses_sort_by",
+          "data-cy": "courses_sort_by",
+          value: sortOrder,
+          onChange: e => handleSortOrderChange(e.target.value),
+          label: t("sort_by"),
+          autoWidth: true,
+          children: [/*#__PURE__*/_jsx(MenuItem, {
+            value: "newest",
+            children: t("newest")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "alphabetical",
+            children: t("alphabetical")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "recentlyChanged",
+            children: t("recently_changed")
+          }), /*#__PURE__*/_jsx(MenuItem, {
+            value: "recentlyViewed",
+            children: t("recently_viewed")
+          })]
+        })]
+      })
+    }), /*#__PURE__*/_jsx(CourseList, {
+      t: t,
+      courses: sortedCourses,
+      ...trackedHandlers,
+      ...otherProps
+    })]
   });
 }
 //

package/dist/Lists/Courses/Courses.test.js

@@ -1,30 +1,80 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import { describe, it, expect, afterEach } from "vitest";
 import { ReactQuery } from "@nualang/nualang-api-and-queries/Queries";
 import "intersection-observer";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import Courses from "./Courses";
 import { props } from "./Courses.stories";
+import { CLASSROOM_COURSES_SORT_ORDER_KEY, COURSE_VISITS_KEY } from "../../utils/courseSort";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   QueryClient,
   QueryClientProvider
 } = ReactQuery;
 const queryClient = new QueryClient();
+const renderCourses = (extraProps = {}) => {
+  const theme = createTheme();
+  return render(/*#__PURE__*/_jsx(QueryClientProvider, {
+    client: queryClient,
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
+      theme: theme,
+      children: /*#__PURE__*/_jsx(Courses, {
+        ...props,
+        ...extraProps
+      })
+    })
+  }));
+};
+
+// Course cards render their name in the card title, so the titles in DOM order
+// are the rendered sort order.
+const renderedCourseNames = async () => {
+  await screen.findAllByText("English Basics");
+  return Array.from(document.querySelectorAll(".MuiCardHeader-title")).map(el => el.textContent);
+};
+afterEach(() => {
+  cleanup();
+  localStorage.removeItem(CLASSROOM_COURSES_SORT_ORDER_KEY);
+  localStorage.removeItem(COURSE_VISITS_KEY);
+});
 describe("Courses", () => {
   it("renders without crashing", () => {
-    const theme = createTheme();
     const {
       unmount
-    } = render(/*#__PURE__*/_jsx(QueryClientProvider, {
-      client: queryClient,
-      children: /*#__PURE__*/_jsx(ThemeProvider, {
-        theme: theme,
-        children: /*#__PURE__*/_jsx(Courses, {
-          ...props
-        })
-      })
+    } = renderCourses();
+    unmount();
+  });
+  it("puts recently viewed courses first when that preference is stored", async () => {
+    localStorage.setItem(CLASSROOM_COURSES_SORT_ORDER_KEY, "recentlyViewed");
+    // Courses 2, 3 and 5 are "English Basics", "Learn Greetings 2" and
+    // "English Basics 2" — none of which lead the default newest-first order.
+    localStorage.setItem(COURSE_VISITS_KEY, JSON.stringify({
+      2: 100,
+      5: 300,
+      3: 200
     }));
+    const {
+      unmount
+    } = renderCourses({
+      showSortControl: true
+    });
+    const courseNames = await renderedCourseNames();
+    expect(courseNames.slice(0, 3)).toEqual(["English Basics 2", "Learn Greetings 2", "English Basics"]);
+    unmount();
+  });
+  it("does not mutate the courses prop", async () => {
+    localStorage.setItem(CLASSROOM_COURSES_SORT_ORDER_KEY, "recentlyViewed");
+    localStorage.setItem(COURSE_VISITS_KEY, JSON.stringify({
+      5: 300
+    }));
+    const originalOrder = props.courses.map(c => c.courseId);
+    const {
+      unmount
+    } = renderCourses({
+      showSortControl: true
+    });
+    await renderedCourseNames();
+    expect(props.courses.map(c => c.courseId)).toEqual(originalOrder);
     unmount();
   });
 });

package/dist/utils/courseSort.js

@@ -0,0 +1,64 @@
+// Classroom courses tab keeps its own independent sort preference, separate
+// from the members/progress sort preferences in studentSort.js.
+export const CLASSROOM_COURSES_SORT_ORDER_KEY = "classroomCoursesSortOrder";
+
+// Map of { [courseId]: timestamp } recording the last time the user opened each
+// course. Written whenever a course is opened from a course list, and read back
+// to power the "recentlyViewed" sort order. Deliberately not scoped per
+// classroom — the same course can live in several classrooms and "the course I
+// was last in" is a single global answer.
+export const COURSE_VISITS_KEY = "courseVisits";
+
+// Enough to cover any realistic course list without the entry growing forever.
+const MAX_TRACKED_VISITS = 100;
+export const getCourseVisits = () => {
+  try {
+    const stored = JSON.parse(localStorage.getItem(COURSE_VISITS_KEY));
+    // Guard against a hand-edited or half-written value — anything that isn't a
+    // plain object is treated as "no history" rather than crashing the list.
+    if (!stored || typeof stored !== "object" || Array.isArray(stored)) return {};
+    return stored;
+  } catch {
+    return {};
+  }
+};
+
+// Records a visit and returns the updated map so callers can re-sort without
+// another read. Keeps only the most recent MAX_TRACKED_VISITS courses.
+export const recordCourseVisit = (courseId, timestamp = Date.now()) => {
+  if (!courseId) return getCourseVisits();
+  const visits = {
+    ...getCourseVisits(),
+    [courseId]: timestamp
+  };
+  const pruned = Object.fromEntries(Object.entries(visits).sort(([, a], [, b]) => (b || 0) - (a || 0)).slice(0, MAX_TRACKED_VISITS));
+  try {
+    localStorage.setItem(COURSE_VISITS_KEY, JSON.stringify(pruned));
+  } catch {
+    // localStorage unavailable (e.g. blocked storage) — history just won't persist
+  }
+  return pruned;
+};
+
+// Most recently opened first. Never-opened courses share a timestamp of 0, so a
+// stable sort leaves them in whatever order the caller passed them in.
+export const compareCoursesByLastVisit = (a = {}, b = {}, visits = {}) => (visits[b.courseId] || 0) - (visits[a.courseId] || 0);
+
+// "newest" (most recently added to the classroom) has no comparator here —
+// there is no timestamp for classroom-course membership, only array position,
+// so callers handle it by reversing the already-ordered courses array instead.
+// "recentlyViewed" needs the visits map, so it has its own comparator above.
+export const compareCoursesBySortOrder = (a = {}, b = {}, order) => {
+  if (order === "alphabetical") {
+    return (a.courseName || "").toLowerCase().localeCompare((b.courseName || "").toLowerCase());
+  }
+  if (order === "recentlyChanged") {
+    const toTimestamp = value => {
+      if (typeof value === "number") return value;
+      if (typeof value === "string") return Date.parse(value) || Number(value) || 0;
+      return 0;
+    };
+    return toTimestamp(b.updatedAt ?? b.createdAt) - toTimestamp(a.updatedAt ?? a.createdAt);
+  }
+  return 0;
+};

package/package.json

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