adding pagination

Author: samuelcolvin

public/index.html

@@ -40,10 +40,11 @@
   <script>
     var public_key = '9c79f14df986a1ec693c'  // '61e9d8d03109e44d7c67'
     var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
-    window.socket = socket(public_key, {
+    window.socket1 = socket(public_key, {
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
+      pagination: 8,
     })
     socket(public_key, {
       element: '#socket2',

src/components/contractors/Contractors.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Route} from 'react-router-dom'
+import {Link, Route} from 'react-router-dom'
 import {async_start, slugify} from '../../utils'
 import {If} from '../shared/Tools'
 import {Grid, List} from './List'
@@ -12,12 +12,16 @@ class Contractors extends Component {
     this.state = {
       contractors: [],
       got_contractors: false,
+      page: 1,
+      more_pages: false,
       subjects: [],
       selected_subject: null,
     }
     this.update_contractors = this.update_contractors.bind(this)
     this.get_contractor_details = this.get_contractor_details.bind(this)
     this.set_contractor_details = this.set_contractor_details.bind(this)
+    this.subject_url = this.subject_url.bind(this)
+    this.page_url = this.page_url.bind(this)
     this.subject_change = this.subject_change.bind(this)
   }
 
@@ -31,12 +35,24 @@ class Contractors extends Component {
     await this.update_contractors()
   }
 
-  subject_change (selected_subject) {
+  subject_url (selected_subject) {
     if (selected_subject) {
-      this.props.history.push(this.props.root.url(`subject/${selected_subject.id}-${slugify(selected_subject.name)}`))
+      return this.props.root.url(`subject/${selected_subject.id}-${slugify(selected_subject.name)}`)
     } else {
-      this.props.history.push(this.props.root.url(''))
+      return this.props.root.url('')
     }
+  }
+
+  page_url (new_page) {
+    let url = this.subject_url(this.state.selected_subject)
+    if (new_page > 1) {
+      url += `${url.substr(-1) === '/' ? '' : '/'}page/${new_page}`
+    }
+    return url
+  }
+
+  subject_change (selected_subject) {
+    this.props.history.push(this.subject_url(selected_subject))
     this.update_contractors(selected_subject)
   }
 
@@ -49,14 +65,19 @@ class Contractors extends Component {
       }
     }
 
-    this.setState({selected_subject})
-    const sub_id = selected_subject && selected_subject.id
-    const args = Object.assign({}, this.props.config.contractor_filter, {subject: sub_id || null})
+    const m = this.props.history.location.pathname.match(/page\/(\d+)/)
+    const page = m ? parseInt(m[1], 10) : 1
+    this.setState({selected_subject, page})
+    const args = Object.assign({}, this.props.config.contractor_filter, {
+      subject: selected_subject ? selected_subject.id : null,
+      pagination: this.props.config.pagination,
+      page: page,
+    })
     const contractors = await this.props.root.requests.get('contractors', args)
-    contractors.reverse()
     this.props.config.event_callback('updated_contractors', contractors)
     this.setState({
       contractors,
+      more_pages: contractors.length === this.props.config.pagination,
       got_contractors: true
     })
   }
@@ -90,6 +111,22 @@ class Contractors extends Component {
         </If>
         <DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
 
+        <If v={this.state.page > 1 || this.state.more_pages}>
+          <div className="tcs-pagination">
+            <Link
+              to={this.page_url(this.state.page - 1)}
+              onClick={() => setTimeout(() => this.update_contractors(), 0)}
+              className={'tcs-previous' + (this.state.page > 1 ? '' : ' tcs-disable')}>
+              &lsaquo;&lsaquo; {this.props.root.get_text('previous')}
+            </Link>
+            <Link
+              to={this.page_url(this.state.page + 1)}
+              onClick={() => setTimeout(() => this.update_contractors(), 0)}
+              className={'tcs-next' + (this.state.more_pages ? '' : ' tcs-disable')}>
+              {this.props.root.get_text('next')} &rsaquo;&rsaquo;
+            </Link>
+          </div>
+        </If>
         <Route path={this.props.root.url(':id(\\d+):_extra')} render={props => (
           <ConModal id={props.match.params.id}
                     contractors={this.state.contractors}

src/components/contractors/List.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {Link} from 'react-router-dom'
-import {Footer, Location, Markdown} from '../shared/Tools'
+import {Location, Markdown} from '../shared/Tools'
 import Stars from './Stars'
 
 export const Grid = ({contractors, root}) => (
@@ -20,7 +20,7 @@ export const List = ({contractors, root}) => (
   <div className="tcs-list">
     {contractors.map((contractor, i) => (
       <Link key={i} to={root.url(contractor.link)} className="tcs-item">
-        <div className="tcs-image-col">
+        <div className="tcs-image-col tcs-box">
           <img src={contractor.photo} alt={contractor.name} className="tcs-thumb"/>
           <button className="tcs-button">
             {root.get_text('view_profile')}
@@ -48,6 +48,5 @@ export const List = ({contractors, root}) => (
         </div>
       </Link>
     ))}
-    <Footer/>
   </div>
 )

src/index.js

@@ -21,7 +21,6 @@ const raven_config = {
 }
 Raven.config(process.env.REACT_APP_RAVEN_DSN, raven_config).install()
 
-// TODO these need a consist prefix
 const STRINGS = {
   skills_label: 'Skills',
   contractor_enquiry: 'Please enter your details below to enquire about tutoring with {contractor_name}.',
@@ -40,6 +39,8 @@ const STRINGS = {
   subject_filter_summary_plural: '{subject}: showing {count} results',
   view_profile: 'View Profile',
   review_hours: '({hours} hours)',
+  previous: 'Previous',
+  next: 'Next',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal']
@@ -128,6 +129,7 @@ window.socket = async function (public_key, config) {
     return
   }
 
+  config.pagination = config.pagination || 100
   config.messages = config.messages || {}
   for (let k of Object.keys(STRINGS)) {
     if (!config.messages[k]) {
@@ -156,7 +158,7 @@ window.socket = async function (public_key, config) {
   console.debug('using config:', config)
 
   const url_base = config.router_mode === 'history' ? config.url_root : '/'
-  const url_generator = (url_) => url_base + url_
+  const url_generator = (url_) => url_base + (url_ || '')
 
   window._tcs_grecaptcha_loaded = () => (
     document.dispatchEvent(new Event('_tcs_grecaptcha_loaded'))

src/styles/contractors.scss

@@ -45,6 +45,31 @@
   }
 }
 
+$pagination-radius: 4px;
+.tcs-pagination {
+  display: flex;
+  justify-content: center;
+  margin: 8px 0 0;
+  .tcs-previous, .tcs-next {
+    display: inline-block;
+    padding: 8px;
+    border: 1px solid #ccc;
+    text-decoration: none !important;
+    color: $brand-colour;
+  }
+  .tcs-previous {
+    border-right: 0;
+    border-radius: $pagination-radius 0 0 $pagination-radius;
+  }
+  .tcs-next {
+    border-radius: 0 $pagination-radius $pagination-radius 0;
+  }
+  .tcs-disable {
+    pointer-events: none;
+    color: #888;
+  }
+}
+
 .tcs-aside {
   font-size: 20px;
   margin-bottom: 10px;

src/utils.js

@@ -17,10 +17,12 @@ export const to_markdown = t => {
 export const auto_url_root = path => {
   // remove :
   // * /subject/.*
+  // * /page/.*
   // * contractor slug
   // * /enquiry
   path = path
     .replace(/\/subject\/\d+-[^/]+$/, '/')
+    .replace(/\/page\/\d+-[^/]+$/, '/')
     .replace(/\/\d+-[^/]+$/, '/')
     .replace(/\/enquiry$/, '/')
   return path