Created
April 13, 2019 22:04
-
-
Save omosehin/5b9e12849f97582e5648dbac200c607b to your computer and use it in GitHub Desktop.
AuthService where we have the end point
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { customConfig } from '../actions/action_constants'; | |
import { authHeader } from '../helpers/authHeader'; | |
export const vendorService = { | |
getAllVendors, | |
}; | |
function getAllVendors() { | |
const requestOptions = { | |
method: 'GET', | |
headers: authHeader(), | |
}; | |
let url = `${customConfig.API_URL}api/vendors/all?page=1&size=50`; | |
return fetch(url, requestOptions).then(handleResponse); | |
} | |
//This is the end point | |
export function getAllVendors() { | |
return dispatch => { | |
dispatch(request()); | |
vendorService.getAllVendors().then(payload => dispatch(success(payload)), error => dispatch(failure(error.toString()))); | |
}; | |
function request() { | |
return { type: 'FETCH_All_VENDORS_START' }; | |
} | |
function success(payload) { | |
return { type: 'FETCH_All_VENDORS_FULLFILLED', payload }; | |
} | |
function failure(error) { | |
return { type: 'FETCH_All_VENDORS_REJECTED', error }; | |
} | |
} | |
//This is the component | |
import React, { Component } from 'react'; | |
import './../admin/Admin.css'; | |
import './../admin/pages/Pages.css'; | |
import { withRouter, Link, NavLink } from 'react-router-dom'; | |
import { connect } from 'react-redux'; | |
import { Modal, ModalBody } from 'reactstrap'; | |
import { CSVLink } from 'react-csv'; | |
import { fetchAllVendors, getAllVendors, updateCreateVendor } from '../../actions/OwnerActions/OwnerVendorMgtActions/OwnerVendorActions'; | |
import Loader from '../../Loader'; | |
import SuccessModal from '../ownerModule/subcomponents/successModal'; | |
import UnSuccessModal from '../ownerModule/subcomponents/unsuccessfulModal'; | |
const trailImg = require('../../assets/Trail.svg'); | |
const card1Img = require('../../assets/Card 1.svg'); | |
const delcardImg = require('../../assets/Delete card.svg'); | |
const delicoImg = require('../../assets/delete.svg'); | |
const rboxImg = require('../../assets/rectbox.png'); | |
const dboxImg = require('../../assets/user1.png'); | |
const boxImg = require('../../assets/box.png'); | |
class OVendors extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
successModalActive: 0, | |
modalMessage: '', | |
loggedInUser: null, | |
}; | |
this.toggleCardEditModal = this.toggleCardEditModal.bind(this); | |
this.toggleCardDeleteModal = this.toggleCardDeleteModal.bind(this); | |
} | |
componentWillReceiveProps(nextProps) { | |
this.setState({ | |
loggedInUser: JSON.parse(localStorage.getItem('user')), | |
}); | |
if (nextProps.createVendorRequestStatus !== this.props.createVendorRequestStatus) { | |
if (nextProps.createVendorRequestStatus === 1) { | |
this.setState({ | |
modalMessage: nextProps.createVendorRequestMessage, | |
successModalActive: 1, | |
}); | |
} | |
if (nextProps.createVendorRequestStatus === 2) { | |
this.setState({ | |
modalMessage: nextProps.createVendorRequestMessage, | |
successModalActive: 2, | |
}); | |
} | |
} | |
} | |
componentDidMount() {} | |
updateActiveModalFn(modalStatus) { | |
// this.setState({ | |
// successModalActive: modalStatus, | |
// }); | |
this.props.updateCreateVendorFn(modalStatus); | |
} | |
// updateActiveModalFn(modalStatus) { | |
// this.setState({ | |
// successModalActive: modalStatus, | |
// }); | |
// } | |
toggleCardEditModal() { | |
this.setState({ | |
cardEditModal: !this.state.cardEditModal, | |
}); | |
} | |
toggleCardDeleteModal() { | |
this.setState({ | |
cardDeleteModal: !this.state.cardDeleteModal, | |
}); | |
} | |
componentWillMount() { | |
this.props.getAllVendorsFn(); | |
} | |
render() { | |
let { allVendors } = this.props, | |
list = allVendors.data ? allVendors.data : [], | |
vendorList = | |
list.length !== undefined | |
? list.map(e => { | |
return ( | |
<div key={e.id} className="col-md-6 mt-md-3"> | |
<Link to={'/owner-admin/vendors/vendor-details/' + e.id}> | |
<div className="card pb-3"> | |
<div className="card-title mt-md-3 " style={{ overflow: 'hidden !important' }}> | |
{e.image == null ? ( | |
<img alt="" src="" className="rounded-circle profile-pic" /> | |
) : ( | |
<img alt="" src={e.image} width="110%" className="rounded-circle profile-pic-img" /> | |
)} | |
<span src="" className="ml-md-2 mt-md-2 " style={{ maxWidth: '60%', display: 'block' }}> | |
{/* <img alt="" src={oandoimg1} width="85%" /> */} | |
<p className="header7 ">{e.name}</p> | |
<p className="no-spaces"> | |
<small>{e.sector}</small> | |
</p> | |
<p className=" neg-top-margin">{e.number}</p> | |
</span> | |
</div> | |
<div className="card-body pb-3"> | |
<div className="title"> | |
{/* <img alt="" src={productsImg1} width="27%" /> */} | |
<p className="header3">Products</p> | |
</div> | |
{e.products.length ? ( | |
(e.products.length < 5 && | |
e.products.map(p => { | |
return ( | |
<span className="badge badge-pill badge-light" style={{ maxWidth: '20px', overflow: 'hidden' }}> | |
{p.name} | |
</span> | |
); | |
})) || | |
(e.products.length >= 5 && | |
e.products.slice(0, 5).map(p => { | |
return ( | |
<span className="badge badge-pill badge-light" style={{ maxWidth: '20px', overflow: 'hidden' }}> | |
{p.name} | |
</span> | |
); | |
}) && ( | |
<Link to={'/owner-admin/vendor/' + e.id + '/vendor-products'}> | |
<small>See all products</small> <strong style={{ fontSize: '20px ' }}> -</strong> | |
</Link> | |
)) | |
) : ( | |
<Link to={'/owner-admin/vendor/' + e.id + '/vendor-products'}> | |
<small>No Products</small> <strong style={{ fontSize: '20px ' }}> + </strong> | |
</Link> | |
)} | |
<p style={{ fontSize: '10px', marginTop: '1em' }}> | |
<span style={{ fontWeight: 'bold' }}>Status:</span> {e.status} | |
</p> | |
</div> | |
</div> | |
</Link> | |
</div> | |
); | |
}) | |
: []; | |
const { loggedInUser } = this.state; | |
return ( | |
<div className="Admin Voucher pl-md-5"> | |
{/* <Loader toggle={this.props.fetching} /> */} | |
<div className="col-md-12"> | |
<div className="pl-md-5 pt-md-4 container"> | |
<div className="row mt-md-4"> | |
<div className="col-md-7"> | |
<ul className="breadcrumbs"> | |
<li> | |
<p className="header6">Vendors</p> | |
</li> | |
</ul> | |
</div> | |
<div className="col-md-5"> | |
<div className="search-bar shadow-sm bg-white"> | |
<input className="p-1" ref="search" type="text" name="search" /> | |
<span className="search-icon" /> | |
</div> | |
</div> | |
</div> | |
<div className="row section-two"> | |
<div className="col-md-4"> | |
<ul className="sub-sidebar"> | |
{loggedInUser && loggedInUser.permissions.length && loggedInUser.permissions.includes('VIEW_VENDORS') && ( | |
<NavLink to="/owner-admin/vendors/" activeClassName="active"> | |
<li>View vendors</li> | |
</NavLink> | |
)} | |
{/* <NavLink to="/owner-admin/vendors/" activeClassName="active"> | |
<li>View vendors</li> | |
</NavLink> */} | |
<Link to="/owner-admin/vendors/create"> | |
<li>Create new vendor</li> | |
</Link> | |
</ul> | |
<div className="cardv-container"> | |
<img src={boxImg} width="120%" className="cardv" height="300px" alt="vendors" /> | |
<div className="absol-container"> | |
<p>Total</p> | |
<div className="sub"> | |
<p> | |
{/* {activeVouchers.length} */} | |
{list.length} | |
<small className="mt-md-3"> vendors</small> | |
</p> | |
</div> | |
<p> | |
Actve | |
<strong> | |
{list.length && list.filter(e => e.status === 'ACTIVE').length} | |
</strong> | |
</p> | |
<p> | |
Suspended <strong>{list.length && list.filter(e => e.status === 'DISABLED').length}</strong> | |
</p> | |
</div> | |
</div> | |
</div> | |
<div className="col-md-8"> | |
{/* <div className="fixed-content-height "> | |
<div className="row section-one">{vendorList}</div> | |
</div> */} | |
{vendorList.length >= 1 && ( | |
<div className="fixed-content-height "> | |
<div className="row section-one Cardlist">{vendorList}</div> | |
</div> | |
)} | |
{vendorList.length < 1 && this.props.fetching && ( | |
<div className="fixed-content-height "> | |
<div className="row section-one Cardlist" style={{ marginLeft: 15 }}> | |
Vendor loading... | |
</div> | |
</div> | |
)} | |
{vendorList.length < 1 && this.props.fetching === false && ( | |
<div className="fixed-content-height "> | |
<div className="row section-one Cardlist">An error occured</div> | |
</div> | |
)} | |
{vendorList.length < 1 && ( | |
<div className="fixed-content-height "> | |
<div className="row section-one Cardlist">No Vendor found</div> | |
</div> | |
)} | |
</div> | |
</div> | |
</div> | |
</div> | |
{this.props.createVendorRequestStatus === 1 ? ( | |
<SuccessModal updateActiveModal={this.updateActiveModalFn.bind(this)} modalMessageProp={this.props.createVendorRequestMessage} /> | |
) : null} | |
{/* {this.state.successModalActive === 2 ? ( | |
<UnSuccessModal updateActiveModal={this.updateActiveModalFn.bind(this)} modalMessageProp={this.state.modalMessage} /> | |
) : null} */} | |
</div> | |
); | |
} | |
} | |
const mapStateToProps = state => { | |
return { | |
selectedUser: state.customerUser.selectedUser, | |
allVendors: state.oVendorReducer.allVendors, | |
fetching: state.oVendorReducer.fetching, | |
createVendorRequestStatus: state.oVendorReducer.createVendorRequestStatus, | |
createVendorRequestMessage: state.oVendorReducer.createVendorRequestMessage, | |
// userCreateModal:state.customerUser.userCreateModal | |
}; | |
}; | |
const mapDispatchToProps = dispatch => { | |
return { | |
getAllVendorsFn: () => { | |
dispatch(getAllVendors()); | |
}, | |
updateCreateVendorFn: d => { | |
dispatch(updateCreateVendor(d)); | |
}, | |
}; | |
}; | |
export default withRouter( | |
connect( | |
mapStateToProps, | |
mapDispatchToProps, | |
)(OVendors), | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment