From f67280127ae3c613ca0e50263ae38c8da9de29d1 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Sat, 9 Mar 2024 00:37:31 -0600
Subject: [PATCH] refactor: remove listWidth prop from List component and
 associated components (#135)

---
 src/stories/components/List.stories.tsx             |  7 +++++--
 src/views/components/PopupMain.tsx                  |  1 -
 .../CalendarSchedules/CalendarSchedules.tsx         |  2 +-
 src/views/components/common/Dropdown/Dropdown.tsx   |  2 +-
 src/views/components/common/List/List.tsx           | 13 ++++---------
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/stories/components/List.stories.tsx b/src/stories/components/List.stories.tsx
index 83df3117..3e8646f9 100644
--- a/src/stories/components/List.stories.tsx
+++ b/src/stories/components/List.stories.tsx
@@ -83,7 +83,6 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {
         draggableElements: { control: 'object' },
-        listWidth: { control: 'number' },
         gap: { control: 'number' },
     },
 } satisfies Meta<typeof List>;
@@ -94,7 +93,11 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         draggableElements: ExampleCourseBlocks,
-        listWidth: 300,
         gap: 12,
     },
+    render: args => (
+        <div className='w-sm'>
+            <List {...args} />
+        </div>
+    ),
 };
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index 76af9393..1492ad99 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -133,7 +133,6 @@ export default function PopupMain(): JSX.Element {
                         draggableElements={activeSchedule?.courses.map((course, i) => (
                             <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
                         ))}
-                        listWidth={350}
                         gap={12}
                     />
                 )}
diff --git a/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx b/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
index e8e13add..2d32f40b 100644
--- a/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
+++ b/src/views/components/calendar/CalendarSchedules/CalendarSchedules.tsx
@@ -77,7 +77,7 @@ export function CalendarSchedules({ style, dummySchedules, dummyActiveIndex }: P
                 </div>
             </div>
             <div className='flex flex-col space-y-2.5'>
-                <List gap={10} draggableElements={scheduleComponents} listWidth={240} />
+                <List gap={10} draggableElements={scheduleComponents} />
                 <input
                     type='text'
                     placeholder='Enter new schedule'
diff --git a/src/views/components/common/Dropdown/Dropdown.tsx b/src/views/components/common/Dropdown/Dropdown.tsx
index a67b6655..625505b0 100644
--- a/src/views/components/common/Dropdown/Dropdown.tsx
+++ b/src/views/components/common/Dropdown/Dropdown.tsx
@@ -97,7 +97,7 @@ export default function Dropdown(props: Props) {
                     afterLeave={toggleSwitch}
                 >
                     <Disclosure.Panel>
-                        <List draggableElements={scheduleComponents} listWidth={240} gap={10} />
+                        <List draggableElements={scheduleComponents} gap={10} />
                     </Disclosure.Panel>
                 </Transition>
             </Disclosure>
diff --git a/src/views/components/common/List/List.tsx b/src/views/components/common/List/List.tsx
index ae3096a4..da13a761 100644
--- a/src/views/components/common/List/List.tsx
+++ b/src/views/components/common/List/List.tsx
@@ -12,7 +12,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 export interface ListProps {
     draggableElements: any[]; // TODO: Will later define draggableElements based on what types
     // of components are draggable.
-    listWidth: number;
     gap: number; // Impacts the spacing between items in the list
 }
 
@@ -58,7 +57,7 @@ function Item({ provided, item, style, isDragging /* , gap */ }) {
  * @example
  * <List draggableElements={elements} />
  */
-export default function List({ draggableElements, listWidth, gap = 12 }: ListProps): JSX.Element {
+export default function List({ draggableElements, gap = 12 }: ListProps): JSX.Element {
     const [items, setItems] = useState(() => initial(0, draggableElements));
 
     useEffect(() => {
@@ -87,7 +86,7 @@ export default function List({ draggableElements, listWidth, gap = 12 }: ListPro
     );
 
     return (
-        <div style={{ overflow: 'hidden', width: listWidth }}>
+        <div style={{ overflow: 'hidden' }}>
             <DragDropContext onDragEnd={onDragEnd}>
                 <Droppable
                     droppableId='droppable'
@@ -114,12 +113,8 @@ export default function List({ draggableElements, listWidth, gap = 12 }: ListPro
                         );
                     }}
                 >
-                    {provided => (
-                        <div
-                            {...provided.droppableProps}
-                            ref={provided.innerRef}
-                            style={{ width: `${listWidth}px`, marginBottom: `-${gap}px` }}
-                        >
+                    {(provided, snapshot) => (
+                        <div {...provided.droppableProps} ref={provided.innerRef} style={{ marginBottom: `-${gap}px` }}>
                             {items.map((item, index) => (
                                 <Draggable key={item.id} draggableId={item.id} index={index}>
                                     {draggableProvided => (