Merge changes

icssc · Nov 17, 2024 · 8c57df7 · 8c57df7
1 parent 47382ef
commit 8c57df7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 10 deletions.
diff --git a/site/src/component/SearchModule/SearchModule.tsx b/site/src/component/SearchModule/SearchModule.tsx
@@ -53,7 +53,7 @@ const SearchModule: FC<SearchModuleProps> = ({ index }) => {
     if (location.pathname === '/roadmap') {
       dispatch(setShowCourseBag(!query));
     }
-    if (query) {
+    if (query && query !== search.query) {
       dispatch(setQuery({ index, query }));
       setPendingRequest(null);
     }

diff --git a/site/src/pages/RoadmapPage/SearchSidebar.scss b/site/src/pages/RoadmapPage/SearchSidebar.scss
@@ -19,6 +19,8 @@
     flex-direction: column;
     height: 100%;
     overflow: auto;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   &.mobile {
@@ -51,6 +53,10 @@
     font-weight: 600;
     @include clickable(0.9, 0.7);
   }
+
+  .coursebag-title {
+    margin: 12px 6px 0;
+  }
 }
 
 .search {

diff --git a/site/src/pages/RoadmapPage/SearchSidebar.tsx b/site/src/pages/RoadmapPage/SearchSidebar.tsx
@@ -14,6 +14,7 @@ import { useCoursebag } from '../../hooks/coursebag';
 import { CourseGQLData } from '../../types/types';
 import Course from './Course';
 import { courseSearchSortable } from '../../helpers/sortable';
+import { Spinner } from 'react-bootstrap';
 
 const CloseRoadmapSearchButton = () => {
   const isMobile = useIsMobile();
@@ -46,7 +47,7 @@ const SearchSidebar = () => {
   const dispatch = useAppDispatch();
 
   const { coursebag } = useCoursebag();
-  const results = useAppSelector((state) => state.search.courses.results);
+  const { results, searchInProgress } = useAppSelector((state) => state.search.courses);
   const shownCourses = JSON.parse(JSON.stringify(showCourseBag ? coursebag : results)) as CourseGQLData[];
 
   const closeSearch = () => dispatch(setShowSearch({ show: false }));
@@ -62,20 +63,29 @@ const SearchSidebar = () => {
     dispatch(setActiveCourse(course));
   };
 
+  const coursebagTitle = coursebag.length ? (
+    <h3 className="coursebag-title">Saved Courses</h3>
+  ) : (
+    <p className="coursebag-title">No courses saved. Try searching for something!</p>
+  );
+
   return (
     <>
       {isMobile && showSearch && <UIOverlay onClick={closeSearch} zIndex={449} passedRef={overlayRef} />}
       <div className={`search-sidebar ${isMobile ? 'mobile' : ''}`} ref={sidebarRef}>
         <div className="search-sidebar-search-module">
           <SearchModule index="courses" />
         </div>
-        <div className="search-body">
-          <ReactSortable {...courseSearchSortable} list={shownCourses} onStart={setDraggedItem}>
-            {shownCourses.map((course, i) => (
-              <Course {...course} key={i} />
-            ))}
-          </ReactSortable>
-        </div>
+        {showCourseBag && coursebagTitle}
+        <ReactSortable {...courseSearchSortable} list={shownCourses} onStart={setDraggedItem} className="search-body">
+          {searchInProgress ? (
+            <div className="no-results">
+              <Spinner animation="border" role="status" />
+            </div>
+          ) : (
+            shownCourses.map((course, i) => <Course {...course} key={i} />)
+          )}
+        </ReactSortable>
         <CloseRoadmapSearchButton />
       </div>
     </>

diff --git a/site/src/store/slices/roadmapSlice.ts b/site/src/store/slices/roadmapSlice.ts
@@ -81,7 +81,7 @@ const initialSliceState: RoadmapSliceState = {
   showAddCourse: false,
   showTransfer: false,
   transfers: [],
-  showCourseBag: false,
+  showCourseBag: true,
 };
 /** added for multiple planner */