location search

Author: samuelcolvin

public/simple/index.html

@@ -34,6 +34,10 @@
   <script>
     var public_key = '9c79f14df986a1ec693c'
     var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
-    window.socket = socket(public_key, {api_root: api_root})
+    window.socket = socket(public_key, {
+      api_root: api_root,
+      // subject_filter: false,
+      // location_input: false
+    })
   </script>
 </html>

src/components/App.js

@@ -30,6 +30,10 @@ class App extends Component {
 
   get_text (name, replacements) {
     let s = this.props.config.messages[name]
+    if (!s) {
+      console.warn(`not translation found for "${name}"`)
+      return name
+    }
     for (let [k, v] of Object.entries(replacements || {})) {
       s = s.replace(`{${k}}`, v)
     }

src/components/contractors/Contractors.js

@@ -4,26 +4,28 @@ import {async_start, slugify} from '../../utils'
 import {If} from '../shared/Tools'
 import {Grid, List} from './List'
 import ConModal from './ConModal'
-import SelectSubjects from './SelectSubjects'
+import {SubjectSelect, LocationInput} from './Filters'
 
 class Contractors extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      contractors: [],
-      got_contractors: false,
+      contractor_response: null,
       page: 1,
       more_pages: false,
       subjects: [],
       selected_subject: null,
       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 () {
@@ -59,14 +61,25 @@ class Contractors extends Component {
     this.update_contractors(selected_subject)
   }
 
-  async update_contractors (selected_subject) {
+  location_change (loc) {
+    this.setState({location_str: loc})
+  }
+
+  submit_location (location_str) {
+    this.update_contractors(this.state.selected_subject, location_str)
+  }
+
+  async update_contractors (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
       if (subject_id && this.state.subjects.length > 0) {
         selected_subject = this.state.subjects.find(s => s.id === subject_id)
       }
     }
+    if (location_str === undefined) {
+      location_str = this.state.location_str
+    }
 
     const m = this.props.history.location.pathname.match(/page\/(\d+)/)
     const page = m ? parseInt(m[1], 10) : 1
@@ -75,20 +88,15 @@ class Contractors extends Component {
       subject: selected_subject ? selected_subject.id : null,
       pagination: this.props.config.pagination,
       page: page,
+      location: location_str,
     })
-    const data = await this.props.root.requests.get('contractors', args)
-    let contractors
-    if (Array.isArray(data)) {
-      contractors = data
-    } else {
-      contractors = data.results
-    }
-    this.props.config.event_callback('updated_contractors', contractors)
-    this.setState({contractors: []})
+    console.log(args)
+    const contractor_response = await this.props.root.requests.get('contractors', args)
+    this.props.config.event_callback('updated_contractors', contractor_response)
+    this.setState({contractor_response: {results: []}})
     setTimeout(() => this.setState({
-      contractors,
-      got_contractors: true,
-      more_pages: contractors.length === this.props.config.pagination,
+      contractor_response,
+      more_pages: contractor_response.count > contractor_response.results.length,
     }), 0)
   }
 
@@ -109,18 +117,40 @@ class Contractors extends Component {
   }
 
   render () {
+    let description = ''
+    const con_count = this.state.contractor_response && this.state.contractor_response.count
+    if (con_count && this.state.selected_subject) {
+      const msg_id_suffix = con_count === 1 ? 'single' : 'plural'
+      description = this.props.root.get_text('subject_filter_summary_' + msg_id_suffix, {
+        count: con_count,
+        subject: this.state.selected_subject.name,
+      })
+    }
     const DisplayComponent = this.props.config.mode === 'grid' ? Grid : List
     return (
       <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 v={this.state.contractor_response}>
+          <div className="tcs-filters-container">
+            <LocationInput get_text={this.props.root.get_text}
+                           show={this.props.config.location_input}
+                           loc_raw={this.state.location_str}
+                           loc_change={this.location_change}
+                           submit={this.submit_location}/>
+
+            <SubjectSelect get_text={this.props.root.get_text}
+                           show={this.props.config.subject_filter}
+                           subjects={this.state.subjects}
+                           selected_subject={this.state.selected_subject}
+                           subject_change={this.subject_change}/>
+          </div>
+          <div key="summary" className="tcs-summary">
+            {description}
+          </div>
         </If>
-        <DisplayComponent contractors={this.state.contractors} root={this.props.root}/>
-        <If v={this.state.got_contractors && this.state.contractors.length === 0}>
+        <DisplayComponent
+          contractors={this.state.contractor_response ? this.state.contractor_response.results : []}
+          root={this.props.root}/>
+        <If v={this.state.contractor_response && this.state.contractor_response.count === 0}>
           <div className="tcs-no-contractors">
             {this.props.root.get_text('no_tutors_found')}
           </div>
@@ -145,8 +175,8 @@ class Contractors extends Component {
         <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.contractors}
-                    got_contractors={this.state.got_contractors}
+                    contractors={this.state.contractor_response.results}
+                    got_contractors={!!this.state.contractor_response}
                     get_contractor_details={this.get_contractor_details}
                     root={this.props.root}
                     config={this.props.config}

src/components/contractors/Filters.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import Select from 'react-select'
+import 'react-select/dist/react-select.css'
+import {If} from '../shared/Tools'
+
+export const SubjectSelect = ({get_text, show, subjects, selected_subject, subject_change}) => {
+  return (
+    <div className="tcs-contractor-filter">
+      <If v={show}>
+        <Select
+          value={selected_subject && selected_subject.id}
+          onChange={subject_change}
+          placeholder={get_text('subject_filter_placeholder')}
+          labelKey='name'
+          valueKey='id'
+          options={subjects}/>
+      </If>
+    </div>
+  )
+}
+
+
+export const LocationInput = ({get_text, show, loc_raw, loc_change, submit}) => {
+  return (
+    <div className="tcs-contractor-filter tcs-location-filter">
+      <If v={show}>
+        <input className="tcs-location-input"
+               type="text"
+               value={loc_raw || ''}
+               onChange={v => loc_change(v.target.value || null)}
+               onKeyPress={v => v.key === 'Enter' && submit()}
+               placeholder={get_text('location_input_placeholder')}/>
+        <span className="tcs-location-clear"
+              style={{visibility: loc_raw === null ? 'hidden' : 'visible'}}
+              onClick={() => loc_change(null) || submit(null)}>
+          ×
+        </span>
+      </If>
+    </div>
+  )
+}
+

src/components/contractors/SelectSubjects.js

@@ -34,9 +34,10 @@ const STRINGS = {
   enquiry_title: 'Enquiry',
   grecaptcha_missing: 'This captcha is required',
   required: ' (Required)',
-  subject_filter: 'Filter by subject',
+  subject_filter_placeholder: 'Select a Subject...',
   subject_filter_summary_single: '{subject}: showing 1 result',
   subject_filter_summary_plural: '{subject}: showing {count} results',
+  location_input_placeholder: 'Enter your Address or Postal code...',
   view_profile: 'View Profile',
   review_hours: '({hours} hours)',
   previous: 'Previous',
@@ -120,6 +121,10 @@ window.socket = async function (public_key, config) {
     config.subject_filter = true
   }
 
+  if (config.location_input === undefined) {
+    config.location_input = true
+  }
+
   if (!config.event_callback) {
     config.event_callback = () => null
   }

src/index.js

@@ -23,8 +23,8 @@
 @import './styles/stars';
 @import './styles/tools';
 @import './styles/contractors';
+@import './styles/contractor-filters';
 @import './styles/grid';
 @import './styles/list';
 @import './styles/input';
 @import './styles/modal';
-@import './styles/subject-select';

src/main.scss

@@ -0,0 +1,81 @@
+//@import './vue-multiselect/dist/vue-multiselect.min';
+@import '../conf';
+
+.multiselect__select {
+  cursor: default;
+  right: 16px;
+}
+
+.multiselect__option--highlight {
+  background: $brand-colour;
+}
+
+.multiselect__option--selected.multiselect__option--highlight {
+  background: darken($brand-colour, 10%);
+}
+
+//.cross {
+//  position: absolute;
+//  top: 1px;
+//  right: 1px;
+//  margin: 5px 4px;
+//  padding: 4px 4px;
+//  cursor: pointer;
+//  z-index: 10;
+//  svg.tcs-svg {
+//    transition: all .4s ease;
+//    opacity: 0.5;
+//    width: 18px;
+//    height: 18px;
+//  }
+//  &:hover {
+//    svg.tcs-svg {
+//      opacity: 1;
+//    }
+//  }
+//}
+
+.tcs-filters-container {
+  display: flex;
+}
+
+.tcs-contractor-filter {
+  width: 50%;
+  padding: 0 2px;
+  box-sizing: border-box;
+}
+
+.tcs-location-filter {
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  height: 36px;
+}
+
+.tcs-location-input {
+  width: calc(100% - 30px);
+  border: none;
+  padding: 8px;
+  font-size: 16px;
+  outline: none !important;
+  &::placeholder {
+    color: #aaa;
+  }
+}
+.tcs-location-clear {
+  padding: 6px;
+  width: 30px;
+  background: none;
+  border: none;
+  font-size: 16px;
+  color: #999;
+  cursor: pointer;
+  &:hover {
+    color: #666;
+  }
+}
+
+@media(max-width: 600px) {
+  .tcs-contractor-filter {
+    width: 100%;
+  }
+}

src/styles/contractor-filters.scss

@@ -4,23 +4,7 @@
   padding: 10px;
 }
 
-.subject-select {
-  width: 50%;
-  margin: 0 0 0 auto;
-  padding: 0 2px;
-  box-sizing: border-box;
-}
-
-@media(max-width: 600px) {
-  .subject-select {
-    width: 100%;
-  }
-}
-
 @media(max-width: 400px) {
-  .subject-select {
-    width: 100%;
-  }
   .tcs-contractors {
     padding: 10px 2px;
   }