From abc4e7dd7c91bf133030ebde4b5216e1952f9409 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicolas=20Jim=C3=A9nez?= <nicolas.jimenez@edunext.co>
Date: Fri, 29 Nov 2024 17:30:39 -0500
Subject: [PATCH] feat: display search on course filter

---
 src/features/Courses/CoursesFilters/index.jsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/features/Courses/CoursesFilters/index.jsx b/src/features/Courses/CoursesFilters/index.jsx
index da8bdac..5b866f7 100644
--- a/src/features/Courses/CoursesFilters/index.jsx
+++ b/src/features/Courses/CoursesFilters/index.jsx
@@ -16,10 +16,11 @@ 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;
   };
@@ -27,6 +28,10 @@ const CoursesFilters = () => {
   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));
     }