Favourite Clear Button (#43)

Author: jkluge

my-app/src/presenters/SearchbarPresenter.jsx

@@ -16,12 +16,17 @@ const SearchbarPresenter = observer(({ model }) => {
         model.removeFavourite(course);
     }
 
+    function removeAllFavourites(){
+        model.setFavourite([]);
+    }
+
     return (
         <SearchbarView
             model={model}
             searchCourses={searchCourses}
             favouriteCourses = {model.favourites}
             removeFavourite={removeFavourite}
+            removeAllFavourites={removeAllFavourites}
         />
     );
 });

my-app/src/views/Components/FavouriteDropdown.jsx

@@ -4,26 +4,30 @@ function FavouritesDropdown(props) {
     return (
         <div className="absolute mt-2 w-48 bg-white border border-solid border-black rounded-lg z-50 overflow-y-auto">
             {props.favouriteCourses.length > 0 ? (
-                props.favouriteCourses.map(course => (
-                    <div
-                        key={course.code}
-                        className="p-2 flex justify-between items-center w-full border border-solid border-black">
-                        <p
-                            className="text-black">
-                            {course.name}
-                        </p>
-                        <button
-                            className="text-red-500 cursor-pointer"
-                            onClick={() => props.removeFavourite(course)}>
-                            X
-                        </button>
-                    </div>
-                ))
-            ) : (
+            
+                    props.favouriteCourses.map(course => (
+                        <div
+                            key={course.code}
+                            className="p-2 flex justify-between items-center w-full border border-solid border-black">
+                            <p
+                                className="text-black">
+                                {course.name}
+                            </p>
+                            <button
+                                className="text-red-500 cursor-pointer"
+                                onClick={() => props.removeFavourite(course)}>
+                                X
+                            </button>
+                        </div>
+                    ))
+                    
+               
+            )  : (
                 <div className="p-2 text-[#000061]">
                     No favourites
                 </div>
             )}
+            {props.favouriteCourses.length > 0 ? <button onClick={props.removeAllFavourites}>Clear Favourites</button> : ""}
         </div>
     );
 }

my-app/src/views/SearchbarView.jsx

@@ -71,6 +71,7 @@ function SearchbarView(props) {
                             courses={props.courses}
                             favouriteCourses={props.favouriteCourses}
                             removeFavourite={props.removeFavourite}
+                            removeAllFavourites={props.removeAllFavourites}
                         />
                     )}
                 </div>