Code refactored

src/components/Search.jsx

@@ -3,35 +3,45 @@ import { Button, Input } from 'antd'
 
 const Search = ({ handleSearch, getData, dataIndex }) => {
   const [searchRef, setSearchRef] = useState({})
+  const setSearch = () => c => {
+    setSearchRef(c)
+  }
+  const onSearch = phrase => {
+    if (phrase) {
+      handleSearch(dataIndex, phrase)
+    }
+  }
+  const handleSearchOnClick = () => {
+    const phrase = searchRef.input.state.value
+    if (phrase) {
+      handleSearch(dataIndex, phrase)
+    }
+  }
+  const resetSearch = () => {
+    searchRef.input.state.value = ''
+    getData()
+  }
   return (
     <div className="search-container">
       <div className="search-input-container">
         <Input.Search
           placeholder={`Input search ${dataIndex}`}
-          onSearch={phrase => {
-            if (phrase) handleSearch(dataIndex, phrase)
-          }}
-          ref={c => setSearchRef(c)}
+          onSearch={onSearch}
+          ref={setSearch()}
         />
       </div>
       <div>
         <Button
           type="primary"
-          onClick={() => {
-            const phrase = searchRef.input.state.value
-            if (phrase) handleSearch(dataIndex, phrase)
-          }}
+          onClick={handleSearchOnClick}
           icon="search"
           size="small"
           className="search-input-confirm-btn"
         >
           Search
         </Button>
         <Button
-          onClick={() => {
-            searchRef.input.state.value = ''
-            getData()
-          }}
+          onClick={resetSearch}
           size="small"
           className="search-input-reset-btn"
         >

src/components/TableComponent.jsx

@@ -20,7 +20,8 @@ const TableComponent = ({
   const [submitBtnRef, _setSubmitBtnRef] = useState({})
   const [updateBtnRef, _setUpdateBtnRef] = useState({})
   const [record, _setRecord] = useState({})
-  const [pageNumber, setPageNumber] = useState(1)
+  const [pageNumber, _setPageNumber] = useState(1)
+
   const _handleSearch = (dataIndex, phrase) => {
     const search = {
       name: dataIndex === 'name',
@@ -72,6 +73,16 @@ const TableComponent = ({
       })
       .catch(err => Notification.error(err))
   }
+  const handleEdit = () => record => {
+    _setRecord(record)
+    _setShowEdit(true)
+    _toggleModal()
+  }
+  const handleDelete = () => record => _deleteUser(record)
+  const handleAdd = () => {
+    _setShowEdit(false)
+    _toggleModal()
+  }
   const columns = [
     {
       title: 'Name',
@@ -87,19 +98,11 @@ const TableComponent = ({
       title: 'Actions',
       render: (text, record) => (
         <span>
-          <Button
-            onClick={() => {
-              _setRecord(record)
-              _setShowEdit(true)
-              _toggleModal()
-            }}
-          >
-            Edit
-          </Button>
+          <Button onClick={handleEdit(record)}>Edit</Button>
           <Divider type="vertical" />
           <Popconfirm
             title="Are you sure delete this user?"
-            onConfirm={() => _deleteUser(record)}
+            onConfirm={handleDelete(record)}
             okText="Yes"
             cancelText="No"
           >
@@ -114,7 +117,7 @@ const TableComponent = ({
   const _handleSubmit = () => submitBtnRef.buttonNode.click()
   const _handleUpdate = () => updateBtnRef.buttonNode.click()
   const _handleChange = ({ current }) => {
-    setPageNumber(current)
+    _setPageNumber(current)
     fetchUsers(current)
   }
 
@@ -132,13 +135,7 @@ const TableComponent = ({
         onChange={_handleChange}
       />
 
-      <Button
-        className="flexed-centered"
-        onClick={() => {
-          _setShowEdit(false)
-          _toggleModal()
-        }}
-      >
+      <Button className="flexed-centered" onClick={handleAdd}>
         Add New User
       </Button>
 

src/components/UserForm.jsx

@@ -29,6 +29,7 @@ const UserForm = ({
       }
     })
   }
+  const getSubmitBtnRef = () => ref => _getSubmitBtnRef(ref)
   const { getFieldDecorator } = form
   const formItemLayout = {
     labelCol: { span: 6 },
@@ -70,11 +71,7 @@ const UserForm = ({
         })(<Input.Password />)}
       </Form.Item>
 
-      <Button
-        htmlType="submit"
-        className="hidden"
-        ref={ref => _getSubmitBtnRef(ref)}
-      />
+      <Button htmlType="submit" className="hidden" ref={getSubmitBtnRef} />
     </Form>
   )
 }

src/containers/EditUserFormContainer.js

@@ -1,4 +1,4 @@
-import { pick } from 'ramda'
+import { pick } from 'rambda'
 import { connect } from 'react-redux'
 
 import EditUserForm from '../components/EditUserForm'

src/containers/TableContainer.js

@@ -1,4 +1,4 @@
-import { pick, path, compose } from 'ramda'
+import { pick, path, compose } from 'rambda'
 import { connect } from 'react-redux'
 
 import TableComponent from '../components/TableComponent'

src/store/users/reducer.js

@@ -1,4 +1,4 @@
-import { propOr, identity } from 'ramda'
+import { propOr, identity } from 'rambda'
 import { map } from 'lodash'
 import cuid from 'cuid'
 import * as ActionTypes from './actionTypes'