bring importdialog into the react app

README.md

@@ -31,10 +31,12 @@ Checklist
 - [x] Request invite code
 - [x] Request user object itself
 - [x] Load the metacodes
-
+- [x] move ImportDialog lightbox into main app
 - [x] create topic form
+
 - [ ] create synapse form
-- [ ] move ImportDialog lightbox into main app
+- [ ] replace old loader with react loader
+- [ ] ensure exports of maps work
 - [ ] Notifications: make sure notifications either look nice, or redirect
 - [ ] Notifications: pagination
 - [ ] Get actioncable working

src/Metamaps/GlobalUI/ImportDialog.js

@@ -1,36 +1,14 @@
 /* global $ */
 
-import React from 'react'
-import ReactDOM from 'react-dom'
-import outdent from 'outdent'
-
-import ImportDialogBox from '../../routes/MapView/ImportDialogBox'
-
-import PasteInput from '../PasteInput'
 import Map from '../Map'
 
 const ImportDialog = {
   openLightbox: null,
   closeLightbox: null,
-
   init: function(serverData, openLightbox, closeLightbox) {
     const self = ImportDialog
     self.openLightbox = openLightbox
     self.closeLightbox = closeLightbox
-
-    $('#lightbox_content').append($(outdent`
-      <div class="lightboxContent" id="import-dialog">
-        <div class="importDialogWrapper" />
-      </div>
-    `))
-    ReactDOM.render(React.createElement(ImportDialogBox, {
-      onFileAdded: PasteInput.handleFile,
-      exampleImageUrl: serverData['import-example.png'],
-      downloadScreenshot: ImportDialog.downloadScreenshot,
-      onExport: format => () => {
-        window.open(`${window.location.pathname}/export.${format}`, '_blank')
-      }
-    }), $('.importDialogWrapper').get(0))
   },
   show: function() {
     ImportDialog.openLightbox('import-dialog')

src/Metamaps/GlobalUI/ReactApp.js

@@ -16,6 +16,7 @@ import DataFetcher from '../DataFetcher'
 import { ExploreMaps, ChatView, TopicCard, ContextMenu } from '../Views'
 import Filter from '../Filter'
 import JIT from '../JIT'
+import PasteInput from '../PasteInput'
 import Realtime from '../Realtime'
 import Map, { InfoBox } from '../Map'
 import Topic from '../Topic'
@@ -143,7 +144,12 @@ const ReactApp = {
       onMapStar: Map.star,
       onMapUnstar: Map.unstar,
       initNewTopic: Create.newTopic.init,
-      initNewSynapse: Create.newSynapse.init
+      initNewSynapse: Create.newSynapse.init,
+      importHandleFile: PasteInput.handleFile,
+      downloadScreenshot: ImportDialog.downloadScreenshot,
+      onExport: format => () => {
+        window.open(`${window.location.pathname}/export.${format}`, '_blank')
+      }
     }
   },
   getCommonProps: function() {

src/Metamaps/Map/index.js

@@ -381,5 +381,5 @@ const Map = {
   }
 }
 
-export { CheatSheet, InfoBox }
+export { InfoBox }
 export default Map

src/components/LightBoxes/ImportDialogBox.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Dropzone from 'react-dropzone'
+
+class ImportDialogBox extends Component {
+  handleFile = (files, e) => {
+    e.preventDefault() // prevent it from triggering the default drag-drop handler
+    this.props.onFileAdded(files[0])
+  }
+
+  render = () => {
+    return (
+      <div className="lightboxContent" id="import-dialog">
+        <div className="importDialogWrapper">
+          <div className="import-dialog">
+            <h3>EXPORT</h3>
+            <div className="export-csv import-blue-button" onClick={this.props.onExport('csv')}>
+              Export as CSV
+            </div>
+            <div className="export-json import-blue-button" onClick={this.props.onExport('json')}>
+              Export as JSON
+            </div>
+            <div className="download-screenshot import-blue-button" onClick={this.props.downloadScreenshot}>
+              Download screenshot
+            </div>
+            <h3>IMPORT</h3>
+            <p>To upload a file, drop it here:</p>
+            <Dropzone onDropAccepted={this.handleFile}
+              className="fileupload">
+              Drop files here!
+            </Dropzone>
+            <p>See <a href="https://docs.metamaps.cc/importing_and_exporting_data.html">docs.metamaps.cc</a> for instructions.</p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+ImportDialogBox.propTypes = {
+  onFileAdded: PropTypes.func,
+  downloadScreenshot: PropTypes.func,
+  onExport: PropTypes.func
+}
+
+export default ImportDialogBox

src/components/LightBoxes/index.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react'
 import About from './About'
 import CheatSheet from './CheatSheet'
 import ForkMap from './ForkMap'
+import ImportDialogBox from './ImportDialogBox'
 import Invite from './Invite'
 import NoIE from './NoIE'
 import SwitchMetacodes from './SwitchMetacodes'
@@ -10,6 +11,11 @@ import Tutorial from './Tutorial'
 
 class LightBoxes extends Component {
   render = () => {
+    const importProps = {
+      onFileAdded: this.props.importHandleFile,
+      downloadScreenshot: this.props.downloadScreenshot,
+      onExport: this.props.onExport
+    }
     return (
       <div id="lightbox_overlay">
         <div id="lightbox_main">
@@ -18,6 +24,7 @@ class LightBoxes extends Component {
             <About />
             <CheatSheet />
             <ForkMap />
+            <ImportDialogBox {...importProps} />
             <Invite inviteCode={this.props.inviteCode} />
             <NoIE />
             <SwitchMetacodes />

src/routes/App.js

@@ -44,7 +44,8 @@ class App extends Component {
             mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
             map, userRequested, requestAnswered, requestApproved, serverData,
             onRequestAccess, notifications, fetchNotifications,
-            markAsRead, markAsUnread, notificationsLoading } = this.props
+            markAsRead, markAsUnread, notificationsLoading,
+            importHandleFile, downloadScreenshot, onExport } = this.props
     const { pathname } = location || {}
     // this fixes a bug that happens otherwise when you logout
     const currentUser = this.props.currentUser && this.props.currentUser.id ? this.props.currentUser : null
@@ -73,7 +74,10 @@ class App extends Component {
                                 signInPage={pathname === '/login'} />}
       <Toast message={toast} />
       {children}
-      <LightBoxes inviteCode={currentUser && currentUser.get('invite_code')} />
+      <LightBoxes inviteCode={currentUser && currentUser.get('invite_code')}
+                  importHandleFile={importHandleFile}
+                  downloadScreenshot={downloadScreenshot}
+                  onExport={onExport} />
     </div>
   }
 }

src/routes/MapView/ImportDialogBox.js

@@ -1,43 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Dropzone from 'react-dropzone'
-
-class ImportDialogBox extends Component {
-  handleFile = (files, e) => {
-    e.preventDefault() // prevent it from triggering the default drag-drop handler
-    this.props.onFileAdded(files[0])
-  }
-
-  render = () => {
-    return (
-      <div className="import-dialog">
-        <h3>EXPORT</h3>
-        <div className="export-csv import-blue-button" onClick={this.props.onExport('csv')}>
-          Export as CSV
-        </div>
-        <div className="export-json import-blue-button" onClick={this.props.onExport('json')}>
-          Export as JSON
-        </div>
-        <div className="download-screenshot import-blue-button" onClick={this.props.downloadScreenshot}>
-          Download screenshot
-        </div>
-        <h3>IMPORT</h3>
-        <p>To upload a file, drop it here:</p>
-        <Dropzone onDropAccepted={this.handleFile}
-          className="fileupload"
-        >
-          Drop files here!
-        </Dropzone>
-        <p>See <a href="https://docs.metamaps.cc/importing_and_exporting_data.html">docs.metamaps.cc</a> for instructions.</p>
-      </div>
-    )
-  }
-}
-
-ImportDialogBox.propTypes = {
-  onFileAdded: PropTypes.func,
-  downloadScreenshot: PropTypes.func,
-  onExport: PropTypes.func
-}
-
-export default ImportDialogBox