diff --git a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx index 3efd076e6b..2bcfd11343 100644 --- a/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx +++ b/frontends/mit-open/src/pages/DashboardPage/DashboardPage.tsx @@ -310,7 +310,7 @@ interface UserListDetailsTabProps { const UserListDetailsTab: React.FC = (props) => { const { userListId } = props - const pathQuery = useUserListsDetail(userListId) + const listQuery = useUserListsDetail(userListId) const itemsQuery = useInfiniteUserListItems({ userlist_id: userListId }) const items = useMemo(() => { const pages = itemsQuery.data?.pages @@ -319,12 +319,11 @@ const UserListDetailsTab: React.FC = (props) => { return ( manageListDialogs.upsertUserList(pathQuery.data)} + handleEdit={() => manageListDialogs.upsertUserList(listQuery.data)} /> ) } diff --git a/frontends/mit-open/src/pages/ListDetailsPage/LearningPathDetailsPage.tsx b/frontends/mit-open/src/pages/ListDetailsPage/LearningPathDetailsPage.tsx index 02f6aab9f8..44905db6f5 100644 --- a/frontends/mit-open/src/pages/ListDetailsPage/LearningPathDetailsPage.tsx +++ b/frontends/mit-open/src/pages/ListDetailsPage/LearningPathDetailsPage.tsx @@ -18,17 +18,29 @@ type RouteParams = { const LearningPathDetailsPage: React.FC = () => { const id = Number(useParams().id) const pathQuery = useLearningPathsDetail(id) - const itemsQuery = useInfiniteLearningPathItems({ learning_resource_id: id }) + const itemsQuery = useInfiniteLearningPathItems({ + learning_resource_id: id, + limit: 100, + }) const items = useMemo(() => { const pages = itemsQuery.data?.pages return pages?.flatMap((p) => p.results ?? []) ?? [] }, [itemsQuery.data]) + const list = useMemo(() => { + if (!pathQuery.data) { + return undefined + } + return { + title: pathQuery.data.title, + description: pathQuery.data.description, + item_count: pathQuery.data.learning_path.item_count, + } + }, [pathQuery.data]) return ( path: LearningPathResource + pageSize?: number }) => { invariant(path.learning_path, "Must pass a learning path") + const pageSize = opts.pageSize ?? path.learning_path.item_count const paginatedRelationships = factories.learningResources.learningPathRelationships({ - count: path.learning_path.item_count, + count: Math.min(path.learning_path.item_count, pageSize), parent: path.id, }) const detailsUrl = urls.learningPaths.details({ id: path.id }) const pathResourcesUrl = urls.learningPaths.resources({ learning_resource_id: path.id, + /** + * This is not paginated yet. It's a staff-only view, so let's just increase + * the pagesize to 100 for now. + */ + limit: 100, }) setMockResponse.get(detailsUrl, path) setMockResponse.get(pathResourcesUrl, paginatedRelationships) @@ -118,7 +126,7 @@ describe("ListDetailsPage", () => { canReorder: false, }, { - itemCount: faker.number.int({ min: 1, max: 10 }), + itemCount: faker.number.int({ min: 1, max: 20 }), canReorder: true, }, ])( @@ -149,6 +157,16 @@ describe("ListDetailsPage", () => { expect(editList).toHaveBeenCalledWith(path) }) + test("Displays list count", async () => { + const path = factories.learningResources.learningPath({ + learning_path: { + item_count: 30, + }, + }) + setup({ path, pageSize: 3 }) + await screen.findByText("30 items") + }) + test("Passes appropriate props to ItemsListing", async () => { const path = factories.learningResources.learningPath() const { paginatedRelationships } = setup({ path }) diff --git a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx index e3b4eaecef..34f34a75bc 100644 --- a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx +++ b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx @@ -9,10 +9,14 @@ import ItemsListing from "./ItemsListing" import type { LearningResourceListItem } from "./ItemsListing" type OnEdit = () => void +type ListData = { + title: string + description?: string | null + item_count: number +} type ListDetailsPageProps = { listType: string - title: string | undefined - description: string | null | undefined + list?: ListData items: LearningResourceListItem[] isLoading: boolean isFetching: boolean @@ -20,31 +24,22 @@ type ListDetailsPageProps = { } const ListDetailsComponent: React.FC = (props) => { - const { - listType, - title, - description, - items, - isLoading, - isFetching, - handleEdit, - } = props + const { listType, list, items, isLoading, isFetching, handleEdit } = props const { data: user } = useUserMe() const [isSorting, toggleIsSorting] = useToggle(false) const canEdit = user?.is_learning_path_editor const showSort = canEdit && !!items.length - const count = items.length - + const count = list?.item_count return ( - {title} + {list?.title} - {description &&

{description}

} + {list?.description &&

{list.description}

}
= (props) => { const ListDetailsPage: React.FC = ({ listType, - title, - description, + list, items, isLoading, isFetching, @@ -113,12 +107,11 @@ const ListDetailsPage: React.FC = ({ src="/static/images/course_search_banner.png" className="learningpaths-page" > - + { const id = Number(useParams().id) - const pathQuery = useUserListsDetail(id) + const listQuery = useUserListsDetail(id) const itemsQuery = useInfiniteUserListItems({ userlist_id: id }) const items = useMemo(() => { const pages = itemsQuery.data?.pages @@ -27,12 +27,11 @@ const UserListDetailsPage: React.FC = () => { return ( manageListDialogs.upsertUserList(pathQuery.data)} + handleEdit={() => manageListDialogs.upsertUserList(listQuery.data)} /> ) }