fix: reloadButton refreshes all data in the store (#6)

natterstefan · web-flow · commit cb9f7ec18f6a · 2018-05-25T19:47:17.000+02:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -45,6 +45,7 @@ module.exports = {
         trailingComma: 'all',
       },
     ],
+    'react/jsx-curly-brace-presence': 'never', // use '' when passing a strint as a property
     'react/jsx-filename-extension': 0, // we do not use *.jsx files
     'react/sort-comp': 2,
   },
diff --git a/CHANGES.md b/CHANGES.md
@@ -23,6 +23,10 @@ adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 * `<TrelloCardIframe />` deprecated, use `<TrelloCardUi />` instead now
 
+### Fixed
+
+* reloadButton refreshes all data in the store
+
 ## 2018/04/22 0.0.1
 
 ### Added
diff --git a/src/actions/__test__/index.test.js b/src/actions/__test__/index.test.js
@@ -15,7 +15,7 @@ import {
 } from '../'
 
 describe('actions/index', () => {
-  it('should export the expected actions', () => {
+  test('should export the expected actions', () => {
     expect({ app, boards, lists, cards, members, user }).toMatchObject({
       app: appActions,
       boards: boardActions,
diff --git a/src/actions/boards/__test__/index.test.js b/src/actions/boards/__test__/index.test.js
@@ -1,6 +1,6 @@
 import configureMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
-import { actions, addBoardEstimations, receiveBoards, requestBoards } from '../'
+import { actions, addBoardEstimations, receiveBoards, requestBoards, resetBoards } from '../'
 
 // some static mocks
 import {
@@ -13,6 +13,7 @@ jest.mock('../../../data/trello')
 
 describe('actions/board', () => {
   const expectedActions = {
+    RESET_BOARDS: 'RESET_BOARDS',
     REQUEST: 'REQUEST_BOARDS',
     RECEIVE: 'RECEIVE_BOARDS',
     ADD_BOARD_ESTIMATION: 'ADD_BOARD_ESTIMATION',
@@ -57,7 +58,7 @@ describe('actions/board:async actions', () => {
     jest.unmock('../../../data/trello')
   })
 
-  it('creates RECEIVE when fetching boards has been done', async () => {
+  test('dispatches RECEIVE when fetching boards has been done', async () => {
     // payload is set in setup-jest.js (config mock)
     const expectedActions = [
       { type: actions.REQUEST },
@@ -76,4 +77,11 @@ describe('actions/board:async actions', () => {
     await store.dispatch(requestBoards())
     expect(store.getActions()).toEqual(expectedActions)
   })
+
+  test('resetBoards should dispatch correct actions', async () => {
+    const store = mockStore({})
+    await store.dispatch(resetBoards())
+    const expectedActions = [{ type: actions.RESET_BOARDS }, { type: actions.REQUEST }]
+    expect(store.getActions()).toEqual(expectedActions)
+  })
 })
diff --git a/src/actions/boards/index.js b/src/actions/boards/index.js
@@ -3,6 +3,7 @@ import Config from '../../../config/config'
 import { getMeBoards } from '../../data/trello'
 
 const actions = {
+  RESET_BOARDS: 'RESET_BOARDS',
   REQUEST: 'REQUEST_BOARDS',
   RECEIVE: 'RECEIVE_BOARDS',
   ADD_BOARD_ESTIMATION: 'ADD_BOARD_ESTIMATION',
@@ -41,4 +42,11 @@ const requestBoards = () => async dispatch => {
   }
 }
 
-export { actions, addBoardEstimations, requestBoards, receiveBoards }
+const resetAllBoards = () => ({ type: actions.RESET_BOARDS })
+
+const resetBoards = () => dispatch => {
+  dispatch(resetAllBoards())
+  dispatch(requestBoards())
+}
+
+export { actions, addBoardEstimations, requestBoards, receiveBoards, resetBoards }
diff --git a/src/actions/cards/__test__/index.test.js b/src/actions/cards/__test__/index.test.js
@@ -34,7 +34,7 @@ describe('actions/cards:async actions', () => {
     jest.unmock('../../../data/trello')
   })
 
-  it('creates RECEIVE when fetching cards has been done', async () => {
+  test('creates RECEIVE when fetching cards has been done', async () => {
     const list = {
       id: 'list-123',
     }
diff --git a/src/actions/lists/__test__/index.test.js b/src/actions/lists/__test__/index.test.js
@@ -34,7 +34,7 @@ describe('actions/cards:async actions', () => {
     jest.unmock('../../../data/trello')
   })
 
-  it('creates RECEIVE when fetching cards has been done', async () => {
+  test('creates RECEIVE when fetching cards has been done', async () => {
     const exampleBoard = {
       id: 'board-1',
     }
diff --git a/src/actions/members/__test__/index.test.js b/src/actions/members/__test__/index.test.js
@@ -32,7 +32,7 @@ describe('actions/members:async actions', () => {
     jest.unmock('../../../data/trello')
   })
 
-  it('dispatches ADD_MEMBERS_ESTIMATION when adding and calculating the estimations has been done', async () => {
+  test('dispatches ADD_MEMBERS_ESTIMATION when adding and calculating the estimations has been done', async () => {
     const expectedActions = [
       {
         payload: {
@@ -53,7 +53,7 @@ describe('actions/members:async actions', () => {
     expect(store.getActions()).toEqual(expectedActions)
   })
 
-  it('dispatches RECEIVE_MEMBERS when fetching members has been done', async () => {
+  test('dispatches RECEIVE_MEMBERS when fetching members has been done', async () => {
     const expectedActions = [
       { type: actions.REQUEST_MEMBERS },
       {
diff --git a/src/components/main-app/__tests__/__snapshots__/component.test.js.snap b/src/components/main-app/__tests__/__snapshots__/component.test.js.snap
@@ -25,7 +25,7 @@ exports[`Component/MainApp should render without throwing an error 1`] = `
     </WithStyles(Button)>
     <WithStyles(Button)
       className="MainApp-button-2"
-      id="doRefreshButton"
+      id="doResetButton"
       onClick={[Function]}
       variant="raised"
     >
diff --git a/src/components/main-app/__tests__/component.test.js b/src/components/main-app/__tests__/component.test.js
@@ -26,13 +26,15 @@ describe('Component/MainApp', () => {
     isLoading: false,
     isMembersLoading: false,
     loadBoards: jest.fn(),
+    reloadBoards: jest.fn(),
     loadPreferredMembers: jest.fn(),
   }
 
   beforeEach(() => {
     props.authorize.mockReset()
     props.doTogglePreferred.mockReset()
     props.loadBoards.mockReset()
+    props.reloadBoards.mockReset()
     props.loadPreferredMembers.mockReset()
   })
 
@@ -90,10 +92,11 @@ describe('Component/MainApp', () => {
     expect(props.doTogglePreferred).toHaveBeenCalledWith(false)
   })
 
-  test('should invoke loadBoards when Toggle Refresh Boards Button was clicked', () => {
+  test('should invoke resetBoards when Toggle Refresh Boards Button was clicked', () => {
     const wrapper = shallow(<MainApp {...props} />).dive()
-    wrapper.find('#doRefreshButton').simulate('click')
+    wrapper.find('#doResetButton').simulate('click')
 
-    expect(props.loadBoards).toHaveBeenCalledTimes(1)
+    expect(props.reloadBoards).toHaveBeenCalledTimes(1)
+    expect(props.loadPreferredMembers).toHaveBeenCalledTimes(1)
   })
 })
diff --git a/src/components/main-app/component.js b/src/components/main-app/component.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { find, get, invoke, isEqual } from 'lodash'
+import { find, get, has, invoke, isEqual } from 'lodash'
 
 // Material UI
 import { withStyles } from 'material-ui/styles'
@@ -57,11 +57,16 @@ class MainApp extends React.Component {
     const togglePreferred = get(this.props, 'app.memberToggle.togglePreferred', false)
     const togglePreferredMember = get(this.props, 'app.memberToggle.togglePreferredMember', null)
     const defaultTitle = 'Estimations'
+    const defaultEstimationTitle = `Preferred Member's ${defaultTitle}`
 
     if (togglePreferred && !!togglePreferredMember) {
-      return `${find(members, { id: togglePreferredMember }).fullName}'s ${defaultTitle}`
+      const member = find(members, { id: togglePreferredMember }) || {}
+      if (has(member, 'fullName')) {
+        return `${member.fullName}'s ${defaultTitle}`
+      }
+      return defaultEstimationTitle
     } else if (togglePreferred) {
-      return `Preferred Member's ${defaultTitle}`
+      return defaultEstimationTitle
     }
     return defaultTitle
   }
@@ -100,10 +105,11 @@ class MainApp extends React.Component {
           </Button>
           <Button
             variant="raised"
-            id="doRefreshButton"
+            id="doResetButton"
             className={classes.button}
             onClick={() => {
-              invoke(this.props, 'loadBoards')
+              invoke(this.props, 'reloadBoards')
+              invoke(this.props, 'loadPreferredMembers')
             }}
           >
             Refresh Boards
diff --git a/src/components/main-app/index.js b/src/components/main-app/index.js
@@ -3,8 +3,9 @@ import { forOwn, get, includes } from 'lodash'
 
 import { authenticateUser } from '../../actions/user'
 import { togglePreferred } from '../../actions/app'
-import { requestBoards } from '../../actions/boards'
+import { resetBoards, requestBoards } from '../../actions/boards'
 import { loadPreferredMembers } from '../../actions/members'
+
 import MainApp from './component'
 
 const checkLoadingState = (state, type) => {
@@ -35,6 +36,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => ({
   authorize: () => dispatch(authenticateUser()),
   loadBoards: () => dispatch(requestBoards()),
+  reloadBoards: () => dispatch(resetBoards()),
   doTogglePreferred: toggle => dispatch(togglePreferred(toggle)),
   loadPreferredMembers: () => dispatch(loadPreferredMembers()),
 })
diff --git a/src/reducers/boards/index.js b/src/reducers/boards/index.js
@@ -10,6 +10,9 @@ export const initialState = {
 export function reducer(state = initialState, action) {
   const type = get(action, 'type')
   switch (type) {
+    case actions.RESET_BOARDS:
+      return assign({}, initialState)
+
     case actions.REQUEST:
       return merge({}, state, {
         isLoading: true,
diff --git a/src/reducers/cards/__tests__/index.test.js b/src/reducers/cards/__tests__/index.test.js
@@ -0,0 +1,45 @@
+import { actions } from '../../../actions/cards'
+import { actions as boardActions } from '../../../actions/boards'
+import { reducer as app } from '../'
+
+describe('reducers/cards', () => {
+  const initialState = {}
+
+  test('returns the correct initial state', () => {
+    const testState = app()
+    expect(testState).toMatchObject(initialState)
+  })
+
+  test('resets state when RESET_BOARDS is triggered', () => {
+    const action = { type: boardActions.RESET_BOARDS }
+    const result = app({ test: 'someRandomState' }, action)
+    expect(result).toEqual(initialState)
+  })
+
+  test('changes isLoading to true when REQUEST is triggered', () => {
+    const action = { type: actions.REQUEST, listId: 'list-1' }
+    const result = app(initialState, action)
+    expect(result).toMatchObject({
+      'list-1': {
+        isLoading: true,
+      },
+    })
+  })
+
+  test('changes isLoading, data and error when RECEIVE is triggered', () => {
+    const action = {
+      type: actions.RECEIVE,
+      listId: 'list-1',
+      payload: { randomData: 1 },
+      error: null,
+    }
+    const result = app(initialState, action)
+    expect(result).toMatchObject({
+      'list-1': {
+        isLoading: false,
+        data: { randomData: 1 },
+        error: null,
+      },
+    })
+  })
+})
diff --git a/src/reducers/cards/index.js b/src/reducers/cards/index.js
@@ -1,18 +1,23 @@
 import { assign, get } from 'lodash'
 import { actions } from '../../actions/cards'
+import { actions as boardActions } from '../../actions/boards'
 
 export const initialState = {}
 
 export function reducer(state = initialState, action) {
   const type = get(action, 'type')
 
   switch (type) {
+    case boardActions.RESET_BOARDS:
+      return assign({}, initialState)
+
     case actions.REQUEST:
       return assign({}, state, {
         [action.listId]: {
           isLoading: true,
         },
       })
+
     case actions.RECEIVE:
       const listId = get(action, 'listId')
       return assign({}, state, {
diff --git a/src/reducers/info/__tests__/index.test.js b/src/reducers/info/__tests__/index.test.js
@@ -0,0 +1,14 @@
+import * as pkg from '../../../../package.json'
+import { reducer as app } from '../'
+
+describe('reducers/info', () => {
+  const initialState = {
+    version: pkg.version,
+    name: pkg.name,
+  }
+
+  test('returns the state', () => {
+    const testState = app()
+    expect(testState).toMatchObject(initialState)
+  })
+})
diff --git a/src/reducers/lists/index.js b/src/reducers/lists/index.js
@@ -1,5 +1,6 @@
 import { assign, get } from 'lodash'
 import { actions } from '../../actions/lists'
+import { actions as boardActions } from '../../actions/boards'
 
 export const initialState = {}
 
@@ -8,12 +9,16 @@ export function reducer(state = initialState, action) {
   const boardId = get(action, 'boardId')
 
   switch (type) {
+    case boardActions.RESET_BOARDS:
+      return assign({}, initialState)
+
     case actions.REQUEST:
       return assign({}, state, {
         [boardId]: {
           isLoading: true,
         },
       })
+
     case actions.RECEIVE:
       return assign({}, state, {
         [boardId]: {
diff --git a/src/reducers/members/__tests__/index.test.js b/src/reducers/members/__tests__/index.test.js
@@ -1,8 +1,9 @@
 import { actions } from '../../../actions/members'
+import { actions as boardActions } from '../../../actions/boards'
 import { reducer as app } from '../'
 import { mockExampleMemberResponse } from '../../../__mocks__/mocks'
 
-describe('reducers/app', () => {
+describe('reducers/members', () => {
   const initialState = {
     error: null,
     isLoading: false,
@@ -14,6 +15,12 @@ describe('reducers/app', () => {
     expect(testState).toMatchObject(initialState)
   })
 
+  test('resets state when RESET_BOARDS is triggered', () => {
+    const action = { type: boardActions.RESET_BOARDS }
+    const result = app({ test: 'someRandomState' }, action)
+    expect(result).toEqual(initialState)
+  })
+
   test('changes isLoading to true when REQUEST_MEMBERS is triggered', () => {
     const action = { type: actions.REQUEST_MEMBERS }
     const result = app(initialState, action)
diff --git a/src/reducers/members/index.js b/src/reducers/members/index.js
@@ -1,5 +1,6 @@
-import { forEach, forOwn, get, map, merge, omit, pick, uniq } from 'lodash'
+import { assign, forEach, forOwn, get, map, merge, omit, pick, uniq } from 'lodash'
 import { actions } from '../../actions/members'
+import { actions as boardActions } from '../../actions/boards'
 
 export const initialState = {
   error: null,
@@ -11,6 +12,9 @@ export function reducer(state = initialState, action) {
   const type = get(action, 'type')
 
   switch (type) {
+    case boardActions.RESET_BOARDS:
+      return assign({}, initialState)
+
     case actions.REQUEST_MEMBERS:
       return merge({}, state, {
         error: null,
diff --git a/src/utils/__tests__/get-company-member.test.js b/src/utils/__tests__/get-company-member.test.js
@@ -3,7 +3,7 @@ import getCompanyMember from '../get-company-member'
 describe('utils/getCompanyMember', () => {
   const members = [{ username: 'exampleusername' }, { username: 'anotheruser' }]
 
-  it('should return the expected company member object', () => {
+  test('should return the expected company member object', () => {
     // the expected username is mocked in the jest setup file
     expect(getCompanyMember(members)).toMatchObject({ username: 'exampleusername' })
   })

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ describe('actions/cards:async actions', () => {`
`34`	`34`	`jest.unmock('../../../data/trello')`
`35`	`35`	`})`
`36`	`36`
`37`		`- it('creates RECEIVE when fetching cards has been done', async () => {`
	`37`	`+ test('creates RECEIVE when fetching cards has been done', async () => {`
`38`	`38`	`const list = {`
`39`	`39`	`id: 'list-123',`
`40`	`40`	`}`
Original file line number	Diff line number	Diff line change
@@ -25,7 +25,7 @@ exports[`Component/MainApp should render without throwing an error 1`] = `
`25`	`25`	`</WithStyles(Button)>`
`26`	`26`	`<WithStyles(Button)`
`27`	`27`	`className="MainApp-button-2"`
`28`		`- id="doRefreshButton"`
	`28`	`+ id="doResetButton"`
`29`	`29`	`onClick={[Function]}`
`30`	`30`	`variant="raised"`
`31`	`31`	`>`