fix(dnd): remove beautiful dnd

package.json

@@ -20,7 +20,6 @@
     "framer-motion": "^6.5.1",
     "notistack": "^2.0.5",
     "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.1",
     "react-device-detect": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.36.1",

src/components/TrackerCard/TrackerCard.tsx

@@ -1,6 +1,5 @@
 import { Card, CardProps } from '@mui/material';
 import { FC, useState } from 'react';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
 import Completion from '../../models/Completion';
 import Tracker from '../../models/Tracker';
@@ -11,10 +10,9 @@ import TrackerCardHeader from './TrackerCardHeader';
 const sxProps = { px: 1, py: 1 };
 
 interface Props extends CardProps {
-  dragHandleProps?: DraggableProvidedDragHandleProps;
   tracker: Tracker;
 }
-const TrackerCard: FC<Props> = ({ dragHandleProps, tracker, ...cardProps }) => {
+const TrackerCard: FC<Props> = ({ tracker, ...cardProps }) => {
   const { requiredCompletions } = tracker;
   const [selectedCompletions, setSelectedCompletions] = useState<Completion[]>([]);
 
@@ -40,7 +38,7 @@ const TrackerCard: FC<Props> = ({ dragHandleProps, tracker, ...cardProps }) => {
       {...cardProps}
       className="tracker-card"
       id={'tracker-card-' + tracker.id}>
-      <TrackerCardHeader dragHandleProps={dragHandleProps} tracker={tracker} sx={sxProps} />
+      <TrackerCardHeader tracker={tracker} sx={sxProps} />
       {requiredCompletions.length > 0 && (
         <TrackerCardContent
           sx={{ sxProps }}

src/components/TrackerCard/TrackerCardHeader.tsx

@@ -1,6 +1,5 @@
 import ArchiveIcon from '@mui/icons-material/Archive';
 import DeleteIcon from '@mui/icons-material/Delete';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import EditIcon from '@mui/icons-material/Edit';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import {
@@ -11,13 +10,11 @@ import {
   ListItemText,
   Menu,
   MenuItem,
-  Stack,
   Typography
 } from '@mui/material';
 import { isAfter } from 'date-fns';
 import { useSnackbar } from 'notistack';
 import React, { FC, useState } from 'react';
-import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
 
 import { useAppDispatch } from '../../hooks/redux';
 import Tracker from '../../models/Tracker';
@@ -28,11 +25,10 @@ import Emoji from '../Emoji/Emoji';
 import TrackerEditDialog from '../TrackerEditDialog/TrackerEditDialog';
 
 interface Props extends CardHeaderProps {
-  dragHandleProps?: DraggableProvidedDragHandleProps;
   tracker: Tracker;
 }
 
-const TrackerCardHeader: FC<Props> = ({ dragHandleProps, tracker, ...cardHeaderProps }) => {
+const TrackerCardHeader: FC<Props> = ({ tracker, ...cardHeaderProps }) => {
   const { beginDate, frequency, id, name, remainingDays, status } = tracker;
   const dispatch = useAppDispatch();
   const { enqueueSnackbar } = useSnackbar();
@@ -121,16 +117,7 @@ const TrackerCardHeader: FC<Props> = ({ dragHandleProps, tracker, ...cardHeaderP
             </Menu>
           </>
         }
-        title={
-          <Stack direction="row" alignItems="center" gap={1}>
-            {dragHandleProps && (
-              <span {...dragHandleProps}>
-                <DragIndicatorIcon sx={{ fontSize: 18 }} aria-label="tracker-drag-handle" />
-              </span>
-            )}
-            <Typography variant="h5">{name}</Typography>
-          </Stack>
-        }
+        title={<Typography variant="h5">{name}</Typography>}
         subheader={
           <>
             <Typography display="block" variant="subtitle2">