Adding Admin CRUD operations

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,20 +8,20 @@ assignees: ''
 ---
 
 **Describe the bug**
-A clear and concise description of what the bug is.
+[A clear and concise description of what the bug is.]
 
 **To Reproduce**
-Steps to reproduce the behavior:
+[Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
-4. See error
+4. See error]
 
 **Expected behavior**
-A clear and concise description of what you expected to happen.
+[A clear and concise description of what you expected to happen.]
 
 **Screenshots**
-If applicable, add screenshots to help explain your problem.
+[If applicable, add screenshots to help explain your problem.]
 
 **Desktop (please complete the following information):**
  - OS: [e.g. iOS]

src/components/Admin/Categories.js

@@ -2,28 +2,22 @@ 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,addCategory,deleteCategory,updateCategory} from '../../redux/actions/categoryActions'
 
 class Categories extends Component {
 
-  state = { visible: false }
+  state = { 
+    visible: false ,
+    visibleUpdateModal: false,
+    newCategoryName : '',
+    updateCategoryName : '',
+  }
+
+  onChange = (e) => {
+    this.setState({
+      [e.target.name]:e.target.value
+    })
+  }
 
   showModal = () => {
     this.setState({
@@ -32,17 +26,52 @@ class Categories extends Component {
   }
 
   handleOk = (e) => {
+    this.props.addCategory(this.state.newCategoryName);
     this.setState({
       visible: false,
+      newCategoryName: ''
     });
   }
 
   handleCancel = (e) => {
     this.setState({
       visible: false,
+      newCategoryName: ''
+    });
+  }
+
+  updateShowModal = () => {
+    this.setState({
+      visibleUpdateModal: true,
     });
   }
 
+  handleOkUpdate = (id) => {
+    this.props.updateCategory(this.state.updateCategoryName,id);
+    this.setState({
+      visibleUpdateModal: false,
+      newCategoryName: ''
+    });
+  }
+
+  handleCancelUpdate = (e) => {
+    this.setState({
+      visibleUpdateModal: false,
+      newCategoryName: ''
+    });
+  }
+
+  handleDelete = (id) => {
+    this.props.deleteCategory(id);
+  }
+  componentDidUpdate(){
+    this.props.fetchCategory();
+  }
+  componentWillMount(){
+    this.props.fetchCategory();
+  }
+
+
   render() {
     const { isAuthenticated, user } = this.props;
     const { Column } = Table;
@@ -60,20 +89,26 @@ class Categories extends Component {
             onOk={this.handleOk}
             onCancel={this.handleCancel}
           >
-               <Input placeholder="Enter the name of the category" />
+               <Input placeholder="Enter the name of the category" name="newCategoryName" onChange={this.onChange} />
            </Modal>
-           <Table dataSource={data}>
-            <Column title="Category Name" dataIndex="Name" key="Name" />
-            <Column title="Number" dataIndex="number" key="number" />
-
+           <Table dataSource={this.props.category.categories} rowKey="_id">
+            <Column title="Category Name" dataIndex="name" key="name" />
             <Column
               title="Action"
-              key="action"
+              key="_id"
               render={(text, record) => (
                 <span>
-                  <a href="/">Update</a>
+                  <span onClick={this.updateShowModal}>Update</span>
+                  <Modal
+                    title="Update Modal"
+                    visible={this.state.visibleUpdateModal}
+                    onOk={() => this.handleOkUpdate(record._id)}
+                    onCancel={this.handleCancelUpdate}
+                  >
+                      <Input placeholder="Enter the new name of the category" name="updateCategoryName" onChange={this.onChange} />
+                  </Modal>
                   <Divider type="vertical" />
-                  <a href="/">Delete</a>
+                  <span onClick={()=>{this.handleDelete(record._id)} }>Delete</span>
                 </span>
               )}
             />
@@ -91,10 +126,11 @@ class Categories extends Component {
 
 const mapStateToProps = state => ({
   isAuthenticated: state.auth.isAuthenticated,
-  user: state.auth.user
+  user: state.auth.user,
+  category: state.category.categories
 });
 
 export default connect(
   mapStateToProps,
-  {}
+  {fetchCategory,addCategory,deleteCategory,updateCategory}
 )(Categories);

src/redux/actions/adminActions.js

@@ -15,7 +15,7 @@ export const getAllUsers = () => (dispatch, getState) => {
       });
     })
     .catch(err => {
-      dispatch( returnErrors(err.response.data,err.response.status,"ADMIN_ACTIONS_ERRORS"));
+      dispatch(returnErrors(err.response.data,err.response.status,"ADMIN_ACTIONS_ERRORS"));
       dispatch({
         type: GET_ALL_USERS_FAIL
       })
@@ -48,4 +48,4 @@ export const deleteUser = (userId) => (dispatch, getState) => {
       .catch(err => {
         dispatch( returnErrors(err.response.data,err.response.status,"ADMIN_ACTIONS_ERRORS"));
       });
-    };
+    };

src/redux/actions/categoryActions.js

@@ -0,0 +1,51 @@
+import { FETCH_CATEGORY_SUCCESS,ADD_CATEGORY_SUCCESS,DELETE_CATEGORY_SUCCESS ,UPDATE_CATEGORY_SUCCESS} from "./type";
+import axios from "axios";
+import { tokenConfig } from "./authActions";
+import { url } from "../../helper/url";
+
+export const fetchCategory = () => (dispatch,getState) => {
+    axios
+      .get(`${url}/categories`, tokenConfig(getState))
+      .then(res =>{
+        dispatch({
+          type:FETCH_CATEGORY_SUCCESS,
+          payload:res.data
+        })
+      })
+  }
+
+export const addCategory = (name) => (dispatch,getState) => {
+    const body = JSON.stringify({ name });
+    axios
+        .post(`${url}/categories`,body,tokenConfig(getState))
+        .then((res) => {
+          dispatch({
+            type:ADD_CATEGORY_SUCCESS,
+            payload:res.data
+          })
+        })
+}
+
+export const deleteCategory = (id) => (dispatch,getState) => {
+    axios
+        .delete(`${url}/categories/`+id, tokenConfig(getState))
+        .then(() => {
+          dispatch({
+            type:DELETE_CATEGORY_SUCCESS,
+            payload:id
+          })
+        })
+}
+
+export const updateCategory = (name,id) => (dispatch,getState) => {
+    const body = JSON.stringify({ name });
+    axios
+        .patch(`${url}/categories/`+id,body,tokenConfig(getState))
+        .then((res) => {
+          dispatch({
+            type:UPDATE_CATEGORY_SUCCESS,
+            payload:id,
+            packet:res.data
+          })
+        })
+}

src/redux/actions/type.js

@@ -35,4 +35,9 @@ export const DELETE_USER_FAIL = 'DELETE_USER_FAIL';
 export const DELETED_ALL_SERVICES_OF_VENDOR = 'DELETED_ALL_SERVICES_OF_VENDOR';
 export const POST_REVIEW_SUCCESS = 'POST_REVIEW_SUCCESS';
 export const POST_REVIEW_FAIL = 'POST_REVIEW_FAIL';
-export const POST_REVIEW_LOADING = 'POST_REVIEW_LOADING';
+export const POST_REVIEW_LOADING = 'POST_REVIEW_LOADING';
+
+export const FETCH_CATEGORY_SUCCESS = 'FETCH_CATEGORY_SUCCESS';
+export const ADD_CATEGORY_SUCCESS = 'ADD_CATEGORY_SUCCESS';
+export const DELETE_CATEGORY_SUCCESS = 'DELETE_CATEGORY_SUCCESS';
+export const UPDATE_CATEGORY_SUCCESS = 'UPDATE_CATEGORY_SUCCESS';

src/redux/reducers/adminReducers.js

@@ -1,4 +1,4 @@
-import { GET_ALL_USERS, GET_ALL_USERS_FAIL, DELETE_USER, DELETE_USER_FAIL, DELETED_ALL_SERVICES_OF_VENDOR } from '../actions/type';
+import { GET_ALL_USERS, GET_ALL_USERS_FAIL, DELETE_USER, DELETE_USER_FAIL, DELETED_ALL_SERVICES_OF_VENDOR} from '../actions/type';
 
 const initialState = {
   users: [],
@@ -37,7 +37,7 @@ export default function (state = initialState, action) {
           ...state,
           status: 200,
           statusType: "deleteAllServices"
-        }  
+        }
     default:
       return state;
   }

src/redux/reducers/categoryReducer.js

@@ -0,0 +1,42 @@
+import { FETCH_CATEGORY_SUCCESS, ADD_CATEGORY_SUCCESS,DELETE_CATEGORY_SUCCESS,UPDATE_CATEGORY_SUCCESS } from '../actions/type';
+
+const initialState = {
+  categories: [],
+  status: null,
+  statusType: null
+}
+
+export default function (state = initialState, action) {
+  switch (action.type) { 
+    case FETCH_CATEGORY_SUCCESS:
+      return {
+        ...state,
+        categories: action.payload,
+        status: 200,
+        statusType: "fetchCategory"
+      }
+    case ADD_CATEGORY_SUCCESS:
+      return {
+        categories: [...state.categories.categories,action.payload],
+        status:200,
+        statusType: "addCategory"
+      }
+    case DELETE_CATEGORY_SUCCESS:
+      return {
+        categories: state.categories.categories.filter((category)=>{
+          return category._id!==action.payload
+        })
+      }
+    case UPDATE_CATEGORY_SUCCESS:
+      return {
+        categories: state.categories.categories.map((category) => {
+          if(category._id===action.payload){
+            category.name=action.packet
+          }
+          return category
+        })
+      }
+    default:
+      return state;
+  }
+}

src/redux/reducers/index.js

@@ -6,6 +6,7 @@ import UserReducer from './userReducer';
 import CategoryServiceReducer from './categoryServiceReducer';
 import AdminReducer from './adminReducers';
 import ReviewReducer from './reviewReducer';
+import CategoryReducer from './categoryReducer';
 
 
 export default combineReducers({
@@ -15,5 +16,6 @@ export default combineReducers({
   vendor: vendorReducer,
   categoryService: CategoryServiceReducer,
   admin: AdminReducer,
-  review: ReviewReducer
+  review: ReviewReducer,
+  category:CategoryReducer
 });