diff --git a/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx index faa471e7e0..ffe07da3b1 100644 --- a/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx +++ b/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx @@ -1,12 +1,15 @@ import { Link } from '@hypothesis/frontend-shared'; import { useMemo } from 'preact/hooks'; -import { Link as RouterLink, useParams } from 'wouter-preact'; +import { Link as RouterLink, useLocation, useParams } from 'wouter-preact'; import type { AssignmentsResponse, Course } from '../../api-types'; import { useConfig } from '../../config'; -import { urlPath, useAPIFetch } from '../../utils/api'; +import { useAPIFetch } from '../../utils/api'; +import { useDashboardFilters } from '../../utils/dashboard/hooks'; +import { assignmentURL, courseURL } from '../../utils/dashboard/navigation'; import { useDocumentTitle } from '../../utils/hooks'; -import { replaceURLParams } from '../../utils/url'; +import { recordToQueryString, replaceURLParams } from '../../utils/url'; +import DashboardActivityFilters from './DashboardActivityFilters'; import DashboardBreadcrumbs from './DashboardBreadcrumbs'; import FormattedDate from './FormattedDate'; import OrderableActivityTable from './OrderableActivityTable'; @@ -19,13 +22,12 @@ type AssignmentsTableRow = { replies: number; }; -const assignmentURL = (id: number) => urlPath`/assignments/${String(id)}`; - /** * Activity in a list of assignments that are part of a specific course */ export default function CourseActivity() { const { courseId } = useParams<{ courseId: string }>(); + const [, navigate] = useLocation(); const { dashboard } = useConfig(['dashboard']); const { routes } = dashboard; const course = useAPIFetch( @@ -51,6 +53,9 @@ export default function CourseActivity() { useDocumentTitle(course.data?.title ?? 'Untitled course'); + const { filters, updateFilters } = useDashboardFilters(); + const { assignmentIds, studentIds } = filters; + return (
@@ -63,6 +68,23 @@ export default function CourseActivity() { {course.data && course.data.title}
+ { + const firstDifferentCourse = newCourseIds.find(c => c !== courseId); + if (firstDifferentCourse) { + // When a course other than the "active" one (the one represented + // in the URL) is selected, navigate to that course and propagate + // the rest of the filters. + const queryString = recordToQueryString(filters); + navigate(`${courseURL(firstDifferentCourse)}${queryString}`); + } + }} + selectedAssignmentIds={assignmentIds} + onAssignmentsChange={assignmentIds => updateFilters({ assignmentIds })} + selectedStudentIds={studentIds} + onStudentsChange={studentIds => updateFilters({ studentIds })} + /> urlPath`/courses/${String(id)}`; - /** * List of courses that belong to a specific organization */ diff --git a/lms/static/scripts/frontend_apps/utils/dashboard/navigation.ts b/lms/static/scripts/frontend_apps/utils/dashboard/navigation.ts new file mode 100644 index 0000000000..30619b24c3 --- /dev/null +++ b/lms/static/scripts/frontend_apps/utils/dashboard/navigation.ts @@ -0,0 +1,9 @@ +import { urlPath } from '../api'; + +export function assignmentURL(id: number) { + return urlPath`/assignments/${String(id)}`; +} + +export function courseURL(id: number | string) { + return urlPath`/courses/${String(id)}`; +}