1506688872 139

assets/js/__test__/components/TopMenu-test.jsx

@@ -234,5 +234,15 @@ describe('TopMenu', () => {
       </TopMenu>);
     expect(topMenu.state.currentDate).to.equal(expectedDate);
   });
+
+  it('TopMenu state contain aplliance information', () => {
+    const topMenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={studentUser}>
+        <div> test </div>
+      </TopMenu>
+    );
+    expect(topMenu.state.applianceInformation).to.exist;
+  });
+
 });
 

assets/js/components/TopMenu.jsx

 import React from 'react';
-import { Menu, Image, Popup, Button, Card } from 'semantic-ui-react';
+import { Menu, Image, Popup, Icon, Card, Button } from 'semantic-ui-react';
 import { Link, browserHistory } from 'react-router';
 import Server from '../lib/Server';
 import Storage from '../lib/Storage';
 import moment from 'moment';
+import ModalAlert from './ModalAlert';
 
 var quotes = require('starwars');
 const defaultPicture = 'https://semantic-ui.com/images/avatar/small/elliot.jpg';
@@ -43,14 +44,30 @@ export default class TopMenu extends React.Component {
       logoutLoading: false,
       currentDate: moment(new Date()).format('dddd') + ', ' + moment(new Date()).format('LL'),
       todayQuote: quotes(),
+      applianceInformation: (
+        "1. Pastikan anda sudah mengupdate profile anda\n" +
+        "2. Cari lowongan internship yang ada di tab lowongan\n" +
+        "3. Klik tombol 'Detail'\n" +
+        "4. Pastikan persyaratan sudah terpenuhi\n" +
+        "5. Jelaskan mengapa anda ingin mengikuti lowongan internship tersebut di 'Cover Letter'\n"+
+        "6. Klik tombol 'Daftar'\n"
+      )
     };
     this.logout = this.logout.bind(this);
     this.logoutCompany = this.logoutCompany.bind(this);
+    this.handleModalClick = this.handleModalClick.bind(this);
     console.log(this.state.todayQuote);
   }
 
   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 
+  handleModalClick() {
+    this.modalAlert.open(
+      "Cara mendaftar di lowongan yang ada:",
+      this.state.applianceInformation
+    );
+  }
+
   logout = (e) => {
     e.preventDefault();
     this.setState({ logoutLoading: true });
@@ -71,6 +88,11 @@ export default class TopMenu extends React.Component {
   render() {
     const { activeItem } = this.state;
     const data = TopMenu.getInfo(this.props.user);
+    const btn = (
+      <Button color="blue" inverted onClick={this.handleModalClick}>
+        ?
+      </Button>
+    )
     return (
       <div>
         <div style={{ padding: '10px 0', fontStyle: 'italic', textAlign: 'center' }}>
@@ -85,9 +107,17 @@ export default class TopMenu extends React.Component {
             </p>
           </div>
         )}
+        <ModalAlert
+          ref={(modal) => {
+            this.modalAlert = modal;
+          }}
+        />
         <Menu color="blue" pointing secondary>
           <Image as={Link} size="small" src="/assets/img/logo.png" to="/home" />
           <Menu.Menu position="right">
+            <Menu.Item>
+            { btn }
+            </Menu.Item>
             <Menu.Item style={{ margin: '3px' }}>
               { this.state.currentDate }
             </Menu.Item>