add types to react dnd

pennlabs · Feb 20, 2024 · 560eaee · 560eaee
1 parent 76225e9
commit 560eaee
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 20 deletions.
diff --git a/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx b/frontend/degree-plan/components/FourYearPlan/CoursePlanned.tsx
@@ -3,7 +3,7 @@ import { useDrag } from "react-dnd";
 import { ItemTypes } from "../dnd/constants";
 import { GrayIcon } from '../common/bulma_derived_components';
 import styled from '@emotion/styled';
-import { Course, Fulfillment } from "@/types";
+import { Course, DnDFulfillment, Fulfillment } from "@/types";
 import { ReviewPanelTrigger } from "../Infobox/ReviewPanel";
 
 export const BaseCourseContainer = styled.span<{ $isDragging?: boolean, $isDepressed: boolean, $isDisabled: boolean }>`
@@ -55,7 +55,7 @@ interface CoursePlannedProps {
 }
 
 const CoursePlanned = ({ fulfillment, semester, removeCourse } : CoursePlannedProps) => {
-  const [{ isDragging }, drag] = useDrag(() => ({
+  const [{ isDragging }, drag] = useDrag<DnDFulfillment, never, { isDragging: boolean }>(() => ({
     type: ItemTypes.COURSE,
     item: fulfillment,
     collect: (monitor) => ({

diff --git a/frontend/degree-plan/components/FourYearPlan/Semester.tsx b/frontend/degree-plan/components/FourYearPlan/Semester.tsx
@@ -4,7 +4,7 @@ import { ItemTypes } from "../dnd/constants";
 import CoursesPlanned from "./CoursesPlanned";
 import Stats from "./Stats";
 import styled from '@emotion/styled';
-import { Course, DegreePlan, Fulfillment } from "@/types";
+import { Course, DegreePlan, DnDFulfillment, Fulfillment } from "@/types";
 import { postFetcher, useSWRCrud } from "@/hooks/swrcrud";
 import { useSWRConfig } from "swr";
 import courses from "@/data/courses";
@@ -69,15 +69,12 @@ const Semester = ({ showStats, semester, fulfillments, activeDegreeplanId, class
     // the fulfillments api uses the POST method for updates (it creates if it doesn't exist, and updates if it does)
     const { createOrUpdate } = useSWRCrud<Fulfillment>(`/api/degree/degreeplans/${activeDegreeplanId}/fulfillments`, { idKey: "full_code" });
 
-    const [{ isOver }, drop] = useDrop(() => ({
+    const [_, drop] = useDrop<DnDFulfillment, never, never>(() => ({
         accept: ItemTypes.COURSE,
-        drop: (fulfillment: Fulfillment) => {
+        drop: (fulfillment: DnDFulfillment) => {
             createOrUpdate({ semester, rules: fulfillment.rules }, fulfillment.full_code);
-        },
-        collect: monitor => ({
-          isOver: !!monitor.isOver()
-        }),
-    }), []);
+        }
+    }), [createOrUpdate, semester]);
 
     return (
         <SemesterCard $showStats={showStats} className={className}>

diff --git a/frontend/degree-plan/components/Infobox/ReviewPanel.tsx b/frontend/degree-plan/components/Infobox/ReviewPanel.tsx
@@ -14,8 +14,7 @@ export const ReviewPanelTrigger = ({ full_code, children }: PropsWithChildren<{f
         <div
             ref={ref}
             onDoubleClick={() => {
-                console.log("FULLCODE", full_code)
-                set_full_code(full_code)
+                set_full_code(full_code);
                 if (!ref.current) return;
                 const { x } = ref.current.getBoundingClientRect();
                 if (!isPermanent) setPosition({ y: 0, x });

diff --git a/frontend/degree-plan/components/Requirements/QObject.tsx b/frontend/degree-plan/components/Requirements/QObject.tsx
@@ -1,15 +1,13 @@
 import { useDrag } from "react-dnd";
 import { ItemTypes } from "../dnd/constants";
-import { useEffect, useState } from "react";
-import type { Fulfillment, Rule } from "@/types";
+import type { DnDFulfillment, Fulfillment, Rule } from "@/types";
 import styled from "@emotion/styled";
 import nearley from "nearley";
 import grammar from "@/util/q_object_grammar" 
 import { Icon } from "../common/bulma_derived_components";
 import { BaseCourseContainer } from "../FourYearPlan/CoursePlanned";
 import assert from "assert";
 import { ReviewPanelTrigger } from "../Infobox/ReviewPanel";
-import { parseCommandLine } from "typescript";
 
 const interpolate = <T,>(arr: T[], separator: T) => arr.flatMap(
     (elem, index) => index < arr.length - 1 ? 
@@ -59,10 +57,10 @@ interface CourseOptionProps {
     ruleId: Rule["id"];
 }
 const CourseOption = ({ full_code, semester, isChosen = false, ruleIsSatisfied = false, ruleId }: CourseOptionProps) => {
-    const [{ isDragging }, drag] = useDrag(() => ({
+    const [{ isDragging }, drag] = useDrag<DnDFulfillment, never, { isDragging: boolean }>(() => ({
         type: ItemTypes.COURSE,
         item: {full_code: full_code, semester: null, rules: [ruleId], course: null },
-        collect: (monitor) => ({ isDragging: !!monitor.isDragging() }),
+collect: (monitor) => ({ isDragging: !!monitor.isDragging() }),
         canDrag: !isChosen && !ruleIsSatisfied
     }), [isChosen, ruleIsSatisfied])
 

diff --git a/frontend/degree-plan/types.ts b/frontend/degree-plan/types.ts
@@ -66,15 +66,19 @@ export interface Course {
   credits: number;
 }
 
-export interface Fulfillment extends DBObject {
-  id: number;
-  degree_plan: number; // id
+// The interface we use to pass fulfillments when using React DnD
+export interface DnDFulfillment {
   full_code: string;
   course: Course | null; // id
   semester: string | null;
   rules: number[]; // ids
 }
 
+export interface Fulfillment extends DBObject, DnDFulfillment {
+  id: number;
+  degree_plan: number; // id
+}
+
 // Internal representation of a plan (this is derived from fulfillments)
 export interface Semester {
   semester: string;