Merge branch '1606880485-137' into 'master'

1606880485 137 - menggabungkan profile dan edit profile ke pop up menu di topmenu

See merge request !148

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

@@ -224,6 +224,24 @@ describe('TopMenu', () => {
     expect(topmenu.state.todayQuote).to.not.equal(undefined);
     });
 
+    it('check popup is open', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={adminUser2}>
+        <div> test </div>
+      </TopMenu>);
+      topmenu.handleOpen();
+      expect(topmenu.state.isOpen).to.equal(true);
+    });
+
+    it('check popup is close', () => {
+    const topmenu = ReactTestUtils.renderIntoDocument(
+      <TopMenu user={adminUser2}>
+        <div> test </div>
+      </TopMenu>);
+      topmenu.handleClose();
+      expect(topmenu.state.isOpen).to.equal(false);
+    });
+
   it('TopMenu state contain right current date time', () => {
     moment.locale('id');
     const date = new Date();

assets/js/components/TopMenu.jsx

@@ -47,14 +47,17 @@ export default class TopMenu extends React.Component {
         ', ' +
         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' +
+      isOpen: false,
+      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" +
+        "4. Pastikan persyaratan sudah terpenuhi\n" +
+        "5. Jelaskan mengapa anda ingin mengikuti lowongan internship tersebut di 'Cover Letter'\n"+
         "6. Klik tombol 'Daftar'\n",
-      kapeDescription: "Kanal Akses Pendaftaran KP Elektronik"
+        kapeDescription: "Kanal Akses Pendaftaran KP Elektronik"
+      
+
     };
     this.logout = this.logout.bind(this);
     this.logoutCompany = this.logoutCompany.bind(this);
@@ -64,6 +67,22 @@ export default class TopMenu extends React.Component {
 
   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 
+  handleOpen = () => {
+
+    this.setState({
+      isOpen: true
+    });
+
+    };
+
+  handleClose = () => {
+    this.setState({
+      isOpen: false
+    });
+    clearTimeout(this.timeout)
+  };
+
+
   handleModalClick() {
     this.modalAlert.open(
       'Cara mendaftar di lowongan yang ada:',
@@ -71,6 +90,7 @@ export default class TopMenu extends React.Component {
     );
   }
 
+
   logout = (e) => {
     e.preventDefault();
     this.setState({ logoutLoading: true });
@@ -144,81 +164,30 @@ export default class TopMenu extends React.Component {
             <Menu.Item style={{ margin: '3px' }}>
               {this.state.currentDate}
             </Menu.Item>
-            <Menu.Item
-              as={Link}
-              to="/home"
-              name="Beranda"
-              active={activeItem === 'Beranda'}
-              onClick={this.handleItemClick}
-            />
-            {this.props.user.role === 'student' && (
-              <Menu.Item
-                as={Link}
-                to="/profil-mahasiswa"
-                name="Profil"
-                active={activeItem === 'Profil'}
-                onClick={this.handleItemClick}
-              />
-            )}
-            <Menu.Item
-              as={Link}
-              to="/edit-profil-mahasiswa"
-              name="Edit Profil"
-              active={activeItem === 'EditProfil'}
-              onClick={this.handleItemClick}
-            />{' '}
-            }
-            {this.props.user.role === 'company' && (
-              <Menu.Item
-                as={Link}
-                to="/profil-perusahaan"
-                name="Profil"
-                active={activeItem === 'Profil'}
-                onClick={this.handleItemClick}
-              />
-            )}
-            {this.props.user.data.is_staff && (
-              <Menu.Item
-                as={Link}
-                to="/lowongan"
-                name="Lowongan"
-                active={activeItem === 'Lowongan'}
-                onClick={this.handleItemClick}
-              />
-            )}
-            <Menu.Item
-              as={Link}
-              to="/notifikasi"
-              name="Notifikasi"
-              active={activeItem === 'Notifikasi'}
-              onClick={this.handleItemClick}
-            />
+            <Menu.Item as={Link} to="/home" name="Beranda" active={activeItem === 'Beranda'} onClick={this.handleItemClick} />
+            
+            { this.props.user.role === 'company' &&
+            <Menu.Item as={Link} to="/profil-perusahaan" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
+            { this.props.user.data.is_staff &&
+            <Menu.Item as={Link} to="/lowongan" name="Lowongan" active={activeItem === 'Lowongan'} onClick={this.handleItemClick} /> }
+            <Menu.Item as={Link} to="/notifikasi" name="Notifikasi" active={activeItem === 'Notifikasi'} onClick={this.handleItemClick} />
             <Menu.Item style={{ padding: '10px 0' }}>
               <Popup
-                trigger={
-                  <Image
-                    src={
-                      (this.props.user.role === 'company'
-                        ? data.logo
-                        : data.photo) || defaultPicture
-                    }
-                    avatar
-                  />
-                }
-                flowing
-                hoverable
+                trigger={<Image src={(this.props.user.role === 'company' ? data.logo : data.photo) || defaultPicture} avatar />}
+                open={this.state.isOpen}
+                on='click'
+                    onClose={this.handleClose}
+                    onOpen={this.handleOpen}
               >
-                <Card header={data.name} description={data.user.email} />
-                <Button
-                  as={Link}
-                  onClick={this.logout}
-                  loading={this.state.logoutLoading}
-                  name="logout"
-                  color="blue"
-                  size="tiny"
-                >
-                  Keluar
-                </Button>
+                <Card
+                  header={data.name}
+                  description={data.user.email}
+                />
+                { this.props.user.role === 'student' &&
+            <Menu.Item as={Link} to="/profil-mahasiswa" style={{ margin: '10px' }} name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
+            <Menu.Item as={Link} to="/edit-profil-mahasiswa" style={{ margin: '10px' }} name="Edit Profil" active={activeItem === 'EditProfil'} onClick={this.handleItemClick} /> 
+            <Button.Group floated="right">
+                <Button as={Link} onClick={this.logout} loading={this.state.logoutLoading} name="logout" color="blue" size="tiny">Keluar</Button></Button.Group>
               </Popup>
             </Menu.Item>
           </Menu.Menu>