moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SoapboxConfig: Improve raw JSON editor

This commit is contained in:
Alex Gleason 2020-08-23 23:45:17 -05:00
parent e173af54f1
commit 011b80f717
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/soapbox/features/soapbox_config/index.js
View File

@ -31,7 +31,7 @@ const messages = defineMessages({
homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' }, homeFooterItemURL: { id: 'soapbox_config.home_footer.meta_fields.url_placeholder', defaultMessage: 'URL' },
customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' }, customCssLabel: { id: 'soapbox_config.custom_css.meta_fields.url_placeholder', defaultMessage: 'URL' },
rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' }, rawJSONLabel: { id: 'soapbox_config.raw_json_label', defaultMessage: 'Raw JSON data' },
rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly. You need to paste it in for now.' }, rawJSONHint: { id: 'soapbox_config.raw_json_hint', defaultMessage: 'Advanced: Edit the settings data directly.' },
}); });
const templates = { const templates = {
@ -56,16 +56,18 @@ class SoapboxConfig extends ImmutablePureComponent {
state = { state = {
isLoading: false, isLoading: false,
soapbox: this.props.soapbox, soapbox: this.props.soapbox,
rawJSON: JSON.stringify(this.props.soapbox, null, 2),
jsonValid: true,
} }
setConfig = (path, value) => { setConfig = (path, value) => {
const { soapbox } = this.state; const { soapbox } = this.state;
const config = soapbox.setIn(path, value); const config = soapbox.setIn(path, value);
this.setState({ soapbox: config }); this.setState({ soapbox: config, jsonValid: true });
}; };
putConfig = config => { putConfig = config => {
this.setState({ soapbox: config }); this.setState({ soapbox: config, jsonValid: true });
}; };
getParams = () => { getParams = () => {
@ -146,12 +148,7 @@ class SoapboxConfig extends ImmutablePureComponent {
}; };
handleEditJSON = e => { handleEditJSON = e => {
try { this.setState({ rawJSON: e.target.value });
const data = fromJS(JSON.parse(e.target.value));
this.putConfig(data);
} catch {
// do nothing
}
} }
getSoapboxConfig = () => { getSoapboxConfig = () => {
@ -162,6 +159,19 @@ class SoapboxConfig extends ImmutablePureComponent {
if (prevProps.soapbox !== this.props.soapbox) { if (prevProps.soapbox !== this.props.soapbox) {
this.putConfig(this.props.soapbox); this.putConfig(this.props.soapbox);
} }
if (prevState.soapbox !== this.state.soapbox) {
this.setState({ rawJSON: JSON.stringify(this.state.soapbox, null, 2) });
}
if (prevState.rawJSON !== this.state.rawJSON) {
try {
const data = fromJS(JSON.parse(this.state.rawJSON));
this.putConfig(data);
} catch {
this.setState({ jsonValid: false });
}
}
} }
render() { render() {
@ -331,11 +341,11 @@ class SoapboxConfig extends ImmutablePureComponent {
</div> </div>
</FieldsGroup> </FieldsGroup>
<FieldsGroup> <FieldsGroup>
<div className='code-editor'> <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
<SimpleTextarea <SimpleTextarea
label={intl.formatMessage(messages.rawJSONLabel)} label={intl.formatMessage(messages.rawJSONLabel)}
hint={intl.formatMessage(messages.rawJSONHint)} hint={intl.formatMessage(messages.rawJSONHint)}
value={JSON.stringify(this.state.soapbox, null, 2)} value={this.state.rawJSON}
onChange={this.handleEditJSON} onChange={this.handleEditJSON}
rows={12} rows={12}
/> />

5
app/styles/forms.scss
View File

@ -994,3 +994,8 @@ code {
font-family: monospace; font-family: monospace;
white-space: pre; white-space: pre;
} }
.code-editor--invalid textarea {
border-color: $error-red !important;
color: $error-red;
}