Merge pull request #133 from Pearson-Advance/vue/PADV-1882

feat: display search on course filter

src/features/Courses/CoursesFilters/index.jsx

@@ -16,17 +16,22 @@ const CoursesFilters = () => {
   const [courseOptions, setCourseOptions] = useState([]);
   const [courseSelected, setCourseSelected] = useState(null);
   const [inputCourse, setInputCourse] = useState('');
+  const [defaultOption, setDefaultOption] = useState(allResultsOption);
 
   const filterOptions = (option, input) => {
     if (input) {
-      return option.label.toLowerCase().includes(input) || option.value === allResultsOption.value;
+      return option.label.toLowerCase().includes(input) || option.value === defaultOption.value;
     }
     return true;
   };
 
   const handleInputChange = (value, { action }) => {
     if (action === 'input-change') {
       setInputCourse(value);
+      setDefaultOption({
+        ...defaultOption,
+        label: `${allResultsOption.label} for ${value}`,
+      });
     }
   };
 
@@ -46,19 +51,20 @@ const CoursesFilters = () => {
       }))
       : [];
 
-    setCourseOptions([allResultsOption, ...options]);
-  }, [courses]);
+    setCourseOptions([defaultOption, ...options]);
+  }, [courses, defaultOption]);
 
   useEffect(() => {
     if (Object.keys(selectedInstitution).length > 0) {
       const params = {};
 
       if (courseSelected) {
-        params.course_name = courseSelected.value === allResultsOption.value
+        params.course_name = courseSelected.value === defaultOption.value
           ? inputCourse : courseSelected.value;
       }
       dispatch(fetchCoursesData(selectedInstitution.id, initialPage, params));
       setInputCourse('');
+      setDefaultOption(allResultsOption);
       dispatch(updateFilters(params));
       dispatch(updateCurrentPage(initialPage));
     }