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

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>
 

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>

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>

assets/js/components/VacancyList.jsx

 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