From e3e1abf9aab2bbe61950da19851abb48d297a8cc Mon Sep 17 00:00:00 2001
From: "M. Reza Qorib" <rezaqorib96@gmail.com>
Date: Wed, 29 Mar 2017 09:05:25 +0700
Subject: [PATCH] [#140654507] #13 Add bookmark and cancel bookmark feature
---
assets/js/VacancyPage.jsx | 7 +++----
assets/js/components/LoginForm.jsx | 4 ++--
assets/js/components/Vacancy.jsx | 15 +++++++++++++--
assets/js/components/VacancyList.jsx | 28 ++++++++++++++++++++++++----
4 files changed, 42 insertions(+), 12 deletions(-)
diff --git a/assets/js/VacancyPage.jsx b/assets/js/VacancyPage.jsx
index 24fad1e8..66886b55 100644
--- a/assets/js/VacancyPage.jsx
+++ b/assets/js/VacancyPage.jsx
@@ -22,18 +22,17 @@ export default class VacancyPage extends React.Component {
render() {
const student = Storage.get('user-data').student;
-
return (
<div className="halamanLowongan">
<Tabs selected={0}>
<Pane label="Semua Lowongan" >
- <VacancyList key={1} url="/vacancies/" />
+ <VacancyList key={1} studentId={student.id} url="/vacancies/" />
</Pane>
<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 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>
</Tabs>
diff --git a/assets/js/components/LoginForm.jsx b/assets/js/components/LoginForm.jsx
index 04a2d8ed..dcb2f068 100644
--- a/assets/js/components/LoginForm.jsx
+++ b/assets/js/components/LoginForm.jsx
@@ -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>
</div>
<Form.Group widths="equal">
- <Form.Field required>
+ <Form.Field>
<label htmlFor="id"> Username </label>
<Input type="text" id="username" icon="user" iconPosition="left" placeholder="username" onChange={e => this.handleChange(e, 'username')} required />
</Form.Field>
</Form.Group>
<Form.Group widths="equal">
- <Form.Field required>
+ <Form.Field>
<label htmlFor="password"> Password </label>
<Input type="password" id="password" icon="key" iconPosition="left" placeholder="password" onChange={e => this.handleChange(e, 'password')} required />
</Form.Field>
diff --git a/assets/js/components/Vacancy.jsx b/assets/js/components/Vacancy.jsx
index db3f3d3f..8031a48d 100644
--- a/assets/js/components/Vacancy.jsx
+++ b/assets/js/components/Vacancy.jsx
@@ -9,18 +9,29 @@ const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
export default class Vacancy extends React.Component {
static propTypes = {
data: React.PropTypes.object.isRequired,
+ bookmarked: React.PropTypes.number,
+ };
+
+ static defaultProps = {
+ bookmarked: 0,
};
constructor(props) {
super(props);
/* istanbul ignore next */
+ this.state = { bookmarked: this.props.bookmarked };
this.bookmark = this.bookmark.bind(this);
}
bookmark() {
const studentId = Storage.get('user-data').student.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() {
@@ -32,7 +43,7 @@ export default class Vacancy extends React.Component {
<h3>{ this.props.data.name }</h3>
<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>
<h4>{ this.props.data.company.name }</h4>
<h5>{ this.props.data.company.address }</h5>
diff --git a/assets/js/components/VacancyList.jsx b/assets/js/components/VacancyList.jsx
index b78b71ff..92bcc964 100644
--- a/assets/js/components/VacancyList.jsx
+++ b/assets/js/components/VacancyList.jsx
@@ -1,28 +1,48 @@
import React from 'react';
import { Item } from 'semantic-ui-react';
-import Lowongan from './Vacancy';
+import Vacancy from './Vacancy';
import Server from '../lib/Server';
export default class VacancyList extends React.Component {
static propTypes = {
url: React.PropTypes.string.isRequired,
+ studentId: React.PropTypes.number.isRequired,
+ };
+
+ static defaultProps = {
+ bookmarkList: false,
};
constructor(props) {
super(props);
/* istanbul ignore next */
+ this.updateBookmarkList();
Server.get(this.props.url, false).then((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.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() {
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 {
{ this.generateVacancies() }
</Item.Group>
);
-}
\ No newline at end of file
+}
--
GitLab