Add loading when selecting form template

[MAILPOET-2988]
This commit is contained in:
Rostislav Wolny
2020-09-29 15:56:18 +02:00
committed by Veljko V
parent e1599ee7b2
commit acf372b148
5 changed files with 20 additions and 0 deletions

View File

@ -3,6 +3,7 @@ import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import Categories from 'common/categories/categories'; import Categories from 'common/categories/categories';
import Background from 'common/background/background'; import Background from 'common/background/background';
import Loading from 'common/loading';
import Heading from 'common/typography/heading/heading'; import Heading from 'common/typography/heading/heading';
import { TemplateData } from './store/types'; import { TemplateData } from './store/types';
import TemplateBox from './components/template_box'; import TemplateBox from './components/template_box';
@ -38,6 +39,11 @@ export default () => {
[] []
); );
const loading: boolean = useSelect(
(select) => select('mailpoet-form-editor-templates').getLoading(),
[]
);
// const selectTemplateFailed: boolean = useSelect( // const selectTemplateFailed: boolean = useSelect(
// (select) => select('mailpoet-form-editor-templates').getSelectTemplateFailed(), // (select) => select('mailpoet-form-editor-templates').getSelectTemplateFailed(),
// [] // []
@ -71,6 +77,7 @@ export default () => {
))} ))}
</div> </div>
</div> </div>
{loading && <Loading />}
</> </>
); );
}; };

View File

@ -2,6 +2,7 @@ import { select } from '@wordpress/data';
// eslint-disable-next-line import/prefer-default-export // eslint-disable-next-line import/prefer-default-export
export function* selectTemplate(templateId) { export function* selectTemplate(templateId) {
yield { type: 'SELECT_TEMPLATE_START' };
const { res, success, error } = yield { const { res, success, error } = yield {
type: 'CALL_API', type: 'CALL_API',
endpoint: 'forms', endpoint: 'forms',

View File

@ -1,11 +1,19 @@
export const selectTemplateFailed = (state) => ({ export const selectTemplateFailed = (state) => ({
...state, ...state,
selectTemplateFailed: true, selectTemplateFailed: true,
loading: false,
});
export const selectTemplateStarted = (state) => ({
...state,
selectTemplateFailed: false,
loading: true,
}); });
export default (defaultState: object) => (state = defaultState, action) => { export default (defaultState: object) => (state = defaultState, action) => {
switch (action.type) { switch (action.type) {
case 'SELECT_TEMPLATE_ERROR': return selectTemplateFailed(state); case 'SELECT_TEMPLATE_ERROR': return selectTemplateFailed(state);
case 'SELECT_TEMPLATE_START': return selectTemplateStarted(state);
default: default:
return state; return state;
} }

View File

@ -10,4 +10,7 @@ export default {
getSelectTemplateFailed(state): boolean { getSelectTemplateFailed(state): boolean {
return state.selectTemplateFailed; return state.selectTemplateFailed;
}, },
getLoading(state): boolean {
return state.loading;
},
}; };

View File

@ -13,6 +13,7 @@ export default () => {
templates: (window as any).mailpoet_templates, templates: (window as any).mailpoet_templates,
formEditorUrl: (window as any).mailpoet_form_edit_url, formEditorUrl: (window as any).mailpoet_form_edit_url,
selectTemplateFailed: false, selectTemplateFailed: false,
loading: false,
}; };
const config = { const config = {