Merge pull request #1110 from LD4P/functionalLang

Make InputLang a functional component
LD4P · Jul 31, 2019 · d0979e7 · d0979e7
2 parents b7aedd4 + c908e2a
commit d0979e7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 50 deletions.
diff --git a/__tests__/components/editor/property/InputLang.test.js b/__tests__/components/editor/property/InputLang.test.js
@@ -29,33 +29,12 @@ describe('<InputLang />', () => {
     )
   })
 
-  it('typeahead component should use selectHintOnEnter', () => {
-    expect(wrapper.find('#langComponent').props().selectHintOnEnter).toBeTruthy()
+  it('typeahead component uses selectHintOnEnter', () => {
+    expect(wrapper.find('#langComponent').props().selectHintOnEnter).toEqual(true)
   })
 
-  it('should call the handleLangChange on change', () => {
+  it('calls the handleLangChange on change', () => {
     wrapper.find('#langComponent').simulate('change', [{ id: 'en', label: 'English' }])
-    expect(mockLangChangeFn.call.length).toBe(1)
-  })
-
-  it('should call the onFocus event and set the selected option', () => {
-    const opts = { id: 'URI', label: 'LABEL', uri: 'URI' }
-
-    wrapper.instance().opts = opts
-    const event = (wrap) => {
-      global.fetch = jest.fn().mockImplementation(async () => await { ok: true, resp: wrapper.instance().opts })
-      wrap.setState({ options: [wrapper.instance().opts] })
-      wrap.setState({ selected: [wrapper.instance().opts] })
-    }
-
-    wrapper.find('#langComponent').simulate('focus', event(wrapper))
-    expect(wrapper.state().options[0]).toEqual(opts)
-    expect(wrapper.find('TypeaheadContainer(WrappedTypeahead)').props().emptyLabel).toEqual('retrieving list of languages...')
-
-    wrapper.find('#langComponent').simulate('change', [{ id: 'en', label: 'English' }])
-    expect(wrapper.state().selected[0]).toEqual(opts)
-
-    wrapper.find('#langComponent').simulate('blur', event(wrapper))
-    expect(wrapper.state('isLoading')).toBeFalsy()
+    expect(mockLangChangeFn).toHaveBeenCalled()
   })
 })
diff --git a/src/components/editor/property/InputLang.jsx b/src/components/editor/property/InputLang.jsx
@@ -1,6 +1,6 @@
 // Copyright 2019 Stanford University see LICENSE for license
 
-import React, { Component } from 'react'
+import React from 'react'
 import { Typeahead } from 'react-bootstrap-typeahead'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
@@ -11,31 +11,26 @@ import { findNode } from 'selectors/resourceSelectors'
  * See https://tools.ietf.org/html/rfc5646
  * See ISO 639 for the list of registered language codes
  */
-class InputLang extends Component {
-  setPayLoad(items) {
-    const payload = {
-      reduxPath: this.props.reduxPath,
-      lang: items[0].id,
-    }
-    this.props.handleLangChange(payload)
-  }
+const InputLang = (props) => {
+  const setPayLoad = selected => props.handleLangChange({
+    reduxPath: props.reduxPath,
+    lang: selected[0].id,
+  })
 
-  render() {
-    return (
-      <div>
-        <label htmlFor="langComponent">Select language for {this.props.textValue}
-          <Typeahead
-            onChange={selected => this.setPayLoad(selected)}
-            isLoading={this.props.loading}
-            options={this.props.options}
-            emptyLabel={'retrieving list of languages...'}
-            selectHintOnEnter={true}
-            id={'langComponent'}
-          />
-        </label>
-      </div>
-    )
-  }
+  return (
+    <div>
+      <label htmlFor="langComponent">Select language for {props.textValue}
+        <Typeahead
+          onChange={setPayLoad}
+          isLoading={props.loading}
+          options={props.options}
+          emptyLabel={'retrieving list of languages...'}
+          selectHintOnEnter={true}
+          id={'langComponent'}
+        />
+      </label>
+    </div>
+  )
 }
 
 InputLang.propTypes = {