From 24cefb07114ed82ca88098523be5b9115bd664bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicolas=20Jim=C3=A9nez?= <nicolas.jimenez@edunext.co>
Date: Wed, 4 Dec 2024 12:34:13 -0500
Subject: [PATCH] feat: switch button to get only my courses

---
 src/features/Courses/CoursesFilters/index.jsx | 29 ++++++++++++++++---
 src/features/Courses/data/slice.js            |  5 ++++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/features/Courses/CoursesFilters/index.jsx b/src/features/Courses/CoursesFilters/index.jsx
index 5b866f7..d9e395a 100644
--- a/src/features/Courses/CoursesFilters/index.jsx
+++ b/src/features/Courses/CoursesFilters/index.jsx
@@ -4,15 +4,19 @@ import { useDispatch, useSelector } from 'react-redux';
 import { Col, Form } from '@edx/paragon';
 import { Select } from 'react-paragon-topaz';
 
-import { updateFilters, updateCurrentPage } from 'features/Courses/data/slice';
+import { updateFilters, updateCurrentPage, updateShowAllCourses } from 'features/Courses/data/slice';
 import { fetchCoursesData, fetchCoursesOptionsData } from 'features/Courses/data/thunks';
 
-import { initialPage, styleFirstOption, allResultsOption } from 'features/constants';
+import {
+  initialPage, styleFirstOption, allResultsOption, RequestStatus,
+} from 'features/constants';
 
 const CoursesFilters = () => {
   const dispatch = useDispatch();
   const selectedInstitution = useSelector((state) => state.main.selectedInstitution);
   const courses = useSelector((state) => state.courses.selectOptions);
+  const showAllCourses = useSelector((state) => state.courses.showAllCourses);
+  const coursesRequest = useSelector((state) => state.courses.table.status);
   const [courseOptions, setCourseOptions] = useState([]);
   const [courseSelected, setCourseSelected] = useState(null);
   const [inputCourse, setInputCourse] = useState('');
@@ -35,6 +39,8 @@ const CoursesFilters = () => {
     }
   };
 
+  const handleToggleChange = e => dispatch(updateShowAllCourses(e.target.checked));
+
   useEffect(() => {
     if (Object.keys(selectedInstitution).length > 0) {
       setCourseSelected(null);
@@ -56,7 +62,9 @@ const CoursesFilters = () => {
 
   useEffect(() => {
     if (Object.keys(selectedInstitution).length > 0) {
-      const params = {};
+      const params = {
+        has_classes: showAllCourses,
+      };
 
       if (courseSelected) {
         params.course_name = courseSelected.value === defaultOption.value
@@ -68,8 +76,11 @@ const CoursesFilters = () => {
       dispatch(updateFilters(params));
       dispatch(updateCurrentPage(initialPage));
     }
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [courseSelected, selectedInstitution]);
+  }, [courseSelected, selectedInstitution, showAllCourses]);
+
+  const isLoading = coursesRequest === RequestStatus.LOADING;
 
   return (
     <div className="filter-container justify-content-center row">
@@ -95,6 +106,16 @@ const CoursesFilters = () => {
               />
             </Form.Group>
           </Form.Row>
+          <Form.Row className="w-100 mt-2">
+            <Form.Switch
+              checked={showAllCourses}
+              onChange={handleToggleChange}
+              className="ml-3"
+              disabled={isLoading}
+            >
+              Show my courses
+            </Form.Switch>
+          </Form.Row>
         </Form>
       </div>
     </div>
diff --git a/src/features/Courses/data/slice.js b/src/features/Courses/data/slice.js
index 1f6bc2c..3f1a9b3 100644
--- a/src/features/Courses/data/slice.js
+++ b/src/features/Courses/data/slice.js
@@ -19,6 +19,7 @@ const initialState = {
     data: null,
   },
   notificationMessage: '',
+  showAllCourses: false,
 };
 
 export const coursesSlice = createSlice({
@@ -67,6 +68,9 @@ export const coursesSlice = createSlice({
     updateNotificationMsg: (state, { payload }) => {
       state.notificationMessage = payload;
     },
+    updateShowAllCourses: (state, { payload }) => {
+      state.showAllCourses = payload;
+    },
   },
 });
 
@@ -83,6 +87,7 @@ export const {
   newClassFailed,
   resetClassState,
   updateNotificationMsg,
+  updateShowAllCourses,
 } = coursesSlice.actions;
 
 export const { reducer } = coursesSlice;