From 5d262f475cba0e8eea207872f415dde97da05d39 Mon Sep 17 00:00:00 2001
From: Makar Kotlov <kotlov.1996@mail.ru>
Date: Fri, 6 Sep 2019 00:31:03 +0300
Subject: [PATCH] Code refactored

---
 src/components/Search.jsx               | 34 +++++++++++++++---------
 src/components/TableComponent.jsx       | 35 +++++++++++--------------
 src/components/UserForm.jsx             |  7 ++---
 src/containers/EditUserFormContainer.js |  2 +-
 src/containers/TableContainer.js        |  2 +-
 src/store/users/reducer.js              |  2 +-
 6 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 7a9dacf..e3a5e7f 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -3,24 +3,37 @@ 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"
@@ -28,10 +41,7 @@ const Search = ({ handleSearch, getData, dataIndex }) => {
           Search
         </Button>
         <Button
-          onClick={() => {
-            searchRef.input.state.value = ''
-            getData()
-          }}
+          onClick={resetSearch}
           size="small"
           className="search-input-reset-btn"
         >
diff --git a/src/components/TableComponent.jsx b/src/components/TableComponent.jsx
index 79dd1fd..9b5e269 100644
--- a/src/components/TableComponent.jsx
+++ b/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>
 
diff --git a/src/components/UserForm.jsx b/src/components/UserForm.jsx
index ee96176..15d10c8 100644
--- a/src/components/UserForm.jsx
+++ b/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>
   )
 }
diff --git a/src/containers/EditUserFormContainer.js b/src/containers/EditUserFormContainer.js
index 42bb5a7..9947a8d 100644
--- a/src/containers/EditUserFormContainer.js
+++ b/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'
diff --git a/src/containers/TableContainer.js b/src/containers/TableContainer.js
index 373d2dc..377cb25 100644
--- a/src/containers/TableContainer.js
+++ b/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'
diff --git a/src/store/users/reducer.js b/src/store/users/reducer.js
index 3829efc..07a4e7f 100644
--- a/src/store/users/reducer.js
+++ b/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'