Fetching data for admin page using redux

src/components/Admin/Categories.js

@@ -2,47 +2,77 @@ import React, { Component, Fragment } from 'react';
 import "antd/dist/antd.css";
 import { connect } from "react-redux";
 import { Button,Modal,Input,Table, Divider } from 'antd';
-
-const data = [
-  {
-    key: '1',
-    Name: 'Mechanic',
-    number: 32,
-  },
-  {
-    key: '2',
-    Name: 'Plumber',
-    number: 42,
-  },
-  {
-    key: '3',
-    Name: 'Electrician',
-    number: 32,
-  },
-];
+import {fetchCategory,deleteCategory,addCategory,updateCategory} from "../../redux/actions/adminActions";
 
 class Categories extends Component {
 
-  state = { visible: false }
+  state = { 
+    visibleForm: false,
+    newCategoryName:'',
+    visibleUpdate:false,
+    updatedCategoryName:'',
+    updatedCatId:'',
+   }
 
-  showModal = () => {
+  showModalForm = () => {
     this.setState({
-      visible: true,
+      visibleForm: true,
     });
   }
 
-  handleOk = (e) => {
+  showModalUpdate = (e) => {
     this.setState({
-      visible: false,
+      visibleUpdate: true,
+      updatedCatId:e
+    });
+  }
+
+  handleChangeForm=(e)=>{
+    this.setState({
+      newCategoryName:e.target.value
+    })
+  }
+
+  handleChangeUpdate=(e)=>{
+    this.setState({
+      updatedCategoryName:e.target.value
+    })
+  }
+
+  handleOkForm = () => {
+    this.props.addCategory(this.state.newCategoryName);
+    this.setState({
+      visibleForm: false,
+      newCategoryName:''    });
+  }
+
+  handleOkUpdate = () => {
+    this.props.updateCategory(this.state.updatedCategoryName,this.state.updatedCatId);
+    this.setState({
+      visibleUpdate: false,
+      updatedCategoryName:'', 
+      updatedCatId:''
     });
   }
 
   handleCancel = (e) => {
     this.setState({
-      visible: false,
+      visibleForm: false,
+      newCategoryName:'',
+      visibleUpdate:false,
+      updatedCategoryName:'',
+      updatedCatId:'' 
     });
   }
 
+  handleDelete=(e)=>{
+    this.props.deleteCategory(e);
+  }
+
+  componentDidMount(){
+    this.props.fetchCategory();
+  }
+
   render() {
     const { isAuthenticated, user } = this.props;
     const { Column } = Table;
@@ -51,29 +81,35 @@ class Categories extends Component {
         <Fragment>
           Categories
           <br />
-          <Button type="primary" onClick={this.showModal}>
+          <Button type="primary" onClick={this.showModalForm}>
           Add Category
           </Button>
           <Modal
             title="Add a new category"
-            visible={this.state.visible}
-            onOk={this.handleOk}
+            visible={this.state.visibleForm}
+            onOk={this.handleOkForm}
             onCancel={this.handleCancel}
           >
-               <Input placeholder="Enter the name of the category" />
+               <Input onChange={(value)=>{this.handleChangeForm(value)}} placeholder="Enter the name of the category" />
            </Modal>
-           <Table dataSource={data}>
-            <Column title="Category Name" dataIndex="Name" key="Name" />
-            <Column title="Number" dataIndex="number" key="number" />
-
+           <Table dataSource={this.props.cat} rowKey='_id'>
+            <Column title="Category Name" dataIndex="name" key="name" />
             <Column
               title="Action"
-              key="action"
-              render={(text, record) => (
+              key="_id"
+              render={(record) => (
                 <span>
-                  <a href="/">Update</a>
+                  <span onClick={() => this.showModalUpdate(record._id)}>Update</span>
+                  <Modal
+                    title="Add a new category"
+                    visible={this.state.visibleUpdate}
+                    onOk={this.handleOkUpdate}
+                    onCancel={this.handleCancel}
+                  >
+                      <Input onChange={(value)=>{this.handleChangeUpdate(value)}} placeholder="Enter the name of the category" />
+                  </Modal>
                   <Divider type="vertical" />
-                  <a href="/">Delete</a>
+                  <span onClick={()=>{this.handleDelete(record._id)}}>Delete</span>
                 </span>
               )}
             />
@@ -91,10 +127,11 @@ class Categories extends Component {
 
 const mapStateToProps = state => ({
   isAuthenticated: state.auth.isAuthenticated,
-  user: state.auth.user
+  user: state.auth.user,
+  cat:state.admin.category,
 });
 
 export default connect(
   mapStateToProps,
-  {}
+  {fetchCategory,deleteCategory,addCategory,updateCategory}
 )(Categories);

src/redux/actions/adminActions.js

@@ -0,0 +1,57 @@
+import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY,UPDATE_CATEGORY} from './type';
+import axios from 'axios';
+import {url} from '../../helper/url';
+import { tokenConfig } from './authActions';
+
+export const fetchCategory =()=>{
+    return dispatch =>{
+        axios.get(`${url}/categories`)
+            .then(res=>{
+                dispatch({
+                    type:FETCH_CATEGORY,
+                    payload: res.data.categories,
+                })
+            })
+    }
+};
+
+export const deleteCategory =(e)=> (dispatch,getState) =>{
+    const config = tokenConfig(getState);  
+        axios.delete(`${url}/categories/`+e,config)
+            .then(res=>{
+                dispatch({
+                    type:DELETE_CATEGORY,
+                    payload: e,
+                })
+            })
+
+};
+
+export const addCategory =(name)=>(dispatch,getState)=>{
+    const config = tokenConfig(getState);  
+    const body = JSON.stringify({ name });
+        axios.post(`${url}/categories`,body,config)
+            .then(res=>{
+                dispatch({
+                    type:ADD_CATEGORY,
+                    payload: res.data,
+                })
+            })
+
+};
+
+export const updateCategory =(name,id)=>(dispatch,getState) =>{
+    const config = tokenConfig(getState);  
+    const body = JSON.stringify({ name });
+        axios.patch(`${url}/categories/`+id,body,config)
+            .then(res=>{
+                dispatch({
+                    type:UPDATE_CATEGORY,
+                    payload: id,
+                    newCategory:res.data,
+                })
+            })
+
+};
+
+

src/redux/actions/type.js

@@ -25,4 +25,9 @@ export const GET_CATEGORY_WISE_SERVICES_PENDING = 'GET_CATEGORY_WISE_SERVICES_PE
 export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SUCCESS';
 
 export const GET_VENDOR_SERVICES = 'GET_VENDOR_SERVICES';
-export const GET_VENDOR_SERVICES_FAIL = 'GET_VENDOR_SERVICES_FAIL';
+export const GET_VENDOR_SERVICES_FAIL = 'GET_VENDOR_SERVICES_FAIL';
+
+export const FETCH_CATEGORY='FETCH_CATEGORY'; 
+export const DELETE_CATEGORY='DELETE_CATEGORY';
+export const ADD_CATEGORY='ADD_CATEGORY';
+export const UPDATE_CATEGORY='UPDATE_CATEGORY';

src/redux/reducers/adminReducers.js

@@ -0,0 +1,37 @@
+import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY,UPDATE_CATEGORY} from '../actions/type';
+
+const initState={
+    category:[],
+}
+
+const fetchCategory=(state=initState,action)=>{
+    switch(action.type){
+        case FETCH_CATEGORY:
+            return {
+                ...state,
+                category:action.payload
+            }
+        case ADD_CATEGORY:
+            return {category :state.category.concat(action.payload)}
+        case DELETE_CATEGORY :
+            return { category: state.category.filter(catname =>
+                catname._id !== action.payload
+             )}
+        case UPDATE_CATEGORY:
+            return{
+                category :state.category.map(item=>{
+                    if(item._id===action.payload)
+                    return {
+                        _id:action.payload,
+                        name:action.newCategory.name,
+                        register_date:action.newCategory.register_date
+                    }
+                    else
+                    return item
+                })
+            }
+        default: return state;
+    }
+
+}
+export default fetchCategory; 

src/redux/reducers/index.js

@@ -4,12 +4,14 @@ import AuthReducer from './authReducer';
 import ErrorReducer from './errorReducer';
 import UserReducer from './userReducer';
 import CategoryServiceReducer from './categoryServiceReducer';
+import AdminReducer from './adminReducers';
 
 
 export default combineReducers({
   auth: AuthReducer,
   error: ErrorReducer,
   user: UserReducer,
   vendor: vendorReducer,
-  categoryService: CategoryServiceReducer
+  categoryService: CategoryServiceReducer,
+  admin:AdminReducer,
 });