Code refactored, table search rewritten using API calls, toastify rep…

…laced with ant notification

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "PERX",
+    "name": "perx",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
@@ -10,7 +10,6 @@
         "react-helmet": "^5.2.0",
         "react-redux": "^6.0.1",
         "react-scripts": "^2.1.8",
-        "react-toastify": "^5.0.0-rc.3",
         "redux": "^4.0.1",
         "redux-thunk": "^2.3.0",
         "uuid": "^3.3.2"

src/components/EditUserForm.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Form, Button, Input } from 'antd'
-import { toast } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
+import Notification from './Notification'
 
 const CustomForm = Form.create({
     mapPropsToFields(props) {
@@ -42,12 +41,16 @@ const CustomForm = Form.create({
                         ...formData,
                     }
                     updateUser(data)
-                        .then(() => {
+                        .then(success => {
+                            if (!success) {
+                                Notification.error('User is NOT UPDATED!')
+                                return
+                            }
                             _toggleModal()
                             _getData()
-                            toast.success('User is Updated!')
+                            Notification.success('User is UPDATED!')
                         })
-                        .catch(err => toast.error(err))
+                        .catch(err => Notification.error(err))
                 }
             })
         }

src/components/Notification.js

@@ -0,0 +1,16 @@
+import { notification } from 'antd'
+
+const Notification = {
+    error: data =>
+        notification.error({
+            message: 'Error',
+            description: `${data}`,
+        }),
+    success: data =>
+        notification.success({
+            message: 'Success',
+            description: `${data}`,
+        }),
+}
+
+export default Notification

src/components/Search.js

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { Button, Input } from 'antd'
+
+const Search = ({ handleSearch, getData, dataIndex }) => {
+    const [searchRef, setSearchRef] = useState({})
+    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)}
+                />
+            </div>
+            <div>
+                <Button
+                    type="primary"
+                    onClick={() => {
+                        const phrase = searchRef.input.state.value
+                        if (phrase) handleSearch(dataIndex, phrase)
+                    }}
+                    icon="search"
+                    size="small"
+                    className="search-input-confirm-btn"
+                >
+                    Search
+                </Button>
+                <Button
+                    onClick={() => {
+                        searchRef.input.state.value = ''
+                        getData()
+                    }}
+                    size="small"
+                    className="search-input-reset-btn"
+                >
+                    Reset
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default Search

src/components/TableComponent.js

@@ -1,77 +1,55 @@
+// @flow
 import React, { useState, useEffect } from 'react'
-import { Table, Button, Divider, Modal, Popconfirm, Input, Icon } from 'antd'
+import { Table, Button, Divider, Modal, Popconfirm, Icon } from 'antd'
 import UserFormContainer from '../containers/UserFormContainer'
 import EditUserFormContainer from '../containers/EditUserFormContainer'
-import { toast } from 'react-toastify'
+import Search from './Search'
+import Notification from './Notification'
 
 const TableComponent = ({
     users,
     deleteUser,
     fetchUsers,
     getTotal,
     total,
+    pageSize,
     loading,
 }) => {
     const [visible, _setVisible] = useState(false),
         [showEdit, _setShowEdit] = useState(false),
         [submitBtnRef, _setSubmitBtnRef] = useState({}),
         [updateBtnRef, _setUpdateBtnRef] = useState({}),
-        [searchInputRef, _setSearchInputRef] = useState({}),
         [record, _setRecord] = useState({}),
+        [pageNumber, setPageNumber] = useState(1),
+        _handleSearch = (dataIndex, phrase) => {
+            const search = {
+                    name: dataIndex === 'name',
+                    phrase,
+                },
+                pageNum = 1
+            fetchUsers(pageNum, search)
+                .then(success => {
+                    if (!success)
+                        Notification.error(
+                            'An error occured while fetching the users'
+                        )
+                })
+                .catch(err => Notification.error(err))
+        },
         _getColumnSearchProps = dataIndex => ({
-            filterDropdown: ({
-                setSelectedKeys,
-                selectedKeys,
-                confirm,
-                clearFilters,
-            }) => (
-                <div className="search-input-container">
-                    <Input
-                        ref={node => _setSearchInputRef(node)}
-                        placeholder={`Search ${dataIndex}`}
-                        value={selectedKeys[0]}
-                        onChange={e =>
-                            setSelectedKeys(
-                                e.target.value ? [e.target.value] : []
-                            )
-                        }
-                        onPressEnter={() => confirm()}
-                        className="search-input"
-                    />
-                    <Button
-                        type="primary"
-                        onClick={() => confirm()}
-                        icon="search"
-                        size="small"
-                        className="search-input-confirm-btn"
-                    >
-                        Search
-                    </Button>
-                    <Button
-                        onClick={() => clearFilters()}
-                        size="small"
-                        className="search-input-reset-btn"
-                    >
-                        Reset
-                    </Button>
-                </div>
+            filterDropdown: () => (
+                <Search
+                    handleSearch={_handleSearch}
+                    getData={_getData}
+                    dataIndex={dataIndex}
+                />
             ),
             filterIcon: filtered => (
                 <Icon
                     type="search"
                     style={{ color: filtered ? '#1890ff' : undefined }}
                 />
             ),
-            onFilter: (value, record) =>
-                record[dataIndex]
-                    .toString()
-                    .toLowerCase()
-                    .includes(value.toLowerCase()),
-            onFilterDropdownVisibleChange: visible => {
-                if (visible) {
-                    setTimeout(() => searchInputRef.select())
-                }
-            },
         }),
         columns = [
             {
@@ -117,16 +95,34 @@ const TableComponent = ({
         _handleUpdate = () => updateBtnRef.buttonNode.click(),
         _getData = () => {
             getTotal()
-                .then(() => fetchUsers())
-                .catch(err => toast.error(err))
+                .then(success => {
+                    if (!success) {
+                        Notification.error(
+                            'An error occured while fetching the users quantity'
+                        )
+                        return
+                    }
+                    fetchUsers(pageNumber)
+                })
+                .catch(err => Notification.error(err))
         },
         _deleteUser = record => {
             deleteUser(record.objectId)
-                .then(() => {
-                    toast.success('User was successfully Deleted!')
+                .then(success => {
+                    if (!success) {
+                        Notification.error(
+                            'An error occured while deleting the user'
+                        )
+                        return
+                    }
+                    Notification.success('User is DELETED!')
                     _getData()
                 })
-                .catch(err => toast.error(err))
+                .catch(err => Notification.error(err))
+        },
+        _handleChange = ({ current }) => {
+            setPageNumber(current)
+            fetchUsers(current)
         }
 
     useEffect(() => {
@@ -139,7 +135,8 @@ const TableComponent = ({
                 columns={columns}
                 dataSource={users}
                 loading={loading}
-                pagination={{ total, pageSize: 4 }}
+                pagination={{ total, pageSize }}
+                onChange={_handleChange}
             />
 
             <Button