fix(Timeline): Fix issue with the timeline when updating the endDate

Royal-Navy · Mar 27, 2023 · cd867a7 · cd867a7
1 parent 80ffe8d
commit cd867a7
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 6 deletions.
diff --git a/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx b/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx
@@ -49,7 +49,7 @@ const TimelineDates: React.FC<TimelineDaysProps> = () => {
 
 describe('Timeline', () => {
   let wrapper: RenderResult
-  let user: ReturnType<typeof userEvent['setup']>
+  let user: ReturnType<(typeof userEvent)['setup']>
 
   beforeEach(() => {
     jest.useFakeTimers()
@@ -2374,6 +2374,121 @@ describe('Timeline', () => {
     })
   })
 
+  describe('when `startDate` and `endDate` is updated externally', () => {
+    beforeEach(() => {
+      const TimelineWithUpdate = () => {
+        const [startDate, setStartDate] = useState<Date>(new Date(2023, 0, 1))
+        const [endDate, setEndDate] = useState<Date>(new Date(2023, 5, 1))
+
+        return (
+          <>
+            <Button
+              onClick={() => {
+                setStartDate(new Date(2023, 6, 1))
+                setEndDate(new Date(2023, 11, 1))
+              }}
+            >
+              Next
+            </Button>
+            <Timeline startDate={startDate} endDate={endDate}>
+              <TimelineMonths />
+              <TimelineWeeks />
+              <TimelineDays />
+              <TimelineRows>
+                <TimelineRow name="Row 1">{}</TimelineRow>
+              </TimelineRows>
+            </Timeline>
+          </>
+        )
+      }
+
+      wrapper = render(<TimelineWithUpdate />)
+    })
+
+    it('renders the months correctly', async () => {
+      const { getAllByTestId, getByText } = wrapper
+
+      const originalMonths = getAllByTestId('timeline-month')
+      expect(originalMonths[0]).toHaveTextContent('Jan2023')
+      expect(originalMonths[1]).toHaveTextContent('Feb2023')
+      expect(originalMonths[2]).toHaveTextContent('Mar2023')
+      expect(originalMonths[3]).toHaveTextContent('Apr2023')
+      expect(originalMonths[4]).toHaveTextContent('May2023')
+      expect(originalMonths[5]).toHaveTextContent('Jun2023')
+      expect(originalMonths).toHaveLength(6)
+      await user.click(getByText('Next'))
+
+      const newMonths = getAllByTestId('timeline-month')
+      expect(newMonths[0]).toHaveTextContent('Jul2023')
+      expect(newMonths[1]).toHaveTextContent('Aug2023')
+      expect(newMonths[2]).toHaveTextContent('Sep2023')
+      expect(newMonths[3]).toHaveTextContent('Oct2023')
+      expect(newMonths[4]).toHaveTextContent('Nov2023')
+      expect(newMonths[5]).toHaveTextContent('Dec2023')
+      expect(newMonths).toHaveLength(6)
+    })
+  })
+
+  describe('when and `endDate` is updated externally', () => {
+    beforeEach(() => {
+      const TimelineWithUpdate = () => {
+        const [startDate] = useState<Date>(new Date(2023, 0, 1))
+        const [endDate, setEndDate] = useState<Date>(new Date(2023, 5, 1))
+
+        return (
+          <>
+            <Button
+              onClick={() => {
+                setEndDate(new Date(2023, 11, 1))
+              }}
+            >
+              Update
+            </Button>
+            <Timeline startDate={startDate} endDate={endDate}>
+              <TimelineMonths />
+              <TimelineWeeks />
+              <TimelineDays />
+              <TimelineRows>
+                <TimelineRow name="Row 1">{}</TimelineRow>
+              </TimelineRows>
+            </Timeline>
+          </>
+        )
+      }
+
+      wrapper = render(<TimelineWithUpdate />)
+    })
+
+    it('renders the months correctly', async () => {
+      const { getAllByTestId, getByText } = wrapper
+
+      const originalMonths = getAllByTestId('timeline-month')
+      expect(originalMonths[0]).toHaveTextContent('Jan2023')
+      expect(originalMonths[1]).toHaveTextContent('Feb2023')
+      expect(originalMonths[2]).toHaveTextContent('Mar2023')
+      expect(originalMonths[3]).toHaveTextContent('Apr2023')
+      expect(originalMonths[4]).toHaveTextContent('May2023')
+      expect(originalMonths[5]).toHaveTextContent('Jun2023')
+      expect(originalMonths).toHaveLength(6)
+      await user.click(getByText('Update'))
+
+      const newMonths = getAllByTestId('timeline-month')
+      expect(newMonths[0]).toHaveTextContent('Jan2023')
+      expect(newMonths[1]).toHaveTextContent('Feb2023')
+      expect(newMonths[2]).toHaveTextContent('Mar2023')
+      expect(newMonths[3]).toHaveTextContent('Apr2023')
+      expect(newMonths[4]).toHaveTextContent('May2023')
+      expect(newMonths[5]).toHaveTextContent('Jun2023')
+      expect(newMonths[6]).toHaveTextContent('Jul2023')
+      expect(newMonths[7]).toHaveTextContent('Aug2023')
+      expect(newMonths[8]).toHaveTextContent('Sep2023')
+      expect(newMonths[9]).toHaveTextContent('Oct2023')
+      expect(newMonths[10]).toHaveTextContent('Nov2023')
+      expect(newMonths[11]).toHaveTextContent('Dec2023')
+      expect(newMonths).toHaveLength(12)
+    })
+  })
+
   describe('when parent rerenders', () => {
     let eventSpy: jest.Mock<JSX.Element>
     beforeEach(() => {

diff --git a/packages/react-component-library/src/components/Timeline/context/index.tsx b/packages/react-component-library/src/components/Timeline/context/index.tsx
@@ -33,27 +33,35 @@ export const TimelineProvider: React.FC<TimelineProviderProps> = ({
   })
 
   const prevStartDate = usePrevious(options.startDate)
+  const prevEndDateDate = usePrevious(options.endDate)
+
+  const isEqualOrUndefined = (
+    previousDateTime: Date | undefined | null,
+    currentDateTime: Date | undefined | null
+  ) => previousDateTime === undefined || previousDateTime === currentDateTime
 
   useEffect(() => {
     if (!state.currentScaleOption) {
       return
     }
 
-    if (prevStartDate === undefined || prevStartDate === options.startDate) {
+    if (
+      isEqualOrUndefined(prevStartDate, options.startDate) &&
+      isEqualOrUndefined(prevEndDateDate, options.endDate)
+    ) {
       return
     }
 
     const scaleOptions = buildScaleOptions(
       {
         ...options,
-        endDate: state.getNewEndDate(),
+        ...(!options.endDate ? { endDate: state.getNewEndDate() } : {}),
         hoursBlockSize: state.currentScaleOption.hoursBlockSize,
       },
       state.width
     )
-
-    dispatch({ scaleOptions, type: TIMELINE_ACTIONS.CHANGE_START_DATE })
-  }, [options, prevStartDate, state])
+    dispatch({ scaleOptions, type: TIMELINE_ACTIONS.CHANGE_DATE })
+  }, [options, prevEndDateDate, prevStartDate, state])
 
   const value = useMemo(
     () => ({ hasSide, state, dispatch }),

diff --git a/packages/react-component-library/src/components/Timeline/context/reducer.ts b/packages/react-component-library/src/components/Timeline/context/reducer.ts
@@ -117,6 +117,7 @@ export function reducer(
         width: action.width,
       }
     }
+    case TIMELINE_ACTIONS.CHANGE_DATE:
     case TIMELINE_ACTIONS.CHANGE_START_DATE:
     case TIMELINE_ACTIONS.GET_PREV:
     case TIMELINE_ACTIONS.GET_NEXT:

diff --git a/packages/react-component-library/src/components/Timeline/context/types.ts b/packages/react-component-library/src/components/Timeline/context/types.ts
@@ -59,6 +59,7 @@ export type TimelineState = {
 
 export const TIMELINE_ACTIONS = {
   CHANGE_START_DATE: 'CHANGE_START_DATE',
+  CHANGE_DATE: 'CHANGE_DATE',
   CHANGE_WIDTH: 'CHANGE_WIDTH',
   GET_NEXT: 'GET_NEXT',
   GET_PREV: 'GET_PREV',
@@ -67,6 +68,10 @@ export const TIMELINE_ACTIONS = {
 } as const
 
 export type TimelineAction =
+  | {
+      type: typeof TIMELINE_ACTIONS.CHANGE_DATE
+      scaleOptions: TimelineScaleOption[]
+    }
   | {
       type: typeof TIMELINE_ACTIONS.CHANGE_START_DATE
       scaleOptions: TimelineScaleOption[]