refactoring

src/PickupConfigEditor.js

@@ -3,21 +3,33 @@ import { startOfDay } from 'date-fns';
 import PickupConfigTable from './components/PickupConfigTable';
 import RangePickerModal from './components/RangePickerModal';
 import usePickupConfig from './hooks/usePickupConfig';
-import { formatDateValue } from './utils/dateUtils';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
 
 const PickupConfigEditor = () => {
   const {
     config,
-    setConfig,
     loading,
     status,
     error,
     fetchConfig,
-    saveConfig
+    saveConfig,
+    toggleActive,
+    toggleProfileCheck,
+    toggleOnlyNotify,
+    changeWeekday,
+    updateDateRange
   } = usePickupConfig();
   const [activeRangePicker, setActiveRangePicker] = useState(null);
   const minSelectableDate = startOfDay(new Date());
 
+  const handleWeekdayChange = (index, value, entryId) => {
+    changeWeekday(index, value);
+    if (value && entryId) {
+      setActiveRangePicker((prev) => (prev === entryId ? null : prev));
+    }
+  };
+
   useEffect(() => {
     if (!activeRangePicker) {
       return;
@@ -28,65 +40,6 @@ const PickupConfigEditor = () => {
     }
   }, [activeRangePicker, config]);
 
-  const handleToggleActive = (index) => {
-    const newConfig = [...config];
-    newConfig[index].active = !newConfig[index].active;
-    setConfig(newConfig);
-  };
-  
-  const handleToggleProfileCheck = (index) => {
-    const newConfig = [...config];
-    newConfig[index].checkProfileId = !newConfig[index].checkProfileId;
-    setConfig(newConfig);
-  };
-  
-  const handleToggleOnlyNotify = (index) => {
-    const newConfig = [...config];
-    newConfig[index].onlyNotify = !newConfig[index].onlyNotify;
-    setConfig(newConfig);
-  };
-  
-  const handleWeekdayChange = (index, value) => {
-    const newConfig = [...config];
-    const entryId = newConfig[index]?.id;
-    newConfig[index].desiredWeekday = value;
-    if (newConfig[index].desiredDateRange) {
-      delete newConfig[index].desiredDateRange;
-    }
-    setConfig(newConfig);
-    if (value && entryId) {
-      setActiveRangePicker((prev) => (prev === entryId ? null : prev));
-    }
-  };
-
-  const handleDateRangeSelection = (entryId, startDate, endDate) => {
-    const startValue = formatDateValue(startDate);
-    const endValue = formatDateValue(endDate);
-    setConfig((prev) =>
-      prev.map((item) => {
-        if (item.id !== entryId) {
-          return item;
-        }
-        const updated = { ...item };
-        if (startValue || endValue) {
-          updated.desiredDateRange = {
-            start: startValue || endValue,
-            end: endValue || startValue
-          };
-          if (updated.desiredWeekday) {
-            delete updated.desiredWeekday;
-          }
-        } else if (updated.desiredDateRange) {
-          delete updated.desiredDateRange;
-        }
-        if (updated.desiredDate) {
-          delete updated.desiredDate;
-        }
-        return updated;
-      })
-    );
-  };
-
   const activeRangeEntry = activeRangePicker
     ? config.find((item) => item.id === activeRangePicker) || null
     : null;
@@ -116,9 +69,9 @@ const PickupConfigEditor = () => {
       <PickupConfigTable
         config={config}
         weekdays={weekdays}
-        onToggleActive={handleToggleActive}
-        onToggleProfileCheck={handleToggleProfileCheck}
-        onToggleOnlyNotify={handleToggleOnlyNotify}
+        onToggleActive={toggleActive}
+        onToggleProfileCheck={toggleProfileCheck}
+        onToggleOnlyNotify={toggleOnlyNotify}
         onWeekdayChange={handleWeekdayChange}
         onRangePickerRequest={setActiveRangePicker}
       />
@@ -150,10 +103,10 @@ const PickupConfigEditor = () => {
           entry={activeRangeEntry}
           minDate={minSelectableDate}
           onSelectRange={(startDate, endDate) =>
-            handleDateRangeSelection(activeRangeEntry.id, startDate, endDate)
+            updateDateRange(activeRangeEntry.id, startDate, endDate)
           }
           onResetRange={() => {
-            handleDateRangeSelection(activeRangeEntry.id, null, null);
+            updateDateRange(activeRangeEntry.id, null, null);
             setActiveRangePicker(null);
           }}
           onClose={() => setActiveRangePicker(null)}