/
SaveAction.js
92 lines (78 loc) · 2.48 KB
/
SaveAction.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
/* global window */
import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import AbstractAction from 'components/ElementActions/AbstractAction';
import backend from 'lib/Backend';
import i18n from 'i18n';
import { loadElementSchemaValue } from 'state/editor/loadElementSchemaValue';
import { getSerializedFormData } from 'state/editor/getSerializedFormData';
/**
* Using a REST backend, serialize the current form data and post it to the backend endpoint to save
* the inline edit form's data for the current block.
*/
const SaveAction = (MenuComponent) => (props) => {
const handleClick = (event) => {
event.stopPropagation();
const { id, title, securityId } = props;
const { jQuery: $ } = window;
const formData = getSerializedFormData(`Form_ElementForm_${id}`);
const endpointSpec = {
url: loadElementSchemaValue('saveUrl', id),
method: loadElementSchemaValue('saveMethod'),
payloadFormat: loadElementSchemaValue('payloadFormat'),
defaultData: {
SecurityID: securityId
},
};
const endpoint = backend.createEndpointFetcher(endpointSpec);
endpoint(formData)
.then(() => {
// Update the Apollo query cache with the new form data
const { apolloClient } = window.ss;
// @todo optimistically update the data for the current element instead of
// rerunning the whole query
apolloClient.queryManager.reFetchObservableQueries();
$.noticeAdd({
text: i18n.inject(
i18n._t(
'SaveAction.SUCCESS_NOTIFICATION',
'Saved \'{title}\' successfully'),
{ title }
),
stay: false,
type: 'success'
});
})
.catch(() => {
$.noticeAdd({
text: i18n.inject(
i18n._t(
'SaveAction.ERROR_NOTIFICATION',
'Error saving \'{title}\''),
{ title }
),
stay: false,
type: 'error'
});
});
};
const newProps = {
title: i18n._t('SaveAction.SAVE', 'Save'),
className: 'element-editor__actions-save',
onClick: handleClick,
};
return (
<MenuComponent {...props}>
{props.children}
<AbstractAction {...newProps} />
</MenuComponent>
);
};
function mapStateToProps(state) {
return {
securityId: state.config.SecurityID,
};
}
export { SaveAction as Component };
export default compose(connect(mapStateToProps), SaveAction);