Endpoint usage implementation for Courseware Search

package.json

@@ -47,6 +47,7 @@
     "classnames": "2.3.2",
     "core-js": "3.22.2",
     "history": "5.3.0",
+    "joi": "^17.11.0",
     "js-cookie": "3.0.5",
     "lodash.camelcase": "4.3.0",
     "prop-types": "15.8.1",

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

@@ -1,36 +1,54 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Tabs, Tab } from '@edx/paragon';
 
-import CoursewareSearchResultPropType from './CoursewareSearchResult.PropTypeDefinition';
+import { useParams } from 'react-router';
 import CoursewareSearchResults from './CoursewareSearchResults';
+import messages from './messages';
+import { useModel } from '../../generic/model-store';
 
-export const filteredResultsBySelection = ({ filterKey = 'all', results = [] }) => {
-  if (['document', 'video', 'text'].includes(filterKey)) {
-    return results.filter(result => result?.type?.toLowerCase() === filterKey);
-  }
+const noFilterKey = 'none';
+const noFilterLabel = 'All content';
 
-  return results || [];
-};
+export const filteredResultsBySelection = ({ key = noFilterKey, results = [] }) => (
+  key === noFilterKey ? results : results.filter(({ type }) => type === key)
+);
+
+export const CoursewareSearchResultsFilter = ({ intl }) => {
+  const { courseId } = useParams();
+  const lastSearch = useModel('contentSearchResults', courseId);
+
+  if (!lastSearch || !lastSearch.results.length) { return null; }
 
-const tabConfiguration = [
-  { eventKey: 'all', title: 'All content' },
-  { eventKey: 'document', title: 'Course outline' },
-  { eventKey: 'text', title: 'Text' },
-  { eventKey: 'video', title: 'Video' },
-];
+  const { total, results } = lastSearch;
 
-export const CoursewareSearchResultsFilter = ({ intl, results }) => {
-  if (!results || !results.length) { return null; }
+  const filters = [
+    {
+      key: noFilterKey,
+      label: noFilterLabel,
+      count: total,
+    },
+    ...lastSearch.filters,
+  ];
+
+  const getFilterTitle = (key, fallback) => {
+    const msg = messages[`filter:${key}`];
+    if (!msg) { return fallback; }
+    return intl.formatMessage(msg);
+  };
 
   return (
-    <Tabs id="courseware-search-results-tabs" data-testid="courseware-search-results-tabs" variant="tabs" defaultActiveKey="all">
-      {tabConfiguration.map((tab) => (
-        <Tab {...tab} key={tab.eventKey}>
+    <Tabs
+      id="courseware-search-results-tabs"
+      data-testid="courseware-search-results-tabs"
+      variant="tabs"
+      defaultActiveKey={noFilterKey}
+    >
+      {filters.map(({ key, label }) => (
+        <Tab key={key} eventKey={key} title={getFilterTitle(key, label)}>
           <CoursewareSearchResults
             intl={intl}
-            results={filteredResultsBySelection({ filterKey: tab.eventKey, results })}
+            results={filteredResultsBySelection({ key, results })}
           />
         </Tab>
       ))}
@@ -40,11 +58,6 @@ export const CoursewareSearchResultsFilter = ({ intl, results }) => {
 
 CoursewareSearchResultsFilter.propTypes = {
   intl: intlShape.isRequired,
-  results: PropTypes.arrayOf(CoursewareSearchResultPropType),
-};
-
-CoursewareSearchResultsFilter.defaultProps = {
-  results: [],
 };
 
 export default injectIntl(CoursewareSearchResultsFilter);

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

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
+import { useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
+import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button, Icon } from '@edx/paragon';
+import {
+  Alert, Button, Icon, Spinner,
+} from '@edx/paragon';
 import {
   Close,
 } from '@edx/paragon/icons';
@@ -11,26 +15,78 @@ import messages from './messages';
 
 import CoursewareSearchForm from './CoursewareSearchForm';
 import CoursewareSearchResultsFilterContainer from './CoursewareResultsFilter';
-import mockedData from './test-data/mockedResults';
+import { updateModel, useModel } from '../../generic/model-store';
+import { searchCourseContent } from '../data/thunks';
 
 const CoursewareSearch = ({ intl, ...sectionProps }) => {
-  const [results, setResults] = useState();
+  const { courseId } = useParams();
   const dispatch = useDispatch();
+  const { org } = useModel('courseHomeMeta', courseId);
+  const {
+    loading,
+    searchKeyword: lastSearchKeyword,
+    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 handleSubmit = (search) => {
-    if (!search) {
-      setResults(undefined);
+  const clearSearch = () => {
+    dispatch(updateModel({
+      modelType: 'contentSearchResults',
+      model: {
+        id: courseId,
+        searchKeyword: '',
+        results: [],
+        errors: undefined,
+        loading: false,
+      },
+    }));
+  };
+
+  const handleSubmit = () => {
+    if (!searchKeyword) {
+      clearSearch();
       return;
     }
 
-    setResults(search.toLowerCase() !== 'lorem ipsum' ? mockedData : []);
+    const eventProperties = {
+      org_key: org,
+      courserun_key: courseId,
+    };
+
+    sendTrackingLogEvent('edx.course.home.courseware_search.submit', {
+      ...eventProperties,
+      event_type: 'searchKeyword',
+      keyword: searchKeyword,
+    });
+
+    dispatch(searchCourseContent(courseId, searchKeyword));
+  };
+
+  const handleOnChange = (value) => {
+    if (value === searchKeyword) { return; }
+
+    setSearchKeyword(value);
+
+    if (!value) {
+      clearSearch();
+    }
   };
 
+  let status = 'idle';
+  if (loading) {
+    status = 'loading';
+  } else if (errors) {
+    status = 'error';
+  } else if (lastSearchKeyword) {
+    status = 'results';
+  }
+
   return (
     <section className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-section" {...sectionProps}>
       <div className="courseware-search__close">
@@ -47,16 +103,41 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
         <div className="courseware-search__content">
           <h2>{intl.formatMessage(messages.searchModuleTitle)}</h2>
           <CoursewareSearchForm
+            value={searchKeyword}
             onSubmit={handleSubmit}
+            onChange={handleOnChange}
             placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
           />
-          <CoursewareSearchResultsFilterContainer results={results} />
+          {status === 'loading' ? (
+            <div className="courseware-search__spinner">
+              <Spinner animation="border" variant="light" screenReaderText={intl.formatMessage(messages.loading)} />
+            </div>
+          ) : null}
+          {status === 'error' && (
+            <Alert className="mt-4" variant="danger">
+              {intl.formatMessage(messages.searchResultsError)}
+            </Alert>
+          )}
+          {status === 'results' ? (
+            <>
+              <div className="courseware-search__results-summary">{total > 0
+                ? (
+                  intl.formatMessage(
+                    total === 1
+                      ? messages.searchResultsSingular
+                      : messages.searchResultsPlural,
+                    { total, keyword: lastSearchKeyword },
+                  )
+                ) : intl.formatMessage(messages.searchResultsNone)}
+              </div>
+              <CoursewareSearchResultsFilterContainer />
+            </>
+          ) : null}
         </div>
       </div>
     </section>
   );
 };
-
 CoursewareSearch.propTypes = {
   intl: intlShape.isRequired,
 };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const CoursewareSearchEmpty = ({ intl }) => (
+  <div className="courseware-search-results">
+    <p className="courseware-search-results__empty" data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p>
+  </div>
+);
+
+CoursewareSearchEmpty.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearchEmpty);

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

@@ -3,32 +3,36 @@ import { SearchField } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
 const CoursewareSearchForm = ({
+  value,
   onSubmit,
   onChange,
   placeholder,
 }) => (
   <SearchField.Advanced
+    value={value}
     onSubmit={onSubmit}
     onChange={onChange}
     submitButtonLocation="external"
     className="courseware-search-form"
   >
     <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
       <SearchField.Label />
-      <SearchField.Input placeholder={placeholder} />
+      <SearchField.Input placeholder={placeholder} autoFocus />
       <SearchField.ClearButton />
     </div>
     <SearchField.SubmitButton submitButtonLocation="external" />
   </SearchField.Advanced>
 );
 
 CoursewareSearchForm.propTypes = {
+  value: PropTypes.string,
   onSubmit: PropTypes.func,
   onChange: PropTypes.func,
   placeholder: PropTypes.string,
 };
 
 CoursewareSearchForm.defaultProps = {
+  value: undefined,
   onSubmit: undefined,
   onChange: undefined,
   placeholder: undefined,