From 7e168488627f8b979f45eeeca98e422ede24acb9 Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Tue, 28 May 2019 02:10:56 +0530 Subject: [PATCH 1/5] Fetching data for admin page using redux --- src/components/Admin/Categories.js | 66 ++++++++++++++++------------- src/redux/actions/adminActions.js | 40 +++++++++++++++++ src/redux/actions/type.js | 6 ++- src/redux/reducers/adminReducers.js | 24 +++++++++++ src/redux/reducers/index.js | 4 +- 5 files changed, 108 insertions(+), 32 deletions(-) create mode 100644 src/redux/actions/adminActions.js create mode 100644 src/redux/reducers/adminReducers.js diff --git a/src/components/Admin/Categories.js b/src/components/Admin/Categories.js index c78cf7a..6267a9b 100644 --- a/src/components/Admin/Categories.js +++ b/src/components/Admin/Categories.js @@ -2,28 +2,14 @@ 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} from "../../redux/actions/adminActions"; class Categories extends Component { - state = { visible: false } + state = { + visible: false, + newCategoryName:'' + } showModal = () => { this.setState({ @@ -31,18 +17,39 @@ class Categories extends Component { }); } + handleChange=(e)=>{ + this.setState({ + newCategoryName:e.target.value + }) + } + handleOk = (e) => { + const newCategory= { + userId:12, + id: this.props.cat.length+1, + title:this.state.newCategoryName + } + this.props.addCategory(newCategory); this.setState({ visible: false, - }); + newCategoryName:'' }); } handleCancel = (e) => { this.setState({ visible: false, + newCategoryName:'' }); } + handleDelete=(e)=>{ + this.props.deleteCategory(e); + } + + componentDidMount(){ + this.props.fetchCategory(); + } + render() { const { isAuthenticated, user } = this.props; const { Column } = Table; @@ -60,20 +67,18 @@ class Categories extends Component { onOk={this.handleOk} onCancel={this.handleCancel} > - + {this.handleChange(value)}} placeholder="Enter the name of the category" /> - - - - +
+ ( - Update + Update - Delete + {this.handleDelete(record.id)}}>Delete )} /> @@ -91,10 +96,11 @@ class Categories extends Component { const mapStateToProps = state => ({ isAuthenticated: state.auth.isAuthenticated, - user: state.auth.user + user: state.auth.user, + cat:state.categorylist.category, }); export default connect( mapStateToProps, - {} + {fetchCategory,deleteCategory,addCategory} )(Categories); \ No newline at end of file diff --git a/src/redux/actions/adminActions.js b/src/redux/actions/adminActions.js new file mode 100644 index 0000000..fcb585b --- /dev/null +++ b/src/redux/actions/adminActions.js @@ -0,0 +1,40 @@ +import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY} from './type'; +import axios from 'axios'; + +export const fetchCategory =()=>{ + return dispatch =>{ + axios.get('https://jsonplaceholder.typicode.com/posts') + .then(res=>{ + dispatch({ + type:FETCH_CATEGORY, + payload: res.data, + }) + }) + } +}; + +export const deleteCategory =(e)=>{ + return dispatch =>{ + axios.get('https://jsonplaceholder.typicode.com/posts') + .then(res=>{ + dispatch({ + type:DELETE_CATEGORY, + payload: e, + }) + }) + } +}; + +export const addCategory =(e)=>{ + return dispatch =>{ + axios.get('https://jsonplaceholder.typicode.com/posts') + .then(res=>{ + dispatch({ + type:ADD_CATEGORY, + payload: e, + }) + }) + } +}; + + diff --git a/src/redux/actions/type.js b/src/redux/actions/type.js index c589f7a..7da816c 100644 --- a/src/redux/actions/type.js +++ b/src/redux/actions/type.js @@ -22,4 +22,8 @@ export const GET_ALL_CATEGORIES_PENDING = 'GET_ALL_CATEGORIES_PENDING'; export const GET_ALL_CATEGORIES_SUCCESS = 'GET_ALL_CATEGORIES_SUCCESS'; export const GET_CATEGORY_WISE_SERVICES_PENDING = 'GET_CATEGORY_WISE_SERVICES_PENDING'; -export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SUCCESS'; \ No newline at end of file +export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SUCCESS'; + +export const FETCH_CATEGORY='FETCH_CATEGORY'; +export const DELETE_CATEGORY='DELETE_CATEGORY'; +export const ADD_CATEGORY='ADD_CATEGORY'; \ No newline at end of file diff --git a/src/redux/reducers/adminReducers.js b/src/redux/reducers/adminReducers.js new file mode 100644 index 0000000..d16c02b --- /dev/null +++ b/src/redux/reducers/adminReducers.js @@ -0,0 +1,24 @@ +import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_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 + )} + default: return state; + } + +} +export default fetchCategory; \ No newline at end of file diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 6d57b25..05eaed2 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -4,6 +4,7 @@ import AuthReducer from './authReducer'; import ErrorReducer from './errorReducer'; import UserReducer from './userReducer'; import CategoryServiceReducer from './categoryServiceReducer'; +import AdminReducer from './adminReducers'; export default combineReducers({ @@ -11,5 +12,6 @@ export default combineReducers({ error: ErrorReducer, user: UserReducer, vendor: vendorReducer, - categoryService: CategoryServiceReducer + categoryService: CategoryServiceReducer, + categorylist:AdminReducer, }); \ No newline at end of file From ef314ad350c50fa348f47acec0a78de6bba272f8 Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Tue, 28 May 2019 02:58:47 +0530 Subject: [PATCH 2/5] renaming the category in admion page --- src/components/Admin/Categories.js | 70 ++++++++++++++++++++++------- src/redux/actions/adminActions.js | 15 ++++++- src/redux/actions/type.js | 3 +- src/redux/reducers/adminReducers.js | 15 ++++++- 4 files changed, 83 insertions(+), 20 deletions(-) diff --git a/src/components/Admin/Categories.js b/src/components/Admin/Categories.js index 6267a9b..f4031ac 100644 --- a/src/components/Admin/Categories.js +++ b/src/components/Admin/Categories.js @@ -2,28 +2,44 @@ import React, { Component, Fragment } from 'react'; import "antd/dist/antd.css"; import { connect } from "react-redux"; import { Button,Modal,Input,Table, Divider } from 'antd'; -import {fetchCategory,deleteCategory,addCategory} from "../../redux/actions/adminActions"; +import {fetchCategory,deleteCategory,addCategory,updateCategory} from "../../redux/actions/adminActions"; class Categories extends Component { state = { - visible: false, - newCategoryName:'' + visibleForm: false, + newCategoryName:'', + visibleUpdate:false, + updatedCategoryName:'', + updatedCatObj:'', } - showModal = () => { + showModalForm = () => { this.setState({ - visible: true, + visibleForm: true, }); } - handleChange=(e)=>{ + showModalUpdate = (e) => { + this.setState({ + visibleUpdate: true, + updatedCatObj:e + }); + } + + handleChangeForm=(e)=>{ this.setState({ newCategoryName:e.target.value }) } + + handleChangeUpdate=(e)=>{ + this.setState({ + updatedCategoryName:e.target.value + }) + } - handleOk = (e) => { + handleOkForm = () => { const newCategory= { userId:12, id: this.props.cat.length+1, @@ -31,14 +47,26 @@ class Categories extends Component { } this.props.addCategory(newCategory); this.setState({ - visible: false, + visibleForm: false, newCategoryName:'' }); } + handleOkUpdate = () => { + this.props.updateCategory(this.state.updatedCategoryName,this.state.updatedCatObj); + this.setState({ + visibleUpdate: false, + updatedCategoryName:'', + updatedCatObj:'' + }); + } + handleCancel = (e) => { this.setState({ - visible: false, - newCategoryName:'' + visibleForm: false, + newCategoryName:'', + visibleUpdate:false, + updatedCategoryName:'', + updatedCatObj:'' }); } @@ -58,25 +86,33 @@ class Categories extends Component { Categories
- - {this.handleChange(value)}} placeholder="Enter the name of the category" /> + {this.handleChangeForm(value)}} placeholder="Enter the name of the category" /> -
+
( - Update + this.showModalUpdate(record)}>Update + + {this.handleChangeUpdate(value)}} placeholder="Enter the name of the category" /> + {this.handleDelete(record.id)}}>Delete @@ -102,5 +138,5 @@ const mapStateToProps = state => ({ export default connect( mapStateToProps, - {fetchCategory,deleteCategory,addCategory} + {fetchCategory,deleteCategory,addCategory,updateCategory} )(Categories); \ No newline at end of file diff --git a/src/redux/actions/adminActions.js b/src/redux/actions/adminActions.js index fcb585b..d968f6e 100644 --- a/src/redux/actions/adminActions.js +++ b/src/redux/actions/adminActions.js @@ -1,4 +1,4 @@ -import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY} from './type'; +import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY,UPDATE_CATEGORY} from './type'; import axios from 'axios'; export const fetchCategory =()=>{ @@ -37,4 +37,17 @@ export const addCategory =(e)=>{ } }; +export const updateCategory =(newName,e)=>{ + return dispatch =>{ + axios.get('https://jsonplaceholder.typicode.com/posts') + .then(res=>{ + dispatch({ + type:UPDATE_CATEGORY, + payload: e, + newName:newName, + }) + }) + } +}; + diff --git a/src/redux/actions/type.js b/src/redux/actions/type.js index 7da816c..45a5923 100644 --- a/src/redux/actions/type.js +++ b/src/redux/actions/type.js @@ -26,4 +26,5 @@ export const GET_CATEGORY_WISE_SERVICES_SUCCESS = 'GET_CATEGORY_WISE_SERVICES_SU export const FETCH_CATEGORY='FETCH_CATEGORY'; export const DELETE_CATEGORY='DELETE_CATEGORY'; -export const ADD_CATEGORY='ADD_CATEGORY'; \ No newline at end of file +export const ADD_CATEGORY='ADD_CATEGORY'; +export const UPDATE_CATEGORY='UPDATE_CATEGORY'; \ No newline at end of file diff --git a/src/redux/reducers/adminReducers.js b/src/redux/reducers/adminReducers.js index d16c02b..154eda6 100644 --- a/src/redux/reducers/adminReducers.js +++ b/src/redux/reducers/adminReducers.js @@ -1,4 +1,4 @@ -import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY} from '../actions/type'; +import {FETCH_CATEGORY,DELETE_CATEGORY,ADD_CATEGORY,UPDATE_CATEGORY} from '../actions/type'; const initState={ category:[], @@ -17,6 +17,19 @@ const fetchCategory=(state=initState,action)=>{ return { category: state.category.filter(catname => catname.id !== action.payload )} + case UPDATE_CATEGORY: + return{ + category :state.category.map(item=>{ + if(item.id===action.payload.id) + return { + userId:item.userId, + id:item.id, + title:action.newName, + } + else + return item + }) + } default: return state; } From 3d8bd88a60ddbb1baddbc59935f7ad556d8f5f2e Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Wed, 29 May 2019 00:16:28 +0530 Subject: [PATCH 3/5] fetching from /helper/url --- src/components/Admin/Categories.js | 29 +++++++++------------- src/redux/actions/adminActions.js | 38 ++++++++++++++++------------- src/redux/reducers/adminReducers.js | 10 ++++---- 3 files changed, 38 insertions(+), 39 deletions(-) diff --git a/src/components/Admin/Categories.js b/src/components/Admin/Categories.js index f4031ac..aef7936 100644 --- a/src/components/Admin/Categories.js +++ b/src/components/Admin/Categories.js @@ -11,7 +11,7 @@ class Categories extends Component { newCategoryName:'', visibleUpdate:false, updatedCategoryName:'', - updatedCatObj:'', + updatedCatId:'', } showModalForm = () => { @@ -23,7 +23,7 @@ class Categories extends Component { showModalUpdate = (e) => { this.setState({ visibleUpdate: true, - updatedCatObj:e + updatedCatId:e }); } @@ -40,23 +40,18 @@ class Categories extends Component { } handleOkForm = () => { - const newCategory= { - userId:12, - id: this.props.cat.length+1, - title:this.state.newCategoryName - } - this.props.addCategory(newCategory); + this.props.addCategory(this.state.newCategoryName); this.setState({ visibleForm: false, newCategoryName:'' }); } handleOkUpdate = () => { - this.props.updateCategory(this.state.updatedCategoryName,this.state.updatedCatObj); + this.props.updateCategory(this.state.updatedCategoryName,this.state.updatedCatId); this.setState({ visibleUpdate: false, updatedCategoryName:'', - updatedCatObj:'' + updatedCatId:'' }); } @@ -66,7 +61,7 @@ class Categories extends Component { newCategoryName:'', visibleUpdate:false, updatedCategoryName:'', - updatedCatObj:'' + updatedCatId:'' }); } @@ -97,14 +92,14 @@ class Categories extends Component { > {this.handleChangeForm(value)}} placeholder="Enter the name of the category" /> -
- +
+ ( + key="_id" + render={(record) => ( - this.showModalUpdate(record)}>Update + this.showModalUpdate(record._id)}>Update {this.handleChangeUpdate(value)}} placeholder="Enter the name of the category" /> - {this.handleDelete(record.id)}}>Delete + {this.handleDelete(record._id)}}>Delete )} /> diff --git a/src/redux/actions/adminActions.js b/src/redux/actions/adminActions.js index d968f6e..20ce5f7 100644 --- a/src/redux/actions/adminActions.js +++ b/src/redux/actions/adminActions.js @@ -1,53 +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('https://jsonplaceholder.typicode.com/posts') + axios.get(`${url}/categories`) .then(res=>{ dispatch({ type:FETCH_CATEGORY, - payload: res.data, + payload: res.data.categories, }) }) } }; -export const deleteCategory =(e)=>{ - return dispatch =>{ - axios.get('https://jsonplaceholder.typicode.com/posts') +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 =(e)=>{ - return dispatch =>{ - axios.get('https://jsonplaceholder.typicode.com/posts') +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: e, + payload: res.data, }) }) - } + }; -export const updateCategory =(newName,e)=>{ - return dispatch =>{ - axios.get('https://jsonplaceholder.typicode.com/posts') +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: e, - newName:newName, + payload: id, + newCategory:res.data, }) }) - } + }; diff --git a/src/redux/reducers/adminReducers.js b/src/redux/reducers/adminReducers.js index 154eda6..ad841bd 100644 --- a/src/redux/reducers/adminReducers.js +++ b/src/redux/reducers/adminReducers.js @@ -15,16 +15,16 @@ const fetchCategory=(state=initState,action)=>{ return {category :state.category.concat(action.payload)} case DELETE_CATEGORY : return { category: state.category.filter(catname => - catname.id !== action.payload + catname._id !== action.payload )} case UPDATE_CATEGORY: return{ category :state.category.map(item=>{ - if(item.id===action.payload.id) + if(item._id===action.payload) return { - userId:item.userId, - id:item.id, - title:action.newName, + _id:action.payload, + name:action.newCategory.name, + register_date:action.newCategory.register_date } else return item From f6999c3964d219bd0277b698fc3a5ec4af5cb377 Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Wed, 29 May 2019 03:22:27 +0530 Subject: [PATCH 4/5] Minor fixes --- src/components/Admin/Categories.js | 2 +- src/redux/reducers/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Admin/Categories.js b/src/components/Admin/Categories.js index aef7936..926b70c 100644 --- a/src/components/Admin/Categories.js +++ b/src/components/Admin/Categories.js @@ -128,7 +128,7 @@ class Categories extends Component { const mapStateToProps = state => ({ isAuthenticated: state.auth.isAuthenticated, user: state.auth.user, - cat:state.categorylist.category, + cat:state.admin.category, }); export default connect( diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js index 05eaed2..10b5062 100644 --- a/src/redux/reducers/index.js +++ b/src/redux/reducers/index.js @@ -13,5 +13,5 @@ export default combineReducers({ user: UserReducer, vendor: vendorReducer, categoryService: CategoryServiceReducer, - categorylist:AdminReducer, + admin:AdminReducer, }); \ No newline at end of file From fb0aff6e7d0d6ec59b2ff9691dba8ae07240997b Mon Sep 17 00:00:00 2001 From: Subhang23 Date: Thu, 30 May 2019 02:05:38 +0530 Subject: [PATCH 5/5] minor fixes --- src/redux/actions/adminActions.js | 82 +++++++++++++---------------- src/redux/reducers/adminReducers.js | 50 +++++++++--------- 2 files changed, 60 insertions(+), 72 deletions(-) diff --git a/src/redux/actions/adminActions.js b/src/redux/actions/adminActions.js index 20ce5f7..776443b 100644 --- a/src/redux/actions/adminActions.js +++ b/src/redux/actions/adminActions.js @@ -3,55 +3,45 @@ 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 fetchCategory = () => (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 deleteCategory = (id) => (dispatch,getState) =>{ + axios.delete(`${url}/categories/`+id,tokenConfig(getState)) + .then(( ) => { + dispatch({ + type:DELETE_CATEGORY, + payload: id, + }) + }) }; -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 addCategory = (name) => (dispatch,getState) => { + const body = JSON.stringify({ name }) ; + axios.post(`${url}/categories`,body,tokenConfig(getState)) + .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, - }) - }) - -}; - - + const body = JSON.stringify({ name }); + axios.patch(`${url}/categories/`+id,body,tokenConfig(getState)) + .then(res => { + dispatch({ + type:UPDATE_CATEGORY, + payload: id, + newCategory:res.data, + }) + }) +}; \ No newline at end of file diff --git a/src/redux/reducers/adminReducers.js b/src/redux/reducers/adminReducers.js index ad841bd..90a4296 100644 --- a/src/redux/reducers/adminReducers.js +++ b/src/redux/reducers/adminReducers.js @@ -5,33 +5,31 @@ const initState={ } const fetchCategory=(state=initState,action)=>{ - switch(action.type){ - case FETCH_CATEGORY: + 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 { - ...state, - category:action.payload + _id:action.payload, + name:action.newCategory.name, + register_date:action.newCategory.register_date } - 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; - } - + else + return item + }) + } + default: return state; + } } + export default fetchCategory; \ No newline at end of file