feat: use state params to keep query and filter while searching

src/course-home/courseware-search/CoursewareResultsFilter.jsx

@@ -3,6 +3,7 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Tabs, Tab } from '@edx/paragon';
 
 import { useParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import CoursewareSearchResults from './CoursewareSearchResults';
 import messages from './messages';
 import { useModel } from '../../generic/model-store';
@@ -17,6 +18,8 @@ export const filteredResultsBySelection = ({ key = noFilterKey, results = [] })
 export const CoursewareSearchResultsFilter = ({ intl }) => {
   const { courseId } = useParams();
   const lastSearch = useModel('contentSearchResults', courseId);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const filterKeyword = searchParams.get('f');
 
   if (!lastSearch || !lastSearch?.results?.length) { return null; }
 
@@ -31,18 +34,26 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
     ...lastSearch.filters,
   ];
 
+  const activeKey = filters.find(({ key }) => key === filterKeyword)?.key || noFilterKey;
+
   const getFilterTitle = (key, fallback) => {
     const msg = messages[`filter:${key}`];
     if (!msg) { return fallback; }
     return intl.formatMessage(msg);
   };
 
+  const handleSelect = (key) => {
+    setSearchParams((params) => ({ q: params.get('q'), f: key }));
+  };
+
   return (
     <Tabs
       id="courseware-search-results-tabs"
       data-testid="courseware-search-results-tabs"
       variant="tabs"
+      activeKey={activeKey}
       defaultActiveKey={noFilterKey}
+      onSelect={handleSelect}
     >
       {filters.map(({ key, label }) => (
         <Tab key={key} eventKey={key} title={getFilterTitle(key, label)}>

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
+import { useSearchParams } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -20,6 +21,7 @@ import { searchCourseContent } from '../data/thunks';
 
 const CoursewareSearch = ({ intl, ...sectionProps }) => {
   const { courseId } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
   const dispatch = useDispatch();
   const { org } = useModel('courseHomeMeta', courseId);
   const {
@@ -28,13 +30,14 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     errors,
     total,
   } = useModel('contentSearchResults', courseId);
-  const [searchKeyword, setSearchKeyword] = useState(lastSearchKeyword);
 
   useLockScroll();
 
   const info = useElementBoundingBox('courseTabsNavigation');
   const top = info ? `${Math.floor(info.top)}px` : 0;
 
+  const searchKeyword = searchParams.get('q');
+
   const clearSearch = () => {
     dispatch(updateModel({
       modelType: 'contentSearchResults',
@@ -68,10 +71,14 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     dispatch(searchCourseContent(courseId, searchKeyword));
   };
 
+  useEffect(() => {
+    handleSubmit();
+  }, []);
+
   const handleOnChange = (value) => {
     if (value === searchKeyword) { return; }
 
-    setSearchKeyword(value);
+    setSearchParams({ q: value });
 
     if (!value) {
       clearSearch();

src/course-home/courseware-search/hooks.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useLayoutEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { debounce } from 'lodash';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
@@ -19,9 +19,12 @@ export function useCoursewareSearchFeatureFlag() {
 
 export function useCoursewareSearchState() {
   const enabled = useCoursewareSearchFeatureFlag();
+  const [searchParams] = useSearchParams();
+
+  const q = searchParams.get('q');
   const show = useSelector(state => state.courseHome.showSearch);
 
-  return { show: enabled && show };
+  return { show: enabled && (show || !!q) };
 }
 
 export function useElementBoundingBox(elementId) {

src/course-tabs/CourseTabsNavigation.jsx

@@ -34,7 +34,7 @@ const CourseTabsNavigation = ({
           ))}
         </Tabs>
       </div>
-      {show && <CoursewareSearch />}
+      {show && <CoursewareSearch show={show} />}
     </div>
   );
 };