From 3b9876e5dcabef9191449284ae73c07c2c591ca5 Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Tue, 6 Aug 2019 02:00:26 +0530 Subject: [PATCH 1/6] Admin crud operations --- src/components/Admin/Categories.js | 114 +++++++++++++++++++------- src/redux/actions/categoryActions.js | 51 ++++++++++++ src/redux/actions/type.js | 5 ++ src/redux/reducers/categoryReducer.js | 46 +++++++++++ src/redux/reducers/index.js | 5 +- 5 files changed, 188 insertions(+), 33 deletions(-) create mode 100644 src/redux/actions/categoryActions.js create mode 100644 src/redux/reducers/categoryReducer.js diff --git a/src/components/Admin/Categories.js b/src/components/Admin/Categories.js index c78cf7a..d2164ed 100644 --- a/src/components/Admin/Categories.js +++ b/src/components/Admin/Categories.js @@ -1,29 +1,23 @@ 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 { Button,Modal,Input,Table, Divider,notification,Icon } from 'antd'; +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,20 +26,69 @@ 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); + } + + sucessfulNotification=(type)=>{ + notification.open({ + message: type, + description: + '', + icon: , + }); + } + + componentDidUpdate(){ + this.props.fetchCategory(); + if(this.props.status===200&&this.props.statusType!=='fetchCategory'){ + this.sucessfulNotification(this.props.statusType); + } + } + componentDidMount(){ + this.props.fetchCategory(); + } + + render() { - const { isAuthenticated, user } = this.props; + const { isAuthenticated, user} = this.props; const { Column } = Table; + if (isAuthenticated && user.isVendor === false && user.isAdmin === true) { return ( @@ -60,20 +103,26 @@ class Categories extends Component { onOk={this.handleOk} onCancel={this.handleCancel} > - + - - - - +
+ ( - Update + Update + this.handleOkUpdate(record._id)} + onCancel={this.handleCancelUpdate} + > + + - Delete + {this.handleDelete(record._id)}} style={{cursor:'pointer',color:'red'}}>Delete )} /> @@ -91,10 +140,13 @@ class Categories extends Component { const mapStateToProps = state => ({ isAuthenticated: state.auth.isAuthenticated, - user: state.auth.user + user: state.auth.user, + category: state.category.categories, + status:state.category.status, + statusType:state.category.statusType, }); export default connect( mapStateToProps, - {} + {fetchCategory,addCategory,deleteCategory,updateCategory} )(Categories); \ No newline at end of file diff --git a/src/redux/actions/categoryActions.js b/src/redux/actions/categoryActions.js new file mode 100644 index 0000000..9428836 --- /dev/null +++ b/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 + }) + }) +} diff --git a/src/redux/actions/type.js b/src/redux/actions/type.js index c153316..f986b0d 100644 --- a/src/redux/actions/type.js +++ b/src/redux/actions/type.js @@ -27,6 +27,11 @@ export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SU export const GET_SERVICE_PENDING = 'GET_SERVICE_PENDING'; export const GET_SERVICE_SUCCESS = 'GET_SERVICE_SUCCESS'; +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'; + export const GET_VENDOR_SERVICES = 'GET_VENDOR_SERVICES'; export const GET_VENDOR_SERVICES_FAIL = 'GET_VENDOR_SERVICES_FAIL'; diff --git a/src/redux/reducers/categoryReducer.js b/src/redux/reducers/categoryReducer.js new file mode 100644 index 0000000..1321b9b --- /dev/null +++ b/src/redux/reducers/categoryReducer.js @@ -0,0 +1,46 @@ +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 + }), + status:200, + statusType:"deleteCategory" + } + case UPDATE_CATEGORY_SUCCESS: + return { + categories: state.categories.categories.map((category) => { + if(category._id===action.payload){ + category.name=action.packet + } + return category + }), + status:200, + statusType:"updateCategory" + } + default: + return state; + } +} \ No newline at end of file diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 157d973..d0afe9c 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -6,7 +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({ auth: AuthReducer, @@ -15,5 +15,6 @@ export default combineReducers({ vendor: vendorReducer, categoryService: CategoryServiceReducer, admin: AdminReducer, - review: ReviewReducer + review: ReviewReducer, + category : CategoryReducer }); \ No newline at end of file From d856a9c0b2788a0f1a88de4a0586e5711a7bcd48 Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Tue, 13 Aug 2019 21:54:17 +0530 Subject: [PATCH 2/6] merge conflicts-2 --- src/redux/reducers/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 9b1ebe7..dff4f7e 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -7,7 +7,7 @@ import CategoryServiceReducer from './categoryServiceReducer'; import AdminReducer from './adminReducers'; import ReviewReducer from './reviewReducer'; import ServicesReducer from './servicesReducer'; -import CategoryReducer from './categoryServiceReducer'; +import CategoryReducer from './categoryReducer'; export default combineReducers({ auth: AuthReducer, @@ -17,6 +17,6 @@ export default combineReducers({ categoryService: CategoryServiceReducer, admin: AdminReducer, review: ReviewReducer, - service: ServicesReducer + service: ServicesReducer, category : CategoryReducer }); \ No newline at end of file From 851e58147888018fbf574e6d7bc70cbc7bb48abe Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Wed, 14 Aug 2019 01:24:08 +0530 Subject: [PATCH 3/6] improved the ui of admin page --- src/components/Admin/AdminNavbar.js | 33 +++------- src/components/Admin/Categories.js | 4 +- src/components/Admin/navbar.css | 97 +++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 src/components/Admin/navbar.css diff --git a/src/components/Admin/AdminNavbar.js b/src/components/Admin/AdminNavbar.js index 05ce8e7..080ab6c 100644 --- a/src/components/Admin/AdminNavbar.js +++ b/src/components/Admin/AdminNavbar.js @@ -3,6 +3,7 @@ import "antd/dist/antd.css"; import { connect } from "react-redux"; import { Layout, Menu, Icon } from 'antd'; import { Link } from 'react-router-dom'; +import './navbar.css' const { Sider } = Layout; @@ -13,29 +14,15 @@ class AdminNavbar extends Component { if (isAuthenticated && user.isVendor === false && user.isAdmin === true) { return ( - -

