Merge pull request #87 from tutorcruncher/fix-contractor-details

fix contractor details view

Author: tomhamiltonstubber

package.json

@@ -23,9 +23,9 @@
     "lintfix": "eslint src --fix"
   },
   "engines": {
-    "node": "8.x",
-    "npm": "5.x",
-    "yarn": "1.10.x"
+    "node": ">=8",
+    "npm": ">=5",
+    "yarn": ">=1.10"
   },
   "jest": {
     "verbose": true,

src/components/contractors/ConDetails.js

@@ -9,18 +9,18 @@ const filter_qual_levels = skills => {
   }
 }
 
-const ConDetails = ({contractor, contractor_extra, get_text}) => (
+const ConDetails = ({contractor, get_text}) => (
   <div className="con-details">
     <Markdown content={contractor.primary_description}/>
 
-    <DisplayExtraAttrs extra_attributes={contractor_extra && contractor_extra.extra_attributes}/>
-    <If v={contractor_extra && contractor_extra.skills}>
+    <DisplayExtraAttrs extra_attributes={contractor.extra_attributes}/>
+    <If v={contractor.skills}>
       <table className="tcs-skills">
         <caption>
           <h3>{get_text('skills_label')}</h3>
         </caption>
         <tbody>
-          {contractor_extra && contractor_extra.skills.map((skill, i) => (
+          {contractor.skills && contractor.skills.map((skill, i) => (
             <tr key={i}>
               <th scope="row">{skill.subject}</th>
               <td>

src/components/contractors/ConModal.js

@@ -11,47 +11,44 @@ const TRANSITION_TIME = 500
 class ConModal extends Component {
   constructor (props) {
     super(props)
-    this.con_id = parseInt(this.props.id, 10)
     this.state = {
       show_enquiry: false,
       transition_class: '',
+      loaded: false,
     }
-    this.get_contractor = this.get_contractor.bind(this)
-    this.switch_view = this.switch_view.bind(this)
   }
 
-  get_contractor () {
-    for (let contractor of this.props.contractors) {
-      if (contractor.id === this.con_id) {
-        return {contractor, contractor_extra: this.props.get_contractor_details(contractor)}
-      }
-    }
+  componentDidMount () {
+    this.props.get_contractor(
+        parseInt(this.props.id, 10),
+        c => this.setState({contractor: c, loaded: true})
+    )
   }
 
-  switch_view () {
+  switch_view = () => {
     this.setState({transition_class: ' in-trans'})
     setTimeout(() => {
       this.setState({show_enquiry: !this.state.show_enquiry, transition_class: ''})
     }, TRANSITION_TIME)
   }
 
   render () {
-    if (!this.props.got_contractors) {
+    if (!this.state.loaded) {
       return (
         <Modal history={this.props.history} title='' config={this.props.config}>
           <p>Loading...</p>
         </Modal>
       )
     }
-    const _con = this.get_contractor()
-    if (!_con) {
+    const contractor = this.state.contractor
+    if (!contractor) {
       return (
         <Modal history={this.props.history} config={this.props.config} title='Contractor not Found'>
           <p>No Contractor found with id {this.props.id}.</p>
         </Modal>
       )
     }
-    const {contractor, contractor_extra} = _con
+
     return (
       <Modal history={this.props.history} title={contractor.name} last_url={this.props.last_url} config={this.props.config}>
         <div className="tcs-extra">
@@ -83,9 +80,7 @@ class ConModal extends Component {
                            config={this.props.config}
                            mode='con-modal'/>
             {/*else:*/}
-              <ConDetails contractor={contractor}
-                          contractor_extra={contractor_extra}
-                          get_text={this.props.config.get_text}/>
+              <ConDetails get_text={this.props.config.get_text} contractor={contractor}/>
             </IfElse>
 
           </div>

src/components/contractors/Contractors.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react'
 import {Link, Route} from 'react-router-dom'
-import {slugify} from '../../utils'
+import {slugify, sleep} from '../../utils'
 import {If} from '../shared/Tools'
 import {Grid, List} from './List'
 import ConModal from './ConModal'
 import {SubjectSelect, LocationInput} from './Filters'
 
-class Contractors extends Component {
+export default class Contractors extends Component {
   constructor (props) {
     super(props)
     this.state = {
@@ -18,14 +18,6 @@ class Contractors extends Component {
       last_url: null,
       location_str: 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)
-    this.location_change = this.location_change.bind(this)
-    this.submit_location = this.submit_location.bind(this)
   }
 
   async componentDidMount () {
@@ -38,38 +30,38 @@ class Contractors extends Component {
     await this.update_contractors()
   }
 
-  subject_url (selected_subject) {
+  subject_url = selected_subject => {
     if (selected_subject) {
       return this.props.root.url(`subject/${selected_subject.id}-${slugify(selected_subject.name)}`)
     } else {
       return this.props.root.url('')
     }
   }
 
-  page_url (new_page) {
+  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) {
+  subject_change = selected_subject => {
     const url = this.subject_url(selected_subject)
     this.props.history.push(url)
     this.setState({last_url: url})
     this.update_contractors(selected_subject)
   }
 
-  location_change (loc) {
+  location_change = loc => {
     this.setState({location_str: loc})
   }
 
-  submit_location (location_str) {
+  submit_location = location_str => {
     this.update_contractors(this.state.selected_subject, location_str)
   }
 
-  async update_contractors (selected_subject, location_str) {
+  update_contractors = async (selected_subject, location_str) => {
     if (!selected_subject) {
       const m = this.props.history.location.pathname.match(/subject\/(\d+)/)
       const subject_id = m ? parseInt(m[1], 10) : null
@@ -101,20 +93,39 @@ class Contractors extends Component {
     }), 0)
   }
 
-  get_contractor_details (con) {
-    const state_ref = 'con_extra_' + con.id
-    const con_extra = this.state[state_ref]
-    if (con_extra === undefined) {
-      this.set_contractor_details(con.url, state_ref)
+  get_contractor = async (contractor_id, set_contractor) => {
+
+    const state_ref = `con_extra_${contractor_id}`
+    let contractor = this.state[state_ref]
+    if (contractor) {
+      set_contractor(contractor)
+      return
+    }
+
+    // make sure update_contractors has finished before getting the contractor to avoid unnecessary requests
+    while (!this.state.contractor_response) {
+      await sleep(50)
     }
-    return con_extra
-  }
 
-  async set_contractor_details (url, state_ref) {
-    this.setState({[state_ref]: null})
-    const con_details = await this.props.root.requests.get(url)
-    this.props.config.event_callback('get_contractor_details', con_details)
-    this.setState({[state_ref]: con_details})
+    const contractor_summary = this.state.contractor_response.results.find(c => c.id === contractor_id)
+    let url
+    if (contractor_summary) {
+      set_contractor(contractor_summary)
+      url = contractor_summary.url
+    } else {
+      url = `contractors/${contractor_id}`
+    }
+
+    let r = await this.props.root.requests.get(url, null, {expected_statuses: [200, 404]})
+    if (r.status === 404) {
+      set_contractor(null)
+    } else {
+      contractor = r.data
+      this.props.config.event_callback('get_contractor_details', contractor)
+
+      this.setState({[state_ref]: contractor})
+      set_contractor(contractor)
+    }
   }
 
   render () {
@@ -194,18 +205,16 @@ class Contractors extends Component {
           </div>
         </If>
         <Route path={this.props.root.url(':id(\\d+):_extra')} render={props => (
-          <ConModal id={props.match.params.id}
-                    last_url={this.state.last_url}
-                    contractors={this.state.contractor_response && this.state.contractor_response.results}
-                    got_contractors={Boolean(this.state.contractor_response)}
-                    get_contractor_details={this.get_contractor_details}
-                    root={this.props.root}
-                    config={this.props.config}
-                    history={props.history}/>
+          <ConModal
+              id={props.match.params.id}
+              last_url={this.state.last_url}
+              get_contractor={this.get_contractor}
+              root={this.props.root}
+              config={this.props.config}
+              history={props.history}
+          />
         )}/>
       </div>
     )
   }
 }
-
-export default Contractors

src/utils.js

@@ -2,7 +2,7 @@ import marked from 'marked'
 
 marked.setOptions({
   gfm: true,
-  sanitize: true,
+  sanitize: true,  // SWITCH to https://github.com/cure53/DOMPurify
   smartLists: true,
 })
 
@@ -14,6 +14,10 @@ export const to_markdown = t => {
   }
 }
 
+export function sleep (ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
 export const auto_url_root = path => {
   // remove :
   // * /subject/.*