[#140654507] #13 add pagination by tabs (bookmarked, applied, all)

assets/js/VacancyPage.jsx

 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 Server from './lib/Server';
 
 export default class VacancyPage extends React.Component {
 
@@ -20,27 +20,19 @@ export default class VacancyPage extends React.Component {
 
   handleItemClick = (e, { name }) => this.setState({ activeItem: name });
 
-  // fetchVacancies(url) {
-  //   console.log("maho");
-  //   Server.get(url).then((data) => {
-  //     this.setState({ vacancies: data });
-  //   }, () => {
-  //   });
-  // }
-
   render() {
-    const data = [{ data1: 'Software Enggineer' }, { data1: 'System Analyst' }];
+    const student = Storage.get('user-data').student;
 
     return (<div>
       <Tabs selected={0}>
         <Pane label="Semua Lowongan" >
-          <VacancyList url="/vacancies/" />
+          <VacancyList key={1} url="/vacancies/" />
         </Pane>
         <Pane label="Lamaran saya" >
-          <VacancyList url="/b" />
+          <VacancyList key={2} url={`/students/${student.id}/applied-vacancies/`} />
         </Pane>
         <Pane label="Lamaran Ditandai" >
-          <VacancyList url="/c" />
+          <VacancyList key={3} url={`/students/${student.id}/bookmarked-vacancies/`} />
         </Pane>
       </Tabs>
     </div>

assets/js/components/ModalAlert.jsx

@@ -25,7 +25,7 @@ export default class ModalAlert extends React.Component {
 
   handleOpen() {
     const requestData = { coverLetter: this.props.coverLetter };
-    let studentId = Storage.post('user-data.student.id');
+    const studentId = Storage.get('user-data').student.id;
     Server.post(`/students/${studentId}/application`, requestData).then((data) => {
       this.setState({
         header: 'Pendaftaran Berhasil',

assets/js/components/VacancyList.jsx

@@ -11,27 +11,25 @@ export default class VacancyList extends React.Component {
 
   constructor(props) {
     super(props);
-    /* istanbul ignore next */
-    this.state = { vacancies: [] };
     Server.get(this.props.url, false).then((data) => {
       this.setState({ vacancies: data });
-    }, () => {
     });
+    /* istanbul ignore next */
+    this.state = { vacancies: [] };
     this.generateVacancies = this.generateVacancies.bind(this);
   }
 
+
   generateVacancies() {
-    return this.state.vacancies.map((vacancy, index) =>
+    return this.state.vacancies.map(vacancy =>
       <Lowongan key={vacancy.id} data={vacancy} />,
     );
   }
 
 
-  render = () => {
-    return (
-      <Item.Group relaxed>
-        { this.generateVacancies() }
-      </Item.Group>
-    );
-  }
+  render = () => (
+    <Item.Group relaxed>
+      { this.generateVacancies() }
+    </Item.Group>
+  );
 }
\ No newline at end of file

core/views/vacancies.py

@@ -27,8 +27,8 @@ class ApplicationViewSet(viewsets.GenericViewSet):
 
     def list(self, request, student_id):
         student = get_object_or_404(Student.objects.all(), pk=student_id)
-        applications = Application.objects.filter(student=student)
-        return Response(ApplicationSerializer(applications, many=True, context={'request': request}).data)
+        vacancies = student.applied_vacancies
+        return Response(VacancySerializer(vacancies, many=True, context={'request': request}).data)
 
     def create(self, request, student_id):
         cover_letter = request.data.get('cover_letter')