Merge pull request #11 from tutorcruncher/label-filter

adding labels filter

Author: samuelcolvin

.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
   },
   globals: {
     enz: true,
+    xhr_calls: true,
   },
   plugins: [
     'react'

public/index.html

@@ -30,13 +30,15 @@
     </main>
   </body>
   <script>
-    var public_key = '9c79f14df986a1ec693c'
-    var api_root = null  // 'http://localhost:8000'
+    var public_key = '9c79f14df986a1ec693c'  // '61e9d8d03109e44d7c67'
+    var api_root = null  // 'https://socket-beta.tutorcruncher.com' 'http://localhost:8000'
     var socket1 = socket(public_key, {
       element: '#socket1',
       router_mode: 'history',
       api_root: api_root,
       mode: 'grid',
+      labels_include: [],
+      labels_exclude: [],
       event_callback: function (name, v) {
         console.log(name, v)
       }

src/components/contractors/Contractors.js

@@ -49,7 +49,8 @@ class Contractors extends Component {
 
     this.setState({selected_subject})
     const sub_id = selected_subject && selected_subject.id
-    const contractors = await this.props.root.requests.get('contractors', {subject: sub_id || null})
+    const args = Object.assign({}, this.props.config.contractor_filter, {subject: sub_id || null})
+    const contractors = await this.props.root.requests.get('contractors', args)
     this.props.config.event_callback('updated_contractors', contractors)
     this.setState({
       contractors,

src/components/enquiry/EnquiryButton.js

@@ -4,7 +4,7 @@ import EnquiryModal from './EnquiryModal'
 
 const EnquiryButton = ({root, config}) => (
   <div className="tcs-app">
-    <div class="tcs-enquiry-modal">
+    <div className="tcs-enquiry-modal">
       <Link to={root.url('enquiry')} className="tcs-enquiry-button">
         {root.get_text('enquiry_button')}
       </Link>

src/index.js

@@ -97,6 +97,16 @@ window.socket = function (public_key, config) {
     config.element = '#socket'
   }
 
+  config.contractor_filter = {}
+  if (config.labels_include) {
+    config.contractor_filter.label = config.labels_include
+    delete config.labels_include
+  }
+  if (config.labels_exclude) {
+    config.contractor_filter.label_exclude = config.labels_exclude
+    delete config.labels_exclude
+  }
+
   if (config.subject_filter === undefined) {
     config.subject_filter = true
   }
@@ -144,6 +154,7 @@ window.socket = function (public_key, config) {
       } else {
         router.history.push(url_generator(path))
       }
-    }
+    },
+    config: config,
   }
 }

src/tests/App.test.js

@@ -1,10 +1,13 @@
 import React from 'react'
 import {BrowserRouter as Router} from 'react-router-dom'
 import App from '../components/App'
-import {tick} from './utils'
+import { xhr_setup, tick } from './utils'
+
+beforeEach(() => {
+  xhr_setup()
+})
 
 it('shows tutors', async () => {
-  // expect.assertions(2)
   const config = {
     router_mode: 'history',
     api_root: 'https://socket.tutorcruncher.com',
@@ -15,6 +18,34 @@ it('shows tutors', async () => {
   await tick()
   wrapper.update()
   // console.log(pretty_html(wrapper.html()))
-  expect(global.XMLHttpRequest.mock.calls.length).toBe(2)
+  expect(xhr_calls.length).toBe(2)
+  expect(xhr_calls[1]).toEqual({
+    method: 'GET',
+    url: 'https://socket.tutorcruncher.com/good/contractors',
+    args: null
+  })
+  expect(wrapper.find('.tcs-col').length).toBe(2)
+})
+
+it('with con filter', async () => {
+  const config = {
+    router_mode: 'history',
+    api_root: 'https://socket.tutorcruncher.com',
+    mode: 'grid',
+    contractor_filter: {
+      label: ['foobar'],
+      label_exclude: ['spam'],
+    },
+    event_callback: () => null,
+  }
+  const wrapper = enz.mount(<Router><App config={config} public_key={'good'} url_generator={u => u}/></Router>)
+  await tick()
+  wrapper.update()
+  expect(xhr_calls.length).toBe(2)
+  expect(xhr_calls[1]).toEqual({
+    method: 'GET',
+    url: 'https://socket.tutorcruncher.com/good/contractors',
+    args: 'label=foobar&label_exclude=spam'
+  })
   expect(wrapper.find('.tcs-col').length).toBe(2)
 })

src/tests/index.test.js

@@ -1,12 +1,37 @@
 import '../index'
+import { xhr_setup } from './utils'
+
+beforeEach(() => {
+  xhr_setup()
+})
 
 it('renders grid', () => {
   const div = document.createElement('div')
   div.setAttribute('id', 'socket')
   document.body.appendChild(div)
-  window.localStorage = {}
   const r = window.socket('good')
   expect(r.goto).toBeTruthy()
+  expect(r.config.contractor_filter).toEqual({})
   expect(div.querySelectorAll('.tcs-grid').length).toBe(1)
   // console.log(pretty_html(div.innerHTML))
 })
+
+
+it('converts contractor filter', () => {
+  const div = document.createElement('div')
+  div.setAttribute('id', 'socket')
+  document.body.appendChild(div)
+  const r = window.socket('good', {
+    // router_mode: 'history',
+    mode: 'grid',
+    labels_include: ['foobar'],
+    labels_exclude: ['spam'],
+    event_callback: () => null,
+  })
+  expect(r.goto).toBeTruthy()
+  expect(r.config.contractor_filter).toEqual({
+    'label': ['foobar'],
+    'label_exclude': ['spam'],
+  })
+  // console.log(pretty_html(div.innerHTML))
+})

src/tests/setup.js

@@ -3,13 +3,11 @@ import {configure} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import {shallow, mount, render} from 'enzyme'
 import pretty from 'pretty'
-import {MockXMLHttpRequest} from './utils'
-
 
 configure({
   adapter: new Adapter()
 })
-global.XMLHttpRequest = jest.fn(MockXMLHttpRequest)
+window.localStorage = {}
 global.pretty_html = pretty
 global.enz = {
   shallow: shallow,

src/tests/utils.js

@@ -1,13 +1,13 @@
 const RESPONSES = {
-  'GET:https://socket.tutorcruncher.com/good/subjects': {
+  'GET:https://socket.tutorcruncher.com/good/subjects': () => ({
     status: 200,
     content: JSON.stringify([
       {'id': 29, 'name': 'English Language', 'category': 'English', 'link': '29-english-language'},
       {'id': 31, 'name': 'English Literature', 'category': 'English', 'link': '31-english-literature'},
       {'id': 61, 'name': 'Chinese', 'category': 'Languages', 'link': '61-chinese'}
     ])
-  },
-  'GET:https://socket.tutorcruncher.com/good/contractors': {
+  }),
+  'GET:https://socket.tutorcruncher.com/good/contractors': () => ({
     status: 200,
     content: JSON.stringify(
       [
@@ -36,7 +36,7 @@ const RESPONSES = {
           'distance': null
         }
       ])
-  }
+  })
 }
 
 export function MockXMLHttpRequest () {
@@ -57,9 +57,17 @@ export function MockXMLHttpRequest () {
   this.status = null
   this.statusText = null
   this.send = function (data) {
-    // console.log(`XHR ${_method}: ${_url}`)
-    const response = RESPONSES[`${_method}:${_url}`]
-    if (response) {
+    let args = null
+    if (_url.includes('?')) {
+      args = _url.substr(_url.indexOf('?') + 1, _url.length)
+      _url = _url.substr(0, _url.indexOf('?'))
+    }
+    // console.log(`XHR ${_method}: ${_url} args=${args}`)
+    const f = RESPONSES[`${_method}:${_url}`]
+    const req = {method: _method, url: _url, args}
+    global.xhr_calls.push(req)
+    if (f) {
+      const response = f(req)
       this.status = response.status
       this.responseText = response.content
       this.onload && this.onload()
@@ -70,5 +78,10 @@ export function MockXMLHttpRequest () {
 }
 
 export function tick () {
-  return new Promise(resolve => setTimeout(resolve, 0.01))
+  return new Promise(resolve => setTimeout(resolve, 0))
+}
+
+export function xhr_setup () {
+  global.xhr_calls = []
+  global.XMLHttpRequest = MockXMLHttpRequest
 }

src/utils.js

@@ -128,9 +128,14 @@ export const requests = {
   get: async (app, path, args) => {
     if (args) {
       const arg_list = []
+      const add_arg = (n, v) => arg_list.push(encodeURIComponent(n) + '=' + encodeURIComponent(v))
       for (let [name, value] of Object.entries(args)) {
-        if (value !== null) {
-          arg_list.push(encodeURIComponent(name) + '=' + encodeURIComponent(value))
+        if (Array.isArray(value)) {
+          for (let value_ of value) {
+            add_arg(name, value_)
+          }
+        } else if (value !== null && value !== undefined) {
+          add_arg(name, value)
         }
       }
       if (arg_list.length > 0) {