Widget ids 2

package.json

@@ -3,10 +3,10 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@databraid/github-widget": "^1.0.23",
-    "@databraid/sheets-widget": "^1.0.5",
-    "@databraid/slack-widget": "^1.0.24",
-    "@databraid/transit-widget": "^1.0.26",
+    "@databraid/github-widget": "^1.0.29",
+    "@databraid/sheets-widget": "^1.0.10",
+    "@databraid/slack-widget": "^1.0.27",
+    "@databraid/transit-widget": "^1.0.29",
     "localforage": "1.5.0",
     "prop-types": "15.5.10",
     "react": "15.6.1",

src/actions/actions.test.js

@@ -5,55 +5,55 @@ describe('actions', () => {
   it('should create an action to add a transit widget', () => {
     const expectedAction = {
       type: TYPES.ADD_WIDGET,
-      id: TYPES.TRANSIT_WIDGET_ID,
+      widgetType: TYPES.TRANSIT_WIDGET,
     };
 
-    expect(actions.addWidget(TYPES.TRANSIT_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.addWidget(TYPES.TRANSIT_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to add a slack widget', () => {
     const expectedAction = {
       type: TYPES.ADD_WIDGET,
-      id: TYPES.SLACK_WIDGET_ID,
+      widgetType: TYPES.SLACK_WIDGET,
     };
 
-    expect(actions.addWidget(TYPES.SLACK_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.addWidget(TYPES.SLACK_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to add a github widget', () => {
     const expectedAction = {
       type: TYPES.ADD_WIDGET,
-      id: TYPES.GITHUB_WIDGET_ID,
+      widgetType: TYPES.GITHUB_WIDGET,
     };
 
-    expect(actions.addWidget(TYPES.GITHUB_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.addWidget(TYPES.GITHUB_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to remove a transit widget', () => {
     const expectedAction = {
       type: TYPES.REMOVE_WIDGET,
-      id: TYPES.TRANSIT_WIDGET_ID,
+      id: TYPES.TRANSIT_WIDGET,
     };
 
-    expect(actions.removeWidget(TYPES.TRANSIT_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.removeWidget(TYPES.TRANSIT_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to remove a slack widget', () => {
     const expectedAction = {
       type: TYPES.REMOVE_WIDGET,
-      id: TYPES.SLACK_WIDGET_ID,
+      id: TYPES.SLACK_WIDGET,
     };
 
-    expect(actions.removeWidget(TYPES.SLACK_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.removeWidget(TYPES.SLACK_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to remove a github widget', () => {
     const expectedAction = {
       type: TYPES.REMOVE_WIDGET,
-      id: TYPES.GITHUB_WIDGET_ID,
+      id: TYPES.GITHUB_WIDGET,
     };
 
-    expect(actions.removeWidget(TYPES.GITHUB_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.removeWidget(TYPES.GITHUB_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to show widget modal', () => {
@@ -91,55 +91,55 @@ describe('actions', () => {
   it('should create an action to show a transit widget sidebar', () => {
     const expectedAction = {
       type: TYPES.SHOW_WIDGET_SIDEBAR,
-      id: TYPES.TRANSIT_WIDGET_ID,
+      id: TYPES.TRANSIT_WIDGET,
     };
 
-    expect(actions.showWidgetSidebar(TYPES.TRANSIT_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.showWidgetSidebar(TYPES.TRANSIT_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to show a slack widget sidebar', () => {
     const expectedAction = {
       type: TYPES.SHOW_WIDGET_SIDEBAR,
-      id: TYPES.SLACK_WIDGET_ID,
+      id: TYPES.SLACK_WIDGET,
     };
 
-    expect(actions.showWidgetSidebar(TYPES.SLACK_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.showWidgetSidebar(TYPES.SLACK_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to show a github widget sidebar', () => {
     const expectedAction = {
       type: TYPES.SHOW_WIDGET_SIDEBAR,
-      id: TYPES.GITHUB_WIDGET_ID,
+      id: TYPES.GITHUB_WIDGET,
     };
 
-    expect(actions.showWidgetSidebar(TYPES.GITHUB_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.showWidgetSidebar(TYPES.GITHUB_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to hide a transit widget sidebar', () => {
     const expectedAction = {
       type: TYPES.HIDE_WIDGET_SIDEBAR,
-      id: TYPES.TRANSIT_WIDGET_ID,
+      id: TYPES.TRANSIT_WIDGET,
     };
 
-    expect(actions.hideWidgetSidebar(TYPES.TRANSIT_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.hideWidgetSidebar(TYPES.TRANSIT_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to hide a slack widget sidebar', () => {
     const expectedAction = {
       type: TYPES.HIDE_WIDGET_SIDEBAR,
-      id: TYPES.SLACK_WIDGET_ID,
+      id: TYPES.SLACK_WIDGET,
     };
 
-    expect(actions.hideWidgetSidebar(TYPES.SLACK_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.hideWidgetSidebar(TYPES.SLACK_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to hide a github widget sidebar', () => {
     const expectedAction = {
       type: TYPES.HIDE_WIDGET_SIDEBAR,
-      id: TYPES.GITHUB_WIDGET_ID,
+      id: TYPES.GITHUB_WIDGET,
     };
 
-    expect(actions.hideWidgetSidebar(TYPES.GITHUB_WIDGET_ID)).toEqual(expectedAction);
+    expect(actions.hideWidgetSidebar(TYPES.GITHUB_WIDGET)).toEqual(expectedAction);
   });
 
   it('should create an action to lock the widgets', () => {

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 };
 }
 
 export function removeWidget(widgetId) {

src/components/ModalAddWidget/index.jsx

@@ -3,60 +3,35 @@ import { Button, Header, Icon, Modal } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import {
-  TRANSIT_WIDGET_ID,
-  SLACK_WIDGET_ID,
-  GITHUB_WIDGET_ID,
-  SHEETS_WIDGET_ID,
-} from '../../constants';
 import {
   addWidget,
   hideAddWidgetModal,
 } from '../../actions';
+import widgetConfigs from '../../configurations';
 
+/* eslint-disable react/no-unused-prop-types */
 export const AddWidgetModal = props => (
   <Modal basic open={props.showAddWidgetModal} onClose={props.hideAddWidgetModal}>
     <Header icon="new pied piper" content="Choose a widget" />
     <Modal.Content>
       <p>Please pick the widget you wish to display.</p>
     </Modal.Content>
     <Modal.Actions>
-      <Button
-        basic
-        color="blue"
-        onClick={() => props.addWidget(TRANSIT_WIDGET_ID)}
-        inverted
-        disabled={props.ids.includes(TRANSIT_WIDGET_ID)}
-      >
-        <Icon name="rocket" size="large" />Transit
-      </Button>
-      <Button
-        basic
-        color="blue"
-        onClick={() => props.addWidget(SHEETS_WIDGET_ID)}
-        inverted
-        disabled={props.ids.includes(SHEETS_WIDGET_ID)}
-      >
-        <Icon name="table" size="large" />Sheets
-      </Button>
-      <Button
-        basic
-        color="blue"
-        onClick={() => props.addWidget(GITHUB_WIDGET_ID)}
-        inverted
-        disabled={props.ids.includes(GITHUB_WIDGET_ID)}
-      >
-        <Icon name="github" size="large" /> GitHub
-      </Button>
-      <Button
-        basic
-        color="blue"
-        onClick={() => props.addWidget(SLACK_WIDGET_ID)}
-        inverted
-        disabled={props.ids.includes(SLACK_WIDGET_ID)}
-      >
-        <Icon name="slack" size="large" /> Slack
-      </Button>
+      {
+        Object.values(widgetConfigs).map(cfg => (
+          <Button
+            basic
+            color="blue"
+            onClick={() => props.addWidget(cfg.type)}
+            inverted
+            disabled={props.ids.filter(id => props.metadata[id].type === cfg.type).length > 0}
+            key={cfg.type}
+          >
+            <Icon name={cfg.icon} size="large" />{cfg.displayName}
+          </Button>
+        ),
+        )
+      }
       <Button
         color="red"
         onClick={props.hideAddWidgetModal}
@@ -73,12 +48,17 @@ AddWidgetModal.propTypes = {
   ids: PropTypes.arrayOf(PropTypes.string).isRequired,
   addWidget: PropTypes.func.isRequired,
   hideAddWidgetModal: PropTypes.func.isRequired,
+  metadata: PropTypes.shape({
+    type: PropTypes.string,
+    showSidebar: PropTypes.bool,
+  }).isRequired,
 };
 
 export const mapStateToProps = (state) => {
   const showAddWidgetModal = state.widgets.showAddWidgetModal;
   const ids = state.widgets.ids;
-  return { showAddWidgetModal, ids };
+  const metadata = state.widgets.metadata;
+  return { showAddWidgetModal, ids, metadata };
 };
 
 export const mapDispatchToProps = dispatch => bindActionCreators({

src/components/WidgetContainer/index.jsx

@@ -8,35 +8,15 @@ import {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import TransitComponent from '@databraid/transit-widget/lib/App';
-import SlackComponent from '@databraid/slack-widget/lib/App';
-import GithubComponent from '@databraid/github-widget/lib/App';
-import SheetsComponent from '@databraid/sheets-widget/lib/App';
-import {
-  TRANSIT_WIDGET_ID,
-  SLACK_WIDGET_ID,
-  GITHUB_WIDGET_ID,
-  SHEETS_WIDGET_ID,
-} from '../../constants';
 import {
   removeWidget,
-  showWidgetSidebar,
-  hideWidgetSidebar,
 } from '../../actions';
 import WidgetSidestrip from '../WidgetSidestrip/';
-
+import widgetConfigs from '../../configurations/';
 
 const WidgetContainer = (props) => {
-  let component;
-  if (props.id === TRANSIT_WIDGET_ID) {
-    component = <TransitComponent widgetId={props.id} />;
-  } else if (props.id === GITHUB_WIDGET_ID) {
-    component = <GithubComponent widgetId={props.id} />;
-  } else if (props.id === SLACK_WIDGET_ID) {
-    component = <SlackComponent widgetId={props.id} />;
-  } else if (props.id === SHEETS_WIDGET_ID) {
-    component = <SheetsComponent widgetId={props.id} />;
-  }
+  const WidgetComponent = widgetConfigs[props.type].widgetComponent;
+  const component = <WidgetComponent widgetId={props.id} />;
 
   return (
     <div className="widget">
@@ -76,20 +56,20 @@ WidgetContainer.propTypes = {
   id: PropTypes.string.isRequired,
   showSidebar: PropTypes.bool.isRequired,
   locked: PropTypes.bool.isRequired,
+  type: PropTypes.string.isRequired,
   removeWidget: PropTypes.func.isRequired,
 };
 
 const mapStateToProps = (state, ownProps) => {
   const id = ownProps.id;
   const showSidebar = state.widgets.metadata[ownProps.id].showSidebar;
   const locked = state.widgets.locked;
-  return { id, showSidebar, locked };
+  const type = state.widgets.metadata[ownProps.id].type;
+  return { id, showSidebar, locked, type };
 };
 
 export const mapDispatchToProps = dispatch => bindActionCreators({
   removeWidget,
-  showWidgetSidebar,
-  hideWidgetSidebar,
 },
 dispatch);
 

src/configurations/index.js

@@ -1,34 +1,56 @@
-export default [
-  {
+import { transit as transitReducer } from '@databraid/transit-widget/lib/reducers';
+import transitComponent from '@databraid/transit-widget/lib/App';
+import { github as githubReducer } from '@databraid/github-widget/lib/reducers';
+import githubComponent from '@databraid/github-widget/lib/App';
+import { storeReducer as slackReducer } from '@databraid/slack-widget/lib/Reducers';
+import slackComponent from '@databraid/slack-widget/lib/App';
+import { sheets as sheetsReducer } from '@databraid/sheets-widget/lib/reducers';
+import sheetsComponent from '@databraid/sheets-widget/lib/App';
+
+
+export default {
+  transit: {
     type: 'transit',
+    displayName: 'Transit',
     icon: 'rocket',
-    initHeight: 8,
+    initHeight: 12,
     initWidth: 6,
     minHeight: 4,
-    minWidth: 3,
+    minWidth: 4,
+    widgetReducer: transitReducer,
+    widgetComponent: transitComponent,
   },
-  {
+  github: {
     type: 'github',
+    displayName: 'GitHub',
     icon: 'github',
     initHeight: 8,
     initWidth: 6,
     minHeight: 4,
     minWidth: 6,
+    widgetReducer: githubReducer,
+    widgetComponent: githubComponent,
   },
-  {
+  slack: {
     type: 'slack',
+    displayName: 'Slack',
     icon: 'slack',
-    initHeight: 6,
+    initHeight: 9,
     initWidth: 4,
     minHeight: 4,
     minWidth: 3,
+    widgetReducer: slackReducer,
+    widgetComponent: slackComponent,
   },
-  {
+  sheets: {
     type: 'sheets',
+    displayName: 'Sheets',
     icon: 'table',
     initHeight: 8,
     initWidth: 8,
     minHeight: 4,
     minWidth: 3,
+    widgetReducer: sheetsReducer,
+    widgetComponent: sheetsComponent,
   },
-];
+};

src/constants/index.js

@@ -1,8 +1,3 @@
-// ids - THESE WILL BE PHASED OUT AS WE MOVE TO DYNAMICALLY GENERATED IDS
-export const TRANSIT_WIDGET_ID = 'transit';
-export const SLACK_WIDGET_ID = 'slack';
-export const GITHUB_WIDGET_ID = 'github';
-export const SHEETS_WIDGET_ID = 'sheets';
 // types
 export const TRANSIT_WIDGET = 'transit';
 export const SLACK_WIDGET = 'slack';