Merge pull request #721 from UTDNebula/drag-drop-deletion

NP-8 (Delete Courses By Dragging) - Reopened
UTDNebula · Oct 23, 2023 · 15f234c · 15f234c
2 parents 87bebfc + dc9a111
commit 15f234c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 32 deletions.
diff --git a/src/components/planner/Sidebar/DeleteCourseDrop.tsx b/src/components/planner/Sidebar/DeleteCourseDrop.tsx
@@ -4,37 +4,27 @@ import { DragDataToSidebarTile } from '../types';
 
 export interface DeleteCourseDropProps {
   dropId: UniqueIdentifier;
-  open: boolean;
 }
 
-export default function DeleteCourseDrop({ dropId, open }: DeleteCourseDropProps) {
+export default function DeleteCourseDrop({ dropId }: DeleteCourseDropProps) {
   const { setNodeRef } = useDroppable({
     id: dropId,
     data: { to: 'sidebar-tile' } as DragDataToSidebarTile,
   });
 
-  if (open) {
-    return (
-      <div
-        ref={setNodeRef}
-        id="tutorial-editor-1"
-        className="z-0 h-screen w-[30%] min-w-[30%] overflow-x-hidden overflow-y-scroll"
-      >
-        <div className="flex h-fit min-h-screen w-full flex-col gap-y-4 bg-white p-4">
-          <div className="h-[96vh] rounded-lg border-2 border-dashed border-red-400">
-            <div className="flex h-screen items-center justify-center">
-              Drop here to delete course
-            </div>
+  return (
+    <div
+      ref={setNodeRef}
+      id="tutorial-editor-1"
+      className="z-0 h-screen w-[30%] min-w-[30%] overflow-x-hidden overflow-y-scroll"
+    >
+      <div className="flex h-fit min-h-screen w-full flex-col gap-y-4 bg-white p-4">
+        <div className="flex h-[96vh] flex-[1_0_0] flex-col items-center justify-center self-stretch rounded-3xl border-2 border-dashed border-[color:var(--destructive-500-main,#EF4444)]">
+          <div className="self-stretch text-center text-base font-semibold not-italic leading-6 text-[color:var(--neutral-400,#A3A3A3)]">
+            Drag course here to delete
           </div>
         </div>
       </div>
-    );
-  } else {
-    return (
-      <div
-        ref={setNodeRef}
-        className="z-0 flex h-screen w-[50px] flex-col items-center border border-neutral-300 bg-red-500 py-8"
-      ></div>
-    );
-  }
+    </div>
+  );
 }
diff --git a/src/components/planner/Sidebar/Sidebar.tsx b/src/components/planner/Sidebar/Sidebar.tsx
@@ -11,6 +11,7 @@ import SearchBar from '@/components/planner/Sidebar/SearchBar';
 import ChevronIcon from '@/icons/ChevronIcon';
 import { trpc } from '@/utils/trpc';
 import { getSemesterHourFromCourseCode } from '@/utils/utilFunctions';
+import { useSemestersContext } from '@components/planner/SemesterContext';
 
 import AccordionSkeleton from './AccordionSkeleton';
 import DeleteCourseDrop from './DeleteCourseDrop';
@@ -20,7 +21,6 @@ import { Course, DraggableCourse, GetDragIdByCourse } from '../types';
 import useFuse from '../useFuse';
 
 import 'react-loading-skeleton/dist/skeleton.css';
-import { useSemestersContext } from '@components/planner/SemesterContext';
 
 export interface CourseSelectorContainerProps {
   planId: string;
@@ -137,8 +137,8 @@ function CourseSelectorContainer({
   const [displayResults, setDisplay] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
 
-  if (dragActive) {
-    return <DeleteCourseDrop dropId={dropId} open={open} />;
+  if (dragActive && open) {
+    return <DeleteCourseDrop dropId={dropId} />;
   }
 
   if (!open) {
@@ -212,7 +212,6 @@ function CourseSelectorContainer({
             ></div>
           </div>
         </div>
-
         <Dialog.Root open={displayResults} onOpenChange={(v) => setDisplay(v)} modal={false}>
           {ref.current && (
             <Dialog.Portal className="z-[99]" container={ref?.current}>
@@ -228,7 +227,6 @@ function CourseSelectorContainer({
             </Dialog.Portal>
           )}
         </Dialog.Root>
-
         {validatorError && (
           <div className="flex h-[30vh] w-full text-base leading-5 text-[#A3A3A3]">
             <div className="mx-12 mt-44 flex w-full flex-col items-center justify-center gap-4 text-center leading-6">
@@ -239,7 +237,6 @@ function CourseSelectorContainer({
             </div>
           </div>
         )}
-
         {validatorUnsupportedDegreeError && (
           <div className="flex h-[30vh] w-full text-base leading-5 text-[#A3A3A3]">
             <div className="mx-12 mt-44 flex w-full flex-col items-center justify-center gap-4 text-center leading-6">
@@ -250,7 +247,6 @@ function CourseSelectorContainer({
             </div>
           </div>
         )}
-
         {!validatorError &&
           !validatorUnsupportedDegreeError &&
           validationData &&
@@ -263,11 +259,12 @@ function CourseSelectorContainer({
               getCourseItemDragId={getRequirementDragId}
             />
           ))}
-
         {!validatorError && !validatorUnsupportedDegreeError && !validationData && (
           <AccordionSkeleton />
         )}
-
+        <div className="flex flex-grow items-end justify-center text-center text-base font-semibold not-italic leading-6 text-[color:var(--neutral-400,#A3A3A3)]">
+          Drag courses here to delete
+        </div>
         <div className="flex flex-grow items-end justify-end text-sm ">
           <div>
             <span className="font-bold">Warning:</span> This is an unofficial tool not affiliated