[#140656091] #8 JS logic to consume applicant list

assets/js/ApplicantPage.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import Tabs from './components/Tabs';
 import Pane from './components/Pane';
 import Storage from './lib/Storage';
-import VacancyList from './components/VacancyList';
+import ApplicantList from './components/ApplicantList';
 
-export default class VacancyPage extends React.Component {
+export default class ApplicantPage extends React.Component {
 
   constructor(props) {
     super(props);
@@ -14,6 +14,7 @@ export default class VacancyPage extends React.Component {
       password: '',
       errorFlag: false,
       vacancies: [],
+      company: {id:1}
     };
     this.handleItemClick = this.handleItemClick.bind(this);
   }
@@ -21,7 +22,7 @@ export default class VacancyPage extends React.Component {
   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 
   render() {
-    const student = Storage.get('user-data').student;
+    const company = Storage.get('user-data').company;
     return (
   <div className="halamanPendaftar">
       <Tabs selected={0}>
@@ -29,7 +30,7 @@ export default class VacancyPage extends React.Component {
           <ApplicantList key={1} companyId={company.id}  url={`/applications/${company.id}`} />
         </Pane>
         <Pane label="Bintangi" >
-          <ApplicantList key={2} status="Batal" companyId={company.id} url={`/applications/${company.id}/bookmarked-applicants/`} />
+          <ApplicantList key={2} status="Bintangi" companyId={company.id} url={`/applications/${company.id}/bookmarked-applicants/`} />
         </Pane>
       </Tabs>
   </div>

assets/js/components/Applicant.jsx~Stashed changes

+import React from 'react';
+import { Item, Rating } from 'semantic-ui-react';
+import Storage from '../lib/Storage';
+import Server from '../lib/Server';
+import ApproveModal from './ApproveModal';
+
+const defaultImage = 'http://semantic-ui.com/images/wireframe/image.png';
+
+export default class Applicant extends React.Component {
+  static propTypes = {
+    data: React.PropTypes.object.isRequired,
+    //bookmarked: React.PropTypes.number,
+    status: React.PropTypes.string.isRequired,
+  };
+
+  static defaultProps = {
+    bookmarked: 0,
+  };
+
+  constructor(props) {
+    super(props);
+    /* istanbul ignore next */
+    //this.state = { bookmarked: this.props.bookmarked };
+    //this.bookmark = this.bookmark.bind(this);
+    this.generateAction = this.generateAction.bind(this);
+  }
+
+  /**bookmark() {
+    const companyId = Storage.get('user-data').company.id;
+    const data = { application_id: this.props.data.id };
+    if (this.state.bookmarked < 1) {
+      Server.post(`/company/${companyId}/bookmarked-applications/`, data);
+    } else {
+      Server.delete(`/company/${companyId}/bookmarked-applications/${this.props.data.id}/`);
+    }
+    this.state.bookmarked = 1 - this.state.bookmarked;
+  }**/
+
+  generateAction() {
+    const confirmModal = (<ConfirmModal
+      id={this.props.data.id} data={{ header: this.props.data.name,
+        description: this.props.data.description }} buttonTitle="Detail"
+    />);
+
+    return confirmModal;
+  }
+
+  render() {
+    return (
+      <Item >
+        <Item.Image size="small" src={defaultImage} />
+        <Item.Content verticalAlign="middle">
+          <Item.Extra>
+            <h3>Nama yang daftar</h3>
+
+            /** <div className="bookmark">
+              <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> **/
+
+            { this.generateAction() }
+
+          </Item.Extra>
+        </Item.Content>
+      </Item>
+    );
+  }
+}

assets/js/components/ApplicantList.jsx

@@ -18,41 +18,24 @@ export default class ApplicantList extends React.Component {
   constructor(props) {
     super(props);
     /* istanbul ignore next */
-    this.updateBookmarkList();
     Server.get(this.props.url, false).then((data) => {
-      this.setState({ vacancies: data });
+      this.setState({ applications: data });
     });
-    this.state = { vacancies: [], bookmarkList: [] };
-    this.updateBookmarkList = this.updateBookmarkList.bind(this);
+    this.state = { applications: [], bookmarkList: [] };
     this.generateApplicants = this.generateApplicants.bind(this);
-    this.checkBookmark = this.checkBookmark.bind(this);
   }
 
-  checkBookmark(id) {
-    for (let i = 0; i < this.state.bookmarkList.length; i += 1) {
-      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 });
-    });
-  }
 
   generateApplicants() {
     return this.state.applications.map(application =>
       <Applicant
         key={application.id}
         status={this.props.status}
-        bookmarked={this.checkBookmark(application.id)}
         data={application}
       />,
     );
   }
 
-
   render = () => (
     <Item.Group relaxed>
       { this.generateApplicants() }

assets/js/index.jsx

+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, browserHistory } from 'react-router';
+import { Segment, Modal, Button, Icon, Image as ImageComponent, Item, TextArea, Forms } from 'semantic-ui-react';
+import Dashboard from './Dashboard';
+import Login from './Login';
+import VacancyPage from './VacancyPage';
+// import Register from './CompanyRegister'
+import Pane from './components/Pane';
+import Tabs from './components/Tabs';
+import ModalAlert from './components/ModalAlert';
+
+export const Profile = () => (
+  <Segment>
+    <img src="http://semantic-ui.com/images/wireframe/media-paragraph.png" alt="wire-frame" />
+  </Segment>
+);
+
+export const App = () => (
+  <Router history={browserHistory}>
+    <Route path="/login" component={Login} />
+    {/*<Route path="/register" component={Register} />*/}
+    <Route component={Dashboard}>
+      <Route path="/" component={Profile} />
+      <Route path="profile" component={Profile} />
+      <Route path="lowongan" component={VacancyPage} />
+      <Route path="users" component={Profile} />
+    </Route>
+  </Router>
+);
+
+const paragraph = <ImageComponent src="http://semantic-ui.com/images/wireframe/short-paragraph.png" />;
+const imageWireFrame = <Item.Image size="small" src="http://semantic-ui.com/images/wireframe/image.png" />;
+
+ReactDOM.render(<App />, document.getElementById('react-app'));