Fakultas Ilmu Komputer UI

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

[#140655219] #25 Change profile page using data from state

parent 04a682ea
Hide whitespace changes
Inline Side-by-side
assets/js/ProfilePage.jsx
View file @ 5aeaab79
import React from 'react';
import { Segment, Image, Header, Icon, Container, Button, Form } from 'semantic-ui-react';
import { Segment, Image, Header, Icon, Container, Button, Form } from 'semantic-ui-react';
export default class ProfilePage extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
own: React.PropTypes.string.isRequired,
};
constructor(props) {
super(props);
/* istanbul ignore next */
this.state = {
npm: props.data.student.npm,
name: '',
major: '',
batch: '',
email: '',
cityOfBirth: '',
dateOfBirth: '',
resume: '',
};
this.handleItemClick = this.handleItemClick.bind(this);
this.getProfile = this.getProfile.bind(this);
}
getProfile() {
}
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> Students Name </h3>
<h5> Ilmu Komputer, Fakultas Ilmu Komputer </h5>
<h5> jojon@ui.ac.id </h5>
<h5> 08123456789 </h5>
<h5> Jakarta, 30 Februari 1945 </h5>
<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>
<Button primary size="small">Resume</Button>
<Button primary size="small">Transkrip</Button>
</div>
</Container>
</Segment >
<Segment className="profile-form">
<Header as='h3' textAlign='center'>
<Icon name='edit' />
<Header.Content>
Edit Profile Page
</Header.Content>
</Header>
<Form size="small">
<Form.Field>
<label>Email</label>
<input placeholder='jojon@email.com' />
</Form.Field>
<Form.Field>
<label>No Hp</label>
<input placeholder='08123456789' />
</Form.Field>
<Form.Field>
<label>Resume</label>
<input placeholder='Resume' type="File"/>
</Form.Field>
<Button type='submit' size="small" primary floated="right">Submit</Button>
</Form>
<Header as="h3" textAlign="center">
<Icon name="edit" />
<Header.Content>
Edit Profile Page
</Header.Content>
</Header>
<Form size="small" onSubmit={this.handleSubmit}>
<Form.Field>
<label htmlFor="email">Email</label>
<input placeholder="jojon@email.com" name="email" />
</Form.Field>
<Form.Field>
<label htmlFor="phone">No Hp</label>
<input placeholder="08123456789" name="phone" />
</Form.Field>
<Form.Field>
<label htmlFor="resume">Resume</label>
<input placeholder="Resume" name="resume" type="File" />
</Form.Field>
<Button type="submit" size="small" primary floated="right">Submit</Button>
</Form>
</Segment>
</div>
......
assets/js/__test__/ProfilePage-test.jsx
View file @ 5aeaab79
......@@ -5,6 +5,48 @@ import fetchMock from 'fetch-mock';
import ProfilePage from '../ProfilePage';
describe('ProfilePage', () => {
const studentSession = {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
company: null,
supervisor: null,
student: {
id: 3,
user: {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
},
name: 'Muhammad R.',
created: '2017-03-28T13:33:46.147241Z',
updated: '2017-03-28T13:33:46.148248Z',
npm: 1406543593,
resume: null,
phone_number: null,
bookmarked_vacancies: [
3,
],
applied_vacancies: [
3,
1,
],
},
};
const brokenSession = {
url: 'http://localhost:8000/api/users/9/',
username: 'muhammad.reza42',
email: 'muhammad.reza42@ui.ac.id',
is_staff: false,
company: null,
supervisor: null,
student: null,
};
const response = {
url: 'http://api.cs.ui.ac.id/siakngcs/mahasiswa/1406543593/',
npm: '1406543593',
......@@ -33,13 +75,13 @@ describe('ProfilePage', () => {
it('renders without problem', () => {
const profile = ReactTestUtils.renderIntoDocument(
<ProfilePage data={{ student: { npm: 1406543593 } }} />);
<ProfilePage data={ studentSession } />);
expect(profile).to.exist;
});
it('renders without problem for error case', () => {
const profile = ReactTestUtils.renderIntoDocument(
<ProfilePage />);
<ProfilePage data={ brokenSession } />);
expect(profile).to.exist;
});
......@@ -51,15 +93,6 @@ describe('ProfilePage', () => {
expect(JSON.stringify(userProfile)).to.equal(JSON.stringify(response));
});
it('get data 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));
fetchMock.restore();
});
it('renders without problem when error getting data', () => {
fetchMock.get('*', 400);
const profile = ReactTestUtils.renderIntoDocument(
......
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