edited features/configuration

app/soapbox/features/configuration/index.js

@@ -38,19 +38,19 @@ const mapStateToProps = state => {
   console.log(soapbox);
   console.log(generateThemeCss(soapbox.get('brandColor')));
   console.log(soapbox.get('logo'));
-  console.log(soapbox.get('promoPanel'));
-  console.log(soapbox.get('extensions'));
-  console.log(soapbox.get('defaultSettings'));
+  console.log(soapbox.getIn(['promoPanel', 'items']));
+  console.log(soapbox.getIn(['extensions', 'patron']));
+  console.log(soapbox.getIn(['defaultSettings', 'autoPlayGif']));
   console.log(soapbox.get('copyright'));
-  console.log(soapbox.get('navLinks'));
+  console.log(soapbox.getIn(['navlinks', 'homeFooter']));
   return {
     themeCss: generateThemeCss(soapbox.get('brandColor')),
     logo: soapbox.get('logo'),
-    promoPanel: soapbox.get('promoPanel'),
-    patronEnabled: soapbox.get('extensions'),
-    autoPlayGif: soapbox.get('defaultSettings'),
+    promoPanel: soapbox.getIn(['promoPanel', 'items']),
+    patronEnabled: soapbox.getIn(['extensions', 'patron']),
+    autoPlayGif: soapbox.getIn(['defaultSettings', 'autoPlayGif']),
     copyright: soapbox.get('copyright'),
-    homeFooter: soapbox.get('navLinks'),
+    homeFooter: soapbox.getIn(['navlinks', 'homeFooter']),
   };
 };
 
@@ -64,11 +64,11 @@ class ConfigSoapbox extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
     themeCss: PropTypes.string,
     logo: PropTypes.string,
-    promoPanel: ImmutablePropTypes.map,
-    patronEnabled: PropTypes.object,
-    autoPlayGif: PropTypes.object,
+    promoPanel: ImmutablePropTypes.list,
+    patronEnabled: PropTypes.bool,
+    autoPlayGif: PropTypes.bool,
     copyright: PropTypes.string,
-    homeFooter: ImmutablePropTypes.map,
+    homeFooter: ImmutablePropTypes.list,
   };
 
   state = {
@@ -76,6 +76,17 @@ class ConfigSoapbox extends ImmutablePureComponent {
     // 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 = () => {
   //   const { logo } = this.props;
   //   return logo.merge(ImmutableMap({
@@ -95,6 +106,16 @@ class ConfigSoapbox extends ImmutablePureComponent {
     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 = () => {
     const { state } = this;
     return Object.assign({
@@ -104,14 +125,16 @@ class ConfigSoapbox extends ImmutablePureComponent {
       displayMode: state.displayMode,
       copyright: state.copyright,
       homeFooter: state.homeFooter,
-    }, this.getPromoPanelParams().toJS());
+    },
+    this.getHomeFooterParams().toJS(),
+    this.getPromoPanelParams().toJS());
   }
 
   getFormdata = () => {
     const data = this.getParams();
     let formData = new FormData();
     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] || '');
     }
     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 => {
     const { name } = e.target;
     const [file] = e.target.files || [];
@@ -233,6 +264,28 @@ class ConfigSoapbox extends ImmutablePureComponent {
                     ))
                   }
                 </div>
+                <div className='input with_block_label'>
+                  <label><FormattedMessage id='soapbox_settings.fields.meta_fields_label' defaultMessage='Profile metadata' /></label>
+                  <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 }} />
+                  </span>
+                  {
+                    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')}
+                        />
+                      </div>
+                    ))
+                  }
+                </div>
               </div>
             </FieldsGroup>
           </fieldset>