refactor(Timeline): Simplify frame navigation

Code can be simplified as the same actions can be
done with less. Another benefit is that
`getNewEndDate` becomes reusable outside of the
hook.

packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx

@@ -1422,6 +1422,31 @@ describe('Timeline', () => {
       })
     })
 
+    describe('when navigating left', () => {
+      beforeEach(() => {
+        userEvent.click(wrapper.getByTestId('timeline-side-button-left'))
+      })
+
+      it('renders the correct number of days', () => {
+        const days = wrapper.queryAllByTestId('timeline-day-title')
+        expect(days).toHaveLength(41)
+        expect(days[0]).toHaveTextContent('27')
+        expect(days[days.length - 1]).toHaveTextContent('05')
+      })
+
+      it('should update the `startDate`', () => {
+        expect(wrapper.getByTestId('timeline-start-date')).toHaveTextContent(
+          '2019-12-27T00:00:00.000Z'
+        )
+      })
+
+      it('should update the `endDate`', () => {
+        expect(wrapper.getByTestId('timeline-end-date')).toHaveTextContent(
+          '2020-02-05T00:00:00.000Z'
+        )
+      })
+    })
+
     describe('when navigating right', () => {
       beforeEach(() => {
         userEvent.click(wrapper.getByTestId('timeline-side-button-right'))

packages/react-component-library/src/components/Timeline/context/state.ts

@@ -4,6 +4,16 @@ const initialState: TimelineState = {
   currentScaleIndex: null,
   currentScaleOption: null,
   days: [],
+  getNewEndDate(intervalMultiplier = 1) {
+    if (this.options.endDate && this.currentScaleOption.isDefault) {
+      return this.currentScaleOption.calculateDate(
+        this.currentScaleOption.to,
+        this.currentScaleOption.intervalSize * intervalMultiplier
+      )
+    }
+
+    return null
+  },
   hours: [],
   months: [],
   options: null,

packages/react-component-library/src/components/Timeline/context/types.ts

@@ -53,6 +53,7 @@ export type TimelineState = {
   currentScaleIndex: number
   currentScaleOption: TimelineScaleOption
   days: TimelineDay[]
+  getNewEndDate: (intervalMultiplier?: number) => Date
   hours: TimelineHour[]
   months: TimelineMonth[]
   options: TimelineOptions

packages/react-component-library/src/components/Timeline/hooks/useTimelineFrame.ts

@@ -2,61 +2,43 @@ import { useContext } from 'react'
 
 import { initialiseScaleOptions } from '../context/timeline_scales'
 import { TimelineContext } from '../context'
-import { TIMELINE_ACTIONS, TimelineScaleOption } from '../context/types'
+import { TIMELINE_ACTIONS } from '../context/types'
 
 export function useTimelineFrame(): {
   moveNext: () => void
   movePrevious: () => void
 } {
-  const {
-    dispatch,
-    state: { currentScaleOption, options, width },
-  } = useContext(TimelineContext)
+  const { dispatch, state } = useContext(TimelineContext)
+  const { currentScaleOption, options, width } = state
 
   function move(
-    type: typeof TIMELINE_ACTIONS.GET_NEXT | typeof TIMELINE_ACTIONS.GET_PREV
+    type: typeof TIMELINE_ACTIONS.GET_NEXT | typeof TIMELINE_ACTIONS.GET_PREV,
+    intervalMultiplier = 1
   ) {
-    const intervalMultiplier = type === TIMELINE_ACTIONS.GET_NEXT ? 1 : -1
-
-    const getIntervalSize = ({ intervalSize }: TimelineScaleOption) =>
-      intervalSize * intervalMultiplier
     const newStartDate = currentScaleOption.calculateDate(
       currentScaleOption.from,
-      getIntervalSize(currentScaleOption)
+      currentScaleOption.intervalSize * intervalMultiplier
     )
-    const getNewEndDate = (): Date => {
-      if (options.endDate && currentScaleOption.isDefault) {
-        return currentScaleOption.calculateDate(
-          currentScaleOption.to,
-          getIntervalSize(currentScaleOption)
-        )
-      }
-
-      return null
-    }
 
     const newScaleOptions = initialiseScaleOptions(
       {
         ...options,
         startDate: newStartDate,
-        endDate: getNewEndDate(),
+        endDate: state.getNewEndDate(intervalMultiplier),
         hoursBlockSize: currentScaleOption.hoursBlockSize,
       },
       width
     )
 
-    dispatch({
-      type,
-      scaleOptions: newScaleOptions,
-    })
+    dispatch({ type, scaleOptions: newScaleOptions })
   }
 
   function moveNext() {
     move(TIMELINE_ACTIONS.GET_NEXT)
   }
 
   function movePrevious() {
-    move(TIMELINE_ACTIONS.GET_PREV)
+    move(TIMELINE_ACTIONS.GET_PREV, -1)
   }
 
   return {