Fix top menu and add fix body method on all modals

assets/js/ProfilePage.jsx

@@ -176,15 +176,15 @@ export default class ProfilePage extends React.Component {
     return (
       <div className="profilePage">
         <Segment className="biodata-section" >
-          <Grid>
-            <Grid.Column width={7}>
+          <Grid stackable columns={2}>
+            <Grid.Column>
               <Header as="h2" icon textAlign="center">
                 <br />
                 <Image src={this.state.photo || defaultPicture} size="medium" />
               </Header>
             </Grid.Column>
 
-            <Grid.Column width={6}>
+            <Grid.Column>
               <Container textAlign="left" className="profile-biodata">
                 <div className="biodata">
                   <Segment basic textAlign="center">
@@ -197,7 +197,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="university" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.major }, { this.state.batch } </p>
+                        <p> { this.state.major || 'N/A' }, { this.state.batch || 'N/A' } </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -209,7 +209,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="mail" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.email } </p>
+                        <p> { this.state.email || 'N/A' } </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -220,7 +220,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="phone" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.phone_number }</p>
+                        <p> { this.state.phone_number || 'N/A' }</p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -231,7 +231,7 @@ export default class ProfilePage extends React.Component {
                         <Icon name="gift" size="big" />
                       </Grid.Column>
                       <Grid.Column width={13}>
-                        <p> { this.state.cityOfBirth}, { this.state.dateOfBirth } </p>
+                        <p> { this.state.cityOfBirth || 'N/A' }, { this.state.dateOfBirth || 'N/A' } </p>
                       </Grid.Column>
                     </Grid>
                   </Segment>
@@ -241,6 +241,7 @@ export default class ProfilePage extends React.Component {
                   <div className="buttonProfile">
                     <Button onClick={this.gotoStudentResume} primary size="small">Resume</Button>
                   </div>
+                  <br />
                   <div>
                     <h4> Bagikan Transkrip : { this.state.bagikanTranskrip ? 'Ya' : 'Tidak' }</h4>
                   </div>

assets/js/VacancyPage.jsx

@@ -65,7 +65,7 @@ export default class VacancyPage extends React.Component {
               }
             />
           </Pane>
-          <Pane label="Lamaran Ditandai" >
+          <Pane label="Ditandai" >
             <Pagination
               key={3}
               url={`/students/${this.state.id}/bookmarked-vacancies/`}

assets/js/components/AdminVerificationModal.jsx

@@ -5,6 +5,19 @@ export default class AdminVerificationModal extends React.Component {
 
   state = { modalOpen: false }
 
+  componentWillUpdate() {
+    this.fixBody();
+  }
+
+  componentDidUpdate() {
+    this.fixBody();
+  }
+
+  fixBody = () => {
+    const anotherModal = document.getElementsByClassName('ui page modals').length;
+    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+  };
+
   handleOpen = () => this.setState({
     modalOpen: true,
   });

assets/js/components/ApplyModal.jsx

@@ -26,6 +26,19 @@ export default class ApplyModal extends React.Component {
     this.handleApply = this.handleApply.bind(this);
   }
 
+  componentWillUpdate() {
+    this.fixBody();
+  }
+
+  componentDidUpdate() {
+    this.fixBody();
+  }
+
+  fixBody = () => {
+    const anotherModal = document.getElementsByClassName('ui page modals').length;
+    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+  };
+
   handleChange(event) {
     this.setState({ coverLetter: event.target.value });
   }

assets/js/components/ApproveModal.jsx

@@ -26,6 +26,19 @@ export default class ApproveModal extends React.Component {
     this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
   }
 
+  componentWillUpdate() {
+    this.fixBody();
+  }
+
+  componentDidUpdate() {
+    this.fixBody();
+  }
+
+  fixBody = () => {
+    const anotherModal = document.getElementsByClassName('ui page modals').length;
+    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+  };
+
   handleOpen = () => this.setState({ modalOpen: true });
   handleClose = () => { this.readApplication(); this.setState({ modalOpen: false }); }
 

assets/js/components/CompanyRegisterModal.jsx

@@ -17,6 +17,19 @@ export default class CompanyRegisterModal extends React.Component {
     this.handleSubmit = this.handleSubmit.bind(this);
   }
 
+  componentWillUpdate() {
+    this.fixBody();
+  }
+
+  componentDidUpdate() {
+    this.fixBody();
+  }
+
+  fixBody = () => {
+    const anotherModal = document.getElementsByClassName('ui page modals').length;
+    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+  };
+
   handleChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   };

assets/js/components/TopMenu.jsx

@@ -78,7 +78,9 @@ export default class TopMenu extends React.Component {
           <Menu.Menu position="right">
             <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" name="Profil" active={activeItem === 'Profil'} onClick={this.handleItemClick} /> }
+            <Menu.Item as={Link} to="/profil-mahasiswa" name="Profil" active={activeItem === 'Profil'} 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 style={{ padding: '10px 0' }}>

assets/js/components/VerifyAdminModal.jsx

@@ -5,6 +5,19 @@ export default class VerifyAdminModal extends React.Component {
 
   state = { modalOpen: false }
 
+  componentWillUpdate() {
+    this.fixBody();
+  }
+
+  componentDidUpdate() {
+    this.fixBody();
+  }
+
+  fixBody = () => {
+    const anotherModal = document.getElementsByClassName('ui page modals').length;
+    if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
+  };
+
   handleOpen = () => this.setState({
     modalOpen: true,
   });

assets/js/index.jsx

@@ -109,7 +109,8 @@ export default class App extends React.Component {
           <Route path="/buat-lowongan" component={company(CreateVacancy)} />
           <Route path="/buat-lowongan/:id" component={company(CreateVacancy)} />
           <Route path="/pelamar" component={company(ApplicantPage)} />
-          <Route path="/profil" component={student(ProfilePage)} own />
+          <Route path="/profil-mahasiswa" component={student(ProfilePage)} own />
+          <Route path="/profil-perusahaan" component={company(CompanyProfile)} />
           <Route path="/mahasiswa/:id" component={grownups(ProfilePage)} />
           <Route path="/perusahaan/:id" component={facultyMember(CompanyProfile)} />
           <Route path="/perusahaan" component={staff(CompanyPage)} />