fix navigation dropdown

Author: kovson

app/models/user.rb

@@ -17,6 +17,6 @@ def admin?
   def token_validation_response
     self.as_json(except: [
       :tokens, :created_at, :updated_at
-    ]).merge("role" => self.roles.map(&:name).join)
+    ]).merge("role" => self.roles.first.name)
   end
 end

app/resources/user_resource.rb

@@ -9,6 +9,6 @@ class UserResource < JSONAPI::Resource
   model_filters :email_contains
 
   def role
-    self._model.roles.map(&:name).join
+    self._model.roles.first.name
   end
 end

client/src/components/App.js

@@ -2,14 +2,13 @@ import React, { Component } from 'react';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { Collapse, Container, Navbar, NavbarToggler, Nav, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { Collapse, Container, Navbar, NavbarToggler, Nav, NavItem, NavLink, NavDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
 import { getUser, logout } from '../store/auth';
 
 export class App extends Component {
   state = {
     isOpen: false,
-    dropdownOpen: false,
   };
 
   logout = (e) => {
@@ -18,7 +17,6 @@ export class App extends Component {
   };
 
   toggle = () => this.setState({
-    dropdownOpen: !this.state.dropdownOpen,
     isOpen: !this.state.isOpen
   });
 
@@ -30,40 +28,35 @@ export class App extends Component {
       <div>
         <Navbar color="faded" light toggleable>
           <Container>
-            <NavbarToggler right onClick={this.toggle} />
-            <Collapse isOpen={this.state.isOpen} navbar>
-              <Nav navbar>
-                <NavItem>
-                  <NavLink href="/#/">Dashboard</NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink href="/#/posts">Posts</NavLink>
-                </NavItem>
-                <NavItem>
-                  <NavLink href="/#/categories">Categories</NavLink>
-                </NavItem>
-                <NavItem>
-                  {
-                    userIsAdmin && <NavLink href="/#/users">Users</NavLink>
-                  }
-                </NavItem>
-              </Nav>
-              <Nav navbar className="ml-auto">
-                <NavItem>
-                  <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-                    <DropdownToggle caret>
-                      {user.email}
-                    </DropdownToggle>
-                    <DropdownMenu right>
-                      <DropdownItem>
-                        <Link to="/profile">Profile</Link>
-                      </DropdownItem>
-                      <DropdownItem href onClick={this.logout}> Logout </DropdownItem>
-                    </DropdownMenu>
-                  </Dropdown>
-                </NavItem>
-              </Nav>
-            </Collapse>
+            <Nav navbar>
+              <NavItem>
+                <NavLink href="/#/">Dashboard</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="/#/posts">Posts</NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink href="/#/categories">Categories</NavLink>
+              </NavItem>
+              <NavItem>
+                {
+                  userIsAdmin && <NavLink href="/#/users">Users</NavLink>
+                }
+              </NavItem>
+            </Nav>
+            <Nav navbar className="ml-auto">
+              <NavDropdown isOpen={this.state.isOpen} toggle={this.toggle}>
+                <DropdownToggle caret>
+                  {user.email}
+                </DropdownToggle>
+                <DropdownMenu right>
+                  <DropdownItem>
+                    <Link to="/profile">Profile</Link>
+                  </DropdownItem>
+                  <DropdownItem href onClick={this.logout}> Logout </DropdownItem>
+                </DropdownMenu>
+              </NavDropdown>
+            </Nav>
           </Container>
         </Navbar>
         <Container className="container-main">