fix: eslint and remove React-beautiful-dnd

package.json

@@ -25,7 +25,6 @@
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
         "react": "^18.2.0",
-        "react-beautiful-dnd": "^13.1.1",
         "react-devtools-core": "^5.0.0",
         "react-dom": "^18.2.0",
         "react-window": "^1.8.10",

pnpm-lock.yaml

@@ -37,9 +37,6 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
-  react-beautiful-dnd:
-    specifier: ^13.1.1
-    version: 13.1.1(react-dom@18.2.0)(react@18.2.0)
   react-devtools-core:
     specifier: ^5.0.0
     version: 5.0.0
@@ -4380,15 +4377,6 @@ packages:
     dependencies:
       '@types/react': 18.2.55
 
-  /@types/react-redux@7.1.33:
-    resolution: {integrity: sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==}
-    dependencies:
-      '@types/hoist-non-react-statics': 3.3.5
-      '@types/react': 18.2.55
-      hoist-non-react-statics: 3.3.2
-      redux: 4.2.1
-    dev: false
-
   /@types/react@18.2.55:
     resolution: {integrity: sha512-Y2Tz5P4yz23brwm2d7jNon39qoAtMMmalOQv6+fEFt1mT+FcM3D841wDpoUvFXhaYenuROCy3FZYqdTjM7qVyA==}
     dependencies:
@@ -9509,6 +9497,7 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -10350,6 +10339,7 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
+    dev: true
 
   /proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
@@ -10481,25 +10471,6 @@ packages:
       strip-json-comments: 2.0.1
     dev: true
 
-  /react-beautiful-dnd@13.1.1(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==}
-    peerDependencies:
-      react: ^16.8.5 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@babel/runtime': 7.23.9
-      css-box-model: 1.2.1
-      memoize-one: 5.2.1
-      raf-schd: 4.0.3
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-redux: 7.2.9(react-dom@18.2.0)(react@18.2.0)
-      redux: 4.2.1
-      use-memo-one: 1.1.3(react@18.2.0)
-    transitivePeerDependencies:
-      - react-native
-    dev: false
-
   /react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
     peerDependencies:
@@ -10634,6 +10605,7 @@ packages:
 
   /react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    dev: true
 
   /react-is@18.1.0:
     resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
@@ -10642,28 +10614,6 @@ packages:
   /react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
 
-  /react-redux@7.2.9(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==}
-    peerDependencies:
-      react: ^16.8.3 || ^17 || ^18
-      react-dom: '*'
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.9
-      '@types/react-redux': 7.1.33
-      hoist-non-react-statics: 3.3.2
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-is: 17.0.2
-    dev: false
-
   /react-redux@8.1.3(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1):
     resolution: {integrity: sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==}
     peerDependencies:

src/views/components/common/List/List.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useState, useCallback, ReactElement } from 'react';
-import { useState } from 'react';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { FixedSizeList, areEqual } from 'react-window';
-import { ReactElement } from 'react';
 
-/*Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
+
+/*
+ * Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
  *
  */
 
@@ -12,12 +12,12 @@ import { ReactElement } from 'react';
  * Props for the List component. 
  */
 export interface ListProps {
-    draggableElements: any[]; //Will later define draggableElements based on what types 
+    draggableElements: any[]; //    Will later define draggableElements based on what types 
-                              //of components are draggable.
+                              //    of components are draggable.
     itemHeight: number; 
     listHeight: number;
     listWidth: number;
-    gap: number; //Impacts the spacing between items in the list
+    gap: number; // Impacts the spacing between items in the list
                  
 }
 
@@ -58,7 +58,7 @@ function Item({ provided, item, style, isDragging, gap }) {
 }
 
 interface RowProps  {
-    data: any, //DraggableElements[]; Need to define DraggableElements interface once those components are ready
+    data: any, //   DraggableElements[]; Need to define DraggableElements interface once those components are ready
     index: number,
     style: React.CSSProperties,
 }
@@ -72,7 +72,7 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
       };
     return (
         <Draggable draggableId={item.id} index={index} key={item.id}>
-        {/*@ts-ignore*/}
+        {/* @ts-ignore  */}
         {provided => <Item provided={provided} item={item} style={adjustedStyle} gap={gap}/>}
         </Draggable>
     );
@@ -87,11 +87,11 @@ const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style
 const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight, listWidth, gap=8 }: ListProps) => {
     const [items, setItems] = useState(() => initial(draggableElements));
 
-    function onDragEnd(result) {
+    const onDragEnd = useCallback((result) => {
         if (!result.destination) {
           return;
         }
-
+    
         if (result.source.index === result.destination.index) {
           return;
         }
@@ -101,8 +101,9 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
           result.source.index,
           result.destination.index
         );
-        setItems(newItems as {id: string, content: ReactElement}[]);
+    
-      }
+        setItems(newItems as { id: string, content: React.ReactElement }[]);
+    }, [items]);
 
     return (
         <div style={{ overflow: 'hidden', width: listWidth, height: listHeight }}>
@@ -121,23 +122,23 @@ const List: React.FC<ListProps> = ( { draggableElements, itemHeight, listHeight,
                     const transform = style?.transform;
                 
                     if (snapshot.isDragging && transform) {
-                        let [x, y] = transform
+                        let [, y] = transform
                             .replace('translate(', '')
                             .replace(')', '')
                             .split(',')
                             .map((v) => parseInt(v, 10));
                         
-                        const minTranslateY = -1 * rubric.source.index * itemHeight;
+                        // const minTranslateY = -1 * rubric.source.index * itemHeight;
-                        const maxTranslateY = (items.length - rubric.source.index - 1) * itemHeight;
+                        // const maxTranslateY = (items.length - rubric.source.index - 1) * itemHeight;
-                        if (y < minTranslateY) {
+                        // if (y < minTranslateY) {
                             
-                        }  
+                        // }  
-                        else if (y > maxTranslateY) {
+                        // else if (y > maxTranslateY) {
                             
-                        }
+                        // }
-                        else {
+                        // else {
                             
-                        }
+                        // }
 
                         style.transform = `translate(0px, ${y}px)`; // Apply constrained y value  
                     }