Code cleanup

linode · Dec 9, 2024 · f0dd5c0 · f0dd5c0
1 parent e523043
commit f0dd5c0
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 55 deletions.
diff --git a/packages/manager/src/components/DatePicker/DatePicker.stories.tsx b/packages/manager/src/components/DatePicker/DatePicker.stories.tsx
@@ -1,19 +1,17 @@
 import { action } from '@storybook/addon-actions';
-import { DateTime } from 'luxon';
 import * as React from 'react';
 
 import { DatePicker } from './DatePicker';
 
 import type { Meta, StoryObj } from '@storybook/react';
+import type { DateTime } from 'luxon';
 
 type Story = StoryObj<typeof DatePicker>;
 
 export const ControlledExample: Story = {
   render: () => {
     const ControlledDatePicker = () => {
-      const [selectedDate, setSelectedDate] = React.useState<DateTime | null>(
-        DateTime.now()
-      );
+      const [selectedDate, setSelectedDate] = React.useState<DateTime | null>();
 
       const handleChange = (newDate: DateTime | null) => {
         setSelectedDate(newDate);
@@ -26,6 +24,7 @@ export const ControlledExample: Story = {
           helperText="This is a controlled DatePicker"
           label="Controlled Date Picker"
           onChange={handleChange}
+          placeholder="yyyy-MM-dd"
           value={selectedDate}
         />
       );

diff --git a/packages/manager/src/components/DatePicker/DateTimePicker.stories.tsx b/packages/manager/src/components/DatePicker/DateTimePicker.stories.tsx
@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
-import { DateTime } from 'luxon';
 import * as React from 'react';
 
 import { DateTimePicker } from './DateTimePicker';
 
 import type { Meta, StoryObj } from '@storybook/react';
+import type { DateTime } from 'luxon';
 
 type Story = StoryObj<typeof DateTimePicker>;
 
@@ -14,7 +14,7 @@ export const ControlledExample: Story = {
       const [
         selectedDateTime,
         setSelectedDateTime,
-      ] = React.useState<DateTime | null>(DateTime.now());
+      ] = React.useState<DateTime | null>(null); // Start with null
 
       const handleChange = (newDateTime: DateTime | null) => {
         setSelectedDateTime(newDateTime);
@@ -32,6 +32,7 @@ export const ControlledExample: Story = {
           onCancel={action('Cancel clicked')}
           onChange={handleChange}
           placeholder="yyyy-MM-dd HH:mm"
+          showTimeZone={false}
           timeSelectProps={{ label: 'Select Time' }}
           value={selectedDateTime}
         />

diff --git a/packages/manager/src/components/DatePicker/DateTimePicker.tsx b/packages/manager/src/components/DatePicker/DateTimePicker.tsx
@@ -82,39 +82,6 @@ export const DateTimePicker = ({
     noMarginTop: true,
   };
 
-  useEffect(() => {
-    if (value) {
-      setSelectedDateTime(value);
-    }
-  }, [value]);
-
-  useEffect(() => {
-    if (timeZoneSelectProps.value) {
-      setSelectedTimeZone(timeZoneSelectProps.value);
-    }
-  }, [timeZoneSelectProps.value]);
-
-  const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-    if (onCancel) {
-      onCancel();
-    }
-  };
-
-  const handleApply = () => {
-    setAnchorEl(null);
-    if (onChange) {
-      onChange(selectedDateTime);
-    }
-    if (onApply) {
-      onApply();
-    }
-  };
-
   const handleDateChange = (newDate: DateTime | null) => {
     setSelectedDateTime((prev) =>
       newDate
@@ -130,21 +97,16 @@ export const DateTimePicker = ({
     if (newTime) {
       setSelectedDateTime((prev) => {
         if (prev) {
-          // Ensure hour and minute are valid numbers
           const newHour = newTime.hour;
           const newMinute = newTime.minute;
 
           if (typeof newHour === 'number' && typeof newMinute === 'number') {
             return prev.set({ hour: newHour, minute: newMinute });
           }
         }
-        // Return the current `prev` value if newTime is invalid
         return prev;
       });
     }
-    if (timeSelectProps.onChange && newTime) {
-      timeSelectProps.onChange(newTime.toISOTime());
-    }
   };
 
   const handleTimeZoneChange = (newTimeZone: string) => {
@@ -154,6 +116,29 @@ export const DateTimePicker = ({
     }
   };
 
+  const handleApply = () => {
+    setAnchorEl(null);
+    if (onChange) {
+      onChange(selectedDateTime);
+    }
+    if (onApply) {
+      onApply();
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    if (onCancel) {
+      onCancel();
+    }
+  };
+
+  useEffect(() => {
+    if (timeZoneSelectProps.value) {
+      setSelectedTimeZone(timeZoneSelectProps.value);
+    }
+  }, [timeZoneSelectProps.value]);
+
   return (
     <LocalizationProvider dateAdapter={AdapterLuxon}>
       <Box>
@@ -168,7 +153,7 @@ export const DateTimePicker = ({
           InputProps={{ readOnly: true }}
           errorText={errorText}
           label={label}
-          onClick={handleOpen}
+          onClick={(event) => setAnchorEl(event.currentTarget)}
           placeholder={placeholder}
         />
       </Box>
@@ -181,6 +166,9 @@ export const DateTimePicker = ({
       >
         <Box padding={2}>
           <DateCalendar
+            onChange={handleDateChange}
+            value={selectedDateTime || null}
+            {...dateCalendarProps}
             sx={(theme: Theme) => ({
               '& .MuiDayCalendar-weekContainer, & .MuiDayCalendar-header': {
                 justifyContent: 'space-between',
@@ -203,9 +191,6 @@ export const DateTimePicker = ({
               borderRadius: `${theme.spacing(2)}`,
               borderWidth: '0px',
             })}
-            onChange={handleDateChange}
-            value={selectedDateTime}
-            {...dateCalendarProps}
           />
           <Grid
             container
@@ -216,16 +201,12 @@ export const DateTimePicker = ({
               <Grid item xs={4}>
                 <TimePicker
                   slotProps={{
-                    openPickerButton: {
-                      sx: {
-                        padding: 0,
-                      },
-                    },
+                    openPickerButton: { sx: { padding: 0 } },
                     textField: TimePickerFieldProps,
                   }}
                   onChange={handleTimeChange}
                   slots={{ textField: TextField }}
-                  value={selectedDateTime}
+                  value={selectedDateTime || null}
                 />
               </Grid>
             )}

diff --git a/packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx b/packages/manager/src/components/DatePicker/DateTimeRangePicker.tsx
@@ -17,8 +17,10 @@ interface DateTimeRangePickerProps {
     end: DateTime | null,
     startTimeZone?: null | string
   ) => void;
-  /** Whether to show the timezone field for the end date picker */
+  /** Whether to show the end timezone field for the end date picker */
   showEndTimeZone?: boolean;
+  /** Whether to show the start timezone field for the end date picker */
+  showStartTimeZone?: boolean;
   /** Initial or controlled value for the start date-time */
   startDateTimeValue?: DateTime | null;
   /** Custom labels for the start and end date/time fields */
@@ -33,6 +35,7 @@ export const DateTimeRangePicker = ({
   format = 'yyyy-MM-dd HH:mm',
   onChange,
   showEndTimeZone = false,
+  showStartTimeZone = false,
   startDateTimeValue = null,
   startLabel = 'Start Date and Time',
   startTimeZoneValue = null,
@@ -94,6 +97,7 @@ export const DateTimeRangePicker = ({
         format={format}
         label={startLabel}
         onChange={handleStartDateTimeChange}
+        showTimeZone={showStartTimeZone}
         timeSelectProps={{ label: 'Start Time' }}
         value={startDateTime}
       />