Reduce code complexity

Addresses code climate warning
Royal-Navy · Dec 10, 2019 · b4beab0 · b4beab0
1 parent f677643
commit b4beab0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 44 deletions.
diff --git a/packages/react-component-library/src/components/TextArea/TextArea.test.tsx b/packages/react-component-library/src/components/TextArea/TextArea.test.tsx
@@ -3,12 +3,12 @@ import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult } from '@testing-library/react'
 
 import withFormik from '../../enhancers/withFormik'
-import InputProps from '../../types/InputProps'
+import FieldProps from '../../types/FieldProps'
 import FormProps from '../../types/FormProps'
 import { TextArea } from './index'
 
 describe('TextArea', () => {
-  let field: InputProps
+  let field: FieldProps
   let form: FormProps
   let label = ''
   let textInput: RenderResult
@@ -17,7 +17,8 @@ describe('TextArea', () => {
     field = {
       name: 'colour',
       value: '',
-      onChange: jest.fn(),
+      onBlur: null,
+      onChange: jest.fn()
     }
 
     form = {

diff --git a/packages/react-component-library/src/components/TextArea/index.tsx b/packages/react-component-library/src/components/TextArea/index.tsx
@@ -1,7 +1,9 @@
-import React, { useState } from 'react'
+import React from 'react'
 import uuid from 'uuid'
 import classNames from 'classnames'
 
+import { useFocus } from '../../hooks/useFocus'
+
 export interface InputProps {
   autoFocus?: boolean
   className?: string
@@ -10,7 +12,7 @@ export interface InputProps {
   id?: string
   label?: string
   name: string
-  onBlur?: (event: React.FormEvent<Element>) => void
+  onBlur?: (event: React.FormEvent) => void
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
   placeholder?: string
   value?: string
@@ -31,27 +33,15 @@ export const TextArea: React.FC<InputProps> = props => {
     ...rest
   } = props
 
-  const [focus, setFocus] = useState(false)
+  const { focus, onLocalBlur, onFocus } = useFocus(onBlur)
   const hasContent = value && value.length
   const hasLabel = label && label.length
 
-  const classes = classNames('rn-textarea', className, {
+  const classes = classNames('rn-textinput', {
     'has-focus': focus,
     'has-content': hasContent,
     'no-label': !hasLabel,
-  })
-
-  const onFocus = () => {
-    setFocus(true)
-  }
-
-  const onLocalBlur = (event: React.FormEvent) => {
-    setFocus(false)
-
-    if (onBlur) {
-      onBlur(event)
-    }
-  }
+  }, className)
 
   return (
     <div className={classes} data-testid="textarea-container">

diff --git a/packages/react-component-library/src/components/TextInput/TextInput.test.tsx b/packages/react-component-library/src/components/TextInput/TextInput.test.tsx
@@ -3,12 +3,12 @@ import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult } from '@testing-library/react'
 
 import withFormik from '../../enhancers/withFormik'
-import InputProps from '../../types/InputProps'
+import FieldProps from '../../types/FieldProps'
 import FormProps from '../../types/FormProps'
 import TextInput from './index'
 
 describe('TextInput', () => {
-  let field: InputProps
+  let field: FieldProps
   let form: FormProps
   let label = ''
   let textInput: RenderResult
@@ -17,6 +17,7 @@ describe('TextInput', () => {
     field = {
       name: 'colour',
       value: '',
+      onBlur: null,
       onChange: jest.fn(),
     }
 

diff --git a/packages/react-component-library/src/components/TextInput/index.tsx b/packages/react-component-library/src/components/TextInput/index.tsx
@@ -1,5 +1,8 @@
-import React, { useState } from 'react'
+import React  from 'react'
 import uuid from 'uuid'
+import classNames from 'classnames'
+
+import { useFocus } from '../../hooks/useFocus'
 
 export interface InputProps {
   autoFocus?: boolean
@@ -9,7 +12,7 @@ export interface InputProps {
   value?: string
   name: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
-  onBlur?: (event: React.FormEvent<Element>) => void
+  onBlur?: (event: React.FormEvent) => void
   footnote?: string
   id?: string
   label?: string
@@ -51,29 +54,15 @@ const TextInput: React.FC<InputProps> = props => {
     ...rest
   } = props
 
-  const [focus, setFocus] = useState(false)
-
+  const { focus, onLocalBlur, onFocus } = useFocus(onBlur)
   const hasContent = value && value.length
   const hasLabel = label && label.length
 
-  const classes = `rn-textinput
-    ${focus ? 'has-focus' : ''}
-    ${hasContent ? 'has-content' : ''}
-    ${!hasLabel ? 'no-label' : ''}
-    ${className}
-  `
-
-  const onFocus = () => {
-    setFocus(true)
-  }
-
-  const onLocalBlur = (event: React.FormEvent) => {
-    setFocus(false)
-
-    if (onBlur) {
-      onBlur(event)
-    }
-  }
+  const classes = classNames('rn-textinput', {
+    'has-focus': focus,
+    'has-content': hasContent,
+    'no-label': !hasLabel,
+  }, className)
 
   return (
     <div className={classes} data-testid="container">

diff --git a/packages/react-component-library/src/hooks/useFocus.ts b/packages/react-component-library/src/hooks/useFocus.ts
@@ -0,0 +1,23 @@
+import React, { useState } from 'react'
+
+export function useFocus(onBlur: (event: React.FormEvent) => void) {
+  const [focus, setFocus] = useState(false)
+
+  const onFocus = () => {
+    setFocus(true)
+  }
+
+  const onLocalBlur = (event: React.FormEvent) => {
+    setFocus(false)
+
+    if (onBlur) {
+      onBlur(event)
+    }
+  }
+
+  return {
+    focus,
+    onFocus,
+    onLocalBlur,
+  }
+}