From 767077d829ff649dc9bafc1ab213e6a555ad21ce Mon Sep 17 00:00:00 2001 From: Dave Date: Thu, 21 Sep 2017 08:27:15 -0700 Subject: [PATCH 01/11] Correct post-merge errors. --- src/reducers/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/reducers/index.js b/src/reducers/index.js index 8d70c7b..3c8bd70 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -289,8 +289,7 @@ export const widgets = (state = initialState, action) => { byId: { [TRANSIT_WIDGET_ID]: transitReducer(state.byId[TRANSIT_WIDGET_ID], action), [GITHUB_WIDGET_ID]: githubReducer(state.byId[GITHUB_WIDGET_ID], action), - [SLACK_WIDGET_ID]: slackReducer(state.byId[SLACK_WIDGET_ID], action), - [SHEETS_WIDGET_ID]: sheetsReducer(state.byId[SHEETS_WIDGET_ID], action), + [SLACK_WIDGET_ID]: slackReducer(state.byId[SLACK_WIDGET_ID], action), }, showSidebar: state.ids.length === 0, }; From a81ce69dc49d4d3d34017ac661c3e2dfaac496bf Mon Sep 17 00:00:00 2001 From: Dave Date: Thu, 21 Sep 2017 18:41:11 -0700 Subject: [PATCH 02/11] Dynamically add reducers to byIds in store based on id list Note that the components are not currently working in this commit. --- src/actions/index.js | 2 +- src/configurations/index.js | 11 ++++++++++- src/reducers/index.js | 37 +++++++++++++++++-------------------- 3 files changed, 28 insertions(+), 22 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 23182be..9177bbd 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -13,7 +13,7 @@ import { } from '../constants'; export function addWidget(widgetType) { - return { type: ADD_WIDGET, id: widgetType }; + return { type: ADD_WIDGET, widgetType: widgetType }; } export function removeWidget(widgetId) { diff --git a/src/configurations/index.js b/src/configurations/index.js index aaf8f5b..00f2ba1 100644 --- a/src/configurations/index.js +++ b/src/configurations/index.js @@ -1,3 +1,8 @@ +import { transit as transitReducer } from '@databraid/transit-widget/lib/reducers'; +import { github as githubReducer } from '@databraid/github-widget/lib/reducers'; +import { storeReducer as slackReducer } from '@databraid/slack-widget/lib/Reducers'; +import { sheets as sheetsReducer } from '@databraid/sheets-widget/lib/reducers'; + export default [ { type: 'transit', @@ -6,6 +11,7 @@ export default [ initWidth: 6, minHeight: 4, minWidth: 3, + widgetReducer: transitReducer, }, { type: 'github', @@ -13,7 +19,8 @@ export default [ initHeight: 8, initWidth: 6, minHeight: 4, - minWidth: 6, + minWidth: 3, + widgetReducer: githubReducer, }, { type: 'slack', @@ -22,6 +29,7 @@ export default [ initWidth: 4, minHeight: 4, minWidth: 3, + widgetReducer: slackReducer, }, { type: 'sheets', @@ -30,5 +38,6 @@ export default [ initWidth: 8, minHeight: 4, minWidth: 3, + widgetReducer: sheetsReducer, }, ]; diff --git a/src/reducers/index.js b/src/reducers/index.js index 3c8bd70..d116125 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,15 +1,7 @@ import { combineReducers } from 'redux'; -import { sheets as sheetsReducer } from '@databraid/sheets-widget/lib/reducers'; -import { transit as transitReducer } from '@databraid/transit-widget/lib/reducers'; -import { github as githubReducer } from '@databraid/github-widget/lib/reducers'; -import { storeReducer as slackReducer } from '@databraid/slack-widget/lib/Reducers'; import { REHYDRATE } from 'redux-persist/constants'; import widgetConfigs from '../configurations/'; import { - TRANSIT_WIDGET_ID, - SLACK_WIDGET_ID, - GITHUB_WIDGET_ID, - SHEETS_WIDGET_ID, ADD_WIDGET, REMOVE_WIDGET, SHOW_ADD_WIDGET_MODAL, @@ -38,7 +30,7 @@ const initialState = { metadata: {}, }; -export const collapseWidgetSidebars = (metadata) => { +export const collapseWidgetSidebars = metadata => { const newMetadata = { ...metadata }; Object.keys(newMetadata).forEach((widgetId) => { newMetadata[widgetId] = { @@ -50,7 +42,7 @@ export const collapseWidgetSidebars = (metadata) => { }; -export const getWidgetConfigByType = (type) => { +export const getWidgetConfigByType = type => { if (!type) { return undefined; } @@ -131,9 +123,10 @@ export const calculateInitialPosition = (layout, width, height, maxCols = 12) => }; export const widgets = (state = initialState, action) => { + switch (action.type) { case ADD_WIDGET: { - const widgetConfig = getWidgetConfigByType(action.id); + const widgetConfig = getWidgetConfigByType(action.widgetType); const newLoc = calculateInitialPosition( state.grid.layout, widgetConfig.initWidth, @@ -141,14 +134,15 @@ export const widgets = (state = initialState, action) => { ); return { ...state, - ids: [...state.ids, widgetConfig.type], + ids: [...state.ids, state.grid.nextId.toString()], showAddWidgetModal: false, grid: { ...state.grid, + nextId: state.grid.nextId + 1, layout: [ ...state.grid.layout, { - i: widgetConfig.type, + i: state.grid.nextId.toString(), x: newLoc.x, y: newLoc.y, w: widgetConfig.initWidth, @@ -161,7 +155,7 @@ export const widgets = (state = initialState, action) => { }, metadata: { ...state.metadata, - [action.id]: { + [state.grid.nextId]: { type: widgetConfig.type, showSidebar: false, }, @@ -283,16 +277,19 @@ export const widgets = (state = initialState, action) => { }, }; - default: + default:{ + + let reducers = {}; + state.ids.forEach(id => { + const widgetConfig = getWidgetConfigByType(state.metadata[id].type); + reducers[id] = widgetConfig.widgetReducer(state.byId[id], action) + }); return { ...state, - byId: { - [TRANSIT_WIDGET_ID]: transitReducer(state.byId[TRANSIT_WIDGET_ID], action), - [GITHUB_WIDGET_ID]: githubReducer(state.byId[GITHUB_WIDGET_ID], action), - [SLACK_WIDGET_ID]: slackReducer(state.byId[SLACK_WIDGET_ID], action), - }, + byId: reducers, showSidebar: state.ids.length === 0, }; + } } }; From 514315eb61a8f909c2154583d2b6d391fbee0d01 Mon Sep 17 00:00:00 2001 From: Dave Date: Fri, 22 Sep 2017 09:12:42 -0700 Subject: [PATCH 03/11] Make widget IDs be numbered instead of hardcoded strings. Augment the widget configuration file to supply the reducers and components for each widget. Dynamically populate reducers and components base upon the widget's ID. --- src/actions/index.js | 1 + src/components/ModalAddWidget/index.jsx | 16 ++++++++++++++ src/components/WidgetContainer/index.jsx | 28 +++++------------------- src/configurations/index.js | 25 ++++++++++++++++----- src/reducers/index.js | 20 +++++++++-------- 5 files changed, 53 insertions(+), 37 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 9177bbd..55cce63 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -56,3 +56,4 @@ export function saveLayoutChange(layout) { return { type: SAVE_LAYOUT_CHANGE, layout }; } + diff --git a/src/components/ModalAddWidget/index.jsx b/src/components/ModalAddWidget/index.jsx index d3de5ca..f7d58f1 100644 --- a/src/components/ModalAddWidget/index.jsx +++ b/src/components/ModalAddWidget/index.jsx @@ -13,6 +13,7 @@ import { addWidget, hideAddWidgetModal, } from '../../actions'; +import widgetConfigs from '../../configurations'; export const AddWidgetModal = props => ( @@ -21,6 +22,21 @@ export const AddWidgetModal = props => (

Please pick the widget you wish to display.

+ { + Object.values(widgetConfigs).map(cfg => ( + + ), + ) + } - - -