import { handleActions, createAction } from 'redux-actions'
import { fromJS } from 'immutable'
import adminApi from '../../../api/adminApi'
export const FETCH_ADMINS = 'FETCH_ADMINS'
export const _getAdminsPending = createAction(`${FETCH_ADMINS}_PENDING`);
export const _getAdminsFulfilled = createAction(`${FETCH_ADMINS}_FULFILLED`, response => response);
export const _getAdminsRejected = createAction(`${FETCH_ADMINS}_REJECTED`, error => error);
export const fetchAdmins = () => (dispatch, getState, token) => {
dispatch(_getAdminsPending());
adminApi.getAdmins(token)
.then((response) => {
console.log(response)
dispatch(_getAdminsFulfilled(response));
})
.catch((error) => {
dispatch(_getAdminsRejected(error));
});
};
export const actions = {
fetchAdmins
};
export const initialState = fromJS({
admins: {
adminList: [],
isPending: false,
errorMessage: 'fdfdf'
}
})
export default handleActions({
[`${FETCH_ADMINS}_PENDING`]: (state) => {
return state
.setIn(['admins', 'isPending'], true)
},
[`${FETCH_ADMINS}_REJECTED`]: (state, { payload: error }) => {
const message = error.response && error.response.data.message;
return state.mergeIn(['admins'], {
isPending: false,
errorMessage: message
})
},
[`${FETCH_ADMINS}_FULFILLED`]: (state, { payload }) => {
return state.mergeIn(['admins'], {
adminList: payload,
isPending: false,
errorMessage: ''
})
}
}, initialState)<ReactTable
data={data.tableData}
columns={this.columnGenerator(items)}
className='data-tables -highlight no-border mtop-20 left full'
showPaginationTop
showPaginationBottom={false}
defaultPageSize={this.state.pageSize}
pageSizeOptions={[25, 50, 100, 200, 400, 500]}
onFetchData={this.fetchData}
pages={data.pages}
loading={isPending}
onSortedChange={(newSorted, column) => {
this.onSortChange(newSorted[0])
}}
onPageSizeChange={this.onPageSizeChange}
/>class ProgressBar extends Component {
renderProgressBar(item, i) {
const {barName, barValue} = item;
const {collorBar, colorFill} = this.props;
const barStyle = {
background: collorBar
};
let fillStyle = {
background: colorFill,
width: `${barValue}%`
}
return (
<li key={i} className="progress-bar__item" style={barStyle}>
<span className="progress-bar__value" style={fillStyle}>
<span className="progress-bar__info">
<span>{barName}</span>
<span>{barValue} %</span>
</span>
</span>
</li>
)
}
renderContent() {
const {analyticData} = this.props;
console.log(analyticData)
return Object.keys(analyticData).map((key, i) => {
this.renderProgressBar(analyticData[key], i)
})
}
/**
* Renders "ProgressBarList component"
* @return {string} - HTML markup for the component
*/
render() {
return <ul className="progress-bar__list">
{this.renderContent()}
</ul>;
}
}
export default ProgressBar;renderContent() {
//const {nameUnit, collorBar, colorFill} = this.props;
//test data
const nameUnit = {
1: {
tagName: 'test1',
tagValue: 57
},
2: {
tagName: 'test2',
tagValue: 90
},
3: {
tagName: 'test3',
tagValue: 25
}
};
const barStyle = {
background: '#F4645'
};
let progressBarItems = [];
for (let key in nameUnit) {
let tagName = nameUnit[key].tagName;
let tagValue = nameUnit[key].tagValue;
let fillStyle = {
background: '#e0463e',
width: nameUnit[key].tagValue + '%'
}
progressBarItems.push(
<li className="progress-bar__item" style={barStyle}>
<span className="progress-bar__value" style={fillStyle}>
<span className="progress-bar__info">
<span>{tagName}</span>
<span>{tagValue} %</span>
</span>
</span>
</li>
);
}
return progressBarItems;
}import React, {Component} from 'react';
/**
* class declaration
*/
class Filter extends Component {
constructor() {
super();
this.handleDropdownClick = this.handleDropdownClick.bind(this);
this.state = {dropdownVisible: false};
}
handleDropdownClick(event) {
this.setState({dropdownVisible: !this.state.dropdownVisible})
}
/**
* Renders "Filter component"
* @return {string} - HTML markup for the component
*/
render() {
const dropdownVisible = this.state.dropdownVisible;
return (
<div className="btn-dwn__wrap marginr-10">
<button className="btn-dwn btn--red" onClick={this.handleDropdownClick}>
<svg className="icon" viewBox="0 0 100 100">
<path d="M38.25,50h23.5v31.333L38.25,97V50z M3,3v7.833l35.25,35.25h23.5L97,10.833V3H3z"/>
</svg>
</button>
<div className="btn-dwn__dropdown" dropdownVisible={dropdownVisible}></div>
</div>
);
}
}
export default Filter;