no message

assets/js/Dashboard.jsx

 import React from 'react';
 import TopMenu from './components/TopMenu';
-import Footer from './components/Footer'
+import Server from './lib/Server';
+
+
+const defaultPicture = 'http://semantic-ui.com/images/avatar/small/elliot.jpg';
 
 export default class Dashboard extends React.Component {
   static propTypes = {
+    user: React.PropTypes.object.isRequired,
+    route: React.PropTypes.object.isRequired,
+    params: React.PropTypes.object.isRequired,
     children: React.PropTypes.oneOfType([
       React.PropTypes.arrayOf(React.PropTypes.node),
       React.PropTypes.node,
     ]).isRequired,
   };
 
+  static getInfo(user) {
+    const role = user.role;
+    if (role === 'student') {
+      return user.data.student;
+    } else if (role === 'company') {
+      return user.data.company;
+    }
+
+    return 0;
+  }
+
+  constructor(props) {
+    super(props);
+    /* istanbul ignore next */
+    const data = Dashboard.getInfo(this.props.user);
+    this.state = {
+      id: data.id,
+      name: data.name,
+      email: data.user.email,
+      photo: data.photo,
+    };
+  }
+
+
   render = () => (
     <div>
-      <TopMenu />
-      <div className="content"> {this.props.children} </div>
-      <Footer />
+      <TopMenu
+        name={this.state.name} email={this.state.email}
+        photo={this.state.photo ? this.state.photo : defaultPicture}
+      />
+      {this.props.children}
     </div>
   )
 }
+

assets/js/VacancyPage.jsx

@@ -61,7 +61,6 @@ export default class VacancyPage extends React.Component {
       return (
         <VacancyList key={1} userId={this.state.id} url={`/companies/${this.state.id}/vacancies/`} type="company" />
       );
-    }
 
     return (
       <div>

assets/js/components/TopMenu.jsx

 import React from 'react';
-import { Menu, Image } from 'semantic-ui-react';
+import { Menu, Image, Popup, Button, Card } from 'semantic-ui-react';
 import { Link, browserHistory } from 'react-router';
-
 import Server from '../lib/Server';
 import Storage from '../lib/Storage';
 
 export default class TopMenu extends React.Component {
 
+  static propTypes = {
+    // user: React.PropTypes.object.isRequired,
+    name: React.PropTypes.string.isRequired,
+    email: React.PropTypes.string.isRequired,
+    photo: React.PropTypes.any.isRequired,
+  };
+
   constructor(props) {
     super(props);
     /* istanbul ignore next */
+    // console.log(this.props.user);
     this.state = { activeItem: 'home' };
     this.logout = this.logout.bind(this);
   }
@@ -25,13 +32,32 @@ export default class TopMenu extends React.Component {
 
   render() {
     const { activeItem } = this.state;
+
     return (
       <Menu color="blue" pointing secondary>
         <Image as="a" size="small" src="/assets/img/logo.png" href="/" />
         <Menu.Menu position="right">
           <Menu.Item as={Link} to="/home" name="home" active={activeItem === 'home'} onClick={this.handleItemClick} />
-          <Menu.Item as={Link} to="/profile" name="profil" active={activeItem === 'profil'} onClick={this.handleItemClick} />
-          <Menu.Item as={Link} onClick={this.logout} name="logout" />
+          <Menu.Item as={Link} to="/profil" name="profile" onClick={this.handleItemClick} />
+          <Menu.Item>
+            <Popup
+              trigger={<Image
+                as={Link} to="/profil" src={this.props.photo} avatar
+                onClick={this.handleItemClick}
+              />}
+              flowing
+              hoverable
+            >
+
+              <Card
+                header={this.props.name}
+                description={this.props.email}
+              />
+              <Button as={Link} onClick={this.logout} name="logout" color="blue" size="tiny">Logout</Button>
+
+            </Popup>
+
+          </Menu.Item>
         </Menu.Menu>
       </Menu>
     );

assets/js/index.jsx

@@ -86,11 +86,12 @@ export default class App extends React.Component {
     const commonUser = this.authorization(['admin', 'student', 'company']);
     const grownups = this.authorization(['admin', 'company', 'supervisor']);
     const facultyMember = this.authorization(['admin', 'student', 'supervisor']);
+    const all = this.authorization(['admin', 'company', 'student', 'supervisor']);
 
     return (
       <Router history={browserHistory}>
         <Route path="/login" component={Login} />
-        <Route component={Dashboard} onEnter={this.handleAuth}>
+        <Route component={all(Dashboard)} onEnter={this.handleAuth} own>
           <Route path="/transcript/:id" component={company(TranscriptPage)} />
           <Route path="/lowongan" component={commonUser(VacancyPage)} />
           <Route path="/admin-lowongan" component={AdminVacancyPage} />