tutorcruncher · samuelcolvin · Jan 22, 2018 · Jan 12, 2018 · Jan 12, 2018 · Jan 12, 2018
diff --git a/config-overrides.js b/config-overrides.js
@@ -48,6 +48,13 @@ module.exports = function override (config, env) {
         filename: 'foobar/index.html'
       })
     )
+    config.plugins.splice(2, 0,
+      new HtmlWebpackPlugin({
+        inject: true,
+        template: path.resolve(__dirname, 'public', 'simple/index.html'),
+        filename: 'simple/index.html'
+      })
+    )
   }
   // console.dir(config, { depth: 10, colors: true })
   return config

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.0.17",
     "react-select": "1.2.0",
+    "react-tooltip": "^3.4.0",
     "sass-loader": "^6.0.6",
     "shelljs": "0.8.0",
     "webpack": "^3.10.0",

diff --git a/public/index.html b/public/index.html
@@ -13,29 +13,43 @@
       * {
         box-sizing: border-box;  /* bootstrap does this on most sites. */
       }
-      main > div {
-        background-color: white;
+      main {
         max-width: 800px;
         margin: 20px auto;
+      }
+      main > div {
+        background-color: white;
         border: 1px solid #aaa;
       }
     </style>
   </head>
   <body>
     <main>
-      <a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a>
+      <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
+      <p><a href="/simple/">view simple socket panel</a></p>
+      <p>mode defined by options:</p>
       <div id="socket1"></div>
+      <p>Grid mode:</p>
       <div id="socket2"></div>
+      <p>Enquiry:</p>
       <div id="socket3"></div>
+      <p>Enquiry Modal:</p>
+      <div id="socket4"></div>
     </main>
   </body>
   <script>
     var public_key = '9c79f14df986a1ec693c'  // '61e9d8d03109e44d7c67'
     var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
-    var socket1 = socket(public_key, {
+    window.socket1 = socket(public_key, {
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
+      pagination: 8,
+    })
+    socket(public_key, {
+      element: '#socket2',
+      router_mode: 'history',
+      api_root: api_root,
       mode: 'grid',
       labels_include: [],
       labels_exclude: [],
@@ -44,13 +58,13 @@
       }
     })
     socket(public_key, {
-      element: '#socket2',
+      element: '#socket3',
       router_mode: 'history',
       mode: 'enquiry',
       api_root: api_root,
     })
     socket(public_key, {
-      element: '#socket3',
+      element: '#socket4',
       router_mode: 'history',
       mode: 'enquiry-modal',
       api_root: api_root,

diff --git a/public/simple/index.html b/public/simple/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>tutorcruncher-socket</title>
+    <style>
+      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500);
+      body {
+        background: #eee;
+        font-family: 'Open Sans', sans-serif;
+      }
+      * {
+        box-sizing: border-box;  /* bootstrap does this on most sites. */
+      }
+      main {
+        max-width: 800px;
+        margin: 20px auto;
+      }
+      main > div {
+        background-color: white;
+        border: 1px solid #aaa;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <p><a href="https://github.com/tutorcruncher/socket-frontend">github.com/tutorcruncher/socket-frontend</a></p>
+      <p><a href="/">back to index</a></p>
+      <p>simple socket view:</p>
+      <div id="socket"></div>
+    </main>
+  </body>
+  <script>
+    window.socket = socket('9c79f14df986a1ec693c')
+  </script>
+</html>
diff --git a/src/components/App.js b/src/components/App.js
@@ -61,13 +61,13 @@ class App extends Component {
   render () {
     if (this.state.error) {
       return <Error>{this.state.error}</Error>
-    } else if (this.props.config.mode === 'grid') {
-      return <Contractors root={this} config={this.props.config} history={this.props.history}/>
     } else if (this.props.config.mode === 'enquiry') {
       return <PlainEnquiry root={this} config={this.props.config}/>
-    } else {
-      // enquiry-modal
+    } else if (this.props.config.mode === 'enquiry-modal') {
       return <EnquiryButton root={this} config={this.props.config}/>
+    } else {
+      // grid or list
+      return <Contractors root={this} config={this.props.config} history={this.props.history}/>
     }
   }
 }

diff --git a/src/components/contractors/ConModal.js b/src/components/contractors/ConModal.js
@@ -3,6 +3,7 @@ import Modal from '../shared/Modal'
 import { Location, IfElse } from '../shared/Tools'
 import ConDetails from './ConDetails'
 import EnquiryForm from '../shared/EnquiryForm'
+import Stars from './Stars'
 
 const TRANSITION_TIME = 500
 
@@ -12,7 +13,7 @@ class ConModal extends Component {
     this.con_id = parseInt(this.props.id, 10)
     this.state = {
       show_enquiry: false,
-      transition_class: ''
+      transition_class: '',
     }
     this.get_contractor = this.get_contractor.bind(this)
     this.switch_view = this.switch_view.bind(this)
@@ -27,7 +28,7 @@ class ConModal extends Component {
   }
 
   switch_view () {
-    this.setState({transition_class: ' leave'})
+    this.setState({transition_class: ' in-trans'})
     setTimeout(() => {
       this.setState({show_enquiry: !this.state.show_enquiry, transition_class: ''})
     }, TRANSITION_TIME)
@@ -56,24 +57,26 @@ class ConModal extends Component {
           <div className="tcs-extra">
             <img src={contractor.photo} alt={contractor.name}/>
 
+            <Stars contractor={contractor} root={this.props.root}/>
+
             <div className="tcs-location">
               <Location/>
               <span>{contractor.town}</span>
             </div>
 
             <IfElse v={this.state.show_enquiry}>
-              <button onClick={this.switch_view}>
+              <button className="tcs-button" onClick={this.switch_view}>
                 {this.props.root.get_text('contractor_details_button', {contractor_name: contractor.name})}
               </button>
-              <button onClick={this.switch_view}>
+              <button className="tcs-button" onClick={this.switch_view}>
                 {this.props.root.get_text('contractor_enquiry_button', {contractor_name: contractor.name})}
               </button>
             </IfElse>
           </div>
           <div className="tcs-content">
             <div className="tcs-aside tcs-md">{contractor.tag_line}</div>
             <div className={'tcs-scroll con-modal-transition' + this.state.transition_class}
-                 style={{transition: `all ${TRANSITION_TIME}ms ease`}}>
+                 style={{transition: `all ${TRANSITION_TIME}ms ease-in-out`}}>
 
               <IfElse v={this.state.show_enquiry}>
                 <EnquiryForm contractor={contractor} root={this.props.root} config={this.props.config}/>

diff --git a/src/components/contractors/Contractors.js b/src/components/contractors/Contractors.js
@@ -1,21 +1,27 @@
 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 Grid from './Grid'
+import {If} from '../shared/Tools'
+import {Grid, List} from './List'
 import ConModal from './ConModal'
+import SelectSubjects from './SelectSubjects'
 
 class Contractors extends Component {
   constructor (props) {
     super(props)
     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)
   }
 
@@ -29,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)
   }
 
@@ -47,15 +65,22 @@ 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)
     this.props.config.event_callback('updated_contractors', contractors)
-    this.setState({
+    this.setState({contractors: []})
+    setTimeout(() => this.setState({
       contractors,
-      got_contractors: true
-    })
+      got_contractors: true,
+      more_pages: contractors.length === this.props.config.pagination,
+    }), 0)
   }
 
   get_contractor_details (con) {
@@ -75,16 +100,39 @@ class Contractors extends Component {
   }
 
   render () {
+    const DisplayComponent = this.props.config.mode === 'grid' ? Grid : List
     return (
-      <div className="tcs-app">
-        <Grid config={this.props.config}
-              history={this.props.history}
-              contractors={this.state.contractors}
-              subjects={this.state.subjects}
-              selected_subject={this.state.selected_subject}
-              subject_change={this.subject_change}
-              root={this.props.root}/>
+      <div className="tcs-app tcs-contractors">
+        <If v={this.state.got_contractors && this.props.config.subject_filter}>
+          <SelectSubjects get_text={this.props.root.get_text}
+                          contractors={this.state.contractors}
+                          subjects={this.state.subjects}
+                          selected_subject={this.state.selected_subject}
+                          subject_change={this.subject_change}/>
+        </If>
+        <DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
+        <If v={this.state.got_contractors && this.state.contractors.length === 0}>
+          <div className="tcs-no-contractors">
+            {this.props.root.get_text('no_tutors_found')}
+          </div>
+        </If>
 
+        <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}

diff --git a/src/components/contractors/Grid.js b/src/components/contractors/Grid.js