bring importdialog into the react app

This commit is contained in:
Connor Turland 2018-03-08 10:43:39 -05:00
parent 3d985b6205
commit c7f2996397
8 changed files with 71 additions and 71 deletions

View file

@ -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

View file

@ -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')

View file

@ -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() {

View file

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

View file

@ -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

View file

@ -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 />

View file

@ -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>
}
}

View file

@ -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