#4020 first attempt editing task column and task list content for dynamic droppable area

Author: getheobald

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskColumn.tsx

@@ -1,6 +1,6 @@
 import { Droppable } from '@hello-pangea/dnd';
 import { Box, Typography, useTheme } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Project, Task, TaskStatus, TaskWithIndex } from 'shared';
 import { statusNames, TaskCard } from '.';
 import { NERButton } from '../../../../../components/NERButton';
@@ -13,22 +13,44 @@ export const TaskColumn = ({
   status,
   tasks,
   project,
+  equalizedHeight,
   onEditTask,
   onDeleteTask,
-  onAddTask
+  onAddTask,
+  onHeightChange
 }: {
   status: Task['status'];
   tasks: TaskWithIndex[];
   project: Project;
+  equalizedHeight: number;
   onEditTask: (task: Task) => void;
   onDeleteTask: (taskId: string) => void;
   onAddTask: (task: Task) => void;
+  onHeightChange: (status: Task['status'], height: number) => void;
 }) => {
   const { mutateAsync: createTask } = useCreateTask();
   const [showCreateTaskModal, setShowCreateTaskModal] = useState(false);
   const toast = useToast();
   const theme = useTheme();
 
+  // create ref to droppable box dom node so we can measure height
+  const droppableBoxRef = useRef<HTMLElement | null>(null);
+
+  // effectively runs once on mount because both deps (task status and callback func) are stable
+  useEffect(() => {
+    if (!droppableBoxRef.current) return;
+
+    const droppableBox = droppableBoxRef.current;
+
+    const observer = new ResizeObserver(() => {
+      onHeightChange(status, droppableBox.scrollHeight);
+    });
+    observer.observe(droppableBox);
+
+    // cleanup func to disconnect observer when component unmounts
+    return () => observer.disconnect();
+  }, [status, onHeightChange]);
+
   const handleCreateTask = async ({ notes, title, deadline, assignees, priority, startDate }: EditTaskFormInput) => {
     try {
       const task = await createTask({
@@ -75,14 +97,18 @@ export const TaskColumn = ({
         <Droppable droppableId={status}>
           {(droppableProvided, snapshot) => (
             <Box
-              ref={droppableProvided.innerRef}
+              ref={(droppableBox: HTMLElement | null) => {
+                droppableProvided.innerRef(droppableBox); // give dnd lib access to dom node
+                droppableBoxRef.current = droppableBox; // give ourselves access to dom node
+              }}
               {...droppableProvided.droppableProps}
               className={snapshot.isDraggingOver ? ' isDraggingOver' : ''}
               sx={{
                 display: 'flex',
                 flexDirection: 'column',
                 borderRadius: 5,
                 padding: '5px',
+                minHeight: `${equalizedHeight}px`,
                 '&.isDraggingOver': {
                   bgcolor: '#dadadf'
                 }

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskListContent.tsx

@@ -1,6 +1,6 @@
 import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd';
 import { Box } from '@mui/material';
-import { useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 import { Project, Task, TaskWithIndex } from 'shared';
 import { getTasksByStatus, statuses, TasksByStatus } from '.';
 import { useSetTaskStatus } from '../../../../../hooks/tasks.hooks';
@@ -19,6 +19,16 @@ export const TaskListContent = ({ project }: TaskListProps) => {
 
   const toast = useToast();
 
+  // ref to mapping of each column's status to its measured height, partial because heights may not exist
+  const columnHeightsRef = useRef<Partial<Record<Task['status'], number>>>({});
+  const [equalizedHeight, setEqualizedHeight] = useState(0);
+
+  const onHeightChange = useCallback((status: Task['status'], height: number) => {
+    columnHeightsRef.current[status] = height;
+    const max = Math.max(...(Object.values(columnHeightsRef.current) as number[]));
+    setEqualizedHeight(max);
+  }, []);
+
   const onDeleteTask = (taskId: string) => {
     setTasksByStatus((prev) => {
       const newTasksByStatus = { ...prev };
@@ -117,10 +127,12 @@ export const TaskListContent = ({ project }: TaskListProps) => {
             onAddTask={onAddTask}
             onDeleteTask={onDeleteTask}
             onEditTask={onEditTask}
+            onHeightChange={onHeightChange}
             status={status}
             tasks={tasksByStatus[status]}
             key={status}
             project={project}
+            equalizedHeight={equalizedHeight}
           />
         ))}
       </Box>