Merge pull request #107 from Pearson-Advance/vue/PADV-1414

initial config, is missing fix the update on reload

package.json

@@ -43,6 +43,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@pearsonedunext/frontend-component-cookie-policy-banner": "^5.0.2",
     "@reduxjs/toolkit": "^1.9.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "core-js": "3.31.0",
     "date-fns": "^3.3.1",
     "prop-types": "15.8.1",

src/features/Classes/Class/ClassPage/Actions.jsx

@@ -11,6 +11,7 @@ import {
 import { MoreVert } from '@edx/paragon/icons';
 
 import { setAssignStaffRole } from 'helpers';
+import { useInstitutionIdQueryParam } from 'hooks';
 
 import AddClass from 'features/Courses/AddClass';
 import EnrollStudent from 'features/Classes/EnrollStudent';
@@ -33,9 +34,10 @@ const Actions = ({ previousPage }) => {
   const [isEnrollModalOpen, setIsEnrollModalOpen] = useState(false);
 
   const handleEnrollStudentModal = () => setIsEnrollModalOpen(!isEnrollModalOpen);
+  const addQueryParam = useInstitutionIdQueryParam();
 
   const handleManageButton = () => {
-    history.push(`/manage-instructors/${courseName}/${className}?classId=${queryClassId}&previous=${previousPage}`);
+    history.push(addQueryParam(`/manage-instructors/${courseName}/${className}?classId=${queryClassId}&previous=${previousPage}`));
   };
 
   return (

src/features/Classes/Class/ClassPage/index.jsx

@@ -17,6 +17,8 @@ import { initialPage, RequestStatus } from 'features/constants';
 import { resetClassesTable, resetClasses } from 'features/Classes/data/slice';
 import { fetchAllClassesData } from 'features/Classes/data/thunks';
 
+import { useInstitutionIdQueryParam } from 'hooks';
+
 import 'features/Classes/Class/ClassPage/index.scss';
 
 const ClassPage = () => {
@@ -33,6 +35,7 @@ const ClassPage = () => {
   const [currentPage, setCurrentPage] = useState(initialPage);
   const institution = useSelector((state) => state.main.selectedInstitution);
   const students = useSelector((state) => state.students.table);
+  const addQueryParam = useInstitutionIdQueryParam();
 
   const isLoadingStudents = students.status === RequestStatus.LOADING;
 
@@ -87,8 +90,9 @@ const ClassPage = () => {
     }
 
     if (institution.id !== institutionRef.current) {
-      history.push('/courses');
+      history.push(addQueryParam('/courses'));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [institution, history]);
 
   return (

src/features/Classes/ClassesTable/columns.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import {
   Dropdown,
@@ -13,6 +12,7 @@ import { MoreHoriz } from '@edx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 
 import AddClass from 'features/Courses/AddClass';
+import LinkWithQuery from 'features/Main/LinkWithQuery';
 
 import { formatUTCDate, setAssignStaffRole } from 'helpers';
 
@@ -21,12 +21,12 @@ const columns = [
     Header: 'Class',
     accessor: 'className',
     Cell: ({ row }) => (
-      <Link
+      <LinkWithQuery
         to={`/courses/${encodeURIComponent(row.original.masterCourseName)}/${encodeURIComponent(row.values.className)}?classId=${row.original.classId}&previous=classes`}
         className="text-truncate link"
       >
         {row.values.className}
-      </Link>
+      </LinkWithQuery>
     ),
   },
   {
@@ -124,13 +124,13 @@ const columns = [
               View class content
             </Dropdown.Item>
             <Dropdown.Item>
-              <Link
+              <LinkWithQuery
                 to={`/manage-instructors/${encodeURIComponent(masterCourseName)}/${encodeURIComponent(row.values.className)}?classId=${classId}&previous=classes`}
                 className="text-truncate text-decoration-none custom-text-black"
               >
                 <i className="fa-regular fa-chalkboard-user mr-2 mb-1" />
                 Manage Instructors
-              </Link>
+              </LinkWithQuery>
             </Dropdown.Item>
             <AddClass
               isOpen={isOpenModal}

src/features/Courses/CourseDetailTable/columns.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useParams, Link } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import {
   Dropdown,
   useToggle,
@@ -18,6 +18,7 @@ import { formatUTCDate, setAssignStaffRole } from 'helpers';
 
 import AddClass from 'features/Courses/AddClass';
 import DeleteModal from 'features/Common/DeleteModal';
+import LinkWithQuery from 'features/Main/LinkWithQuery';
 
 import { RequestStatus, initialPage } from 'features/constants';
 
@@ -34,13 +35,14 @@ const columns = [
     accessor: 'className',
     Cell: ({ row }) => {
       const { courseName } = useParams();
+
       return (
-        <Link
+        <LinkWithQuery
           to={`/courses/${courseName}/${encodeURIComponent(row.values.className)}?classId=${row.original.classId}&previous=courses`}
           className="text-truncate link"
         >
           {row.values.className}
-        </Link>
+        </LinkWithQuery>
       );
     },
   },
@@ -186,13 +188,13 @@ const columns = [
                 View class content
               </Dropdown.Item>
               <Dropdown.Item>
-                <Link
+                <LinkWithQuery
                   to={`/manage-instructors/${encodeURIComponent(masterCourseName)}/${encodeURIComponent(row.values.className)}?classId=${classId}`}
                   className="text-truncate text-decoration-none custom-text-black"
                 >
                   <i className="fa-regular fa-chalkboard-user mr-2 mb-1" />
                   Manage Instructors
-                </Link>
+                </LinkWithQuery>
               </Dropdown.Item>
               <Dropdown.Item onClick={openModal}>
                 <i className="fa-solid fa-pencil mr-2 mb-1" />

src/features/Courses/CoursesDetailPage/index.jsx

@@ -1,20 +1,23 @@
 import React, {
   useState, useEffect, useRef, useMemo,
 } from 'react';
-import { Link, useParams, useHistory } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-
+import { getConfig } from '@edx/frontend-platform';
 import { Container, Pagination, useToggle } from '@edx/paragon';
-import CourseDetailTable from 'features/Courses/CourseDetailTable';
 import { Button } from 'react-paragon-topaz';
-import { getConfig } from '@edx/frontend-platform';
+
 import AddClass from 'features/Courses/AddClass';
+import LinkWithQuery from 'features/Main/LinkWithQuery';
+import CourseDetailTable from 'features/Courses/CourseDetailTable';
 
 import { fetchClassesData } from 'features/Classes/data/thunks';
 import { fetchCoursesData } from 'features/Courses/data/thunks';
 import { fetchClassesDataSuccess } from 'features/Classes/data/slice';
 import { fetchCoursesDataSuccess, updateCurrentPage } from 'features/Courses/data/slice';
+
 import { initialPage } from 'features/constants';
+import { useInstitutionIdQueryParam } from 'hooks';
 
 import 'features/Courses/CoursesDetailPage/index.scss';
 
@@ -23,6 +26,7 @@ const CoursesDetailPage = () => {
   const dispatch = useDispatch();
   const { courseName } = useParams();
   const courseNameDecoded = decodeURIComponent(courseName);
+  const addQueryParam = useInstitutionIdQueryParam();
 
   const institutionRef = useRef(undefined);
   const [currentPage, setCurrentPage] = useState(initialPage);
@@ -83,17 +87,18 @@ const CoursesDetailPage = () => {
     }
 
     if (institution.id !== institutionRef.current) {
-      history.push('/courses');
+      history.push(addQueryParam('/courses'));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [institution, history]);
 
   return (
     <Container size="xl" className="px-4 mt-3">
       <div className="d-flex justify-content-between mb-3 flex-column flex-sm-row">
         <div className="d-flex align-items-center mb-3">
-          <Link to="/courses" className="mr-3 link">
+          <LinkWithQuery to="/courses" className="mr-3 link">
             <i className="fa-solid fa-arrow-left" />
-          </Link>
+          </LinkWithQuery>
           <h3 className="h2 mb-0 course-title">{courseNameDecoded}</h3>
         </div>
 

src/features/Courses/CoursesTable/columns.jsx

@@ -2,19 +2,20 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
 
-import { Link } from 'react-router-dom';
 import { Badge } from 'react-paragon-topaz';
 import {
   Dropdown, IconButton, Icon, useToggle,
 } from '@edx/paragon';
 import { MoreHoriz } from '@edx/paragon/icons';
+
 import AddClass from 'features/Courses/AddClass';
+import LinkWithQuery from 'features/Main/LinkWithQuery';
 
 const columns = [
   {
     Header: 'Courses',
     accessor: 'masterCourseName',
-    Cell: ({ row }) => (<Link to={`/courses/${encodeURIComponent(row.values.masterCourseName)}`} className="link">{row.values.masterCourseName}</Link>),
+    Cell: ({ row }) => (<LinkWithQuery to={`/courses/${encodeURIComponent(row.values.masterCourseName)}`} className="link">{row.values.masterCourseName}</LinkWithQuery>),
   },
   {
     Header: 'Classes',

src/features/Dashboard/DashboardPage/index.jsx

@@ -13,6 +13,8 @@ import WeeklySchedule from 'features/Dashboard/WeeklySchedule';
 import { fetchLicensesData } from 'features/Dashboard/data';
 import { updateActiveTab } from 'features/Main/data/slice';
 
+import { useInstitutionIdQueryParam } from 'hooks';
+
 import 'features/Dashboard/DashboardPage/index.scss';
 
 const DashboardPage = () => {
@@ -24,8 +26,10 @@ const DashboardPage = () => {
   const [dataTableLicense, setDataTableLicense] = useState([]);
   const imageDashboard = getConfig().IMAGE_DASHBOARD_URL;
 
+  const addQueryParam = useInstitutionIdQueryParam();
+
   const handleViewAllLicenses = () => {
-    history.push('/licenses');
+    history.push(addQueryParam('/licenses'));
     dispatch(updateActiveTab('licenses'));
   };
 

src/features/Dashboard/InstructorAssignSection/ClassCard.jsx

@@ -5,14 +5,16 @@ import PropTypes from 'prop-types';
 import { Button } from 'react-paragon-topaz';
 
 import { formatDateRange } from 'helpers';
+import { useInstitutionIdQueryParam } from 'hooks';
 
 import 'features/Dashboard/InstructorAssignSection/index.scss';
 
 const ClassCard = ({ data }) => {
   const history = useHistory();
+  const addQueryParam = useInstitutionIdQueryParam();
 
   const handleManageButton = () => {
-    history.push(`/manage-instructors/${encodeURIComponent(data?.masterCourseName)}/${encodeURIComponent(data?.className)}?classId=${data?.classId}&previous=dashboard`);
+    history.push(addQueryParam(`/manage-instructors/${encodeURIComponent(data?.masterCourseName)}/${encodeURIComponent(data?.className)}?classId=${data?.classId}&previous=dashboard`));
   };
 
   return (

src/features/Dashboard/InstructorAssignSection/index.jsx

@@ -9,6 +9,8 @@ import { Button } from 'react-paragon-topaz';
 import { fetchClassesData } from 'features/Dashboard/data';
 import { updateActiveTab } from 'features/Main/data/slice';
 
+import { useInstitutionIdQueryParam } from 'hooks';
+
 import 'features/Dashboard/InstructorAssignSection/index.scss';
 
 const InstructorAssignSection = () => {
@@ -19,8 +21,10 @@ const InstructorAssignSection = () => {
   const [classCards, setClassCards] = useState([]);
   const numberOfClasses = 2;
 
+  const addQueryParam = useInstitutionIdQueryParam();
+
   const handleViewAllClasses = () => {
-    history.push('/classes?instructors=null');
+    history.push(addQueryParam('/classes?instructors=null'));
     dispatch(updateActiveTab('classes'));
   };