Declaratively set page

This commit is contained in:
Chi Vinh Le
2017-10-25 18:02:18 +02:00
parent df079d29bd
commit 23da613f2b
10 changed files with 49 additions and 21 deletions
@@ -4,11 +4,12 @@ import {
FETCH_ASSETS_REQUEST,
FETCH_ASSETS_SUCCESS,
FETCH_ASSETS_FAILURE,
SET_PAGE,
UPDATE_ASSET_STATE_REQUEST,
UPDATE_ASSET_STATE_SUCCESS,
UPDATE_ASSET_STATE_FAILURE,
UPDATE_ASSETS
} from '../constants/assets';
} from '../constants/stories';
import t from 'coral-framework/services/i18n';
@@ -52,3 +53,9 @@ export const updateAssetState = (id, closedAt) => (dispatch, _, {rest}) => {
export const updateAssets = (assets) => (dispatch) => {
dispatch({type: UPDATE_ASSETS, assets});
};
export const setPage = (page) => ({
type: SET_PAGE,
page,
});
@@ -1,9 +0,0 @@
export const FETCH_ASSETS_REQUEST = 'FETCH_ASSETS_REQUEST';
export const FETCH_ASSETS_SUCCESS = 'FETCH_ASSETS_SUCCESS';
export const FETCH_ASSETS_FAILURE = 'FETCH_ASSETS_FAILURE';
export const UPDATE_ASSET_STATE_REQUEST = 'UPDATE_ASSET_STATE_REQUEST';
export const UPDATE_ASSET_STATE_SUCCESS = 'UPDATE_ASSET_STATE_SUCCESS';
export const UPDATE_ASSET_STATE_FAILURE = 'UPDATE_ASSET_STATE_FAILURE';
export const UPDATE_ASSETS = 'UPDATE_ASSETS';
@@ -0,0 +1,13 @@
const prefix = 'STORIES';
export const FETCH_ASSETS_REQUEST = `${prefix}_FETCH_ASSETS_REQUEST`;
export const FETCH_ASSETS_SUCCESS = `${prefix}_FETCH_ASSETS_SUCCESS`;
export const FETCH_ASSETS_FAILURE = `${prefix}_FETCH_ASSETS_FAILURE`;
export const UPDATE_ASSET_STATE_REQUEST = `${prefix}_UPDATE_ASSET_STATE_REQUEST`;
export const UPDATE_ASSET_STATE_SUCCESS = `${prefix}_UPDATE_ASSET_STATE_SUCCESS`;
export const UPDATE_ASSET_STATE_FAILURE = `${prefix}_UPDATE_ASSET_STATE_FAILURE`;
export const UPDATE_ASSETS = `${prefix}_UPDATE_ASSETS`;
export const SET_PAGE = `${prefix}_SET_PAGE`;
+2 -2
View File
@@ -1,5 +1,5 @@
import auth from './auth';
import assets from './assets';
import stories from './stories';
import dashboard from './dashboard';
import configure from './configure';
import community from './community';
@@ -17,7 +17,7 @@ export default {
configure,
suspendUserDialog,
userDetail,
assets,
stories,
community,
moderation,
install,
@@ -1,4 +1,4 @@
import * as actions from '../constants/assets';
import * as actions from '../constants/stories';
import update from 'immutability-helper';
const initialState = {
@@ -35,6 +35,11 @@ export default function assets (state = initialState, action) {
return update(state, {
assets: {$set: action.assets},
});
case actions.SET_PAGE:
return {
...state,
page: action.page,
};
default:
return state;
}
@@ -15,6 +15,7 @@ const People = (props) => {
onHeaderClickHandler,
onPageChange,
totalPages,
page,
setRole,
setCommenterStatus,
viewUserDetail,
@@ -48,6 +49,7 @@ const People = (props) => {
onHeaderClickHandler={onHeaderClickHandler}
pageCount={totalPages}
onPageChange={onPageChange}
page={page}
/>
: <EmptyCard>{t('community.no_results')}</EmptyCard>
}
@@ -59,6 +61,7 @@ const People = (props) => {
People.propTypes = {
onHeaderClickHandler: PropTypes.func,
users: PropTypes.array,
page: PropTypes.number.isRequired,
searchValue: PropTypes.string,
onSearchChange: PropTypes.func,
totalPages: PropTypes.number,
@@ -24,7 +24,7 @@ const headers = [
}
];
const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, onPageChange}) => (
const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUserDetail, pageCount, page, onPageChange}) => (
<div>
<table className={`mdl-data-table ${styles.dataTable}`}>
<thead>
@@ -51,13 +51,13 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
{row.created_at}
</td>
<td className="mdl-data-table__cell--non-numeric">
<Dropdown
<Dropdown
value={row.status}
placeholder={t('community.status')}
onChange={(status) => setCommenterStatus(row.id, status)}>
onChange={(status) => setCommenterStatus(row.id, status)}>
<Option value={'ACTIVE'} label={t('community.active')} />
<Option value={'BANNED'} label={t('community.banned')} />
</Dropdown>
</Dropdown>
</td>
<td className="mdl-data-table__cell--non-numeric">
<Dropdown
@@ -76,6 +76,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
</table>
<Paginate
pageCount={pageCount}
page={page - 1}
onPageChange={onPageChange}
/>
</div>
@@ -88,6 +89,7 @@ Table.propTypes = {
setCommenterStatus: PropTypes.func.isRequired,
viewUserDetail: PropTypes.func.isRequired,
pageCount: PropTypes.number.isRequired,
page: PropTypes.number.isRequired,
onPageChange: PropTypes.func.isRequired,
};
@@ -78,6 +78,7 @@ class PeopleContainer extends React.Component {
totalPages={this.props.community.totalPagesPeople}
setCommenterStatus={this.props.setCommenterStatus}
setRole={this.props.setRole}
page={this.props.community.pagePeople}
viewUserDetail={this.props.viewUserDetail}
/>;
}
@@ -91,8 +91,9 @@ class Stories extends Component {
);
}
onPageClick = ({selected}) => {
onPageChange = ({selected}) => {
const page = selected + 1;
this.props.setPage(page);
this.props.fetchAssets({page});
}
@@ -157,7 +158,8 @@ class Stories extends Component {
</DataTable>
<Paginate
pageCount={assets.totalPages}
onPageChange={this.onPageClick} />
page={assets.page - 1}
onPageChange={this.onPageChange} />
</div>
: <EmptyCard>{t('streams.empty_result')}</EmptyCard>
}
@@ -168,6 +170,7 @@ class Stories extends Component {
Stories.propTypes = {
assets: PropTypes.object,
setPage: PropTypes.func,
fetchAssets: PropTypes.func,
updateAssetState: PropTypes.func,
};
@@ -1,12 +1,15 @@
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchAssets, updateAssetState} from 'coral-admin/src/actions/assets';
import {fetchAssets, updateAssetState, setPage} from 'coral-admin/src/actions/stories';
import Stories from '../components/Stories';
const mapStateToProps = ({assets}) => ({assets});
const mapStateToProps = ({stories}) => ({
assets: stories,
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators({
setPage,
fetchAssets,
updateAssetState,
}, dispatch);