Admin Panel

- - - - Dashboard - - - - - Categories - - - - - - Users - - - - +
+
+
    +
  • Dashboard
    • +
  • Categories
    • +
  • Users
    • +
+
+ ) } diff --git a/src/components/Admin/Categories.js b/src/components/Admin/Categories.js index d2164ed..2e30559 100644 --- a/src/components/Admin/Categories.js +++ b/src/components/Admin/Categories.js @@ -3,7 +3,7 @@ import "antd/dist/antd.css"; import { connect } from "react-redux"; import { Button,Modal,Input,Table, Divider,notification,Icon } from 'antd'; import {fetchCategory,addCategory,deleteCategory,updateCategory} from '../../redux/actions/categoryActions' - +import './users.css' class Categories extends Component { state = { @@ -92,7 +92,7 @@ class Categories extends Component { if (isAuthenticated && user.isVendor === false && user.isAdmin === true) { return ( - Categories +

Categories


- - ( - - {this.updateShowModal(record._id)}} style={{cursor:'pointer',color:'blue'}}>Update - {this.handleOkUpdate()}} - onCancel={this.handleCancelUpdate} - > - - - - {this.handleDelete(record._id)}} style={{cursor:'pointer',color:'red'}}>Delete - - )} - /> -
+
+ + + ( + + {this.updateShowModal(record._id,record.name)}} style={{cursor:'pointer',color:'blue'}}>Update + {this.handleOkUpdate()}} + onCancel={this.handleCancelUpdate} + > + + + + {this.handleDelete(record._id)}} style={{cursor:'pointer',color:'red'}}>Delete + + )} + /> +
+
) } diff --git a/src/components/Admin/users.css b/src/components/Admin/users.css index 715f063..e553a9c 100644 --- a/src/components/Admin/users.css +++ b/src/components/Admin/users.css @@ -29,4 +29,17 @@ background: #188ed2; bottom: 0; left: calc(50% - 25px); -} \ No newline at end of file +} +.padding{ + padding-left: 330px; + padding-right: 330px; +} + +input[type=text] { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + box-sizing: border-box; + border: 2px solid black; + border-radius: 4px; + } \ No newline at end of file