refactor: remove selectedDates from return value

Author: jason89521

packages/react-use-calendar-component/src/app/components/CalendarCell.tsx

@@ -4,7 +4,7 @@ export default function CalendarCell({
   monthStatus,
   isSelected,
   isToday,
-  monthDay: dayOfMonth,
+  monthDay,
   selectThisDate,
 }: DateCellInfo) {
   const title = isToday ? 'today' : undefined;
@@ -20,7 +20,7 @@ export default function CalendarCell({
       onClick={() => selectThisDate()}
       type='button'
       title={title}>
-      {dayOfMonth}
+      {monthDay}
     </button>
   );
 }

packages/react-use-calendar-component/src/app/components/Examples/Multiple.tsx

@@ -11,12 +11,11 @@ export function Multiple() {
     value,
     onChange: setValue,
   });
-  const { selectedDates } = calendarControl;
 
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <StateInfo value={value} selectedDates={selectedDates} />
+      <StateInfo value={value} />
     </div>
   );
 }

packages/react-use-calendar-component/src/app/components/Examples/Single.tsx

@@ -7,12 +7,11 @@ import StateInfo from '../StateInfo';
 export function Single() {
   const [value, setValue] = useState(new Date());
   const calendarControl = useCalendarComponent({ value, onChange: setValue });
-  const { selectedDates } = calendarControl;
 
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <StateInfo value={[value]} selectedDates={selectedDates} />
+      <StateInfo value={[value]} />
     </div>
   );
 }

packages/react-use-calendar-component/src/app/components/SelectedDates.tsx

@@ -1,9 +1,8 @@
 interface Props {
   value: Date[];
-  selectedDates: Date[];
 }
 
-export default function StateInfo({ value, selectedDates }: Props) {
+export default function StateInfo({ value }: Props) {
   return (
     <div className='text-white flex justify-between mt-5'>
       <div className='flex flex-col' data-testid='value'>
@@ -12,12 +11,6 @@ export default function StateInfo({ value, selectedDates }: Props) {
           <span key={index}>{v.toDateString()}</span>
         ))}
       </div>
-      <div className='flex flex-col' data-testid='selected-dates'>
-        <div className='text-lg text-rose-300'>selected dates:</div>
-        {selectedDates.map((date, index) => {
-          return <span key={index}>{date.toDateString()}</span>;
-        })}
-      </div>
     </div>
   );
 }

packages/react-use-calendar-component/src/app/components/StateInfo.tsx

@@ -9,6 +9,7 @@ import type {
   Value,
 } from '../types';
 import { getDateInfoByIndex, isSameDate, noop } from '../utils';
+import { normalizeValue } from '../utils/normalizeValue';
 import useDisplayedDate from './useDisplayedDate';
 
 export default function useCalendarComponent<S extends SelectType = 'single'>({
@@ -26,17 +27,7 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
     changeDisplayedMonth,
   } = useDisplayedDate(initialDisplayedDate);
   const [internalValue, setInternalValue] = useState(userValue);
-  const selectedDates = (() => {
-    if (selectType === 'multiple') {
-      if (userValue) return userValue as Date[];
-      if (internalValue) return internalValue as Date[];
-    }
-
-    if (userValue) return [userValue] as Date[];
-    if (internalValue) return [internalValue] as Date[];
-
-    return [];
-  })();
+  const selectedDates = normalizeValue(selectType, userValue || internalValue);
 
   const handleValueChange = (value: Value<S>) => {
     onChange(value);
@@ -54,6 +45,10 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
       monthDay,
       ...info
     } = getDateInfoByIndex(year, month, cellIndex);
+
+    const isSelected = !!selectedDates.find(date =>
+      isSameDate(date, new Date(dateYear, dateMonth, monthDay))
+    );
     const selectThisDate = (options: SelectDateOptions = {}) => {
       const { changeDisplayedValues = true } = options;
       if (changeDisplayedValues) {
@@ -81,9 +76,7 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
       year: dateYear,
       month: dateMonth,
       monthDay,
-      isSelected: !!selectedDates.find(date =>
-        isSameDate(date, new Date(dateYear, dateMonth, monthDay))
-      ),
+      isSelected,
       selectThisDate,
       ...info,
     };
@@ -102,7 +95,6 @@ export default function useCalendarComponent<S extends SelectType = 'single'>({
   };
 
   return {
-    selectedDates,
     displayedYear,
     displayedMonth,
     changeDisplayedYear,

packages/react-use-calendar-component/src/lib/hooks/useCalendarComponent.ts

@@ -0,0 +1,13 @@
+import type { Value, SelectType } from '../types';
+
+export function normalizeValue<S extends SelectType>(
+  selectType?: S,
+  value?: Value<S>
+): Date[] {
+  if (!value) return [];
+  if (selectType === 'multiple') {
+    return value as Value<'multiple'>;
+  }
+
+  return [value as Value<'single'>];
+}

packages/react-use-calendar-component/src/lib/utils/normalizeValue.ts

@@ -6,7 +6,6 @@ import { getLocaleMonth } from './utils';
 
 const dateInstance = new Date(2022, 9, 1);
 const idValue = 'value';
-const idSelectedDates = 'selected-dates';
 
 describe('common functionality', () => {
   it('should display correct year/month', async () => {
@@ -58,23 +57,17 @@ describe('common functionality', () => {
     const user = userEvent.setup({ delay: null });
     render(<Single />);
     const valueBlock = screen.getByTestId(idValue);
-    const datesBlock = screen.getByTestId(idSelectedDates);
     let testString = dateInstance.toDateString();
     expect(valueBlock).toHaveTextContent(testString);
-    expect(datesBlock).toHaveTextContent(testString);
 
     const date10 = screen.getByRole('button', { name: '10' });
     await user.click(date10);
     testString = new Date(2022, 9, 10).toDateString();
     expect(valueBlock).toHaveTextContent(testString);
-    expect(datesBlock).toHaveTextContent(testString);
-    expect(datesBlock.childElementCount).toBe(2);
 
     const date20 = screen.getByRole('button', { name: '20' });
     await user.click(date20);
     testString = new Date(2022, 9, 20).toDateString();
     expect(valueBlock).toHaveTextContent(testString);
-    expect(datesBlock).toHaveTextContent(testString);
-    expect(datesBlock.childElementCount).toBe(2);
   });
 });