diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx
index 0826b4d7ddc1f18fa0d9e098081d9962e3bd1eac..93b681b781cac0119f7b996cb9a01f183cf2fb78 100644
--- a/assets/js/ProfilePage.jsx
+++ b/assets/js/ProfilePage.jsx
@@ -1,18 +1,20 @@
import React from 'react';
import { Segment, Image, Header, Icon, Container, Button, Form } from 'semantic-ui-react';
+import Server from './lib/Server';
export default class ProfilePage extends React.Component {
static propTypes = {
- data: React.PropTypes.object.isRequired,
- own: React.PropTypes.string.isRequired,
+ route: React.PropTypes.object.isRequired,
+ params: React.PropTypes.object.isRequired,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
- npm: props.data.student.npm,
+ id: '',
+ npm: '',
name: '',
major: '',
batch: '',
@@ -20,37 +22,55 @@ export default class ProfilePage extends React.Component {
cityOfBirth: '',
dateOfBirth: '',
resume: '',
+ phone: '',
+ showTranscript: '',
};
- this.handleItemClick = this.handleItemClick.bind(this);
this.getProfile = this.getProfile.bind(this);
+ this.getProfile();
}
getProfile() {
-
+ if (this.props.route.own) {
+ // check api format in /api#!/login
+ this.state = {
+ id: this.props.route.data.student.id,
+ npm: this.props.route.data.student.npm,
+ name: this.props.route.data.student.name,
+ major: this.props.route.data.student.major,
+ batch: this.props.route.data.student.batch,
+ email: this.props.route.data.student.user.email,
+ cityOfBirth: this.props.route.data.student.birth_place,
+ dateOfBirth: this.props.route.data.student.birth_date,
+ resume: this.props.route.data.student.resume,
+ phone: this.props.route.data.student.phone_number,
+ showTranscript: this.props.route.data.student.show_transcript,
+ };
+ return Promise.resolve(this.state);
+ } else {
+ return Server.get(`/students/${this.props.params.id}/`).then((data) => {
+ this.setState({
+ id: data.id,
+ name: data.name,
+ npm: data.npm,
+ resume: data.resume,
+ major: data.major,
+ batch: data.batch,
+ email: data.user.email,
+ cityOfBirth: data.birth_place,
+ dateOfBirth: data.birth_date,
+ phone: data.phone_number,
+ showTranscript: data.show_transcript,
+ });
+ }, error => error.then(() => {
+ // this.modalAlert.open('Gagal Mengambil ', r.error);
+ this.state.name = 'Gagal mendapatkan informasi';
+ }));
+ }
}
- render() {
- return (
- <div className="profilePage">
- <Segment className="biodata-section">
- <Header as="h2" icon textAlign="center">
- <Image src="http://semantic-ui.com/images/wireframe/square-image.png" size="small" shape="circular" />
- </Header>
- <Container textAlign="center" className="profile-biodata">
- <div className="biodata">
- <h3> { this.state.name } </h3>
- <h5> { this.state.major }, { this.state.batch } </h5>
- <h5> { this.state.email } </h5>
- <h5> { this.props.data.student.phone_number } </h5>
- <h5> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h5>
- </div>
- <div className="button-profile">
- <Button primary size="small">Resume</Button>
- <Button primary size="small">Transkrip</Button>
- </div>
- </Container>
- </Segment >
-
+ updateForm(show) {
+ if (show) {
+ return (
<Segment className="profile-form">
<Header as="h3" textAlign="center">
<Icon name="edit" />
@@ -59,6 +79,10 @@ export default class ProfilePage extends React.Component {
</Header.Content>
</Header>
<Form size="small" onSubmit={this.handleSubmit}>
+ <Form.Field>
+ <label htmlFor="photo">Profile Picture</label>
+ <input placeholder="Profile Photo.jpg" name="photo" type="File" />
+ </Form.Field>
<Form.Field>
<label htmlFor="email">Email</label>
<input placeholder="jojon@email.com" name="email" />
@@ -74,7 +98,34 @@ export default class ProfilePage extends React.Component {
<Button type="submit" size="small" primary floated="right">Submit</Button>
</Form>
</Segment>
+ );
+ }
+
+ return (<div />);
+ }
+ render() {
+ return (
+ <div className="profilePage">
+ <Segment className="biodata-section">
+ <Header as="h2" icon textAlign="center">
+ <Image src="http://semantic-ui.com/images/wireframe/square-image.png" size="small" shape="circular" />
+ </Header>
+ <Container textAlign="center" className="profile-biodata">
+ <div className="biodata">
+ <h3> { this.state.name } </h3>
+ <h5> { this.state.major }, { this.state.batch } </h5>
+ <h5> { this.state.email } </h5>
+ <h5> { this.state.phone } </h5>
+ <h5> { this.state.cityOfBirth}, { this.state.dateOfBirth } </h5>
+ </div>
+ <div className="button-profile">
+ <Button primary size="small">Resume</Button>
+ { this.state.showTranscript ? <Button primary size="small">Transkrip</Button> : <div /> }
+ </div>
+ </Container>
+ </Segment >
+ { this.updateForm(this.props.route.own) }
</div>
);
diff --git a/assets/js/__test__/ProfilePage-test.jsx b/assets/js/__test__/ProfilePage-test.jsx
index 27a983db89b35eb446d24f90906fec045d0f9649..6c725f5b61d4f2fdb5b07649ee42465ccc2d5ab7 100644
--- a/assets/js/__test__/ProfilePage-test.jsx
+++ b/assets/js/__test__/ProfilePage-test.jsx
@@ -5,7 +5,6 @@ import fetchMock from 'fetch-mock';
import ProfilePage from '../ProfilePage';
describe('ProfilePage', () => {
-
const studentSession = {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
@@ -27,8 +26,14 @@ describe('ProfilePage', () => {
npm: 1406543593,
resume: null,
phone_number: null,
+ birth_place: null,
+ birth_date: null,
+ major: null,
+ batch: null,
+ show_resume: false,
bookmarked_vacancies: [
3,
+ 2,
],
applied_vacancies: [
3,
@@ -48,55 +53,42 @@ describe('ProfilePage', () => {
};
const response = {
- url: 'http://api.cs.ui.ac.id/siakngcs/mahasiswa/1406543593/',
- npm: '1406543593',
- nama: 'Muhammad Reza Qorib',
- alamat_mhs: 'Pesona Khayangan Estate Blok CO/4, RT 04/RW 27, Kel. Mekarjaya, Kec. Sukmajaya, Margonda Kota Depok Jawa Barat 16411',
- kd_pos_mhs: '16411',
- kota_lahir: 'Jakarta',
- tgl_lahir: '1996-08-30',
- program: [
- {
- url: 'http://api.cs.ui.ac.id/siakngcs/program/42380/',
- periode: {
- url: 'http://api.cs.ui.ac.id/siakngcs/periode/31/',
- term: 2,
- tahun: 2016,
- },
- kd_org: '01.00.12.01',
- nm_org: 'Ilmu Komputer',
- nm_prg: 'S1 Reguler',
- angkatan: 2014,
- nm_status: 'Aktif',
- kd_status: '1',
- },
- ],
+ id: 3,
+ name: 'Muhammad R.',
+ user: {
+ url: 'http://localhost:8000/api/users/9/',
+ username: 'muhammad.reza42',
+ email: 'muhammad.reza42@ui.ac.id',
+ is_staff: false,
+ },
+ npm: 1406543593,
+ resume: null,
+ phone_number: null,
+ birth_place: null,
+ birth_date: null,
+ major: null,
+ batch: null,
+ show_transcript: false,
};
it('renders without problem', () => {
const profile = ReactTestUtils.renderIntoDocument(
- <ProfilePage data={ studentSession } />);
- expect(profile).to.exist;
- });
-
- it('renders without problem for error case', () => {
- const profile = ReactTestUtils.renderIntoDocument(
- <ProfilePage data={ brokenSession } />);
- expect(profile).to.exist;
+ <ProfilePage route={{ own: true, data: studentSession }} params={{}} />);
+ expect(profile.state.name).to.equal(studentSession.student.name);
});
- it('get data without problem', () => {
+ it('get profile for company without problem', () => {
fetchMock.get('*', response);
const profile = ReactTestUtils.renderIntoDocument(
- <ProfilePage data={{ student: { npm: 1406543593 } }} />);
- const userProfile = profile.getProfile();
- expect(JSON.stringify(userProfile)).to.equal(JSON.stringify(response));
+ <ProfilePage route={{ own: false, data: studentSession }} params={{ id: 3 }} />);
+ profile.getProfile().then(()=> expect(profile.state.name).to.equal(response.name));
+ fetchMock.restore();
});
it('renders without problem when error getting data', () => {
fetchMock.get('*', 400);
const profile = ReactTestUtils.renderIntoDocument(
- <ProfilePage data={{ student: { npm: 1406543593 } }} />);
- expect(profile).to.exist;
+ <ProfilePage route={{ own: false, data: studentSession }} params={{ id: 3 }} />);
+ profile.getProfile().then(()=> expect(profile.state.name).to.equal('Gagal mendapatkan informasi'));
});
});
diff --git a/assets/js/__test__/components/CancelModal-test.jsx b/assets/js/__test__/components/CancelModal-test.jsx
index 33a874afa5bf21caabcb25e4929a4107669bb428..01153bb5ec74fdd686453a51bc4e4007e5605f9e 100644
--- a/assets/js/__test__/components/CancelModal-test.jsx
+++ b/assets/js/__test__/components/CancelModal-test.jsx
@@ -29,6 +29,8 @@ describe('CancelModal', () => {
});
it('remove vacancy without problem', () => {
+ const fetchMock = require('fetch-mock');
+ fetchMock.delete('*', { data: 'value' })
const modalPendaftaran = ReactTestUtils.renderIntoDocument(
<CancelModal id={4} />);
@@ -36,6 +38,7 @@ describe('CancelModal', () => {
Storage.set('user-data', response3);
modalPendaftaran.removeVacancy();
expect(modalPendaftaran.state.header).to.exist;
+ fetchMock.restore();
});
it('confirm without problem', () => {
diff --git a/assets/js/index.jsx b/assets/js/index.jsx
index d50f067549b6238a042a1897b166901b922ef09b..35f6875813b8edf37bb6e380c1a82734b0c03266 100644
--- a/assets/js/index.jsx
+++ b/assets/js/index.jsx
@@ -31,7 +31,7 @@ export default class App extends React.Component {
handleHome= (nextState, replace) => {
if (Server.isLoggedIn()) {
- Storage.get('user-data').student ? replace({pathname: '/lowongan'}) : replace({pathname: '/profile'});
+ Storage.get('user-data').student ? replace({ pathname: '/lowongan' }) : replace({ pathname: '/profile' });
} else {
replace({ pathname: '/login' });
}
@@ -42,7 +42,8 @@ export default class App extends React.Component {
<Route path="/login" component={Login} />
<Route component={Dashboard} onEnter={this.handleAuth}>
<Route path="/" component={VacancyPage} />
- <Route path="/profile" component={ProfilePage} />
+ <Route path="/profile" component={ProfilePage} data={Storage.get('user-data')} own={true} />
+ <Route path="/mahasiswa/:id" component={ProfilePage} data={Storage.get('user-data')} own={false} />
<Route path="/lowongan" component={VacancyPage} />
<Route path="/users" component={Profile} />
</Route>