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

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

@@ -5,6 +5,7 @@ import { Tabs, Tab } from '@edx/paragon';
 import { useParams } from 'react-router';
 import CoursewareSearchResults from './CoursewareSearchResults';
 import messages from './messages';
+import { useCoursewareSearchParams } from './hooks';
 import { useModel } from '../../generic/model-store';
 
 const noFilterKey = 'none';
@@ -17,6 +18,7 @@ export const filteredResultsBySelection = ({ key = noFilterKey, results = [] })
 export const CoursewareSearchResultsFilter = ({ intl }) => {
   const { courseId } = useParams();
   const lastSearch = useModel('contentSearchResults', courseId);
+  const { filter: filterKeyword, setFilter } = useCoursewareSearchParams();
 
   if (!lastSearch || !lastSearch?.results?.length) { return null; }
 
@@ -31,6 +33,8 @@ 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; }
@@ -42,7 +46,9 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
       id="courseware-search-results-tabs"
       data-testid="courseware-search-results-tabs"
       variant="tabs"
+      activeKey={activeKey}
       defaultActiveKey={noFilterKey}
+      onSelect={setFilter}
     >
       {filters.map(({ key, label }) => (
         <Tab key={key} eventKey={key} title={getFilterTitle(key, label)}>

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
@@ -10,7 +10,7 @@ import {
   Close,
 } from '@edx/paragon/icons';
 import { setShowSearch } from '../data/slice';
-import { useElementBoundingBox, useLockScroll } from './hooks';
+import { useCoursewareSearchParams, useElementBoundingBox, useLockScroll } from './hooks';
 import messages from './messages';
 
 import CoursewareSearchForm from './CoursewareSearchForm';
@@ -20,6 +20,7 @@ import { searchCourseContent } from '../data/thunks';
 
 const CoursewareSearch = ({ intl, ...sectionProps }) => {
   const { courseId } = useParams();
+  const { query: searchKeyword, setQuery, clearSearchParams } = useCoursewareSearchParams();
   const dispatch = useDispatch();
   const { org } = useModel('courseHomeMeta', courseId);
   const {
@@ -28,14 +29,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 clearSearch = () => {
+    clearSearchParams();
     dispatch(updateModel({
       modelType: 'contentSearchResults',
       model: {
@@ -68,14 +69,23 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     dispatch(searchCourseContent(courseId, searchKeyword));
   };
 
+  useEffect(() => {
+    handleSubmit();
+  }, []);
+
   const handleOnChange = (value) => {
     if (value === searchKeyword) { return; }
-
-    setSearchKeyword(value);
-
     if (!value) {
       clearSearch();
+      return;
     }
+
+    setQuery(value);
+  };
+
+  const close = () => {
+    clearSearch();
+    dispatch(setShowSearch(false));
   };
 
   let status = 'idle';
@@ -94,7 +104,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
           variant="tertiary"
           className="p-1"
           aria-label={intl.formatMessage(messages.searchCloseAction)}
-          onClick={() => dispatch(setShowSearch(false))}
+          onClick={close}
           data-testid="courseware-search-close-button"
         ><Icon src={Close} />
         </Button>

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

@@ -1,17 +1,26 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Icon } from '@edx/paragon';
 import { Search } from '@edx/paragon/icons';
 import { useDispatch } from 'react-redux';
-import { setShowSearch } from '../data/slice';
 import messages from './messages';
-import { useCoursewareSearchFeatureFlag } from './hooks';
+import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
+import { setShowSearch } from '../data/slice';
 
 const CoursewareSearchToggle = ({
   intl,
 }) => {
   const dispatch = useDispatch();
   const enabled = useCoursewareSearchFeatureFlag();
+  const { query } = useCoursewareSearchParams();
+
+  const show = () => {
+    dispatch(setShowSearch(true));
+  };
+
+  useEffect(() => {
+    if (enabled && !!query) { show(); }
+  }, [enabled]);
 
   if (!enabled) { return null; }
 
@@ -22,7 +31,7 @@ const CoursewareSearchToggle = ({
         size="sm"
         className="p-1 mt-2 mr-2 rounded-lg"
         aria-label={intl.formatMessage(messages.searchOpenAction)}
-        onClick={() => dispatch(setShowSearch(true))}
+        onClick={show}
         data-testid="courseware-search-open-button"
       >
         <Icon src={Search} />

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';
@@ -69,3 +69,18 @@ export function useLockScroll() {
     };
   }, []);
 }
+
+export function useCoursewareSearchParams() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const clearSearchParams = () => setSearchParams({ q: '', f: '' });
+
+  const query = searchParams.get('q');
+  const filter = searchParams.get('f');
+
+  const setQuery = (q) => setSearchParams((params) => ({ q, f: params.get('f') }));
+  const setFilter = (f) => setSearchParams((params) => ({ q: params.get('q'), f }));
+
+  return {
+    query, filter, setQuery, setFilter, clearSearchParams,
+  };
+}