[React Hooks] Add useForm hook to manage form submit

Author: lotrien

src/actions/index.js

@@ -47,7 +47,7 @@ export const fetchSyntaxes = dispatch => (
     .then(json => dispatch(setSyntaxes(json)))
 )
 
-export const postSnippet = (snippet, onSuccess) => dispatch => (
+export const postSnippet = (snippet, onSuccess, onError = () => {}) => dispatch => (
   fetch(getApiUri('snippets'), {
     method: 'POST',
     headers: {
@@ -61,4 +61,5 @@ export const postSnippet = (snippet, onSuccess) => dispatch => (
       dispatch(setSnippet(json))
       onSuccess(json)
     })
+    .catch(onError)
 )

src/components/ListBoxWithSearch.jsx

@@ -1,17 +1,15 @@
-import React, { useState } from 'react'
+import React, { Fragment, useState, useCallback } from 'react'
 
 import ListBox from './ListBox'
 
 import { regExpEscape } from '../misc/reqExp'
 
-const ListBoxWithSearch = props => {
-  let { items } = props
-
+const ListBoxWithSearch = ({ items, onClick }) => {
   const [ searchQuery, setSearchQuery ] = useState(null)
 
-  const onSearch = e => {
+  const onSearch = useCallback(e => {
     setSearchQuery(e.target.value.trim())
-  }
+  })
 
   // Normalize items arrays so each item is always an object.
   items = items.map((item) => {
@@ -30,17 +28,17 @@ const ListBoxWithSearch = props => {
   }
 
   return (
-    [
+    <Fragment>
       <div className="new-snippet-lang-header" key="Syntax input">
         <input className="input" placeholder="Type to search..." onChange={onSearch} />
-      </div>,
+      </div>
       <div className="new-snippet-lang-list-wrapper" key="Syntax list">
         <ListBox
           items={items}
-          onClick={props.onClick}
+          onClick={onClick}
         />
-      </div>,
-    ]
+      </div>
+    </Fragment>
   )
 }
 

src/components/NewSnippet.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
 import { WithContext as Tags } from 'react-tag-input'
@@ -17,25 +17,18 @@ import { validateSnippet } from '../entries/snippetValidation'
 import { delimeterKeys } from '../entries/keyboardKeys'
 import { defaultOptions } from '../entries/aceEditorOptions'
 
-import '../styles/NewSnippet.styl'
-
-const recalcLangHeaderHeight = () => {
-  const mainHeader = 'new-snippet-code-header'
-  const langHeader = 'new-snippet-lang-header'
-
-  const height = document.getElementsByClassName(mainHeader)[0].offsetHeight
-
-  document.getElementsByClassName(langHeader)[0].setAttribute('style', `height:${height}px`)
-}
+import useForm from '../hooks/useForm'
 
-const NewSnippet = props => {
-  const { dispatch, history } = props
+import '../styles/NewSnippet.styl'
 
-  const [ syntax, setSyntax ] = useState('')
-  const [ content, setContent ] = useState('')
-  const [ title, setTitle ] = useState('')
-  const [ tags, setTags ] = useState([])
-  const [ validationError, setValidationError ] = useState(null)
+const NewSnippet = ({ dispatch, history, syntaxes }) => {
+  const snippetHeader = useRef()
+  const {
+    values: { title = '', syntax = '', content = '', tags = [] },
+    error,
+    handleChange,
+    handleSubmit,
+  } = useForm(post, validate)
 
   useEffect(() => {
     dispatch(fetchSyntaxes)
@@ -45,82 +38,72 @@ const NewSnippet = props => {
     recalcLangHeaderHeight()
   }, [tags])
 
-  const onTagAdded = tag => {
-    if (tag && tag.text) {
-      setTags([...tags, tag])
-    }
+  function validate() {
+    return validateSnippet({ content: content.trim() })
   }
 
-  const onTagRemoved = i => {
-    setTags(tags.filter((tag, index) => index !== i))
+  function post() {
+    dispatch(postSnippet({
+      content, title, tags: tags.map(tag => tag.text), syntax,
+    }, json => history.push(`/${json.id}`)))
   }
 
-  const onTagBlur = tag => {
-    onTagAdded({ id: tag, text: tag })
-  }
+  const recalcLangHeaderHeight = () => {
+    const height = snippetHeader.current.offsetHeight
 
-  const onSyntaxClick = syntax => {
-    setSyntax(syntax)
+    document.getElementsByClassName('new-snippet-lang-header')[0]
+      .setAttribute('style', `height:${height}px`)
   }
 
-  const onTitleChange = e => {
-    const { value } = e.target
+  const onTagBlur = tag => onTagAdded({ id: tag, text: tag })
 
-    setTitle(value)
+  const onTagAdded = tag => {
+    if (tag && tag.text) {
+      return { tags: [...tags, tag] }
+    }
   }
 
-  const validate = () => validateSnippet({ content: content.trim() })
-
-  const post = e => {
-    e.preventDefault()
-    const { error } = validate()
-
-    setValidationError(error)
-
-    if (!error) {
-      dispatch(postSnippet({
-        content, title, tags: tags.map(tag => tag.text), syntax,
-      }, json => history.push(`/${json.id}`)))
-    }
+  const onTagRemoved = i => {
+    return { tags: tags.filter((tag, index) => index !== i) }
   }
 
+  const handleSyntax = syntax => ({ syntax })
+  const handleContent = content => ({ content })
+
   const getSyntaxes = () => {
     const { modesByName } = getModesByName()
 
-    return props.syntaxes.map(item => ({
+    return syntaxes.map(item => ({
       name: modesByName[item].caption,
       value: item,
     }))
   }
 
-  const renderValidationError = () => (validationError && <Notification
-    message="Content is required :("
-    show={!!validationError}
-  />)
+  const renderValidationError = () => (error && <Notification message={error} />)
 
   return (
     <form
       className="new-snippet"
       key="New Snippet"
-      onSubmit={post}
+      onSubmit={handleSubmit}
       role="presentation"
     >
       <div className="new-snippet-code-wrapper">
-        <div className="new-snippet-code-header">
+        <div className="new-snippet-code-header" ref={snippetHeader}>
           <input
             className="input"
             placeholder="Title"
             name="title"
             type="text"
             value={title}
-            onChange={onTitleChange}
+            onChange={handleChange}
           />
           <Tags
             placeholder="Tags"
             tags={tags}
-            handleDelete={onTagRemoved}
-            handleAddition={onTagAdded}
-            handleInputBlur={onTagBlur}
+            handleDelete={(value) => handleChange(value, onTagRemoved)}
+            handleAddition={(value) => handleChange(value, onTagAdded)}
+            handleInputBlur={(value) => handleChange(value, onTagBlur)}
             delimiters={delimeterKeys}
           />
         </div>
@@ -135,7 +118,7 @@ const NewSnippet = props => {
             setOptions={defaultOptions}
             editorProps={{ $blockScrolling: Infinity }}
             value={content}
-            onChange={(value) => setContent(value)}
+            onChange={(value) => handleChange(value, handleContent)}
           />
           <div className="new-snippet-code-bottom-bar">
             {renderValidationError()}
@@ -146,7 +129,7 @@ const NewSnippet = props => {
       <div className="new-snippet-lang-wrapper">
         <ListBoxWithSearch
           items={getSyntaxes()}
-          onClick={onSyntaxClick}
+          onClick={(syntax) => handleChange(syntax, handleSyntax)}
         />
       </div>
     </form>

src/components/RecentSnippets.jsx

@@ -11,14 +11,11 @@ const scrollTop = () => {
   window.scroll({ top: 0, behavior: 'smooth' })
 }
 
-const RecentSnippets = props => {
-  const { dispatch, pagination, snippets, recent } = props
-
+const RecentSnippets = ({ dispatch, pagination, snippets, recent }) => {
   const older = pagination.get('next')
   const newer = pagination.get('prev')
 
   useEffect(() => {
-    const { dispatch, recent, pagination } = props
     let marker = null
 
     if (pagination.get('prev')) {

src/components/Snippet.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useRef } from 'react'
 import { connect } from 'react-redux'
 import AceEditor from 'react-ace'
 
@@ -18,25 +18,24 @@ import { existingSnippetOptions } from '../entries/aceEditorOptions'
 
 import '../styles/Snippet.styl'
 
-const copyToClipboard = (e, id = 'embedded') => {
-  document.getElementById(id).select()
-  document.execCommand('copy')
-  e.target.focus()
-}
-
 const Snippet = props => {
   const { snippet, dispatch } = props
-
-  if (!snippet) return <Spinner />
-
   const [ isShowEmbed, setIsShowEmbed ] = useState(false)
+  const embeddedRef = useRef()
 
   useEffect(() => {
     const { id } = props.match.params
 
     dispatch(fetchSnippet(Number(id)))
   }, [])
 
+  if (!snippet) return <Spinner />
+
+  const copyToClipboard = () => {
+    embeddedRef.current.select()
+    document.execCommand('copy')
+  }
+
   const download = () => {
     downloadSnippet(props.snippet)
   }
@@ -58,7 +57,7 @@ const Snippet = props => {
           simply copy and paste code provided below:
         </p>
         <input
-          id="embedded"
+          ref={embeddedRef}
           className="input"
           type="text"
           defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}

src/components/common/Notification.jsx

@@ -3,17 +3,15 @@ import PropTypes from 'prop-types'
 
 import '../../styles/common/Notification.styl'
 
-const Notification = ({ show, message }) => (
-  <div className={`notification ${show && 'has-error'}`}>{message}</div>
+const Notification = ({ message }) => (
+  <div className="notification has-error">{message}</div>
 )
 
 Notification.propTypes = {
-  show: PropTypes.bool,
   message: PropTypes.string,
 }
 
 Notification.defaultProps = {
-  show: false,
   message: '',
 }
 

src/entries/snippetValidation.js

@@ -4,4 +4,32 @@ const schema = Joi.object().keys({
   content: Joi.string().required(),
 })
 
-export const validateSnippet = value => Joi.validate(value, schema)
+export const validateSnippet = value => {
+  const result = Joi.validate(value, schema)
+
+  if (result.error) {
+    return reasons(result.error.details)
+  }
+
+  return null
+}
+
+const messages = new Map([
+  ['content.any.empty', 'Content is required :('],
+  ['default', 'Something went wrong, please check all fields'],
+])
+
+const reasons = details => {
+  const errors = []
+
+  details.forEach(element => {
+    const reason = `${element.path[0]}.${element.type}`
+
+    errors.push(messages.has(reason)
+      ? messages.get(reason)
+      : messages.get('default')
+    )
+  })
+
+  return errors[0]
+}

src/hooks/useForm.js

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const useForm = (cb, validate) => {
+  const [values, setValues] = useState({})
+  const [error, setError] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  useEffect(() => {
+    if (!error && isSubmitting) {
+      cb()
+    }
+
+    return () => {
+      setIsSubmitting(false)
+    }
+  }, [error, isSubmitting])
+
+  const handleSubmit = useCallback(e => {
+    e.preventDefault()
+
+    setError(validate(values))
+    setIsSubmitting(true)
+  })
+
+  const handleChange = useCallback((e, setter) => {
+    if (e.target) {
+      e.persist()
+      setValues(values => ({ ...values, [e.target.name]: e.target.value }))
+    } else {
+      setValues(values => ({ ...values, ...setter(e) }))
+    }
+  })
+
+  return {
+    handleChange,
+    handleSubmit,
+    values,
+    error,
+  }
+}
+
+export default useForm