Merge pull request #661 from metamaps/feature/file-upload-component

set up a dialog box to help with import/export

.eslintrc.js

@@ -1,6 +1,11 @@
 module.exports = {
   "sourceType": "module",
   "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "extends": "standard",
   "installedESLint": true,
   "env": {
@@ -13,6 +18,8 @@ module.exports = {
     "react"
   ],
   "rules": {
+    "react/jsx-uses-react": [2],
+    "react/jsx-uses-vars": [2],
     "yoda": [2, "never", { "exceptRange": true }]
   }
 }

app/assets/javascripts/src/Metamaps.Erb.js.erb

@@ -15,6 +15,7 @@ Metamaps.Erb['icons/wildcard.png'] = '<%= asset_path('icons/wildcard.png') %>'
 Metamaps.Erb['topic_description_signifier.png'] = '<%= asset_path('topic_description_signifier.png') %>'
 Metamaps.Erb['topic_link_signifier.png'] = '<%= asset_path('topic_link_signifier.png') %>'
 Metamaps.Erb['synapse16.png'] = '<%= asset_path('synapse16.png') %>'
+Metamaps.Erb['import-example.png'] = '<%= asset_path('import-example.png') %>'
 Metamaps.Erb['sounds/MM_sounds.mp3'] = '<%= asset_path 'sounds/MM_sounds.mp3' %>'
 Metamaps.Erb['sounds/MM_sounds.ogg'] = '<%= asset_path 'sounds/MM_sounds.ogg' %>'
 Metamaps.Metacodes = <%= Metacode.all.to_json.gsub(%r[(icon.*?)(\"},)], '\1?purple=stupid\2').html_safe %>

app/assets/stylesheets/application.scss.erb

@@ -1526,9 +1526,8 @@ h3.filterBox {
     background-image: url(<%= asset_data_uri('permissions32_sprite.png') %>);
 }
 /* map info box */
-/* map info box */
 
-.wrapper div.mapInfoBox {
+.wrapper .mapInfoBox {
     display: none;
     position: absolute;
     bottom: 40px;
@@ -1536,12 +1535,40 @@ h3.filterBox {
     background-color: #424242;
     color: #F5F5F5;
     border-radius: 2px;
+    box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
+    text-align: center;
+    font-style: normal;
+}
+.import-dialog{
+  button {
+    margin: 1em 0.5em;
+  }
+  .import-blue-button {
+    display: inline-block;
+    box-sizing: border-box;
+    margin: 0.75em;
+    padding: 0.75em;
+    height: 3em;
+    background-color: #AAB0FB;
+    border-radius: 0.3em;
+    color: white;
+    cursor: pointer;
+  }
+  .fileupload {
+    box-sizing: border-box;
+    margin: 0.75em;
+    padding: 0.75em;
+    height: 3em;
+    border: 3px dashed #AAB0FB;
+    width: 75%;
+    text-align: center;
+    cursor: pointer;
+  }
+}
+.wrapper .mapInfoBox {
     width: 360px;
     min-height: 300px;
     padding: 0;
-    font-style: normal;
-    text-align: center;
-    box-shadow: 0 3px 3px rgba(0,0,0,0.23), 0px 3px 3px rgba(0,0,0,0.16);
 }
 .requestTitle {
     display: none;
@@ -2028,17 +2055,17 @@ and it won't be important on password protected instances */
     left: 0;
     width: 100%;
     height: 100%;
-    position: fixed;
+    position: absolute;
     z-index: 1000000;
     display: none;
 }
 #lightbox_main {
     width: 800px;
-    height: auto;
     margin: 0 auto;
     z-index: 2;
     position: relative;
-    top: 50%;
+    top: 5vh;
+    height: 90vh;
     background-color: transparent;
     color: black;
 }
@@ -2077,8 +2104,11 @@ and it won't be important on password protected instances */
     background-position: center center;
 }
 #lightbox_content {
-    width: 552px;
+    width: 800px;
-    height: 434px;
+    height: 500px;
+    max-height: 90vh;
+    box-sizing: border-box;
+    overflow-y: auto;
     background-color: #e0e0e0;
     padding: 64px 124px 64px 124px;
     box-shadow: 0px 6px 3px rgba(0, 0, 0, 0.23), 10px 10px 10px rgba(0, 0, 0, 0.19);

app/assets/stylesheets/clean.css.erb

@@ -188,7 +188,7 @@
 .upperRightIcon {
     width: 32px;
     height: 32px;
-    background-image: url(<%= asset_data_uri('topright_sprite.png') %>);
+    background-image: url(<%= asset_path('topright_sprite.png') %>);
     background-repeat: no-repeat;
     cursor: pointer;
 }
@@ -325,7 +325,7 @@
 }
 
 .fullWidthWrapper.withPartners {
-    background: url(<%= asset_data_uri('homepage_bg_fade.png') %>) no-repeat center -300px;
+    background: url(<%= asset_path('homepage_bg_fade.png') %>) no-repeat center -300px;
 }
 .homeWrapper.homePartners {
     padding: 64px 0 280px;
@@ -364,7 +364,7 @@
     cursor: pointer;
 }
 .openCheatsheet {
-    background-image: url(<%= asset_data_uri('help_sprite.png') %>);
+    background-image: url(<%= asset_path('help_sprite.png') %>);
     background-repeat:no-repeat;
 }
 .openCheatsheet:hover {
@@ -373,7 +373,7 @@
 .mapInfoIcon {
 	position: relative;
 	top: 56px; /* puts it just offscreen */
-    background-image: url(<%= asset_data_uri('mapinfo_sprite.png') %>);
+    background-image: url(<%= asset_path('mapinfo_sprite.png') %>);
     background-repeat:no-repeat;
 }
 .mapInfoIcon:hover {
@@ -382,8 +382,14 @@
 .mapPage .mapInfoIcon {
 	top: 0;
 }
+.importDialog {
+  background-image: url(<%= asset_path('import.png') %>);
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  width: 32px;
+}
 .starMap {
-  background-image: url(<%= asset_data_uri('starmap_sprite.png') %>);
+  background-image: url(<%= asset_path('starmap_sprite.png') %>);
   background-position: 0 0;
   background-repeat: no-repeat;
   width: 32px;
@@ -437,7 +443,7 @@
 .takeScreenshot {
     margin-bottom: 5px;
     border-radius: 2px;
-    background-image: url(<%= asset_data_uri 'screenshot_sprite.png' %>);
+    background-image: url(<%= asset_path 'screenshot_sprite.png' %>);
     display: none;
 }
 .takeScreenshot:hover {
@@ -450,7 +456,7 @@
 .zoomExtents {
     margin-bottom:5px;
     border-radius: 2px;
-    background-image: url(<%= asset_data_uri('extents_sprite.png') %>);
+    background-image: url(<%= asset_path('extents_sprite.png') %>);
 }
 
 .zoomExtents:hover {
@@ -458,7 +464,7 @@
 }
 
 .zoomExtents:hover .tooltips, .zoomIn:hover .tooltips, .zoomOut:hover .tooltips, .takeScreenshot:hover .tooltips, .sidebarFilterIcon:hover .tooltipsUnder, .sidebarForkIcon:hover .tooltipsUnder, .addMap:hover .tooltipsUnder, .authenticated .sidebarAccountIcon:hover .tooltipsUnder,
- .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, .starMap:hover .tooltipsAbove, .openMetacodeSwitcher:hover .tooltipsAbove, .pinCarousel:not(.isPinned):hover .tooltipsAbove.helpPin, .pinCarousel.isPinned:hover .tooltipsAbove.helpUnpin  {
+ .mapInfoIcon:hover .tooltipsAbove, .openCheatsheet:hover .tooltipsAbove, .chat-button:hover .tooltips, importDialog:hover .tooltipsAbove, .starMap:hover .tooltipsAbove, .openMetacodeSwitcher:hover .tooltipsAbove, .pinCarousel:not(.isPinned):hover .tooltipsAbove.helpPin, .pinCarousel.isPinned:hover .tooltipsAbove.helpUnpin  {
     display: block;
 }
 
@@ -623,7 +629,7 @@
 }
 
 .zoomIn {
-    background-image: url(<%= asset_data_uri('zoom_sprite.png') %>);
+    background-image: url(<%= asset_path('zoom_sprite.png') %>);
     background-position: 0 /…0;
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
@@ -632,7 +638,7 @@
     background-position: -32px 0;
 }
 .zoomOut {
-    background-image: url(<%= asset_data_uri('zoom_sprite.png') %>);
+    background-image: url(<%= asset_path('zoom_sprite.png') %>);
     background-position:0 -32px;
     border-bottom-left-radius: 2px;
     border-bottom-right-radius: 2px;
@@ -740,23 +746,23 @@
     left:5px;
 }
 .exploreMapsCenter .myMaps .exploreMapsIcon {
-    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -32px 0;
 }
 .exploreMapsCenter .sharedMaps .exploreMapsIcon {
-    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -128px 0;
 }
 .exploreMapsCenter .activeMaps .exploreMapsIcon {
-    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: 0 0;
 }
 .exploreMapsCenter .featuredMaps .exploreMapsIcon {
-    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -96px 0;
 }
 .exploreMapsCenter .starredMaps .exploreMapsIcon {
-    background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
+    background-image: url(<%= asset_path 'exploremaps_sprite.png' %>);
     background-position: -96px 0;
 }
 .myMaps:hover .exploreMapsIcon, .myMaps.active .exploreMapsIcon {

app/assets/stylesheets/mobile.scss.erb

@@ -56,7 +56,7 @@
     width: 100%;
   }
   
-  .wrapper div.mapInfoBox {
+  .wrapper .mapInfoBox {
     position: fixed;
     top: 50px;
     right: 0px;

app/views/layouts/_lowermapelements.html.erb

@@ -8,11 +8,11 @@
 <div class="infoAndHelp">
 	<%= render :partial => 'maps/mapinfobox' %>
 
-    <% starred = current_user && @map && current_user.starred_map?(@map)
+  <% starred = current_user && @map && current_user.starred_map?(@map)
-       starClass = starred ? 'starred' : ''
+     starClass = starred ? 'starred' : ''
-       tooltip = starred ? 'Star' : 'Unstar'  %> 
+     tooltip = starred ? 'Star' : 'Unstar'  %> 
-    <div class="starMap infoElement mapElement <%= starClass %>"><div class="tooltipsAbove"><%= tooltip %></div></div>
+  <div class="starMap infoElement mapElement <%= starClass %>"><div class="tooltipsAbove"><%= tooltip %></div></div>
-    <div class="mapInfoIcon infoElement mapElement"><div class="tooltipsAbove">Map Info</div></div>
+  <div class="mapInfoIcon infoElement mapElement"><div class="tooltipsAbove">Map Info</div></div>
-    <div class="openCheatsheet openLightbox infoElement mapElement" data-open="cheatsheet"><div class="tooltipsAbove">Help</div></div>
+  <div class="openCheatsheet openLightbox infoElement mapElement" data-open="cheatsheet"><div class="tooltipsAbove">Help</div></div>
-    <div class="clearfloat"></div>
+  <div class="clearfloat"></div>
 </div>

app/views/layouts/_upperelements.html.erb

@@ -19,6 +19,10 @@
 
 <div class="upperRightUI">
   <div class="mapElement upperRightEl upperRightMapButtons">
+    <div class="importDialog infoElement mapElement openLightbox" data-open="import-dialog-lightbox">
+      <div class="tooltipsAbove">Import data</div>
+    </div>
+
     <!-- filtering -->
     <div class="sidebarFilter upperRightEl">
       <div class="sidebarFilterIcon upperRightIcon"><div class="tooltipsUnder">Filter</div></div>

frontend/src/Metamaps/GlobalUI/ImportDialog.js

@@ -0,0 +1,38 @@
+/* global $ */
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import outdent from 'outdent'
+
+import ImportDialogBox from '../../components/ImportDialogBox'
+
+import PasteInput from '../PasteInput'
+
+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-lightbox">
+        <div class="importDialogWrapper" />
+      </div>
+    `))
+    ReactDOM.render(React.createElement(ImportDialogBox, {
+      onFileAdded: PasteInput.handleFile,
+      exampleImageUrl: serverData['import-example.png']
+    }), $('.importDialogWrapper').get(0))
+  },
+  show: function () {
+    ImportDialog.openLightbox('import-dialog')
+  },
+  hide: function () {
+    ImportDialog.closeLightbox('import-dialog')
+  }
+}
+
+export default ImportDialog

frontend/src/Metamaps/GlobalUI/index.js

@@ -6,6 +6,7 @@ import Create from '../Create'
 import Search from './Search'
 import CreateMap from './CreateMap'
 import Account from './Account'
+import ImportDialog from './ImportDialog'
 
 /*
  * Metamaps.Backbone
@@ -21,6 +22,7 @@ const GlobalUI = {
     self.Search.init()
     self.CreateMap.init()
     self.Account.init()
+    self.ImportDialog.init(Metamaps.Erb, self.openLightbox, self.closeLightbox)
 
     if ($('#toast').html().trim()) self.notifyUser($('#toast').html())
 
@@ -141,5 +143,5 @@ const GlobalUI = {
   }
 }
 
-export { Search, CreateMap, Account }
+export { Search, CreateMap, Account, ImportDialog }
 export default GlobalUI

frontend/src/Metamaps/Import.js

@@ -411,6 +411,7 @@ const Import = {
     newKey = newKey.replace(/\s/g, '') // remove whitespace
     if (newKey === 'url') newKey = 'link'
     if (newKey === 'title') newKey = 'name'
+    if (newKey === 'label') newKey = 'desc'
     if (newKey === 'description') newKey = 'desc'
     if (newKey === 'direction') newKey = 'category'
     return newKey

frontend/src/Metamaps/Map/index.js

@@ -40,6 +40,11 @@ const Map = {
   init: function () {
     var self = Map
 
+    // prevent right clicks on the main canvas, so as to not get in the way of our right clicks
+    $('#wrapper').on('contextmenu', function (e) {
+      return false
+    })
+
     $('.starMap').click(function () {
       if ($(this).is('.starred')) self.unstar()
       else self.star()
@@ -52,7 +57,7 @@ const Map = {
     GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
 
     self.updateStar()
-    self.InfoBox.init()
+    InfoBox.init()
     CheatSheet.init()
 
     $(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
@@ -102,7 +107,7 @@ const Map = {
       Selected.reset()
 
       // set the proper mapinfobox content
-      Map.InfoBox.load()
+      InfoBox.load()
 
       // these three update the actual filter box with the right list items
       Filter.checkMetacodes()
@@ -132,7 +137,7 @@ const Map = {
       Create.newTopic.hide(true) // true means force (and override pinned)
       Create.newSynapse.hide()
       Filter.close()
-      Map.InfoBox.close()
+      InfoBox.close()
       Realtime.endActiveMap()
     }
   },

frontend/src/Metamaps/PasteInput.js

@@ -21,16 +21,7 @@ const PasteInput = {
       e.preventDefault();
       var coords = Util.pixelsToCoords({ x: e.clientX, y: e.clientY })
       if (e.dataTransfer.files.length > 0) {
-        var fileReader = new window.FileReader()
+        self.handleFile(e.dataTransfer.files[0], coords)
-        fileReader.readAsText(e.dataTransfer.files[0])
-        fileReader.onload = function(e) {
-          var text = e.currentTarget.result
-          if (text.substring(0,5) === '<?xml') {
-            // assume this is a macOS .webloc link
-            text = text.replace(/[\s\S]*<string>(.*)<\/string>[\s\S]*/m, '$1')
-          }
-          self.handle(text, coords)
-        }
       }
       // OMG import bookmarks 😍
       if (e.dataTransfer.items.length > 0) {
@@ -52,7 +43,21 @@ const PasteInput = {
     })
   },
 
-  handle: function(text, coords) {
+  handleFile: (file, coords = null) => {
+    var self = PasteInput
+    var fileReader = new window.FileReader()
+    fileReader.readAsText(file)
+    fileReader.onload = function(e) {
+      var text = e.currentTarget.result
+      if (text.substring(0,5) === '<?xml') {
+        // assume this is a macOS .webloc link
+        text = text.replace(/[\s\S]*<string>(.*)<\/string>[\s\S]*/m, '$1')
+      }
+      self.handle(text, coords)
+    }
+  },
+
+  handle: function(text, coords = null) {
     var self = PasteInput
 
     if (text.match(self.URL_REGEX)) {

frontend/src/Metamaps/index.js

@@ -10,7 +10,7 @@ import Create from './Create'
 import Debug from './Debug'
 import Filter from './Filter'
 import GlobalUI, {
-  Search, CreateMap, Account as GlobalUI_Account
+  Search, CreateMap, ImportDialog, Account as GlobalUI_Account
 } from './GlobalUI'
 import Import from './Import'
 import JIT from './JIT'
@@ -47,6 +47,7 @@ Metamaps.GlobalUI = GlobalUI
 Metamaps.GlobalUI.Search = Search
 Metamaps.GlobalUI.CreateMap = CreateMap
 Metamaps.GlobalUI.Account = GlobalUI_Account
+Metamaps.GlobalUI.ImportDialog = ImportDialog
 Metamaps.Import = Import
 Metamaps.JIT = JIT
 Metamaps.Listeners = Listeners

frontend/src/components/ImportDialogBox.js

@@ -0,0 +1,76 @@
+import React, { PropTypes, Component } from 'react'
+import Dropzone from 'react-dropzone'
+
+class ImportDialogBox extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      showImportInstructions: false
+    }
+  }
+
+  handleExport = format => () => {
+    window.open(`${window.location.pathname}/export.${format}`, '_blank')
+  }
+
+  handleFile = (files, e) => {
+    // for some reason it uploads twice, so we need this debouncer
+    // eslint-disable-next-line no-return-assign
+    this.debouncer = this.debouncer || window.setTimeout(() => this.debouncer = null, 10)
+    if (!this.debouncer) {
+      this.props.onFileAdded(files[0])
+    }
+  }
+
+  toggleShowInstructions = e => {
+    this.setState({
+      showImportInstructions: !this.state.showImportInstructions
+    })
+  }
+
+  render = () => {
+    return (
+      <div className="import-dialog">
+        <h3>EXPORT</h3>
+        <div className="import-blue-button" onClick={this.handleExport('csv')}>
+          Export as CSV
+        </div>
+        <div className="import-blue-button" onClick={this.handleExport('json')}>
+          Export as JSON
+        </div>
+        <h3>IMPORT</h3>
+        <p>To upload a file, drop it here:</p>
+        <Dropzone onDropAccepted={this.handleFile}
+          className="fileupload"
+        >
+          Drop files here!
+        </Dropzone>
+        <p>
+          <a onClick={this.toggleShowInstructions} style={{ textDecoration: 'underline', cursor: 'pointer' }}>
+            Show/hide import instructions
+          </a>
+        </p>
+        {!this.state.showImportInstructions ? null : (<div>
+          <p>
+            You can import topics and synapses by uploading a spreadsheet here.
+            The file should be in comma-separated format (when you save, change the
+            filetype from .xls to .csv).
+          </p>
+          <img src={this.props.exampleImageUrl} style={{ width: '100%' }} />
+          <p style={{ marginTop: '1em' }}>You can choose which columns to include in your data. Topics must have a name field. Synapses must have Topic 1 and Topic 2.</p>
+          <p>&nbsp;</p>
+          <p> * There are many valid import formats. Try exporting a map to see what columns you can include in your import data. You can also copy-paste from Excel to import, or import JSON.</p>
+          <p> * If you are importing a list of links, you can use a Link column in place of the Name column.</p>
+        </div>)}
+      </div>
+    )
+  }
+}
+
+ImportDialogBox.propTypes = {
+  onFileAdded: PropTypes.func,
+  exampleImageUrl: PropTypes.string
+}
+
+export default ImportDialogBox

frontend/src/components/Maps/Header.js

@@ -21,15 +21,15 @@ class Header extends Component {
     const { signedIn, section } = this.props
 
     const activeClass = (title) => {
-      let forClass = "exploreMapsButton"
+      let forClass = 'exploreMapsButton'
-      forClass += " " + title + "Maps"
+      forClass += ' ' + title + 'Maps'
-      if (title == "my" && section == "mine" ||
+      if (title === 'my' && section === 'mine' ||
-          title == section) forClass += " active"
+          title === section) forClass += ' active'
       return forClass
     }
 
-    const explore = section == "mine" || section == "active" || section == "starred" || section == "shared" || section == "featured"
+    const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
-    const mapper = section == "mapper"
+    const mapper = section === 'mapper'
 
     return (
       <div id="exploreMapsHeader">
@@ -38,31 +38,31 @@ class Header extends Component {
             <div className="exploreMapsCenter">
               <MapLink show={signedIn && explore}
                 href="/explore/mine"
-                linkClass={activeClass("my")}
+                linkClass={activeClass('my')}
                 data-router="true"
                 text="My Maps"
               />
               <MapLink show={signedIn && explore}
                 href="/explore/shared"
-                linkClass={activeClass("shared")}
+                linkClass={activeClass('shared')}
                 data-router="true"
                 text="Shared With Me"
               />
               <MapLink show={signedIn && explore}
                 href="/explore/starred"
-                linkClass={activeClass("starred")}
+                linkClass={activeClass('starred')}
                 data-router="true"
                 text="Starred By Me"
               />
               <MapLink show={explore}
-                href={signedIn ? "/" : "/explore/active"}
+                href={signedIn ? '/' : '/explore/active'}
-                linkClass={activeClass("active")}
+                linkClass={activeClass('active')}
                 data-router="true"
                 text="Global"
               />
               <MapLink show={!signedIn && explore}
                 href="/explore/featured"
-                linkClass={activeClass("featured")}
+                linkClass={activeClass('featured')}
                 data-router="true"
                 text="Featured Maps"
               />

frontend/src/components/Maps/MapCard.js

@@ -3,7 +3,7 @@ import React, { Component, PropTypes } from 'react'
 class MapCard extends Component {
   render = () => {
     const { map, currentUser } = this.props
-    
+
     function capitalize (string) {
       return string.charAt(0).toUpperCase() + string.slice(1)
     }
@@ -16,12 +16,12 @@ class MapCard extends Component {
     const truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
     const truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
     const editPermission = map.authorizeToEdit(currentUser) ? 'canEdit' : 'cannotEdit'
-    
+
     return (
       <div className="map" id={ map.id }>
         <a href={ '/maps/' + map.id } data-router="true">
           <div className={ 'permission ' + editPermission }>
-  	        <div className="mapCard">                                         
+            <div className="mapCard">
               <span className="title" title={ map.get('name') }>
                 { truncatedName }
               </span>
@@ -46,7 +46,7 @@ class MapCard extends Component {
                     { map.get('topic_count') }
                   </span>
                   { map.get('topic_count') === 1 ? ' topic' : ' topics' }
-                  </div> 
+                  </div>
                 <div className="metadataSection mapPermission">
                   { map.get('permission') ? capitalize(map.get('permission')) : 'Commons' }
                 </div>
@@ -57,7 +57,7 @@ class MapCard extends Component {
                   { map.get('synapse_count') === 1 ? ' synapse' : ' synapses' }
                 </div>
                 <div className="clearfloat"></div>
-              </div>                                         
+              </div>
             </div>
           </div>
         </a>

frontend/src/components/Maps/MapperCard.js

@@ -3,14 +3,14 @@ import React, { Component, PropTypes } from 'react'
 class MapperCard extends Component {
   render = () => {
     const { user } = this.props
-    
+
     return (
       <div className="mapper">
-        <div className="mapperCard">                                                 
+        <div className="mapperCard">
           <div className="mapperImage">
             <img src={ user.image } width="96" height="96" />
-          </div> 
+          </div>
-          <div className="mapperName" title={ user.name }>                                                  
+          <div className="mapperName" title={ user.name }>
             { user.name }
           </div>
           <div className="mapperInfo">
@@ -19,10 +19,10 @@ class MapperCard extends Component {
           </div>
           <div className="mapperMetadata">
              <div className="metadataSection metadataMaps"><div>{ user.numMaps }</div>maps</div>
-             <div className="metadataSection metadataTopics"><div>{ user.numTopics }</div>topics</div> 
+             <div className="metadataSection metadataTopics"><div>{ user.numTopics }</div>topics</div>
-             <div className="metadataSection metadataSynapses"><div>{ user.numSynapses }</div>synapses</div> 
+             <div className="metadataSection metadataSynapses"><div>{ user.numSynapses }</div>synapses</div>
-             <div className="clearfloat"></div>                               
+             <div className="clearfloat"></div>
-          </div>                                         
+          </div>
         </div>
       </div>
     )

frontend/src/components/Maps/index.js

@@ -1,20 +1,19 @@
 import React, { Component, PropTypes } from 'react'
-import Header from './Header.js'
+import Header from './Header'
-import MapperCard from './MapperCard.js'
+import MapperCard from './MapperCard'
-import MapCard from './MapCard.js'
+import MapCard from './MapCard'
-import MapListItem from './MapListItem.js'
+import MapListItem from './MapListItem'
 
 class Maps extends Component {
   render = () => {
     const { maps, currentUser, section, displayStyle, user, moreToLoad, loadMore } = this.props
     let mapElements
 
-    if (displayStyle == 'grid') {
+    if (displayStyle === 'grid') {
       mapElements = maps.models.map(function (map) {
         return <MapCard key={ map.id } map={ map } currentUser={ currentUser } />
       })
-    }
+    } else if (displayStyle === 'list') {
-    else if (displayStyle == 'list') {
       mapElements = maps.models.map(function (map) {
         return <MapListItem key={ map.id } map={ map } />
       })
@@ -28,9 +27,10 @@ class Maps extends Component {
             { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
             { mapElements }
             <div className='clearfloat'></div>
-            { moreToLoad ? 
+            {!moreToLoad ? null : [
-                [<button className="button loadMore" onClick={ loadMore }>load more</button>, <div className='clearfloat'></div>]
+              <button className="button loadMore" onClick={ loadMore }>load more</button>,
-                : null }
+              <div className='clearfloat'></div>
+            ]}
           </div>
         </div>
         <Header signedIn={ !!currentUser }

package.json

@@ -33,6 +33,7 @@
     "outdent": "0.2.1",
     "react": "15.3.2",
     "react-dom": "15.3.2",
+    "react-dropzone": "3.6.0",
     "socket.io": "0.9.12",
     "webpack": "1.13.2"
   },