mirror_maker
/
soapbox
mirror of https://gitlab.com/soapbox-pub/soapbox
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

refactored to improve default soapbox object for store

Browse Source 
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
preload
crockwave 4 years ago
parent 0f70fde172
commit cea7723fc3
2 changed files with 140 additions and 125 deletions
Show Stats Download Patch File Download Diff File

247
app/soapbox/features/configuration/index.js
Unescape View File

@ -17,8 +17,8 @@ import {
import StillImage from 'soapbox/components/still_image'; import StillImage from 'soapbox/components/still_image';
import { import {
Map as ImmutableMap, Map as ImmutableMap,
List as ImmutableList, // List as ImmutableList,
getIn, // getIn,
} from 'immutable'; } from 'immutable';
import { postSoapbox } from 'soapbox/actions/soapbox'; import { postSoapbox } from 'soapbox/actions/soapbox';
@ -54,38 +54,38 @@ class ConfigSoapbox extends ImmutablePureComponent {
isLoading: false, isLoading: false,
} }
constructor(props) { // constructor(props) {
super(props); // super(props);
// const initialState = props.soapbox.withMutations(map => { // const initialState = props.soapbox.withMutations(map => {
// }); // });
this.state = ImmutableMap(props.soapbox);
// this.state = ImmutableMap(props.soapbox); // this.state = ImmutableMap(props.soapbox);
console.log(JSON.stringify(this.state, null, 2)); // this.state = ImmutableMap(props.soapbox);
if (!this.state.logo) { // console.log(JSON.stringify(this.state, null, 2));
this.state.concat({ logo: '' }); // if (!this.state.logo) {
} // this.state.concat({ logo: '' });
if (!this.state.banner) { // }
this.state.concat({ banner: '' }); // 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, ['defaultSettings', 'autoPlayGif'], 'notSet') === 'notSet') {
}; // this.state.concat({ defaultSettings: { autoPlayGif: false } });
if (getIn(this.state, ['extensions', 'patron'], 'notSet') === 'notSet') { // };
this.state.concat({ extensions: { patron: false } }); // if (getIn(this.state, ['extensions', 'patron'], 'notSet') === 'notSet') {
// this.state.extensions.patron = false; // this.state.concat({ extensions: { patron: false } });
}; // // this.state.extensions.patron = false;
if (getIn(this.state, ['promoPanel', 'items', 'icon'], 'notSet') === 'notSet') { // };
this.state = { // if (getIn(this.state, ['promoPanel', 'items', 'icon'], 'notSet') === 'notSet') {
promoPanel: { // this.state = {
items: [ // promoPanel: {
{ // items: [
icon: '', // {
text: '', // icon: '',
url: '', // text: '',
}, // url: '',
], // },
}, // ],
}; // },
// };
// this.state.promoPanel.items = ImmutableList([ // this.state.promoPanel.items = ImmutableList([
// ImmutableMap({ // ImmutableMap({
// icon: '', // icon: '',
@ -93,8 +93,8 @@ class ConfigSoapbox extends ImmutablePureComponent {
// url: '', // url: '',
// }), // }),
// ]); // ]);
}; // };
console.log(JSON.stringify(this.state, null, 2)); // console.log(JSON.stringify(this.state, null, 2));
// if (!this.state.promoPanel.items) { // if (!this.state.promoPanel.items) {
// this.state.promoPanel.items = ImmutableList([ // this.state.promoPanel.items = ImmutableList([
// ImmutableMap({ // ImmutableMap({
@ -112,21 +112,21 @@ class ConfigSoapbox extends ImmutablePureComponent {
// }), // }),
// ]); // ]);
// }; // };
if (!this.state.customCssItems) { // if (!this.state.customCssItems) {
this.state.customCssItems = ImmutableList([' ']); // this.state.customCssItems = ImmutableList([' ']);
}; // };
this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this); // this.handlecustomCSSChange = this.handleCustomCSSChange.bind(this);
this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this); // this.handleAddPromoPanelItem = this.handleAddPromoPanelItem.bind(this);
this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this); // this.handleAddHomeFooterItem = this.handleAddHomeFooterItem.bind(this);
this.handleAddCssItem = this.handleAddCssItem.bind(this); // this.handleAddCssItem = this.handleAddCssItem.bind(this);
this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this); // this.handleExtensionsCheckboxChange = this.handleExtensionsCheckboxChange.bind(this);
this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this); // this.handleDefaultSettingsCheckboxChange = this.handleDefaultSettingsCheckboxChange.bind(this);
this.handleBrandColorChange = this.handleBrandColorChange.bind(this); // this.handleBrandColorChange = this.handleBrandColorChange.bind(this);
this.getParams = this.getParams.bind(this); // this.getParams = this.getParams.bind(this);
} // }
getParams = () => { getParams = () => {
// const { state } = this; const { state } = this;
var obj = { var obj = {
configs: [{ configs: [{
group: ':pleroma', group: ':pleroma',
@ -134,43 +134,46 @@ class ConfigSoapbox extends ImmutablePureComponent {
value: [{ value: [{
tuple: [':soapbox_fe', tuple: [':soapbox_fe',
{ {
// logo: '', logo: '',
// banner: '', banner: '',
// brandColor: '', brandColor: '',
// customCss: [], customCss: [],
// promoPanel: { promoPanel: {
// items: [], items: [],
// }, },
// extensions: { extensions: {
// patron: false, patron: false,
// }, },
// defaultSettings: { defaultSettings: {
// autoPlayGif: false, autoPlayGif: false,
// }, },
// copyright: '', copyright: '',
// navlinks: { navlinks: {
// homeFooter: [], homeFooter: [],
// }, },
}, },
], ],
}], }],
}], }],
}; };
// obj.configs[0].value[0].tuple[1].logo = state.logo; 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; 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; 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.extensions.patron; 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.defaultSettings.autoPlayGif; 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; obj.configs[0].value[0].tuple[1].copyright = (state.copyright ? state.copyright : this.props.soapbox.copyright);
// this.state.navlinks.homeFooter.forEach((f) => var homeFooterItems = (state.homeFooterItems ? state.homeFooterItems : this.props.soapbox.navlinks.homeFooter);
// obj.configs[0].value[0].tuple[1].navlinks.homeFooter.push({ title: f.get('title'), url: f.get('url') }) homeFooterItems.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') }) var promoPanelItems = (state.promoPanelItems ? state.promoPanelItems : this.props.soapbox.promoPanel.items);
// ); promoPanelItems.forEach((f) =>
// this.state.customCss.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].customCss.push(f) );
// ); 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)); console.log(JSON.stringify(obj, null, 2));
return obj; return obj;
} }
@ -186,23 +189,25 @@ class ConfigSoapbox extends ImmutablePureComponent {
event.preventDefault(); event.preventDefault();
} }
handleExtensionsCheckboxChange = e => { handlePatronCheckboxChange = e => {
var extensions = { ...this.state.extensions }; // var extensions = { ...this.state.extensions };
if (e.target.name === 'patron') { // if (e.target.name === 'patron') {
extensions.patron = e.target.value; // extensions.patron = e.target.value;
} // }
this.setState({ extensions }); var isChecked = (e.target.value === 'true');
this.setState({ patron: isChecked });
// this.setState({ // this.setState({
// extensions: this.state.setIn(['extensions', e.target.name], e.target.value), // extensions: this.state.setIn(['extensions', e.target.name], e.target.value),
// }); // });
} }
handleDefaultSettingsCheckboxChange = e => { handleAutoPlayGifCheckboxChange = e => {
var defaultSettings = { ...this.state.defaultSettings }; // var defaultSettings = { ...this.state.defaultSettings };
if (e.target.name === 'autoPlayGif') { // if (e.target.name === 'autoPlayGif') {
defaultSettings.autoPlayGif = e.target.value; // defaultSettings.autoPlayGif = e.target.value;
} // }
this.setState({ defaultSettings }); var isChecked = (e.target.value === 'true');
this.setState({ autoPlayGif: isChecked });
// this.setState({ // this.setState({
// defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value), // defaultSettings: this.state.setIn(['defaultSettings', '[e.target.name]'], e.target.value),
// }); // });
@ -226,9 +231,7 @@ 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({
promoPanel: { promoPanelitems: this.state.promoPanelItems.setIn([i, key], e.target.value),
items: this.state.promoPanel.items.setIn([i, key], e.target.value),
},
}); });
}; };
} }
@ -237,9 +240,7 @@ 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({
navlinks: { homeFooterItems: this.state.homeFooterItems.setIn([i, key], e.target.value),
homeFooter: this.state.navlinks.homeFooter.setIn([i, key], e.target.value),
},
}); });
}; };
} }
@ -248,7 +249,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({
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 = () => { handleAddPromoPanelItem = () => {
this.setState({ this.setState({
Items: this.state.promoPanel.items.concat([ promoPanelItems: this.state.promoPanelItems.concat([
ImmutableMap({ ImmutableMap({
icon: '', icon: '',
text: '', text: '',
@ -281,7 +282,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleAddHomeFooterItem = () => { handleAddHomeFooterItem = () => {
this.setState({ this.setState({
homeFooter: this.state.navlinks.homeFooter.concat([ homeFooterItems: this.state.homeFooterItems.concat([
ImmutableMap({ ImmutableMap({
title: '', title: '',
url: '', url: '',
@ -292,24 +293,22 @@ class ConfigSoapbox extends ImmutablePureComponent {
handleAddCssItem = () => { handleAddCssItem = () => {
this.setState({ this.setState({
customCss: this.state.customCss.concat(['']), customCssItems: this.state.customCssItems.concat(['']),
}); });
} }
render() { render() {
const { intl } = this.props; const { intl, soapbox } = this.props;
// const { logo, banner, brandColor, extensions, defaultSettings, copyright, const { logo, banner, brandColor, extensions, defaultSettings, copyright,
// promoPanel, navlinks, customCss } = this.state; promoPanel, navlinks, customCss } = soapbox;
const patron = false; const patron = (this.state.patron ? this.state.patron : extensions.patron);
const autoPlayGif = false; const autoPlayGif = (this.state.autoPlayGif ? this.state.autoPlayGif : defaultSettings.autoPlayGif);
const logo = ''; const promoPanelItems = (this.state.promoPanelItems ? this.state.promoPanelItems : promoPanel.items);
const banner = ''; const homeFooterItems = (this.state.homeFooterItems ? this.state.homeFooterItems : navlinks.homeFooter);
const brandColor = '#3b5998'; const customCssItems = (this.state.customCssItems ? this.state.customCssItems : customCss);
const copyright = ''; console.log(promoPanelItems);
// const patron = (extensions.patron === 'true'); console.log(homeFooterItems);
// const autoPlayGif = (defaultSettings.autoPlayGif === 'true'); console.log(customCssItems);
// console.log(navlinks.homeFooter);
// console.log(promoPanel.items);
return ( return (
<Column icon='shield' heading={intl.formatMessage(messages.heading)} backBtnSlim> <Column icon='shield' heading={intl.formatMessage(messages.heading)} backBtnSlim>
@ -318,7 +317,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
<FieldsGroup> <FieldsGroup>
<div className='fields-row'> <div className='fields-row'>
<div className='fields-row__column fields-row__column-6'> <div className='fields-row__column fields-row__column-6'>
{logo ? (<StillImage src={logo || ''} />) : (<StillImage src={this.props.soapbox.logo || ''} />)} {this.state.logo ? (<StillImage src={this.state.logo} />) : (<StillImage src={logo || ''} />)}
</div> </div>
<div className='fields-row__column fields-group fields-row__column-6'> <div className='fields-row__column fields-group fields-row__column-6'>
<FileChooserLogo <FileChooserLogo
@ -331,7 +330,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
</div> </div>
<div className='fields-row'> <div className='fields-row'>
<div className='fields-row__column fields-row__column-6'> <div className='fields-row__column fields-row__column-6'>
{banner ? (<StillImage src={banner || ''} />) : (<StillImage src={this.props.soapbox.banner || ''} />)} {this.state.banner ? (<StillImage src={this.state.banner} />) : (<StillImage src={banner || ''} />)}
</div> </div>
<div className='fields-row__column fields-group fields-row__column-6'> <div className='fields-row__column fields-group fields-row__column-6'>
<FileChooser <FileChooser
@ -348,7 +347,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
<ColorWithPicker <ColorWithPicker
buttonId='brand_color' buttonId='brand_color'
label={<FormattedMessage id='soapbox_settings.fields.brand_color_label' defaultMessage='Brand color' />} label={<FormattedMessage id='soapbox_settings.fields.brand_color_label' defaultMessage='Brand color' />}
value={brandColor || '#0482d8'} value={this.state.brandColor ? this.state.brandColor : brandColor || '#0482d8'}
onChange={this.handleBrandColorChange} onChange={this.handleBrandColorChange}
/> />
</div> </div>
@ -359,14 +358,14 @@ class ConfigSoapbox extends ImmutablePureComponent {
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={patron ? patron : false} checked={patron ? patron : false}
onChange={this.handleExtensionsCheckboxChange} onChange={this.handlePatronCheckboxChange}
/> />
<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={autoPlayGif ? autoPlayGif : false} checked={autoPlayGif ? autoPlayGif : false}
onChange={this.handleDefaultSettingsCheckboxChange} onChange={this.handleAutoPlayGifCheckboxChange}
/> />
</FieldsGroup> </FieldsGroup>
<FieldsGroup> <FieldsGroup>
@ -374,11 +373,11 @@ class ConfigSoapbox extends ImmutablePureComponent {
name='copyright' name='copyright'
label={intl.formatMessage(messages.copyrightFooterLabel)} label={intl.formatMessage(messages.copyrightFooterLabel)}
placeholder={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} onChange={this.handleTextChange}
/> />
</FieldsGroup> </FieldsGroup>
{/* <FieldsGroup> <FieldsGroup>
<div className='fields-row__column fields-group'> <div className='fields-row__column fields-group'>
<div className='input with_block_label'> <div className='input with_block_label'>
<label><FormattedMessage id='soapbox_settings.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label> <label><FormattedMessage id='soapbox_settings.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
@ -389,7 +388,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
<FormattedMessage id='soapbox_settings.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} /> <FormattedMessage id='soapbox_settings.hints.promo_panel_icons' defaultMessage='{ link }' values={{ link: <a target='_blank' href='https://forkaweso.me/Fork-Awesome/icons/'>Soapbox Icons List</a> }} />
</span> </span>
{ {
promoPanel.items.map((field, i) => ( promoPanelItems.map((field, i) => (
<div className='row' key={i}> <div className='row' key={i}>
<TextInput <TextInput
label={intl.formatMessage(messages.promoItemIcon)} label={intl.formatMessage(messages.promoItemIcon)}
@ -424,7 +423,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
<FormattedMessage id='soapbox_settings.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' /> <FormattedMessage id='soapbox_settings.hints.home_footer_fields' defaultMessage='You can have custom defined links displayed on the footer of your static pages' />
</span> </span>
{ {
navlinks.homeFooter.map((field, i) => ( homeFooterItems.map((field, i) => (
<div className='row' key={i}> <div className='row' key={i}>
<TextInput <TextInput
label={intl.formatMessage(messages.homeFooterItemLabel)} label={intl.formatMessage(messages.homeFooterItemLabel)}
@ -454,7 +453,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
<FormattedMessage id='soapbox_settings.hints.custom_css_fields' defaultMessage='You can have custom CSS definitions' /> <FormattedMessage id='soapbox_settings.hints.custom_css_fields' defaultMessage='You can have custom CSS definitions' />
</span> </span>
{ {
customCss.map((field, i) => ( customCssItems.map((field, i) => (
<div className='row' key={i}> <div className='row' key={i}>
<TextInput <TextInput
label={intl.formatMessage(messages.customCssLabel)} label={intl.formatMessage(messages.customCssLabel)}
@ -471,7 +470,7 @@ class ConfigSoapbox extends ImmutablePureComponent {
</div> </div>
</div> </div>
</div> </div>
</FieldsGroup> */} </FieldsGroup>
</fieldset> </fieldset>
<div className='actions'> <div className='actions'>
<button name='button' type='submit' className='btn button button-primary'> <button name='button' type='submit' className='btn button button-primary'>

18
app/soapbox/reducers/soapbox.js
Unescape View File

@ -3,12 +3,28 @@ import {
SOAPBOX_CONFIG_REQUEST_FAIL, SOAPBOX_CONFIG_REQUEST_FAIL,
SOAPBOX_POST_SUCCESS, SOAPBOX_POST_SUCCESS,
} from '../actions/soapbox'; } from '../actions/soapbox';
import { Map as ImmutableMap, fromJS } from 'immutable'; import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
const initialState = ImmutableMap(); const initialState = ImmutableMap();
const defaultState = ImmutableMap({ const defaultState = ImmutableMap({
logo: '',
banner: '',
brandColor: '#0482d8', // Azure brandColor: '#0482d8', // Azure
customCss: ImmutableList([]),
promoPanel: ImmutableMap({
items: ImmutableList([]),
}),
extensions: ImmutableMap({
patron: false,
}),
defaultSettings: ImmutableMap({
autoPlayGif: false,
}),
copyright: '',
navlinks: ImmutableMap({
homeFooter: ImmutableList([]),
}),
}); });
export default function soapbox(state = initialState, action) { export default function soapbox(state = initialState, action) {

Write Preview
Loading…
Cancel
Save