From 9b1f79e1dc30c6be2150970e51f1e891fd68b699 Mon Sep 17 00:00:00 2001
From: JHawk0224 <jhawk111@icloud.com>
Date: Tue, 9 Apr 2024 13:32:55 -0400
Subject: [PATCH 1/2] Add dock clear button :smile:

---
 frontend/degree-plan/components/Dock/Dock.tsx | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend/degree-plan/components/Dock/Dock.tsx b/frontend/degree-plan/components/Dock/Dock.tsx
index 5a8fe057f..e8c2de115 100644
--- a/frontend/degree-plan/components/Dock/Dock.tsx
+++ b/frontend/degree-plan/components/Dock/Dock.tsx
@@ -13,6 +13,7 @@ import AccountIndicator from "pcx-shared-components/src/accounts/AccountIndicato
 import _ from 'lodash';
 import CoursePlanned from '../FourYearPlan/CourseInPlan';
 import CourseInDock from './CourseInDock';
+import { CourseXButton } from "../Course/Course";
 
 const DockWrapper = styled.div`
     z-index: 1;
@@ -74,6 +75,17 @@ const DockedCourses = styled.div`
     overflow: auto;
 `
 
+const CloseIcon = styled.div`
+    cursor: pointer;
+    opacity: 0.5;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    &:hover {
+        opacity: 1;
+    }
+`;
+
 const CenteringCourseDock = styled.div`
     color: var(--primary-color-extra-dark);
     margin-left: auto;
@@ -140,6 +152,11 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
     //     }
     // }, [isMount, dockedCourses]);
 
+    const { remove } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
+    const handleRemoveCourse = (full_code: string) => {
+      remove(full_code);
+    }
+
     return (
         <DockWrapper ref={drop} >
             <DockContainer $isDroppable={canDrop} $isOver={isOver}>
@@ -183,6 +200,12 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
                             {dockedCourses.map((course) => 
                                 <AnimatedDockedCourseItem course={course} isDisabled={false} />
                             )}
+                            <CloseIcon>
+                                <CourseXButton onClick={(e) => {
+                                    temps.forEach((course) => handleRemoveCourse(course.full_code));
+                                    e.stopPropagation();
+                                }} hidden={false}/>
+                            </CloseIcon>
                         </DockedCourses>}
                 </DockedCoursesWrapper>
                 <Logo src='pdp-logo.svg' width='30' height='45'/>

From bff18282db08602afa29178e8d2e3c8b019e340c Mon Sep 17 00:00:00 2001
From: JHawk0224 <jhawk111@icloud.com>
Date: Wed, 10 Apr 2024 07:42:43 -0400
Subject: [PATCH 2/2] Fix typo

---
 frontend/degree-plan/components/Dock/Dock.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/degree-plan/components/Dock/Dock.tsx b/frontend/degree-plan/components/Dock/Dock.tsx
index e8c2de115..8b1e100b0 100644
--- a/frontend/degree-plan/components/Dock/Dock.tsx
+++ b/frontend/degree-plan/components/Dock/Dock.tsx
@@ -115,7 +115,7 @@ interface DockProps {
 const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
     // const [courseAdded, setCourseAdded] = React.useState(false);
     const { searchPanelOpen, setSearchPanelOpen, setSearchRuleQuery, setSearchRuleId } = useContext(SearchPanelContext)
-    const { createOrUpdate } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
+    const { createOrUpdate, remove } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
     const {data: dockedCourses = [], isLoading} = useSWR<DockedCourse[]>(user ? `/api/degree/docked` : null); 
 
     // Returns a boolean that indiates whether this is the first render
@@ -152,7 +152,6 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
     //     }
     // }, [isMount, dockedCourses]);
 
-    const { remove } = useSWRCrud<DockedCourse>(`/api/degree/docked`, { idKey: 'full_code' });
     const handleRemoveCourse = (full_code: string) => {
       remove(full_code);
     }
@@ -202,7 +201,7 @@ const Dock = ({ user, login, logout, activeDegreeplanId  }: DockProps) => {
                             )}
                             <CloseIcon>
                                 <CourseXButton onClick={(e) => {
-                                    temps.forEach((course) => handleRemoveCourse(course.full_code));
+                                    dockedCourses.forEach((course) => handleRemoveCourse(course.full_code));
                                     e.stopPropagation();
                                 }} hidden={false}/>
                             </CloseIcon>