From cea7723fc3a7ea4988851e692b03bee1f1c3c96c Mon Sep 17 00:00:00 2001 From: crockwave Date: Wed, 12 Aug 2020 17:24:14 -0500 Subject: [PATCH] refactored to improve default soapbox object for store refactored to render with local state if avail or with props refactored to build soapbox object for api and store from local state if avail or with props --- app/soapbox/features/configuration/index.js | 247 ++++++++++---------- app/soapbox/reducers/soapbox.js | 18 +- 2 files changed, 140 insertions(+), 125 deletions(-) diff --git a/app/soapbox/features/configuration/index.js b/app/soapbox/features/configuration/index.js index 4cdcdeded..d98947d64 100644 --- a/app/soapbox/features/configuration/index.js +++ b/app/soapbox/features/configuration/index.js @@ -17,8 +17,8 @@ import { import StillImage from 'soapbox/components/still_image'; import { Map as ImmutableMap, - List as ImmutableList, - getIn, + // List as ImmutableList, + // getIn, } from 'immutable'; import { postSoapbox } from 'soapbox/actions/soapbox'; @@ -54,38 +54,38 @@ class ConfigSoapbox extends ImmutablePureComponent { isLoading: false, } - constructor(props) { - super(props); + // constructor(props) { + // super(props); // const initialState = props.soapbox.withMutations(map => { // }); - this.state = ImmutableMap(props.soapbox); // this.state = ImmutableMap(props.soapbox); - console.log(JSON.stringify(this.state, null, 2)); - if (!this.state.logo) { - this.state.concat({ logo: '' }); - } - if (!this.state.banner) { - this.state.concat({ banner: '' }); - } - if (getIn(this.state, ['defaultSettings', 'autoPlayGif'], 'notSet') === 'notSet') { - this.state.concat({ defaultSettings: { autoPlayGif: false } }); - }; - if (getIn(this.state, ['extensions', 'patron'], 'notSet') === 'notSet') { - this.state.concat({ extensions: { patron: false } }); - // this.state.extensions.patron = false; - }; - if (getIn(this.state, ['promoPanel', 'items', 'icon'], 'notSet') === 'notSet') { - this.state = { - promoPanel: { - items: [ - { - icon: '', - text: '', - url: '', - }, - ], - }, - }; + // this.state = ImmutableMap(props.soapbox); + // console.log(JSON.stringify(this.state, null, 2)); + // if (!this.state.logo) { + // this.state.concat({ logo: '' }); + // } + // if (!this.state.banner) { + // this.state.concat({ banner: '' }); + // } + // if (getIn(this.state, ['defaultSettings', 'autoPlayGif'], 'notSet') === 'notSet') { + // this.state.concat({ defaultSettings: { autoPlayGif: false } }); + // }; + // if (getIn(this.state, ['extensions', 'patron'], 'notSet') === 'notSet') { + // this.state.concat({ extensions: { patron: false } }); + // // this.state.extensions.patron = false; + // }; + // if (getIn(this.state, ['promoPanel', 'items', 'icon'], 'notSet') === 'notSet') { + // this.state = { + // promoPanel: { + // items: [ + // { + // icon: '', + // text: '', + // url: '', + // }, + // ], + // }, + // }; // this.state.promoPanel.items = ImmutableList([ // ImmutableMap({ // icon: '', @@ -93,8 +93,8 @@ class ConfigSoapbox extends ImmutablePureComponent { // url: '', // }), // ]); - }; - console.log(JSON.stringify(this.state, null, 2)); + // }; + // console.log(JSON.stringify(this.state, null, 2)); // if (!this.state.promoPanel.items) { // this.state.promoPanel.items = ImmutableList([ // ImmutableMap({ @@ -112,21 +112,21 @@ class ConfigSoapbox extends ImmutablePureComponent { // }), // ]); // }; - if (!this.state.customCssItems) { - this.state.customCssItems = ImmutableList([' ']); - }; - this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this); - this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this); - this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this); - this.handleAddCssItem = this.handleAddCssItem.bind(this); - this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this); - this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this); - this.handleBrandColorChange = this.handleBrandColorChange.bind(this); - this.getParams = this.getParams.bind(this); - } + // if (!this.state.customCssItems) { + // this.state.customCssItems = ImmutableList([' ']); + // }; + // this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this); + // this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this); + // this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this); + // this.handleAddCssItem = this.handleAddCssItem.bind(this); + // this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this); + // this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this); + // this.handleBrandColorChange = this.handleBrandColorChange.bind(this); + // this.getParams = this.getParams.bind(this); + // } getParams = () => { - // const { state } = this; + const { state } = this; var obj = { configs: [{ group: ':pleroma', @@ -134,43 +134,46 @@ class ConfigSoapbox extends ImmutablePureComponent { value: [{ tuple: [':soapbox_fe', { - // logo: '', - // banner: '', - // brandColor: '', - // customCss: [], - // promoPanel: { - // items: [], - // }, - // extensions: { - // patron: false, - // }, - // defaultSettings: { - // autoPlayGif: false, - // }, - // copyright: '', - // navlinks: { - // homeFooter: [], - // }, + logo: '', + banner: '', + brandColor: '', + customCss: [], + promoPanel: { + items: [], + }, + extensions: { + patron: false, + }, + defaultSettings: { + autoPlayGif: false, + }, + copyright: '', + navlinks: { + homeFooter: [], + }, }, ], }], }], }; - // obj.configs[0].value[0].tuple[1].logo = state.logo; - // obj.configs[0].value[0].tuple[1].banner = state.banner; - // obj.configs[0].value[0].tuple[1].brandColor = state.brandColor; - // 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].copyright = state.copyright; - // this.state.navlinks.homeFooter.forEach((f) => - // obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') }) - // ); - // 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') }) - // ); - // this.state.customCss.forEach((f) => - // obj.configs[0].value[0].tuple[1].customCss.push(f) - // ); + obj.configs[0].value[0].tuple[1].logo = (state.logo ? state.logo : this.props.soapbox.logo); + obj.configs[0].value[0].tuple[1].banner = (state.banner ? state.banner : this.props.soapbox.banner); + obj.configs[0].value[0].tuple[1].brandColor = (state.brandColor ? state.brandColor : this.props.soapbox.brandcolor); + obj.configs[0].value[0].tuple[1].extensions.patron = (state.patron ? state.patron : this.props.soapbox.extensions.patron); + obj.configs[0].value[0].tuple[1].defaultSettings.autoPlayGif = (state.autoPlayGif ? state.autoPlayGif : this.props.soapbox.defaultSettings.autoPlayGif); + obj.configs[0].value[0].tuple[1].copyright = (state.copyright ? state.copyright : this.props.soapbox.copyright); + var homeFooterItems = (state.homeFooterItems ? state.homeFooterItems : this.props.soapbox.navlinks.homeFooter); + homeFooterItems.forEach((f) => + obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') }) + ); + var promoPanelItems = (state.promoPanelItems ? state.promoPanelItems : this.props.soapbox.promoPanel.items); + promoPanelItems.forEach((f) => + obj.configs[0].value[0].tuple[1].promoPanel.items.push({ icon: f.get('icon'), text: f.get('text'), url: f.get('url') }) + ); + var customCssItems = (state.customCssItems ? state.customCssItems : this.props.soapbox.customCss); + customCssItems.forEach((f) => + obj.configs[0].value[0].tuple[1].customCss.push(f) + ); console.log(JSON.stringify(obj, null, 2)); return obj; } @@ -186,23 +189,25 @@ class ConfigSoapbox extends ImmutablePureComponent { event.preventDefault(); } - handleExtensionsCheckboxChange = e => { - var extensions = { ...this.state.extensions }; - if (e.target.name === 'patron') { - extensions.patron = e.target.value; - } - this.setState({ extensions }); + handlePatronCheckboxChange = e => { + // var extensions = { ...this.state.extensions }; + // if (e.target.name === 'patron') { + // extensions.patron = e.target.value; + // } + var isChecked = (e.target.value === 'true'); + this.setState({ patron: isChecked }); // this.setState({ // extensions: this.state.setIn(['extensions', e.target.name], e.target.value), // }); } - handleDefaultSettingsCheckboxChange = e => { - var defaultSettings = { ...this.state.defaultSettings }; - if (e.target.name === 'autoPlayGif') { - defaultSettings.autoPlayGif = e.target.value; - } - this.setState({ defaultSettings }); + handleAutoPlayGifCheckboxChange = e => { + // var defaultSettings = { ...this.state.defaultSettings }; + // if (e.target.name === 'autoPlayGif') { + // defaultSettings.autoPlayGif = e.target.value; + // } + var isChecked = (e.target.value === 'true'); + this.setState({ autoPlayGif: isChecked }); // this.setState({ // defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value), // }); @@ -226,9 +231,7 @@ class ConfigSoapbox extends ImmutablePureComponent { return (e) => { // this.state.soapbox.promoItems.setIn([i, key], e.target.value); this.setState({ - promoPanel: { - items: this.state.promoPanel.items.setIn([i, key], e.target.value), - }, + promoPanelitems: this.state.promoPanelItems.setIn([i, key], e.target.value), }); }; } @@ -237,9 +240,7 @@ class ConfigSoapbox extends ImmutablePureComponent { return (e) => { // this.state.soapbox.homeFooterItems.setIn([i, key], e.target.value); this.setState({ - navlinks: { - homeFooter: this.state.navlinks.homeFooter.setIn([i, key], e.target.value), - }, + homeFooterItems: this.state.homeFooterItems.setIn([i, key], e.target.value), }); }; } @@ -248,7 +249,7 @@ class ConfigSoapbox extends ImmutablePureComponent { return (e) => { // this.state.soapbox.customCssItems.setIn([i], e.target.value); this.setState({ - customCss: this.state.customCss.setIn([i], e.target.value), + customCssItems: this.state.customCssItems.setIn([i], e.target.value), }); }; } @@ -269,7 +270,7 @@ class ConfigSoapbox extends ImmutablePureComponent { handleAddPromoPanelItem = () => { this.setState({ - Items: this.state.promoPanel.items.concat([ + promoPanelItems: this.state.promoPanelItems.concat([ ImmutableMap({ icon: '', text: '', @@ -281,7 +282,7 @@ class ConfigSoapbox extends ImmutablePureComponent { handleAddHomeFooterItem = () => { this.setState({ - homeFooter: this.state.navlinks.homeFooter.concat([ + homeFooterItems: this.state.homeFooterItems.concat([ ImmutableMap({ title: '', url: '', @@ -292,24 +293,22 @@ class ConfigSoapbox extends ImmutablePureComponent { handleAddCssItem = () => { this.setState({ - customCss: this.state.customCss.concat(['']), + customCssItems: this.state.customCssItems.concat(['']), }); } render() { - const { intl } = this.props; - // const { logo, banner, brandColor, extensions, defaultSettings, copyright, - // promoPanel, navlinks, customCss } = this.state; - const patron = false; - const autoPlayGif = false; - const logo = ''; - const banner = ''; - const brandColor = '#3b5998'; - const copyright = ''; - // const patron = (extensions.patron === 'true'); - // const autoPlayGif = (defaultSettings.autoPlayGif === 'true'); - // console.log(navlinks.homeFooter); - // console.log(promoPanel.items); + const { intl, soapbox } = this.props; + const { logo, banner, brandColor, extensions, defaultSettings, copyright, + promoPanel, navlinks, customCss } = soapbox; + const patron = (this.state.patron ? this.state.patron : extensions.patron); + const autoPlayGif = (this.state.autoPlayGif ? this.state.autoPlayGif : defaultSettings.autoPlayGif); + const promoPanelItems = (this.state.promoPanelItems ? this.state.promoPanelItems : promoPanel.items); + const homeFooterItems = (this.state.homeFooterItems ? this.state.homeFooterItems : navlinks.homeFooter); + const customCssItems = (this.state.customCssItems ? this.state.customCssItems : customCss); + console.log(promoPanelItems); + console.log(homeFooterItems); + console.log(customCssItems); return ( @@ -318,7 +317,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
- {logo ? () : ()} + {this.state.logo ? () : ()}
- {banner ? () : ()} + {this.state.banner ? () : ()}
} - value={brandColor || '#0482d8'} + value={this.state.brandColor ? this.state.brandColor : brandColor || '#0482d8'} onChange={this.handleBrandColorChange} />
@@ -359,14 +358,14 @@ class ConfigSoapbox extends ImmutablePureComponent { hint={} name='patron' checked={patron ? patron : false} - onChange={this.handleExtensionsCheckboxChange} + onChange={this.handlePatronCheckboxChange} /> } hint={} name='autoPlayGif' checked={autoPlayGif ? autoPlayGif : false} - onChange={this.handleDefaultSettingsCheckboxChange} + onChange={this.handleAutoPlayGifCheckboxChange} /> @@ -374,11 +373,11 @@ class ConfigSoapbox extends ImmutablePureComponent { name='copyright' label={intl.formatMessage(messages.copyrightFooterLabel)} placeholder={intl.formatMessage(messages.copyrightFooterLabel)} - value={copyright ? copyright : this.props.soapbox.copyright || ''} + value={this.state.copyright ? this.state.copyright : copyright || ''} onChange={this.handleTextChange} /> - {/* +
@@ -389,7 +388,7 @@ class ConfigSoapbox extends ImmutablePureComponent { Soapbox Icons List }} /> { - promoPanel.items.map((field, i) => ( + promoPanelItems.map((field, i) => (
{ - navlinks.homeFooter.map((field, i) => ( + homeFooterItems.map((field, i) => (
{ - customCss.map((field, i) => ( + customCssItems.map((field, i) => (
- */} +