bug fixes and make active class auto

2017-10-14 12:03:05 -04:00 · 2017-10-14 12:03:05 -04:00 · 693e6f5e10
commit 693e6f5e10
parent a1d4c99ff6
9 changed files with 124 additions and 71 deletions
--- a/app/assets/stylesheets/application.scss.erb
+++ b/app/assets/stylesheets/application.scss.erb
@ -826,6 +826,7 @@ label {
    font-size: 14px;
    line-height: 14px;
    color: #757575;
+    cursor: pointer;
 }
 .accountListItem:hover {
    color: #424242;
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -6,10 +6,10 @@
 #%>

 <%= render :partial => 'layouts/head' %>
-<body class="<%= authenticated? ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
+<body class="<%= current_user ? "authenticated" : "unauthenticated" %> controller-<%= controller_name %> action-<%= action_name %>">
    <div class="main" id="react-app"></div>
    <%= yield %>
-    <% if authenticated? %>
+    <% if current_user %>
        <% # for creating and pulling in topics and synapses %>
        <% if controller_name == 'maps' && action_name == "conversation" %>
          <%= render :partial => 'maps/newtopicsecret' %>
--- a/config/application.rb
+++ b/config/application.rb
@ -25,9 +25,9 @@ module Metamaps
    config.encoding = 'utf-8'

    config.to_prepare do
-      Doorkeeper::ApplicationsController.layout "application"
-      Doorkeeper::AuthorizationsController.layout "application"
-      Doorkeeper::AuthorizedApplicationsController.layout "application"
+      Doorkeeper::ApplicationsController.layout 'application'
+      Doorkeeper::AuthorizationsController.layout 'application'
+      Doorkeeper::AuthorizedApplicationsController.layout 'application'
      Doorkeeper::ApplicationController.helper ApplicationHelper
    end

--- a/frontend/src/components/App/NavBarLink.js
+++ b/frontend/src/components/App/NavBarLink.js
@ -3,26 +3,63 @@ import PropTypes from 'prop-types'
 import { Link } from 'react-router'
 import _ from 'lodash'

-const NavBarLink = props => {
-  const { show, text, href, linkClass } = props
-  const otherProps = _.omit(props, ['show', 'text', 'href', 'linkClass'])
-  if (!show) {
-    return null
-  }
+const PROP_LIST = [
+  'matchChildRoutes',
+  'hardReload',
+  'show',
+  'text',
+  'href',
+  'linkClass'
+]

-  return (
-    <Link { ...otherProps } to={href} className={'navBarButton ' + linkClass}>
-      <div className="navBarIcon"></div>
-      {text}
-    </Link>
-  )
-}
-
-NavBarLink.propTypes = {
+class NavBarLink extends Component {
+  static propTypes = {
+    matchChildRoutes: PropTypes.bool,
+    hardReload: PropTypes.bool,
    show: PropTypes.bool,
    text: PropTypes.string,
    href: PropTypes.string,
    linkClass: PropTypes.string
+  }
+
+  static contextTypes = {
+    location: PropTypes.object
+  }
+
+  render = () => {
+    const {
+      matchChildRoutes,
+      hardReload,
+      show,
+      text,
+      href,
+      linkClass
+    } = this.props
+    const { location } = this.context
+    const otherProps = _.omit(this.props, PROP_LIST)
+    const classes = ['navBarButton', linkClass]
+    const active = matchChildRoutes ?
+      location.pathname.startsWith(href) :
+      location.pathname === href
+    if (active) classes.push('active')
+    if (!show) {
+      return null
+    }
+    if (hardReload) {
+      return (
+        <a { ...otherProps } href={href} className={classes.join(' ')}>
+          <div className="navBarIcon"></div>
+          {text}
+        </a>
+      )
+    }
+    return (
+      <Link { ...otherProps } to={href} className={classes.join(' ')}>
+        <div className="navBarIcon"></div>
+        {text}
+      </Link>
+    )
+  }
 }

 export default NavBarLink
--- a/frontend/src/components/App/index.js
+++ b/frontend/src/components/App/index.js
@ -38,17 +38,38 @@ class App extends Component {
    return {location}
  }

+  constructor (props) {
+    super(props)
+    this.state = {
+      yieldHTML: null
+    }
+  }
+
+  componentDidMount () {
+    this.setYield()
+  }
+
+  setYield () {
+    const yieldHTML = document.getElementById('yield')
+    if (yieldHTML) {
+      this.setState({yieldHTML: yieldHTML.innerHTML})
+      document.body.removeChild(yieldHTML)
+    }
+  }
+
  render () {
    const { children, toast, unreadNotificationsCount, openInviteLightbox,
            mobile, mobileTitle, mobileTitleWidth, mobileTitleClick, location,
            map, userRequested, requestAnswered, requestApproved, serverData,
            onRequestAccess, notifications, fetchNotifications,
            markAsRead, markAsUnread } = this.props
+    const { yieldHTML } = this.state
    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
    const unauthedHome = pathname === '/' && !currentUser
    return <div className="wrapper" id="wrapper">
+      {yieldHTML && <div id="yield" dangerouslySetInnerHTML={{__html: yieldHTML}}></div>}
      {mobile && <MobileHeader currentUser={currentUser}
                               unreadNotificationsCount={unreadNotificationsCount}
                               mobileTitle={mobileTitle}
--- a/frontend/src/components/Apps/index.js
+++ b/frontend/src/components/Apps/index.js
@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import NavBar from '../App/Navbar'
 import NavBarLink from '../App/NavBarLink'

@ -8,11 +9,13 @@ class Apps extends Component {

    return (
      <NavBar>
-        {currentUser.get('admin') && <NavBarLink show href="/oauth/applications"
-          className="activeMaps" text="Registered Apps" />}
-        <NavBarLink show href="/oauth/authorized_applications"
+        {currentUser && currentUser.get('admin') && <NavBarLink show hardReload
+          matchChildRoutes href="/oauth/applications" linkClass="activeMaps"
+          text="Registered Apps" />}
+        <NavBarLink show hardReload matchChildRoutes
+          href="/oauth/authorized_applications"
          linkClass="authedApps" text="Authorized Apps" />
-        <NavBarLink show href="/" linkClass="myMaps exploreMapsButton" text="Maps" />
+        <NavBarLink show href="/" linkClass="myMaps" text="Maps" />
      </NavBar>
    )
  }
--- a/frontend/src/components/Maps/Header.js
+++ b/frontend/src/components/Maps/Header.js
@ -7,13 +7,6 @@ class Header extends Component {
  render = () => {
    const { signedIn, section, user } = this.props

-    const activeClass = (title) => {
-      let forClass = title + 'Maps'
-      if (title === 'my' && section === 'mine' ||
-          title === section) forClass += ' active'
-      return forClass
-    }
-
    const explore = section === 'mine' || section === 'active' || section === 'starred' || section === 'shared' || section === 'featured'
    const mapper = section === 'mapper'

@ -21,30 +14,29 @@ class Header extends Component {
      <NavBar>
        <NavBarLink show={explore}
          href={signedIn ? '/' : '/explore/active'}
-					linkClass={activeClass('active')}
+          linkClass="activeMaps"
          text="All Maps"
          />
        <NavBarLink show={signedIn && explore}
          href="/explore/mine"
-					linkClass={activeClass('my')}
+          linkClass="myMaps"
          text="My Maps"
          />
        <NavBarLink show={signedIn && explore}
          href="/explore/shared"
-					linkClass={activeClass('shared')}
+          linkClass="sharedMaps"
          text="Shared With Me"
          />
        <NavBarLink show={signedIn && explore}
          href="/explore/starred"
-					linkClass={activeClass('starred')}
+          linkClass="starredMaps"
          text="Starred By Me"
          />
        <NavBarLink show={!signedIn && explore}
          href="/explore/featured"
-					linkClass={activeClass('featured')}
+          linkClass="featuredMaps"
          text="Featured Maps"
          />
-
        {mapper ? (
          <div className='navBarButton active mapperButton'>
            {user && <img className='exploreMapperImage' width='24' height='24' src={user.image} />}
--- a/frontend/src/components/Notifications/index.js
+++ b/frontend/src/components/Notifications/index.js
@ -4,11 +4,10 @@ import NavBarLink from '../App/NavBarLink'

 class Notifications extends Component {
  render = () => {
-    const { currentUser } = this.props
    return (
      <NavBar>
-        <NavBarLink show href="/notifications"
-          linkClass="notificationsLink active" text="Notifications" />
+        <NavBarLink show matchChildRoutes href="/notifications"
+          linkClass="notificationsLink" text="Notifications" />
        <NavBarLink show href="/" linkClass="myMaps" text="Maps" />
      </NavBar>
    )
--- a/frontend/src/components/makeRoutes.js
+++ b/frontend/src/components/makeRoutes.js
@ -54,8 +54,8 @@ export default function makeRoutes (currentUser) {
    <Route path="oauth">
      <Route path="token/info" component={Apps} />
      <Route path="authorize">
-        <IndexRoute component={Apps} />
-        <Route path=":code" component={Apps} />
+        <IndexRoute component={nullComponent} />
+        <Route path=":code" component={nullComponent} />
      </Route>
      <Route path="authorized_applications">
        <IndexRoute component={Apps} />