@ -38,19 +38,19 @@ const mapStateToProps = state => {
console . log ( soapbox ) ;
console . log ( soapbox ) ;
console . log ( generateThemeCss ( soapbox . get ( 'brandColor' ) ) ) ;
console . log ( generateThemeCss ( soapbox . get ( 'brandColor' ) ) ) ;
console . log ( soapbox . get ( 'logo' ) ) ;
console . log ( soapbox . get ( 'logo' ) ) ;
console . log ( soapbox . get ( 'promoPanel' ) ) ;
console . log ( soapbox . get In ( [ 'promoPanel' , 'items' ] ) ) ;
console . log ( soapbox . get ( 'extensions' ) ) ;
console . log ( soapbox . get In ( [ 'extensions' , 'patron' ] ) ) ;
console . log ( soapbox . get ( 'defaultSettings' ) ) ;
console . log ( soapbox . get In ( [ 'defaultSettings' , 'autoPlayGif' ] ) ) ;
console . log ( soapbox . get ( 'copyright' ) ) ;
console . log ( soapbox . get ( 'copyright' ) ) ;
console . log ( soapbox . get ( 'navLinks' ) ) ;
console . log ( soapbox . get In( [ 'navlinks' , 'homeFooter' ] ) ) ;
return {
return {
themeCss : generateThemeCss ( soapbox . get ( 'brandColor' ) ) ,
themeCss : generateThemeCss ( soapbox . get ( 'brandColor' ) ) ,
logo : soapbox . get ( 'logo' ) ,
logo : soapbox . get ( 'logo' ) ,
promoPanel : soapbox . get ( 'promoPanel' ) ,
promoPanel : soapbox . get In ( [ 'promoPanel' , 'items' ] ) ,
patronEnabled : soapbox . get ( 'extensions' ) ,
patronEnabled : soapbox . get In ( [ 'extensions' , 'patron' ] ) ,
autoPlayGif : soapbox . get ( 'defaultSettings' ) ,
autoPlayGif : soapbox . get In ( [ 'defaultSettings' , 'autoPlayGif' ] ) ,
copyright : soapbox . get ( 'copyright' ) ,
copyright : soapbox . get ( 'copyright' ) ,
homeFooter : soapbox . get ( 'navLinks' ) ,
homeFooter : soapbox . get In( [ 'navlinks' , 'homeFooter' ] ) ,
} ;
} ;
} ;
} ;
@ -64,11 +64,11 @@ class ConfigSoapbox extends ImmutablePureComponent {
intl : PropTypes . object . isRequired ,
intl : PropTypes . object . isRequired ,
themeCss : PropTypes . string ,
themeCss : PropTypes . string ,
logo : PropTypes . string ,
logo : PropTypes . string ,
promoPanel : ImmutablePropTypes . map ,
promoPanel : ImmutablePropTypes . list ,
patronEnabled : PropTypes . object ,
patronEnabled : PropTypes . bool ,
autoPlayGif : PropTypes . object ,
autoPlayGif : PropTypes . bool ,
copyright : PropTypes . string ,
copyright : PropTypes . string ,
homeFooter : ImmutablePropTypes . map ,
homeFooter : ImmutablePropTypes . list ,
} ;
} ;
state = {
state = {
@ -76,6 +76,17 @@ class ConfigSoapbox extends ImmutablePureComponent {
// promoPanel: normalizeFields(Array.from({ length: MAX_FIELDS })),
// promoPanel: normalizeFields(Array.from({ length: MAX_FIELDS })),
}
}
constructor ( props ) {
super ( props ) ;
const initialState = props . withMutations ( map => {
map . merge ( map . get ( 'source' ) ) ;
map . delete ( 'source' ) ;
map . set ( 'fields' , normalizeFields ( map . get ( 'fields' ) ) ) ;
unescapeParams ( map , [ 'display_name' , 'note' ] ) ;
} ) ;
this . state = initialState . toObject ( ) ;
}
// makePreviewLogo = () => {
// makePreviewLogo = () => {
// const { logo } = this.props;
// const { logo } = this.props;
// return logo.merge(ImmutableMap({
// return logo.merge(ImmutableMap({
@ -95,6 +106,16 @@ class ConfigSoapbox extends ImmutablePureComponent {
return params ;
return params ;
}
}
getHomeFooterParams = ( ) => {
let params = ImmutableMap ( ) ;
this . state . homeFooter . forEach ( ( f , i ) =>
params = params
. set ( ` home_footer_attributes[ ${ i } ][name] ` , f . get ( 'name' ) )
. set ( ` home_footer_attributes[ ${ i } ][value] ` , f . get ( 'value' ) )
) ;
return params ;
}
getParams = ( ) => {
getParams = ( ) => {
const { state } = this ;
const { state } = this ;
return Object . assign ( {
return Object . assign ( {
@ -104,14 +125,16 @@ class ConfigSoapbox extends ImmutablePureComponent {
displayMode : state . displayMode ,
displayMode : state . displayMode ,
copyright : state . copyright ,
copyright : state . copyright ,
homeFooter : state . homeFooter ,
homeFooter : state . homeFooter ,
} , this . getPromoPanelParams ( ) . toJS ( ) ) ;
} ,
this . getHomeFooterParams ( ) . toJS ( ) ,
this . getPromoPanelParams ( ) . toJS ( ) ) ;
}
}
getFormdata = ( ) => {
getFormdata = ( ) => {
const data = this . getParams ( ) ;
const data = this . getParams ( ) ;
let formData = new FormData ( ) ;
let formData = new FormData ( ) ;
for ( let key in data ) {
for ( let key in data ) {
const shouldAppend = Boolean ( data [ key ] || key . startsWith ( 'promo_panel_attributes' ) ) ;
const shouldAppend = Boolean ( data [ key ] || key . startsWith ( 'promo_panel_attributes' ) || key . startsWith ( 'home_footer_attributes' ) ) ;
if ( shouldAppend ) formData . append ( key , data [ key ] || '' ) ;
if ( shouldAppend ) formData . append ( key , data [ key ] || '' ) ;
}
}
return formData ;
return formData ;
@ -144,6 +167,14 @@ class ConfigSoapbox extends ImmutablePureComponent {
} ;
} ;
}
}
handleHomeFooterChange = ( i , key ) => {
return ( e ) => {
this . setState ( {
homeFooter : this . state . homeFooter . setIn ( [ i , key ] , e . target . value ) ,
} ) ;
} ;
}
handleFileChange = e => {
handleFileChange = e => {
const { name } = e . target ;
const { name } = e . target ;
const [ file ] = e . target . files || [ ] ;
const [ file ] = e . target . files || [ ] ;
@ -233,6 +264,28 @@ class ConfigSoapbox extends ImmutablePureComponent {
) )
) )
}
}
< / d i v >
< / d i v >
< div className = 'input with_block_label' >
< label > < FormattedMessage id = 'soapbox_settings.fields.meta_fields_label' defaultMessage = 'Profile metadata' / > < / l a b e l >
< span className = 'hint' >
< FormattedMessage id = 'soapbox_settings.hints.meta_fields' defaultMessage = 'You can have up to {count, plural, one {# item} other {# items}} displayed as a table on your profile' values = { { count : MAX _FIELDS } } / >
< / s p a n >
{
this . state . homeFooter . map ( ( field , i ) => (
< div className = 'row' key = { i } >
< TextInput
placeholder = { intl . formatMessage ( messages . metaFieldLabel ) }
value = { field . get ( 'name' ) }
onChange = { this . handleHomeFooterChange ( i , 'name' ) }
/ >
< TextInput
placeholder = { intl . formatMessage ( messages . metaFieldContent ) }
value = { field . get ( 'value' ) }
onChange = { this . handleHomeFooterChange ( i , 'value' ) }
/ >
< / d i v >
) )
}
< / d i v >
< / d i v >
< / d i v >
< / F i e l d s G r o u p >
< / F i e l d s G r o u p >
< / f i e l d s e t >
< / f i e l d s e t >