lots of fixes

app/assets/stylesheets/clean.css.erb

@@ -169,6 +169,9 @@
 .upperRightMapButtons {
   right: 134px;
 }
+.unauthenticated .upperRightMapButtons {
+  right: 115px;
+}
 
 .upperRightIcon {
     width: 32px;

app/assets/stylesheets/request_access.scss.erb

@@ -1,7 +1,6 @@
 .viewOnly {
   float: left;
   margin-left: 16px;
-  display: none;
   height: 32px;
   border: 1px solid #BDBDBD;
   border-radius: 2px;
@@ -23,7 +22,7 @@
   }
 
   .requestNotice {
-    display: none;
+    display: inline-block;
     padding: 0 8px;
   }
 
@@ -42,16 +41,6 @@
   .requestNotAccepted {
     background-color: #c04f4f;
   }
-
-  &.sendRequest .requestAccess {
-    display: inline-block;
-  }
-  &.sentRequest .requestPending {
-    display: inline-block;
-  }
-  &.requestDenied .requestNotAccepted {
-    display: inline-block;
-  }
 }
 
 .request_access {

app/views/maps/conversation.html.erb

@@ -18,5 +18,6 @@
   Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
   Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
   Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.requests = <%= @allrequests.to_json.html_safe %>;
   Metamaps.ServerData.VisualizeType = "ForceDirected";
 </script>

app/views/maps/show.html.erb

@@ -18,5 +18,6 @@
   Metamaps.ServerData.Mappings = <%= @allmappings.to_json.html_safe %>;
   Metamaps.ServerData.Messages = <%= @allmessages.to_json.html_safe %>;
   Metamaps.ServerData.Stars = <%= @allstars.to_json.html_safe %>;
+  Metamaps.ServerData.requests = <%= @allrequests.to_json.html_safe %>;
   Metamaps.ServerData.VisualizeType = "ForceDirected";
 </script>

frontend/src/Metamaps/GlobalUI/ReactApp.js

@@ -101,6 +101,10 @@ const ReactApp = {
     return {
       mapId: self.mapId,
       map: Active.Map,
+      userRequested: Map.userRequested,
+      requestAnswered: Map.requestAnswered,
+      requestApproved: Map.requestApproved,
+      onRequestAccess: Map.requestAccess,
       mapIsStarred: Map.mapIsStarred,
       endActiveMap: Map.end,
       launchNewMap: Map.launch,

frontend/src/Metamaps/Map/index.js

@@ -26,110 +26,108 @@ const Map = {
     editedByActiveMapper: 'Metamaps:Map:events:editedByActiveMapper'
   },
   mapIsStarred: false,
+  requests: [],
+  userRequested: false,
+  requestAnswered: false,
+  requestApproved: false,
   init: function(serverData) {
     var self = Map
-
     self.mapIsStarred = serverData.mapIsStarred
-
+    self.requests = serverData.requests
+    self.setAccessRequest()
     $('#wrapper').mousedown(function(e) {
       if (e.button === 1) return false
     })
-
     GlobalUI.CreateMap.emptyForkMapForm = $('#fork_map').html()
-
     InfoBox.init(serverData, function updateThumbnail() {
       self.uploadMapScreenshot()
     })
     CheatSheet.init(serverData)
-
-    $('.viewOnly .requestAccess').click(self.requestAccess)
-
     $(document).on(Map.events.editedByActiveMapper, self.editedByActiveMapper)
   },
   requestAccess: function() {
-    $('.viewOnly').removeClass('sendRequest').addClass('sentRequest')
+    const self = Map
+    self.requests.push({
+      user_id: Active.Mapper.id,
+      answered: false,
+      approved: false
+    })
+    self.setAccessRequest()
     const mapId = Active.Map.id
     $.post({
       url: `/maps/${mapId}/access_request`
     })
     GlobalUI.notifyUser('Map creator will be notified of your request')
   },
-  setAccessRequest: function(requests, activeMapper) {
+  setAccessRequest: function() {
-    let className = 'isViewOnly '
+    const self = Map
-    if (activeMapper) {
+    if (Active.Mapper) {
-      const request = _find(requests, r => r.user_id === activeMapper.id)
+      const request = _find(self.requests, r => r.user_id === Active.Mapper.id)
-      if (!request) className += 'sendRequest'
+      if (!request) {
-      else if (request && !request.answered) className += 'sentRequest'
+        self.userRequested = false
-      else if (request && request.answered && !request.approved) className += 'requestDenied'
+        self.requestAnswered = false
+        self.requestApproved = false
+      }
+      else if (request && !request.answered) {
+        self.userRequested = true
+        self.requestAnswered = false
+        self.requestApproved = false
+      }
+      else if (request && request.answered && !request.approved) {
+        self.userRequested = true
+        self.requestAnswered = true
+        self.requestApproved = false
+      }
     }
-    $('.viewOnly').removeClass('sendRequest sentRequest requestDenied').addClass(className)
+    ReactApp.render()
   },
   launch: function(id) {
-    var start = function(data) {
+    const self = Map
-      Active.Map = new DataModelMap(data.map)
+    var start = function() {
-      DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
+      document.title = Active.Map.get('name') + ' | Metamaps'
-      DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
+      Map.setAccessRequest()
-      DataModel.Topics = new DataModel.TopicCollection(data.topics)
+      $('#filter_by_mapper h3').html('MAPPERS') // TODO: rewrite filter box in react
-      DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
-      DataModel.Mappings = new DataModel.MappingCollection(data.mappings)
-      DataModel.Messages = data.messages
-      DataModel.Stars = data.stars
-      DataModel.attachCollectionEvents()
-
-      var map = Active.Map
-      var mapper = Active.Mapper
-
-      document.title = map.get('name') + ' | Metamaps'
-
-      // add class to .wrapper for specifying whether you can edit the map
-      if (map.authorizeToEdit(mapper)) {
-        $('.wrapper').addClass('canEditMap')
-      } else {
-        Map.setAccessRequest(data.requests, mapper)
-      }
-
-      // add class to .wrapper for specifying if the map can
-      // be collaborated on
-      if (map.get('permission') === 'commons') {
-        $('.wrapper').addClass('commonsMap')
-      }
-
-      // set filter mapper H3 text
-      $('#filter_by_mapper h3').html('MAPPERS')
-
-      // build and render the visualization
       Visualize.type = 'ForceDirected'
       JIT.prepareVizData()
-
-      // update filters
       Filter.reset()
-
-      // reset selected arrays
       Selected.reset()
-
-      // set the proper mapinfobox content
       InfoBox.load()
-
-      // these three update the actual filter box with the right list items
       Filter.checkMetacodes()
       Filter.checkSynapses()
       Filter.checkMappers()
-
       Realtime.startActiveMap()
       Loading.hide()
-
+      $('#header_content').html(Active.Map.get('name')) // TODO: make this use ReactApp.mobileTitle to set this
-      // for mobile
+    }
-      $('#header_content').html(map.get('name'))
+    function isLoaded() {
+      if (InfoBox.generateBoxHTML) start()
+      else setTimeout(() => isLoaded(), 50)
+    }
+    if (Active.Map && Active.Map.id == id) {
+      isLoaded()
+    }
+    else {
+      Loading.show()
+      $.ajax({
+        url: '/maps/' + id + '/contains.json',
+        success: function(data) {
+          Active.Map = new DataModelMap(data.map)
+          DataModel.Mappers = new DataModel.MapperCollection(data.mappers)
+          DataModel.Collaborators = new DataModel.MapperCollection(data.collaborators)
+          DataModel.Topics = new DataModel.TopicCollection(data.topics)
+          DataModel.Synapses = new DataModel.SynapseCollection(data.synapses)
+          DataModel.Mappings = new DataModel.MappingCollection(data.mappings)
+          DataModel.Messages = data.messages
+          DataModel.Stars = data.stars
+          DataModel.attachCollectionEvents()
+          self.requests = data.requests
+          isLoaded()
+        }
+      })
     }
-    Loading.show()
-    $.ajax({
-      url: '/maps/' + id + '/contains.json',
-      success: start
-    })
   },
   end: function() {
     if (Active.Map) {
-      $('.wrapper').removeClass('canEditMap commonsMap')
       AutoLayout.resetSpiral()
 
       $('.rightclickmenu').remove()

frontend/src/components/App/Toast.js

@@ -1,14 +0,0 @@
-import React, { Component, PropTypes } from 'react'
-
-class Toast extends Component {
-  static propTypes = {
-    message: PropTypes.string
-  }
-
-  render () {
-    const html = {__html: this.props.html}
-    return <p id="toast" className="toast" dangerouslySetInnerHTML={html} />
-  }
-}
-
-export default Toast

frontend/src/components/App/UpperLeftUI.js

@@ -3,13 +3,20 @@ import { Link } from 'react-router'
 
 class UpperLeftUI extends Component {
   static propTypes = {
-    currentUser: PropTypes.object
+    currentUser: PropTypes.object,
+    map: PropTypes.object,
+    userRequested: PropTypes.bool,
+    requestAnswered: PropTypes.bool,
+    requestApproved: PropTypes.bool,
+    onRequestClick: PropTypes.func
   }
 
   render () {
+    const { map, currentUser, userRequested, requestAnswered, requestApproved, onRequestClick } = this.props
     return <div className="upperLeftUI">
       <div className="homeButton">
-        <Link to="/">METAMAPS</Link>
+        {currentUser && <Link to="/">METAMAPS</Link>}
+        {!currentUser && <a href="/">METAMAPS</a>}
       </div>
       <div className="sidebarSearch">
         <input type="text" className="sidebarSearchField" placeholder="Search for topics, maps, and mappers..." />
@@ -17,12 +24,12 @@ class UpperLeftUI extends Component {
         <div className="sidebarSearchIcon"></div>
         <div className="clearfloat"></div>
       </div>
-      <div className="viewOnly">
+      {map && !map.authorizeToEdit(currentUser) && <div className="viewOnly">
         <div className="eyeball">View Only</div>
-        <div className="requestAccess requestNotice">Request Access</div>
+        {currentUser && !userRequested && <div className="requestAccess requestNotice" onClick={onRequestClick}>Request Access</div>}
-        <div className="requestPending requestNotice">Request Pending</div>
+        {userRequested && !requestAnswered && <div className="requestPending requestNotice">Request Pending</div>}
-        <div className="requestNotAccepted requestNotice">Request Not Accepted</div>
+        {userRequested && requestAnswered && !requestApproved && <div className="requestNotAccepted requestNotice">Request Not Accepted</div>}
-      </div>
+      </div>}
       <div className="clearfloat"></div>
     </div>
   }

frontend/src/components/App/index.js

@@ -1,7 +1,6 @@
 import React, { Component, PropTypes } from 'react'
 
 import MobileHeader from './MobileHeader'
-import Toast from './Toast'
 import UpperLeftUI from './UpperLeftUI'
 import UpperRightUI from './UpperRightUI'
 
@@ -16,7 +15,12 @@ class App extends Component {
     mobileTitleWidth: PropTypes.number,
     mobileTitleClick: PropTypes.func,
     openInviteLightbox: PropTypes.func,
-    toggleAccountBox: PropTypes.func
+    toggleAccountBox: PropTypes.func,
+    map: PropTypes.object,
+    userRequested: PropTypes.bool,
+    requestAnswered: PropTypes.bool,
+    requestApproved: PropTypes.bool,
+    onRequestAccess: PropTypes.func
   }
 
   static childContextTypes = {
@@ -32,7 +36,8 @@ class App extends Component {
   render () {
     const { children, toast, currentUser, unreadNotificationsCount, openInviteLightbox,
             mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
-            toggleAccountBox } = this.props
+            toggleAccountBox, map, userRequested, requestAnswered, requestApproved,
+            onRequestAccess } = this.props
     const { pathname } = location || {}
     const unauthedHome = pathname === '/' && !currentUser
     return <div className="wrapper" id="wrapper">
@@ -41,13 +46,17 @@ class App extends Component {
                                mobileTitle={mobileTitle}
                                mobileTitleWidth={mobileTitleWidth}
                                onTitleClick={mobileTitleClick} />}
-      {!unauthedHome && <UpperLeftUI currentUser={currentUser} />}
+      {!unauthedHome && <UpperLeftUI currentUser={currentUser}
+                                     map={map}
+                                     userRequested={userRequested}
+                                     requestAnswered={requestAnswered}
+                                     requestApproved={requestApproved}
+                                     onRequestClick={onRequestAccess} />}
       {!mobile && <UpperRightUI currentUser={currentUser}
                                 unreadNotificationsCount={unreadNotificationsCount}
                                 openInviteLightbox={openInviteLightbox}
                                 signInPage={pathname === '/login'}
                                 onClickAccount={toggleAccountBox} />}
-      <Toast message={toast} />
       {!mobile && currentUser && <a className='feedback-icon' target='_blank' href='https://hylo.com/c/metamaps'></a>}
       {children}
     </div>

frontend/src/components/MapView/InfoAndHelp.js

@@ -10,7 +10,6 @@ class InfoAndHelp extends Component {
     onHelpClick: PropTypes.func,
     onMapStar: PropTypes.func,
     onMapUnstar: PropTypes.func,
-
     onInfoClick: PropTypes.func,
     infoBoxhtml: PropTypes.string
   }
@@ -22,9 +21,9 @@ class InfoAndHelp extends Component {
     const onStarClick = mapIsStarred ? onMapUnstar : onMapStar
     return <div className="infoAndHelp">
       <MapInfoBox map={map} currentUser={currentUser} infoBoxHtml={infoBoxHtml} />
-      <div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
+      {currentUser && <div className={`starMap infoElement mapElement ${starclassName}`} onClick={onStarClick}>
         <div className="tooltipsAbove">{tooltip}</div>
-      </div>
+      </div>}
       <div className="mapInfoIcon infoElement mapElement" onClick={onInfoClick}>
         <div className="tooltipsAbove">Map Info</div>
       </div>

frontend/src/components/MapView/index.js

@@ -82,7 +82,7 @@ class MapView extends Component {
                   filterBoxHtml={filterBoxHtml} />
       <DataVis />
       <TopicCard {...this.props} />
-      <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />
+      {currentUser && <MapChat {...this.props} onOpen={onChatOpen} onClose={onChatClose} chatOpen={chatOpen} />}
       <MapControls onClickZoomExtents={onZoomExtents}
                    onClickZoomIn={onZoomIn}
                    onClickZoomOut={onZoomOut} />

frontend/src/components/makeRoutes.js

@@ -23,6 +23,7 @@ export default function makeRoutes (currentUser) {
     <Route path="maps/:id">
       <IndexRoute component={MapView} />
       <Route path="conversation" component={MapView} />
+      <Route path="request_access" component={nullComponent} />
     </Route>
     <Route path="login" component={nullComponent} />
     <Route path="join" component={nullComponent} />