Public boards can be added (user must not be a member of it) (#17)

Author: natterstefan

CHANGES.md

@@ -8,6 +8,8 @@ adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ### Added
 
+* config can now contain the `id` of a board, which allows adding public
+  Trello boards as well. Related to breaking change note regarding config.js below.
 * <TrelloCardUi /> can display labels (with toggle: show or hide)
 * `<ListTabs \/>` added
 * list `pattern` can be modified with query parameters. Examples:
@@ -16,13 +18,58 @@ adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ### Changed
 
+* **Breaking**: boards config in `config.js` changed:
+
+```js
+// previous config
+
+boards: [
+  {
+    // ...
+    board: 'hello-world', // renamed to 'name'
+  },
+],
+```
+
+```js
+// new config
+
+boards: [
+  {
+    // ...
+    name: 'hello-world', // new property 'name'
+    id: 'board-1', // optional, see README
+  },
+],
+```
+
 * **Breaking**: `config.js` can now contain multiple `lists` patterns, each list
   will be available in the `<ListTabs \/>` component and can later be used to
   select a specific list. All filters work as expected and as before (also with
   deeplinking for the list patterns)
   * _Note_: even though semver would suggest adding releasing a major release, I
     decided to stick to 0.x.y still until further notice here.
 
+```js
+// previous config
+boards: [
+  {
+    // ...
+    lists: /#upcoming/,
+  },
+],
+```
+
+```js
+// new config
+lists: [/#upcoming/],
+boards: [
+  {
+    // does not contain lists anymore
+  },
+],
+```
+
 ## 2018/06/09 [0.1.1][5]
 
 * Bugfix TrelloCard `isHidden` calculation

README.md

@@ -42,6 +42,7 @@ preferred team members.
 
 * :memo: flexible multiboard configuration (eg. select multiple lists to display from multiple boards)
 * :office: optimised teamwork experience, (eg. send deeplinks to your colleagues with their stories already filtered)
+* :door: add private (accessible only to invited members of the Board) and public Trello boards
 * :lock: your data stays secure in your browser and is not shared with others
 * :hammer: built with awesome technologies, like: [react 16.x](https://github.com/facebook/react),
   [react-router-dom](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom),
@@ -129,7 +130,8 @@ module.exports = {
   boards: [
     {
       shortcut: 'hw',
-      board: 'hello-world',
+      name: 'hello-world',
+      id: 'board-1',
       estimates_with_round_brackets: true,
       estimates_with_square_brackets: true,
     },
@@ -154,10 +156,27 @@ The main config properties look like this:
 The list of boards should contain board objects like this:
 
 * `shortcut` (string): the title above each list of tasks
-* `board` (string): name of trello board
+* `name` (string): name of trello board
+* `id` (string, optional): id of trello board, only required when board is public but user should see it
 * `estimates_with_round_brackets` (bool)
 * `estimates_with_square_brackets` (bool)
 
+With the `id` property you can add boards, which are public and the user is not
+part of when accessing your TrelloMultiBoard App.
+
+##### How to get the id of your board?
+
+Let's assume the url of your board looks like this: https://trello.com/b/123asdf/hello-world.
+You can get the id of the board now by changing the url to: https://trello.com/b/123asdf/hello-world.json.
+Wait for some time (depends on the number of lists and card of the board) and
+you should see a result similar to
+
+```
+ { "id": "IGVA5wQ67w2mBbkctLxi", "name": "hello-world", "desc":"", ... }
+```
+
+The id at the beginning of the JSON is the id of the board.
+
 #### Estimations Configuration
 
 Additionally you can calculate and get the estimations from the cards, if their

config/config.example.js

@@ -8,7 +8,8 @@ module.exports = {
   boards: [
     {
       shortcut: 'hw',
-      board: 'hello-world',
+      name: 'hello-world',
+      id: 'board-1', // optional: only required when board is public but user should see it
       estimates_with_round_brackets: true,
       estimates_with_square_brackets: true,
     },

package.json

@@ -30,7 +30,7 @@
     "lint": "eslint ./src",
     "lint:scss": "stylelint ./src",
     "postinstall": "./node_modules/.bin/cpy \"./config/config.example.js\" \"./config\" --no-overwrite --rename=\"config.js\"",
-    "precommit": "npm run analyse:size && lint-staged",
+    "precommit": "npm run build && npm run analyse:size && lint-staged",
     "prepush": "npm test",
     "start": "webpack-dev-server --hot --config webpack/dev.config.js",
     "test": "jest",

src/__mocks__/mocks.js

@@ -2,7 +2,8 @@ import { pick } from 'lodash'
 
 // This file contains mocked responses from the data/trello API.
 export const mockExampleBoardConfig = {
-  board: 'hello-world',
+  name: 'hello-world',
+  id: 'board-1', // can be optional
   estimates_with_round_brackets: true,
   estimates_with_square_brackets: true,
   shortcut: 'hw',
@@ -47,7 +48,7 @@ export const mockExampleBoardResponse = { name: 'hello-world', id: 'board-1' }
 
 // most likely it should be an array with two lists (one matching and one not)
 export const mockExampleListResponse = {
-  id: 'list-123',
+  id: 'list-1',
   idBoard: 'board-1',
   name: 'Test List Name #upcoming',
 }

src/actions/boards/__tests__/index.test.js

@@ -67,6 +67,7 @@ describe('actions/board:async actions', () => {
         error: null,
         payload: [
           {
+            idx: 0,
             board,
             config,
           },

src/actions/boards/index.js

@@ -1,6 +1,6 @@
-import { forEach } from 'lodash'
+import { find, forEach, sortBy } from 'lodash'
 import Config from '../../../config/config'
-import { getMeBoards } from '../../data/trello'
+import { getBoard, getMeBoards } from '../../data/trello'
 
 const actions = {
   RESET_BOARDS: 'RESET_BOARDS',
@@ -23,20 +23,48 @@ const requestBoards = () => async dispatch => {
   try {
     const result = await getMeBoards()
     const boards = []
-    forEach(result, board => {
-      forEach(Config.boards, configuredBoard => {
-        if (configuredBoard.board === board.name) {
-          const boardObj = {
-            board,
-            config: configuredBoard,
-          }
-          boards.push(boardObj)
+
+    const additionalBoards = []
+    forEach(Config.boards, (configuredBoard, idx) => {
+      // get a board by it's name (works for boards a user subscribed to)
+      const nameBoard = find(result, b => b.name === configuredBoard.name)
+      const idBoard = find(result, b => b.id === configuredBoard.id)
+
+      if (nameBoard || idBoard) {
+        const boardObj = {
+          idx,
+          board: nameBoard,
+          config: configuredBoard,
         }
-      })
+        boards.push(boardObj)
+      } else if (configuredBoard.id && !idBoard) {
+        // TODO: write test for this case
+        // if the .id is set, but the board was not found we query boards
+        // (eg. for public boards, where people are not member of it, which means
+        // you would not find it in their me/boards result)
+        additionalBoards.push(
+          new Promise(resolve => {
+            getBoard(configuredBoard.id)
+              .then(data => resolve({ configuredBoard, data, idx }))
+              .catch(error => resolve({ configuredBoard, error, idx }))
+          }),
+        )
+      }
+    })
+
+    const idBoards = await Promise.all(additionalBoards)
+    forEach(idBoards, ({ configuredBoard, data, idx }) => {
+      const boardObj = {
+        idx,
+        board: data,
+        config: configuredBoard,
+      }
+      boards.push(boardObj)
     })
 
     // then update the state once we got all boards
-    dispatch(receiveBoards(boards))
+    // TODO: evaluate if board.idx should be removed
+    dispatch(receiveBoards(sortBy(boards, ['idx'])))
   } catch (e) {
     dispatch(receiveBoards(e, true))
   }

src/components/board/__tests__/index.test.js

@@ -41,7 +41,7 @@ describe('Component/BoardContainer', () => {
       isLoading: false,
       lists: [
         {
-          id: 'list-123',
+          id: 'list-1',
           idBoard: 'board-1',
           name: 'Test List Name #upcoming',
         },

src/components/boards-list/__mocks__/boards-list.js

@@ -0,0 +1,16 @@
+import { mockExampleUser1, mockExampleBoardResponse } from '../../../__mocks__/mocks'
+
+export const storeStateMock = {
+  boards: {
+    data: [{ board: mockExampleBoardResponse }],
+    error: null,
+    isLoading: true,
+  },
+  app: {
+    memberToggle: {
+      togglePreferred: false,
+      togglePreferredMember: null,
+    },
+  },
+  members: { members: [mockExampleUser1] },
+}

src/components/boards-list/__tests__/index.test.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import configureMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
+
+import { mockExampleBoardResponse } from '../../../__mocks__/mocks'
+import { storeStateMock } from '../__mocks__/boards-list'
+
+// inspired by https://github.com/reactjs/redux/issues/1534#issuecomment-205061049
+const mockStore = configureMockStore([thunk])
+
+describe('Component/BoardsListContainer', () => {
+  let store
+
+  beforeEach(() => {
+    store = mockStore(storeStateMock)
+  })
+
+  afterAll(() => {
+    jest.resetModules()
+  })
+
+  test('should get data from the store and prepare props without throwing an error', () => {
+    const BoardsListContainer = require('../').default
+    const wrapper = shallow(<BoardsListContainer store={store} />)
+
+    const boardsList = [{ board: mockExampleBoardResponse }]
+    const expectedProps = {
+      boards: boardsList,
+      error: null,
+      getEstimations: expect.any(Function),
+      isLoading: true,
+    }
+
+    expect(wrapper.props()).toEqual(expect.objectContaining(expectedProps))
+  })
+})