Fakultas Ilmu Komputer UI

Commit e3e1abf9 authored by M. Reza Qorib's avatar M. Reza Qorib
Browse files

[#140654507] #13 Add bookmark and cancel bookmark feature

parent a90f659f
...@@ -22,18 +22,17 @@ export default class VacancyPage extends React.Component { ...@@ -22,18 +22,17 @@ export default class VacancyPage extends React.Component {
render() { render() {
const student = Storage.get('user-data').student; const student = Storage.get('user-data').student;
return ( return (
<div className="halamanLowongan"> <div className="halamanLowongan">
<Tabs selected={0}> <Tabs selected={0}>
<Pane label="Semua Lowongan" > <Pane label="Semua Lowongan" >
<VacancyList key={1} url="/vacancies/" /> <VacancyList key={1} studentId={student.id} url="/vacancies/" />
</Pane> </Pane>
<Pane label="Lamaran saya" > <Pane label="Lamaran saya" >
<VacancyList key={2} url={`/students/${student.id}/applied-vacancies/`} /> <VacancyList key={2} studentId={student.id} url={`/students/${student.id}/applied-vacancies/`} />
</Pane> </Pane>
<Pane label="Lamaran Ditandai" > <Pane label="Lamaran Ditandai" >
<VacancyList key={3} url={`/students/${student.id}/bookmarked-vacancies/`} /> <VacancyList key={3} studentId={student.id} url={`/students/${student.id}/bookmarked-vacancies/`} />
</Pane> </Pane>
</Tabs> </Tabs>
......
...@@ -57,14 +57,14 @@ export default class LoginForm extends React.Component { ...@@ -57,14 +57,14 @@ export default class LoginForm extends React.Component {
<Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span> <Image src={`./assets/img/${this.props.imgSrc}`} size={this.props.imgSize} verticalAlign="middle" /> <span>{ this.props.header }</span>
</div> </div>
<Form.Group widths="equal"> <Form.Group widths="equal">
<Form.Field required> <Form.Field>
<label htmlFor="id"> Username </label> <label htmlFor="id"> Username </label>
<Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required /> <Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required />
</Form.Field> </Form.Field>
</Form.Group> </Form.Group>
<Form.Group widths="equal"> <Form.Group widths="equal">
<Form.Field required> <Form.Field>
<label htmlFor="password"> Password </label> <label htmlFor="password"> Password </label>
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required /> <Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
</Form.Field> </Form.Field>
......
...@@ -9,18 +9,29 @@ const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png'; ...@@ -9,18 +9,29 @@ const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export default class Vacancy extends React.Component { export default class Vacancy extends React.Component {
static propTypes = { static propTypes = {
data: React.PropTypes.object.isRequired, data: React.PropTypes.object.isRequired,
bookmarked: React.PropTypes.number,
};
static defaultProps = {
bookmarked: 0,
}; };
constructor(props) { constructor(props) {
super(props); super(props);
/* istanbul ignore next */ /* istanbul ignore next */
this.state = { bookmarked: this.props.bookmarked };
this.bookmark = this.bookmark.bind(this); this.bookmark = this.bookmark.bind(this);
} }
bookmark() { bookmark() {
const studentId = Storage.get('user-data').student.id; const studentId = Storage.get('user-data').student.id;
const data = { vacancy_id: this.props.data.id }; const data = { vacancy_id: this.props.data.id };
Server.post(`/students/${studentId}/bookmarked-vacancies/`, data); if (this.state.bookmarked < 1){
Server.post(`/students/${studentId}/bookmarked-vacancies/`, data);
} else {
Server.delete(`/students/${studentId}/bookmarked-vacancies/${this.props.data.id}/`);
}
this.state.bookmarked = 1 - this.state.bookmarked;
} }
render() { render() {
...@@ -32,7 +43,7 @@ export default class Vacancy extends React.Component { ...@@ -32,7 +43,7 @@ export default class Vacancy extends React.Component {
<h3>{ this.props.data.name }</h3> <h3>{ this.props.data.name }</h3>
<div className="bookmark"> <div className="bookmark">
<Rating icon="star" onRate={this.bookmark} size="massive" defaultRating={0} maxRating={1} /> <Rating icon="star" onRate={this.bookmark} size="massive" defaultRating={this.props.bookmarked} maxRating={1} />
</div> </div>
<h4>{ this.props.data.company.name }</h4> <h4>{ this.props.data.company.name }</h4>
<h5>{ this.props.data.company.address }</h5> <h5>{ this.props.data.company.address }</h5>
......
import React from 'react'; import React from 'react';
import { Item } from 'semantic-ui-react'; import { Item } from 'semantic-ui-react';
import Lowongan from './Vacancy'; import Vacancy from './Vacancy';
import Server from '../lib/Server'; import Server from '../lib/Server';
export default class VacancyList extends React.Component { export default class VacancyList extends React.Component {
static propTypes = { static propTypes = {
url: React.PropTypes.string.isRequired, url: React.PropTypes.string.isRequired,
studentId: React.PropTypes.number.isRequired,
};
static defaultProps = {
bookmarkList: false,
}; };
constructor(props) { constructor(props) {
super(props); super(props);
/* istanbul ignore next */ /* istanbul ignore next */
this.updateBookmarkList();
Server.get(this.props.url, false).then((data) => { Server.get(this.props.url, false).then((data) => {
this.setState({ vacancies: data }); this.setState({ vacancies: data });
}); });
this.state = { vacancies: [] }; this.state = { vacancies: [], bookmarkList: [] };
this.updateBookmarkList = this.updateBookmarkList.bind(this);
this.generateVacancies = this.generateVacancies.bind(this); this.generateVacancies = this.generateVacancies.bind(this);
this.checkBookmark = this.checkBookmark.bind(this);
}
checkBookmark(id) {
for (let i = 0; i < this.state.bookmarkList.length; i++) {
if (id == this.state.bookmarkList[i].id) { return 1; }
}
return 0;
} }
updateBookmarkList() {
Server.get(`/students/${this.props.studentId}/bookmarked-vacancies/`, false).then((data) => {
this.setState({ bookmarkList: data });
});
}
generateVacancies() { generateVacancies() {
return this.state.vacancies.map(vacancy => return this.state.vacancies.map(vacancy =>
<Lowongan key={vacancy.id} data={vacancy} />, <Vacancy key={vacancy.id} bookmarked={this.checkBookmark(vacancy.id)} data={vacancy} />,
); );
} }
...@@ -32,4 +52,4 @@ export default class VacancyList extends React.Component { ...@@ -32,4 +52,4 @@ export default class VacancyList extends React.Component {
{ this.generateVacancies() } { this.generateVacancies() }
</Item.Group> </Item.Group>
); );
} }
\ No newline at end of file
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