Trying to update nested state on element change events

preload
crockwave 2020-08-10 19:29:38 -05:00
rodzic a001fa2dfe
commit e6d009d4f2
1 zmienionych plików z 21 dodań i 15 usunięć

Wyświetl plik

@ -142,13 +142,13 @@ class ConfigSoapbox extends ImmutablePureComponent {
obj.configs[0].value[0].tuple[1].extensions.patron = state.extensions.patron; obj.configs[0].value[0].tuple[1].extensions.patron = state.extensions.patron;
obj.configs[0].value[0].tuple[1].defaultSettings.autoPlayGif = state.defaultSettings.autoPlayGif; obj.configs[0].value[0].tuple[1].defaultSettings.autoPlayGif = state.defaultSettings.autoPlayGif;
obj.configs[0].value[0].tuple[1].copyright = state.copyright; obj.configs[0].value[0].tuple[1].copyright = state.copyright;
this.state.homeFooterItems.forEach((f) => this.state.navlinks.homeFooter.forEach((f) =>
obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') }) obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') })
); );
this.state.promoItems.forEach((f) => this.state.promoPanel.items.forEach((f) =>
obj.configs[0].value[0].tuple[1].promoPanel.items.push({ icon: f.get('icon'), text: f.get('text'), url: f.get('url') }) obj.configs[0].value[0].tuple[1].promoPanel.items.push({ icon: f.get('icon'), text: f.get('text'), url: f.get('url') })
); );
this.state.customCssItems.forEach((f) => this.state.customCss.forEach((f) =>
obj.configs[0].value[0].tuple[1].customCss.push(f) obj.configs[0].value[0].tuple[1].customCss.push(f)
); );
return obj; return obj;
@ -205,7 +205,9 @@ class ConfigSoapbox extends ImmutablePureComponent {
return (e) => { return (e) => {
// this.state.soapbox.promoItems.setIn([i, key], e.target.value); // this.state.soapbox.promoItems.setIn([i, key], e.target.value);
this.setState({ this.setState({
promoItems: this.state.promoItems.setIn([i, key], e.target.value), promoPanel: {
items: this.state.promoPanel.items.setIn([i, key], e.target.value),
},
}); });
}; };
} }
@ -214,7 +216,9 @@ class ConfigSoapbox extends ImmutablePureComponent {
return (e) => { return (e) => {
// this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value); // this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value);
this.setState({ this.setState({
homeFooterItems: this.state.homeFooterItems.setIn([i, key], e.target.value), navlinks: {
homeFooter: this.state.navlinks.homeFooter.setIn([i, key], e.target.value),
},
}); });
}; };
} }
@ -223,7 +227,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
return (e) => { return (e) => {
// this.state.soapbox.customCssItems.setIn([i], e.target.value); // this.state.soapbox.customCssItems.setIn([i], e.target.value);
this.setState({ this.setState({
customCssItems: this.state.customCssItems.setIn([i], e.target.value), customCss: this.state.customCss.setIn([i], e.target.value),
}); });
}; };
} }
@ -243,7 +247,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleAddPromoPanelItem = () => { handleAddPromoPanelItem = () => {
this.setState({ this.setState({
Items: this.state.promoPanel.Items.concat([ Items: this.state.promoPanel.items.concat([
ImmutableMap({ ImmutableMap({
icon: '', icon: '',
text: '', text: '',
@ -274,6 +278,8 @@ class ConfigSoapbox extends ImmutablePureComponent {
const { intl } = this.props; const { intl } = this.props;
const { logo, banner, brandColor, extensions, defaultSettings, copyright, const { logo, banner, brandColor, extensions, defaultSettings, copyright,
promoPanel, navlinks, customCss } = this.state; promoPanel, navlinks, customCss } = this.state;
const patron = (extensions.patron === 'true');
const autoPlayGif = (defaultSettings.autoPlayGif === 'true');
// console.log(navlinks.homeFooter); // console.log(navlinks.homeFooter);
// console.log(promoPanel.items); // console.log(promoPanel.items);
@ -324,14 +330,14 @@ class ConfigSoapbox extends ImmutablePureComponent {
label={<FormattedMessage id='soapbox_settings.fields.patron_enabled_label' defaultMessage='Patron module' />} label={<FormattedMessage id='soapbox_settings.fields.patron_enabled_label' defaultMessage='Patron module' />}
hint={<FormattedMessage id='soapbox_settings.hints.patron_enabled' defaultMessage='Enables display of Patron module. Requires installation of Patron module.' />} hint={<FormattedMessage id='soapbox_settings.hints.patron_enabled' defaultMessage='Enables display of Patron module. Requires installation of Patron module.' />}
name='patron' name='patron'
checked={extensions.patron ? extensions.patron : false} checked={patron ? patron : false}
onChange={this.handleExtensionsCheckboxChange} onChange={this.handleExtensionsCheckboxChange}
/> />
<Checkbox <Checkbox
label={<FormattedMessage id='soapbox_settings.fields.auto_play_gif_label' defaultMessage='Auto-play GIFs' />} label={<FormattedMessage id='soapbox_settings.fields.auto_play_gif_label' defaultMessage='Auto-play GIFs' />}
hint={<FormattedMessage id='soapbox_settings.hints.auto_play_gif' defaultMessage='Enable auto-playing of GIF files in timeline' />} hint={<FormattedMessage id='soapbox_settings.hints.auto_play_gif' defaultMessage='Enable auto-playing of GIF files in timeline' />}
name='autoPlayGif' name='autoPlayGif'
checked={defaultSettings.autoPlayGif ? defaultSettings.autoPlayGif : false} checked={autoPlayGif ? autoPlayGif : false}
onChange={this.handleDefaultSettingsCheckboxChange} onChange={this.handleDefaultSettingsCheckboxChange}
/> />
</FieldsGroup> </FieldsGroup>
@ -379,9 +385,9 @@ class ConfigSoapbox extends ImmutablePureComponent {
)) ))
} }
<div className='actions'> <div className='actions'>
<button name='button' type='button' className='btn button button-secondary' onClick={this.handleAddPromoPanelItem}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddPromoPanelItem}>
<FormattedMessage id='soapbox_settings.fields.promo_panel.add' defaultMessage='Add new Promo panel item' /> <FormattedMessage id='soapbox_settings.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
</button> </div>
</div> </div>
</div> </div>
<div className='input with_block_label'> <div className='input with_block_label'>
@ -408,9 +414,9 @@ class ConfigSoapbox extends ImmutablePureComponent {
)) ))
} }
<div className='actions'> <div className='actions'>
<button name='button' type='submit' className='btn button button-secondary' onClick={this.handleAddHomeFooterItem}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddHomeFooterItem}>
<FormattedMessage id='soapbox_settings.fields.home_footer.add' defaultMessage='Add new Home Footer Item' /> <FormattedMessage id='soapbox_settings.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
</button> </div>
</div> </div>
</div> </div>
</div> </div>
@ -432,9 +438,9 @@ class ConfigSoapbox extends ImmutablePureComponent {
)) ))
} }
<div className='actions'> <div className='actions'>
<button name='button' type='submit' className='btn button button-secondary' onClick={this.handleAddCssItem}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddCssItem}>
<FormattedMessage id='soapbox_settings.fields.custom_css.add' defaultMessage='Add new Custom CSS item' /> <FormattedMessage id='soapbox_settings.fields.custom_css.add' defaultMessage='Add new Custom CSS item' />
</button> </div>
</div> </div>
</div> </div>
</FieldsGroup> </FieldsGroup>