feat(#159): make tracker cards sortable

src/components/TrackerCard/TrackerCard.tsx

@@ -1,5 +1,6 @@
 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';
@@ -8,9 +9,10 @@ import TrackerCardContent from './TrackerCardContent';
 import TrackerCardHeader from './TrackerCardHeader';
 
 interface Props extends CardProps {
+  dragHandleProps?: DraggableProvidedDragHandleProps;
   tracker: Tracker;
 }
-const TrackerCard: FC<Props> = ({ tracker, ...cardProps }) => {
+const TrackerCard: FC<Props> = ({ dragHandleProps, tracker, ...cardProps }) => {
   const { requiredCompletions } = tracker;
   const [selectedCompletions, setSelectedCompletions] = useState<Completion[]>([]);
   const sxProps = { px: 1, py: 1 };
@@ -33,7 +35,7 @@ const TrackerCard: FC<Props> = ({ tracker, ...cardProps }) => {
 
   return (
     <Card {...cardProps}>
-      <TrackerCardHeader tracker={tracker} sx={sxProps} />
+      <TrackerCardHeader dragHandleProps={dragHandleProps} tracker={tracker} sx={sxProps} />
       {requiredCompletions.length > 0 && (
         <TrackerCardContent
           sx={{ sxProps }}

src/components/TrackerCard/TrackerCardHeader.tsx

@@ -1,5 +1,6 @@
 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 {
@@ -10,11 +11,13 @@ 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';
@@ -25,10 +28,11 @@ import Emoji from '../Emoji/Emoji';
 import TrackerEditDialog from '../TrackerEditDialog/TrackerEditDialog';
 
 interface Props extends CardHeaderProps {
+  dragHandleProps?: DraggableProvidedDragHandleProps;
   tracker: Tracker;
 }
 
-const TrackerCardHeader: FC<Props> = ({ tracker, ...cardHeaderProps }) => {
+const TrackerCardHeader: FC<Props> = ({ dragHandleProps, tracker, ...cardHeaderProps }) => {
   const { beginDate, frequency, id, name, remainingDays, status } = tracker;
   const dispatch = useAppDispatch();
   const { enqueueSnackbar } = useSnackbar();
@@ -82,6 +86,7 @@ const TrackerCardHeader: FC<Props> = ({ tracker, ...cardHeaderProps }) => {
     <>
       <CardHeader
         {...cardHeaderProps}
+        disableTypography
         action={
           <>
             <IconButton aria-label="tracker-settings" onClick={handleMoreActionsClick}>
@@ -116,7 +121,16 @@ const TrackerCardHeader: FC<Props> = ({ tracker, ...cardHeaderProps }) => {
             </Menu>
           </>
         }
-        title={name}
+        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>
+        }
         subheader={
           <>
             <Typography display="block" variant="subtitle2">

src/components/TrackerCardList/TrackerCardList.tsx

@@ -1,10 +1,12 @@
 import { useAutoAnimate } from '@formkit/auto-animate/react';
 import { CardProps, useTheme } from '@mui/material';
 import { FC } from 'react';
+import { DragDropContext, DragUpdate, Draggable, Droppable } from 'react-beautiful-dnd';
 
-import { useAppSelector } from '../../hooks/redux';
+import { useAppDispatch, useAppSelector } from '../../hooks/redux';
 import Tracker from '../../models/Tracker';
 import { selectThemeMode } from '../../store/theme/theme.selectors';
+import { orderTracker } from '../../store/trackers/trackersSlice';
 import TrackerCard from '../TrackerCard/TrackerCard';
 import defaultCardProps from '../TrackerCard/defaultCardProps';
 
@@ -16,17 +18,53 @@ interface Props {
 const TrackerCardList: FC<Props> = ({ trackers, cardProps }) => {
   const themeMode = useAppSelector(selectThemeMode);
   const theme = useTheme();
+  const dispatch = useAppDispatch();
   const [animateRef] = useAutoAnimate<HTMLDivElement>();
   const allCardProps = {
     ...defaultCardProps(themeMode, theme),
     ...cardProps
   };
+
+  const handleOnDragUpdate = (updateResult: DragUpdate) => {
+    const { draggableId: draggedTrackerId, destination } = updateResult;
+    if (destination) {
+      const { index: destinationIndex } = destination;
+      const destinationTrackerId = trackers[destinationIndex].id;
+      dispatch(orderTracker({ sourceTrackerId: draggedTrackerId, destinationTrackerId }));
+    }
+  };
+
   return (
-    <div ref={animateRef}>
-      {trackers.map((t) => (
-        <TrackerCard tracker={t} key={t.id} {...allCardProps} />
-      ))}
-    </div>
+    <DragDropContext
+      onDragUpdate={handleOnDragUpdate}
+      onDragEnd={() => {
+        // onDragUpdate already updated the state
+        return;
+      }}>
+      <Droppable droppableId="trackerCardList">
+        {(provided) => (
+          <div ref={animateRef}>
+            <div {...provided.droppableProps} ref={provided.innerRef}>
+              {trackers.map((t, idx) => (
+                <Draggable key={t.id} draggableId={t.id} index={idx}>
+                  {(provided) => (
+                    <div ref={provided.innerRef} {...provided.draggableProps}>
+                      <TrackerCard
+                        dragHandleProps={provided.dragHandleProps}
+                        tracker={t}
+                        key={t.id}
+                        {...allCardProps}
+                      />
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          </div>
+        )}
+      </Droppable>
+    </DragDropContext>
   );
 };
 

src/config/CustomTheme.ts

@@ -109,5 +109,11 @@ export const typography = {
   fontFamily: ['Poppins', 'sans-serif'].join(','),
   h1: {
     fontSize: '4.3rem'
+  },
+  caption: {
+    color: grey[700]
+  },
+  subtitle2: {
+    color: grey[700]
   }
 };

src/store/trackers/reducers/__tests__/order.spec.ts

@@ -16,7 +16,7 @@ describe('trackers reducer', () => {
           ...initialState,
           trackers: [testTracker1, testTracker2, testTracker3]
         },
-        orderTracker({ trackerIdSource: testTracker1Id, trackerIdDestination: testTracker1Id })
+        orderTracker({ sourceTrackerId: testTracker1Id, destinationTrackerId: testTracker1Id })
       );
       const { trackers: trackers } = finalState;
       expect(trackers[0].id).toBe(testTracker1Id);
@@ -29,7 +29,7 @@ describe('trackers reducer', () => {
           ...initialState,
           trackers: [testTracker1, testTracker2, testTracker3]
         },
-        orderTracker({ trackerIdSource: testTracker1Id, trackerIdDestination: testTracker3Id })
+        orderTracker({ sourceTrackerId: testTracker1Id, destinationTrackerId: testTracker3Id })
       );
       const { trackers: trackers } = finalState;
       expect(trackers[0].id).toBe(testTracker2Id);
@@ -42,7 +42,7 @@ describe('trackers reducer', () => {
           ...initialState,
           trackers: [testTracker1, testTracker2, testTracker3]
         },
-        orderTracker({ trackerIdSource: testTracker3Id, trackerIdDestination: testTracker1Id })
+        orderTracker({ sourceTrackerId: testTracker3Id, destinationTrackerId: testTracker1Id })
       );
       const { trackers: trackers } = finalState;
       expect(trackers[0].id).toBe(testTracker3Id);

src/store/trackers/reducers/order.ts

@@ -3,14 +3,14 @@ import { PayloadAction } from '@reduxjs/toolkit';
 import TrackersState from '../TrackersState';
 
 export type Indexes = {
-  trackerIdSource: string;
-  trackerIdDestination: string;
+  sourceTrackerId: string;
+  destinationTrackerId: string;
 };
 
 const orderTrackerReducer = (state: TrackersState, action: PayloadAction<Indexes>) => {
-  const { trackerIdSource, trackerIdDestination } = action.payload;
-  const sourceIndex = state.trackers.findIndex((t) => t.id === trackerIdSource);
-  const destinationIndex = state.trackers.findIndex((t) => t.id === trackerIdDestination);
+  const { sourceTrackerId, destinationTrackerId } = action.payload;
+  const sourceIndex = state.trackers.findIndex((t) => t.id === sourceTrackerId);
+  const destinationIndex = state.trackers.findIndex((t) => t.id === destinationTrackerId);
   if (sourceIndex !== -1 && destinationIndex !== -1) {
     const tracker = state.trackers.splice(sourceIndex, 1)[0];
     state.trackers.splice(destinationIndex, 0, tracker);