fix(Timeline): Handle startDate side effect

It is possible that `startDate` is updated from outside of the `Timeline`.
Royal-Navy · Oct 18, 2021 · 08d7c92 · 08d7c92
1 parent 9d1aba2
commit 08d7c92
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 3 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
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { ColorNeutral100, ColorNeutral200 } from '@defencedigital/design-tokens'
 import { css, CSSProp } from 'styled-components'
@@ -7,6 +7,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import timezoneMock from 'timezone-mock'
 import userEvent from '@testing-library/user-event'
 
+import { Button } from '../../Button'
 import {
   NO_DATA_MESSAGE,
   TIMELINE_BLOCK_SIZE,
@@ -2285,4 +2286,54 @@ describe('Timeline', () => {
       expect(wrapper.getByText('Event 2')).toBeInTheDocument()
     })
   })
+
+  describe('when `startDate` is updated externally', () => {
+    beforeEach(() => {
+      const TimelineWithUpdate = () => {
+        const [startDate, updateStartDate] = useState<Date>(
+          new Date(2020, 3, 1)
+        )
+
+        return (
+          <>
+            <Button onClick={() => updateStartDate(new Date(2020, 6, 1))}>
+              Update
+            </Button>
+            <Timeline startDate={startDate} today={new Date(2020, 3, 15)}>
+              <TimelineTodayMarker />
+              <TimelineMonths />
+              <TimelineWeeks />
+              <TimelineDays />
+              <TimelineRows>
+                <TimelineRow name="Row 1">
+                  <TimelineEvents>
+                    <TimelineEvent
+                      startDate={new Date(2020, 3, 13)}
+                      endDate={new Date(2020, 3, 18)}
+                    >
+                      Event 1
+                    </TimelineEvent>
+                  </TimelineEvents>
+                </TimelineRow>
+              </TimelineRows>
+            </Timeline>
+          </>
+        )
+      }
+
+      wrapper = render(<TimelineWithUpdate />)
+
+      wrapper.getByText('Update').click()
+    })
+
+    it('should not show the event', async () => {
+      await waitFor(() => {
+        expect(wrapper.queryByTestId('timeline-month')).toHaveTextContent(
+          'July 2020'
+        )
+      })
+
+      expect(wrapper.queryAllByText('Event 1')).toHaveLength(0)
+    })
+  })
 })
diff --git a/packages/react-component-library/src/components/Timeline/context/index.tsx b/packages/react-component-library/src/components/Timeline/context/index.tsx
@@ -1,8 +1,13 @@
-import React, { createContext, useReducer } from 'react'
+import React, { createContext, useEffect, useReducer } from 'react'
 
 import { initialState } from './state'
 import { reducer } from './reducer'
-import { TimelineContextDefault, TimelineProviderProps } from './types'
+import {
+  TIMELINE_ACTIONS,
+  TimelineContextDefault,
+  TimelineProviderProps,
+} from './types'
+import { initialiseScaleOptions } from './timeline_scales'
 
 const timelineContextDefaults: TimelineContextDefault = {
   hasSide: false,
@@ -24,6 +29,23 @@ export const TimelineProvider: React.FC<TimelineProviderProps> = ({
     today,
   })
 
+  useEffect(() => {
+    if (!state.currentScaleOption) {
+      return
+    }
+
+    const scaleOptions = initialiseScaleOptions(
+      {
+        ...options,
+        endDate: state.getNewEndDate(),
+        hoursBlockSize: state.currentScaleOption.hoursBlockSize,
+      },
+      state.width
+    )
+
+    dispatch({ scaleOptions, type: TIMELINE_ACTIONS.CHANGE_START_DATE })
+  }, [options.startDate])
+
   return (
     <TimelineContext.Provider value={{ hasSide, state, dispatch }}>
       {children}

diff --git a/packages/react-component-library/src/components/Timeline/context/reducer.ts b/packages/react-component-library/src/components/Timeline/context/reducer.ts
@@ -116,6 +116,7 @@ export function reducer(
         currentScaleOption: scaleOptions[currentScaleIndex],
         width: action.width,
       }
+    case TIMELINE_ACTIONS.CHANGE_START_DATE:
     case TIMELINE_ACTIONS.GET_PREV:
     case TIMELINE_ACTIONS.GET_NEXT:
       return {

diff --git a/packages/react-component-library/src/components/Timeline/context/types.ts b/packages/react-component-library/src/components/Timeline/context/types.ts
@@ -64,13 +64,18 @@ export type TimelineState = {
 }
 
 export const TIMELINE_ACTIONS = {
+  CHANGE_START_DATE: 'CHANGE_START_DATE',
   CHANGE_WIDTH: 'CHANGE_WIDTH',
   GET_NEXT: 'GET_NEXT',
   GET_PREV: 'GET_PREV',
   SCALE: 'SCALE',
 } as const
 
 export type TimelineAction =
+  | {
+      type: typeof TIMELINE_ACTIONS.CHANGE_START_DATE
+      scaleOptions: TimelineScaleOption[]
+    }
   | {
       type: typeof TIMELINE_ACTIONS.CHANGE_WIDTH
       width: number