removed useTourController because it was unnecessary and confusing

Author: benmarch

lib/TourPopover.jsx

@@ -1,6 +1,5 @@
-import React, { useContext, useState, useEffect, createElement } from 'react'
+import React, { useState, useEffect, createElement } from 'react'
 import { usePopper } from 'react-popper'
-import { TourContext } from './TourProvider'
 
 const modalVirtualElement = {
   getBoundingClientRect() {
@@ -15,8 +14,8 @@ const modalVirtualElement = {
   }
 }
 
-export default () => {
-  const tour = useContext(TourContext)
+export default props => {
+  const tour = props.tour
   const step = tour.getCurrentStep()
 
   const [ popperElement, setPopperElement ] = useState(null)

lib/TourProvider.jsx

@@ -1,19 +1,70 @@
-import React from 'react'
-import useTourController from './useTourController'
-import { TourStatus } from './constants'
+import React, { useReducer} from 'react'
+import generateActions from './actions'
+import reducer, { initialState, generateSelectors } from './reducer'
+import { getStepConfigType } from './utils'
+import { TourStatus, StepConfigType } from './constants'
+import useStepChange from './useStepChange'
 import TourPopover from './TourPopover'
 
 export const TourContext = React.createContext()
 
 export default props => {
-  const tourController = useTourController(props.config)
+  const tourConfig = props.config
+  
+  // initialize steps
+  const steps = {}
+  tourConfig.stepOrder.forEach((stepConfig, i) => {
+    switch (getStepConfigType(stepConfig)) {
+      case StepConfigType.INVALID: {
+        throw new Error(`Step configuration at position ${i} is not valid.`)
+      }
+      case StepConfigType.PREDEF: {
+        steps[stepConfig.name] = stepConfig
+        break
+      }
+    }
+  })
+
+  // The reducer manages the state of the tour.
+  // The selectors allow state to be retrieved.
+  // The actions allow state to be manipulated.
+  const [state, dispatch] = useReducer(reducer, {
+    ...initialState,
+    steps,
+    stepOrder: tourConfig.stepOrder,
+    tourConfig
+  })
+  const selectors = generateSelectors(state)
+  const allSelectors = {
+    ...selectors.public,
+    ...selectors.protected,
+  }
+  const actions = generateActions(allSelectors, dispatch)
+  const allActions = {
+    ...actions.public,
+    ...actions.protected,
+  }
+
+  // construct the Tour
+  const tourController = {
+    ...allSelectors,
+    ...allActions,
+    public: {
+      ...selectors.public,
+      ...actions.public
+    }
+  }
+
+  // listen for step transitions and properly handle them
+  useStepChange(tourController)
+
   const shouldShowPopover = tourController.getStatus() === TourStatus.ON && !!tourController.getCurrentStep() 
 
   return (    
     <TourContext.Provider value={tourController}>
       <div style={{position: 'relative'}}>
         {props.children}
-        {shouldShowPopover && <TourPopover />}
+        {shouldShowPopover && <TourPopover tour={tourController} />}
       </div>      
     </TourContext.Provider>
   )

lib/useTourController.js

@@ -10,6 +10,8 @@
   ],
   "scripts": {
     "test": "jest",
+    "test:watch": "jest -i --watchAll",
+    "test:coverage": "jest --coverage",
     "start": "parcel serve example/index.html",
     "build": "npm run clean && parcel build lib/index.js --target node",
     "clean": "rm -rf dist/"

package.json

@@ -2,18 +2,14 @@ import React from 'react'
 import { usePopper } from 'react-popper'
 import { render } from '@testing-library/react'
 import { TourStatus } from '../lib/constants'
-import useTourController from '../lib/useTourController'
-import TourProvider from '../lib/TourProvider'
 import TourPopover from '../lib/TourPopover'
 
 jest.mock('react-popper')
-jest.mock('../lib/useTourController')
 
 describe('TourPopover Component', () => {
   let step
   let tour
   let ref
-  let wrapper
 
   beforeEach(() => {
     ref = {
@@ -31,10 +27,6 @@ describe('TourPopover Component', () => {
       setPopoverRef: jest.fn()
     }
 
-    useTourController.mockReturnValue(tour)
-
-    wrapper = ({ children }) => (<TourProvider config={{}}>{children}</TourProvider>)
-
     usePopper.mockReturnValue({
       update: jest.fn(),
       styles: {
@@ -56,7 +48,7 @@ describe('TourPopover Component', () => {
     step.isModal = false
 
     // when
-    render(<TourPopover />, { wrapper })
+    render(<TourPopover tour={tour} />)
 
     // then
     expect(usePopper.mock.calls[0][0]).toBe(ref.current)
@@ -68,7 +60,7 @@ describe('TourPopover Component', () => {
     step.isModal = true
 
     // when
-    render(<TourPopover />, { wrapper })
+    render(<TourPopover tour={tour} />)
 
     // then
     expect(usePopper.mock.calls[0][0]).toHaveProperty('getBoundingClientRect')
@@ -80,15 +72,15 @@ describe('TourPopover Component', () => {
     step.offset = 100    
 
     // when
-    render(<TourPopover />, { wrapper })
+    render(<TourPopover tour={tour} />)
 
     // then
     expect(usePopper.mock.calls[0][2].modifiers[1].options.offset).toEqual([0, 100])
   })
 
   it('should register the popperElement with the tour', async () => {
     // when
-    render(<TourPopover />, { wrapper })
+    render(<TourPopover tour={tour} />)
 
     expect(tour.setPopoverRef).toHaveBeenCalledWith({
       current: expect.anything()
@@ -101,7 +93,7 @@ describe('TourPopover Component', () => {
     step.PopoverComponent = props => props.step.title
 
     // when
-    const { getByText } = render(<TourPopover />, { wrapper })
+    const { getByText } = render(<TourPopover tour={tour} />)
 
     // then
     expect(getByText('Title').textContent).toBe('Title')
@@ -112,7 +104,7 @@ describe('TourPopover Component', () => {
     step.popoverTemplate = <div>Template</div>
 
     // when
-    const { getByText } = render(<TourPopover />, { wrapper })
+    const { getByText } = render(<TourPopover tour={tour} />)
 
     // then
     expect(getByText('Template').textContent).toBe('Template')
@@ -123,7 +115,7 @@ describe('TourPopover Component', () => {
     step.isModal = true
 
     // when
-    const { getByTestId } = render(<TourPopover />, { wrapper })
+    const { getByTestId } = render(<TourPopover tour={tour} />)
 
     // then
     expect(getByTestId('popover').style.position).toBe('fixed')
@@ -134,7 +126,7 @@ describe('TourPopover Component', () => {
     step.isModal = false
 
     // when
-    const { getByTestId } = render(<TourPopover />, { wrapper })
+    const { getByTestId } = render(<TourPopover tour={tour} />)
 
     // then
     expect(getByTestId('popover').style.color).toBe('red')
@@ -145,7 +137,7 @@ describe('TourPopover Component', () => {
     step.isModal = false
 
     // when
-    const { getByTestId } = render(<TourPopover />, { wrapper })
+    const { getByTestId } = render(<TourPopover tour={tour} />)
 
     // then
     expect(getByTestId('popover').dataset.test).toBe('test')
@@ -156,7 +148,7 @@ describe('TourPopover Component', () => {
     step.popoverClassName = 'POP'
 
     // when
-    const { getByTestId } = render(<TourPopover />, { wrapper })
+    const { getByTestId } = render(<TourPopover tour={tour} />)
 
     // then
     expect(getByTestId('popover').classList).toContain('POP')