Add submit logic

This commit is contained in:
soupette 2019-07-04 13:08:31 +02:00
parent 2b5cc4c405
commit cf19cb0960
9 changed files with 143 additions and 14 deletions

View File

@ -13,7 +13,7 @@ import reducer from './reducer';
import saga from './saga';
import makeSelectMain from './selectors';
function Main({ isLoading }) {
function Main({ isLoading, emitEvent }) {
strapi.useInjectReducer({ key: 'main', reducer, pluginId });
strapi.useInjectSaga({ key: 'main', saga, pluginId });
@ -21,17 +21,22 @@ function Main({ isLoading }) {
return <LoadingIndicatorPage />;
}
const renderRoute = props => (
<SettingsView emitEvent={emitEvent} {...props} />
);
return (
<Switch>
<Route
path="/plugins/content-manager/ctm-configurations/:type"
component={SettingsView}
render={renderRoute}
/>
</Switch>
);
}
Main.propTypes = {
emitEvent: PropTypes.func.isRequired,
isLoading: PropTypes.bool.isRequired,
};

View File

@ -1,4 +1,11 @@
import { GET_DATA, GET_DATA_SUCCEEDED, ON_CHANGE } from './constants';
import {
GET_DATA,
GET_DATA_SUCCEEDED,
ON_CHANGE,
ON_RESET,
ON_SUBMIT,
SUBMIT_SUCCEEDED,
} from './constants';
export function getData() {
return {
@ -22,3 +29,21 @@ export function onChange({ target: { name, value } }) {
value,
};
}
export function onReset() {
return {
type: ON_RESET,
};
}
export function onSubmit() {
return {
type: ON_SUBMIT,
};
}
export function submitSucceeded() {
return {
type: SUBMIT_SUCCEEDED,
};
}

View File

@ -2,3 +2,6 @@ export const GET_DATA = 'ContentManager/SettingsView/GET_DATA';
export const GET_DATA_SUCCEEDED =
'ContentManager/SettingsView/GET_DATA_SUCCEEDED';
export const ON_CHANGE = 'ContentManager/SettingsView/ON_CHANGE';
export const ON_RESET = 'ContentManager/SettingsView/ON_RESET';
export const ON_SUBMIT = 'ContentManager/SettingsView/ON_SUBMIT';
export const SUBMIT_SUCCEEDED = 'ContentManager/SettingsView/SUBMIT_SUCCEEDED';

View File

@ -1,4 +1,4 @@
import React, { memo, useEffect } from 'react';
import React, { memo, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators, compose } from 'redux';
@ -8,6 +8,7 @@ import {
InputsIndex as Input,
LoadingIndicatorPage,
PluginHeader,
PopUpWarning,
} from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
@ -16,7 +17,7 @@ import Container from '../../components/Container';
import Block from '../../components/Block';
import Row from './Row';
import { getData, onChange } from './actions';
import { getData, onChange, onReset, onSubmit } from './actions';
import reducer from './reducer';
import saga from './saga';
import makeSelectSettingView from './selectors';
@ -29,10 +30,23 @@ function SettingsView({
isLoading,
modifiedData,
onChange,
onReset,
onSubmit,
shouldToggleModalSubmit,
}) {
strapi.useInjectReducer({ key: 'settingsView', reducer, pluginId });
strapi.useInjectSaga({ key: 'settingsView', saga, pluginId });
const [showWarningCancel, setWarningOpen] = useState(false);
const [showWarningSubmit, setWarningSubmitOpen] = useState(false);
const toggleWarningCancel = () => setWarningOpen(prevState => !prevState);
const toggleWarningSubmit = () =>
setWarningSubmitOpen(prevState => !prevState);
useEffect(() => {
if (showWarningSubmit) {
toggleWarningSubmit();
}
}, [shouldToggleModalSubmit]);
useEffect(() => {
if (isEmpty(initialData)) {
getData();
@ -50,13 +64,13 @@ function SettingsView({
id: 'cancelChanges',
label: 'content-manager.popUpWarning.button.cancel',
kind: 'secondary',
onClick: () => {},
onClick: toggleWarningCancel,
type: 'button',
},
{
kind: 'primary',
label: 'content-manager.containers.Edit.submit',
onClick: () => {},
onClick: toggleWarningSubmit,
type: 'submit',
},
];
@ -74,6 +88,33 @@ function SettingsView({
id: 'content-manager.containers.SettingsPage.pluginHeaderDescription',
}}
/>
<PopUpWarning
isOpen={showWarningSubmit}
toggleModal={toggleWarningSubmit}
content={{
title: 'content-manager.popUpWarning.title',
message: 'content-manager.popUpWarning.warning.updateAllSettings',
cancel: 'content-manager.popUpWarning.button.cancel',
confirm: 'content-manager.popUpWarning.button.confirm',
}}
popUpWarningType="danger"
onConfirm={() => onSubmit()}
/>
<PopUpWarning
isOpen={showWarningCancel}
toggleModal={toggleWarningCancel}
content={{
title: 'content-manager.popUpWarning.title',
message: 'content-manager.popUpWarning.warning.cancelAllSettings',
cancel: 'content-manager.popUpWarning.button.cancel',
confirm: 'content-manager.popUpWarning.button.confirm',
}}
popUpWarningType="danger"
onConfirm={() => {
onReset();
toggleWarningCancel();
}}
/>
<Row className="row">
<Block
description="content-manager.containers.SettingsPage.Block.generalSettings.description"
@ -103,6 +144,9 @@ SettingsView.propTypes = {
isLoading: PropTypes.bool.isRequired,
modifiedData: PropTypes.object.isRequired,
onChange: PropTypes.func.isRequired,
onReset: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
shouldToggleModalSubmit: PropTypes.bool.isRequired,
};
const mapStateToProps = makeSelectSettingView();
@ -112,6 +156,8 @@ export function mapDispatchToProps(dispatch) {
{
getData,
onChange,
onReset,
onSubmit,
},
dispatch
);

View File

@ -4,7 +4,12 @@
*/
import { fromJS, List, Map } from 'immutable';
import { GET_DATA_SUCCEEDED, ON_CHANGE } from './constants';
import {
GET_DATA_SUCCEEDED,
ON_CHANGE,
ON_RESET,
SUBMIT_SUCCEEDED,
} from './constants';
export const initialState = fromJS({
initialData: Map({}),
@ -12,6 +17,7 @@ export const initialState = fromJS({
groups: List([]),
models: List([]),
isLoading: true,
shouldToggleModalSubmit: true,
});
function settingsViewReducer(state = initialState, action) {
@ -25,6 +31,12 @@ function settingsViewReducer(state = initialState, action) {
.update('isLoading', () => false);
case ON_CHANGE:
return state.updateIn(['modifiedData', action.name], () => action.value);
case ON_RESET:
return state.update('modifiedData', () => state.get('initialData'));
case SUBMIT_SUCCEEDED:
return state
.update('initialData', () => state.get('modifiedData'))
.update('shouldToggleModalSubmit', v => !v);
default:
return state;
}

View File

@ -1,10 +1,11 @@
import { all, fork, put, call, takeLatest } from 'redux-saga/effects';
import { all, fork, put, call, takeLatest, select } from 'redux-saga/effects';
import { request } from 'strapi-helper-plugin';
import pluginId from '../../pluginId';
import { getDataSucceeded } from './actions';
import { GET_DATA } from './constants';
import { getDataSucceeded, submitSucceeded } from './actions';
import { GET_DATA, ON_SUBMIT } from './constants';
import { makeSelectModifiedData } from './selectors';
const getRequestUrl = path => `/${pluginId}/${path}`;
@ -18,13 +19,31 @@ export function* getData() {
yield put(getDataSucceeded(generalSettings, groups, models));
} catch (err) {
console.log(err);
strapi.notification.error('content-manager.error.model.fetch');
}
}
export function* submit() {
try {
const body = yield select(makeSelectModifiedData());
yield call(request, getRequestUrl('fixtures/general-settings'), {
method: 'PUT',
body,
});
yield put(submitSucceeded());
} catch (err) {
strapi.notification.error('notification.error');
}
}
function* defaultSaga() {
try {
yield all([fork(takeLatest, GET_DATA, getData)]);
yield all([
fork(takeLatest, GET_DATA, getData),
fork(takeLatest, ON_SUBMIT, submit),
]);
} catch (err) {
// Do nothing
}

View File

@ -24,5 +24,12 @@ const makeSelectSettingView = () =>
}
);
const makeSelectModifiedData = () =>
createSelector(
settingViewDomain(),
substate => {
return substate.get('modifiedData').toJS();
}
);
export default makeSelectSettingView;
export { settingViewDomain };
export { settingViewDomain, makeSelectModifiedData };

View File

@ -16,6 +16,14 @@
"policies": []
}
},
{
"method": "PUT",
"path": "/fixtures/general-settings",
"handler": "ContentManagerFixtures.updateGeneralSettings",
"config": {
"policies": []
}
},
{
"method": "GET",
"path": "/fixtures/groups",

View File

@ -47,4 +47,8 @@ module.exports = {
ctx.body = { models };
},
updateGeneralSettings: ctx => {
ctx.body = { ok: true };
},
};