add a containers folder and files

frontend/src/Metamaps/GlobalUI/ImportDialog.js

@@ -4,7 +4,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import outdent from 'outdent'
 
-import ImportDialogBox from '../../routes/MapView/ImportDialogBox'
+import ImportDialogBox from '../../components/ImportDialogBox'
 
 import PasteInput from '../PasteInput'
 import Map from '../Map'

frontend/src/components/InfoAndHelp.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import MapInfoBox from '../routes/MapView/MapInfoBox'
+import MapInfoBox from './MapInfoBox'
 
 class InfoAndHelp extends Component {
   static propTypes = {

frontend/src/components/MapChat/Message.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import Autolinker from 'autolinker'
-import Util from '../../../Metamaps/Util'
+import Util from '../../Metamaps/Util'
 
 const linker = new Autolinker({ newWindow: true, truncate: 50, email: false, phone: false })
 

frontend/src/components/MapChat/index.js

@@ -4,7 +4,7 @@ import Unread from './Unread'
 import Participant from './Participant'
 import Message from './Message'
 import NewMessage from './NewMessage'
-import Util from '../../../Metamaps/Util'
+import Util from '../../Metamaps/Util'
 
 function makeList(messages) {
   let currentHeader

frontend/src/containers/ContextMenu.js

@@ -0,0 +1,5 @@
+import { connect } from 'react-redux'
+import { mapStateToProps, mapDispatchToProps } from './UpperOptions.store'
+import UpperOptions from '../components/UpperOptions'
+
+export default connect(mapStateToProps, mapDispatchToProps)(UpperOptions)

frontend/src/containers/ContextMenu.store.js

@@ -0,0 +1,24 @@
+// import {  } from '../actions'
+
+export const mapStateToProps = (state, ownProps) => {
+  return {
+    map: ownProps.map,
+    currentUser: ownProps.currentUser,
+    openImportLightbox: ownProps.openImportLightbox,
+    forkMap: ownProps.forkMap,
+    canEditMap: ownProps.canEditMap,
+    filterData: ownProps.filterData,
+    allForFiltering: ownProps.allForFiltering,
+    visibleForFiltering: ownProps.visibleForFiltering,
+    toggleMetacode: ownProps.toggleMetacode,
+    toggleMapper: ownProps.toggleMapper,
+    toggleSynapse: ownProps.toggleSynapse,
+    filterAllMetacodes: ownProps.filterAllMetacodes,
+    filterAllMappers: ownProps.filterAllMappers,
+    filterAllSynapses: ownProps.filterAllSynapses
+  }
+}
+
+export const mapDispatchToProps = (dispatch, ownProps) => {
+  return {}
+}

frontend/src/containers/InfoAndHelp.js

@@ -0,0 +1,5 @@
+import { connect } from 'react-redux'
+import { mapStateToProps, mapDispatchToProps } from './InfoAndHelp.store'
+import InfoAndHelp from '../components/InfoAndHelp'
+
+export default connect(mapStateToProps, mapDispatchToProps)(InfoAndHelp)

frontend/src/containers/InfoAndHelp.store.js

@@ -0,0 +1,18 @@
+// import {  } from '../actions'
+
+export const mapStateToProps = (state, ownProps) => {
+  return {
+    mapIsStarred: ownProps.mapIsStarred,
+    currentUser: ownProps.currentUser,
+    map: ownProps.map,
+    onInfoClick: ownProps.toggleMapInfoBox,
+    onMapStar: ownProps.onMapStar,
+    onMapUnstar: ownProps.onMapUnstar,
+    onHelpClick: ownProps.openHelpLightbox,
+    infoBoxHtml: ownProps.infoBoxHtml
+  }
+}
+
+export const mapDispatchToProps = (dispatch, ownProps) => {
+  return {}
+}

frontend/src/containers/TopicCard.js

@@ -0,0 +1,5 @@
+import { connect } from 'react-redux'
+import { mapStateToProps, mapDispatchToProps } from './TopicCard.store'
+import TopicCard from '../components/TopicCard'
+
+export default connect(mapStateToProps, mapDispatchToProps)(TopicCard)

frontend/src/containers/TopicCard.store.js

@@ -0,0 +1,24 @@
+// import {  } from '../actions'
+
+export const mapStateToProps = (state, ownProps) => {
+  return {
+    map: ownProps.map,
+    currentUser: ownProps.currentUser,
+    openImportLightbox: ownProps.openImportLightbox,
+    forkMap: ownProps.forkMap,
+    canEditMap: ownProps.canEditMap,
+    filterData: ownProps.filterData,
+    allForFiltering: ownProps.allForFiltering,
+    visibleForFiltering: ownProps.visibleForFiltering,
+    toggleMetacode: ownProps.toggleMetacode,
+    toggleMapper: ownProps.toggleMapper,
+    toggleSynapse: ownProps.toggleSynapse,
+    filterAllMetacodes: ownProps.filterAllMetacodes,
+    filterAllMappers: ownProps.filterAllMappers,
+    filterAllSynapses: ownProps.filterAllSynapses
+  }
+}
+
+export const mapDispatchToProps = (dispatch, ownProps) => {
+  return {}
+}

frontend/src/containers/UpperOptions.js

@@ -0,0 +1,5 @@
+import { connect } from 'react-redux'
+import { mapStateToProps, mapDispatchToProps } from './UpperOptions.store'
+import UpperOptions from '../components/UpperOptions'
+
+export default connect(mapStateToProps, mapDispatchToProps)(UpperOptions)

frontend/src/containers/UpperOptions.store.js

@@ -0,0 +1,24 @@
+// import {  } from '../actions'
+
+export const mapStateToProps = (state, ownProps) => {
+  return {
+    map: ownProps.map,
+    currentUser: ownProps.currentUser,
+    openImportLightbox: ownProps.openImportLightbox,
+    forkMap: ownProps.forkMap,
+    canEditMap: ownProps.canEditMap,
+    filterData: ownProps.filterData,
+    allForFiltering: ownProps.allForFiltering,
+    visibleForFiltering: ownProps.visibleForFiltering,
+    toggleMetacode: ownProps.toggleMetacode,
+    toggleMapper: ownProps.toggleMapper,
+    toggleSynapse: ownProps.toggleSynapse,
+    filterAllMetacodes: ownProps.filterAllMetacodes,
+    filterAllMappers: ownProps.filterAllMappers,
+    filterAllSynapses: ownProps.filterAllSynapses
+  }
+}
+
+export const mapDispatchToProps = (dispatch, ownProps) => {
+  return {}
+}

frontend/src/containers/VisualizationControls.js

@@ -0,0 +1,5 @@
+import { connect } from 'react-redux'
+import { mapStateToProps, mapDispatchToProps } from './VisualizationControls.store'
+import VisualizationControls from '../components/VisualizationControls'
+
+export default connect(mapStateToProps, mapDispatchToProps)(VisualizationControls)

frontend/src/containers/VisualizationControls.store.js

@@ -0,0 +1,15 @@
+// import {  } from '../actions'
+
+export const mapStateToProps = (state, ownProps) => {
+  return {
+    topic: ownProps.topic,
+    map: ownProps.map,
+    onClickZoomExtents: ownProps.onZoomExtents,
+    onClickZoomIn: ownProps.onZoomIn,
+    onClickZoomOut: ownProps.onZoomOut
+  }
+}
+
+export const mapDispatchToProps = (dispatch, ownProps) => {
+  return {}
+}

frontend/src/routes/MapView/MapView.js

@@ -1,14 +1,15 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import ContextMenu from '../../components/ContextMenu'
+import UpperOptions from '../../containers/UpperOptions'
+import InfoAndHelp from '../../containers/InfoAndHelp'
+import VisualizationControls from '../../containers/VisualizationControls'
+import ContextMenu from '../../containers/ContextMenu'
+import TopicCard from '../../containers/TopicCard'
+
+import Instructions from '../../components/Instructions'
+import MapChat from '../../components/MapChat'
 import MapVis from '../../components/MapVis'
-import UpperOptions from '../../components/UpperOptions'
-import InfoAndHelp from '../../components/InfoAndHelp'
-import Instructions from './Instructions'
-import VisualizationControls from '../../components/VisualizationControls'
-import MapChat from './MapChat'
-import TopicCard from '../../components/TopicCard'
 
 export default class MapView extends Component {
 
@@ -53,6 +54,7 @@ export default class MapView extends Component {
   endMap() {
     this.props.closeChat()
     this.mapChat.reset()
+    // TODO: fix upperOptions ref
     this.upperOptions.reset()
     this.props.endActiveMap()
   }
@@ -80,38 +82,14 @@ export default class MapView extends Component {
     const canEditMap = map && map.authorizeToEdit(currentUser)
     // TODO: stop using {...this.props} and make explicit
     return <div className="mapWrapper">
-      <UpperOptions ref={x => this.upperOptions = x}
+      <UpperOptions ref={x => this.upperOptions = x} {...this.props} />
-                    map={map}
-                    currentUser={currentUser}
-                    onImportClick={openImportLightbox}
-                    onForkClick={forkMap}
-                    canEditMap={canEditMap}
-                    filterData={filterData}
-                    allForFiltering={allForFiltering}
-                    visibleForFiltering={visibleForFiltering}
-                    toggleMetacode={toggleMetacode}
-                    toggleMapper={toggleMapper}
-                    toggleSynapse={toggleSynapse}
-                    filterAllMetacodes={filterAllMetacodes}
-                    filterAllMappers={filterAllMappers}
-                    filterAllSynapses={filterAllSynapses} />
       <MapVis map={map} DataModel={DataModel} />
       {openTopic && <TopicCard {...this.props} />}
       {contextMenu && <ContextMenu {...this.props} />}
       {currentUser && <Instructions mobile={mobile} hasLearnedTopicCreation={hasLearnedTopicCreation} />}
       {currentUser && <MapChat {...this.props} onOpen={openChat} onClose={closeChat} chatOpen={chatIsOpen} ref={x => this.mapChat = x} />}
-      <VisualizationControls map={map}
+      <VisualizationControls {...this.props} />
-                             onClickZoomExtents={onZoomExtents}
+      <InfoAndHelp {...this.props} />
-                             onClickZoomIn={onZoomIn}
-                             onClickZoomOut={onZoomOut} />
-      <InfoAndHelp mapIsStarred={mapIsStarred}
-                   currentUser={currentUser}
-                   map={map}
-                   onInfoClick={toggleMapInfoBox}
-                   onMapStar={onMapStar}
-                   onMapUnstar={onMapUnstar}
-                   onHelpClick={openHelpLightbox}
-                   infoBoxHtml={infoBoxHtml} />
     </div>
   }
 }

frontend/src/routes/MapView/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { mapStateToProps, mapDispatchToProps } from './store'
+import { mapStateToProps, mapDispatchToProps } from './MapView.store'
 import MapView from './MapView'
 
 export default connect(mapStateToProps, mapDispatchToProps)(MapView)

frontend/src/routes/TopicView.js

@@ -1,12 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import ContextMenu from '../components/ContextMenu'
+import ContextMenu from '../containers/ContextMenu'
+import UpperOptions from '../containers/UpperOptions'
+import InfoAndHelp from '../containers/InfoAndHelp'
+import VisualizationControls from '../containers/VisualizationControls'
+import TopicCard from '../containers/TopicCard'
+
 import TopicVis from '../components/TopicVis'
-import UpperOptions from '../components/UpperOptions'
-import InfoAndHelp from '../components/InfoAndHelp'
-import VisualizationControls from '../components/VisualizationControls'
-import TopicCard from '../components/TopicCard'
 
 export default class TopicView extends Component {
 
@@ -38,6 +39,7 @@ export default class TopicView extends Component {
   }
 
   endTopic() {
+    // TODO: fix upperOptions ref
     this.upperOptions.reset()
     this.props.endActiveTopic()
   }
@@ -60,26 +62,12 @@ export default class TopicView extends Component {
             openHelpLightbox, onZoomIn, onZoomOut, contextMenu } = this.props
     // TODO: stop using {...this.props} and make explicit
     return <div className="topicWrapper">
-      <UpperOptions ref={x => this.upperOptions = x}
+      <UpperOptions ref={x => this.upperOptions = x} {...this.props} />
-                    currentUser={currentUser}
-                    topic={topic}
-                    onForkClick={forkMap}
-                    filterData={filterData}
-                    allForFiltering={allForFiltering}
-                    visibleForFiltering={visibleForFiltering}
-                    toggleMetacode={toggleMetacode}
-                    toggleMapper={toggleMapper}
-                    toggleSynapse={toggleSynapse}
-                    filterAllMetacodes={filterAllMetacodes}
-                    filterAllMappers={filterAllMappers}
-                    filterAllSynapses={filterAllSynapses} />
       <TopicVis />
       <TopicCard {...this.props} />
       {contextMenu && <ContextMenu {...this.props} />}
-      <VisualizationControls onClickZoomIn={onZoomIn}
+      <VisualizationControls {...this.props} />
-                             onClickZoomOut={onZoomOut} />
+      <InfoAndHelp {...this.props} />
-      <InfoAndHelp topic={topic}
-                   onHelpClick={openHelpLightbox} />
     </div>
   }
 }