Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 87d5f682 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#140655219] [GREEN] #25 Refactor Profile Page for showing profile to self and companies

parent 08ba0780
Hide whitespace changes
Inline Side-by-side
assets/js/ProfilePage.jsx
View file @ 87d5f682
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>
);
......
assets/js/__test__/ProfilePage-test.jsx
View file @ 87d5f682
......@@ -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'));
});
});
assets/js/__test__/components/CancelModal-test.jsx
View file @ 87d5f682
......@@ -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', () => {
......
assets/js/index.jsx
View file @ 87d5f682
......@@ -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>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Excellence In Teamwork