fix(setting): preview button now works

common/app/routes/Settings/components/About-Settings.jsx

@@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
 import { createSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { reduxForm } from 'redux-form';
-import {
-  Nav,
-  NavItem
-} from 'react-bootstrap';
+import { Nav, NavItem } from 'react-bootstrap';
 
 import { FullWidthRow, Spacer } from '../../../helperComponents';
 import ThemeSettings from './ThemeSettings.jsx';
@@ -26,60 +23,60 @@ const max288Char = maxLength(288);
 
 const mapStateToProps = createSelector(
   userSelector,
-  (
-    {
-      about,
-      location,
-      name,
-      picture,
-      points,
-      theme,
-      username
-    },
-  ) => ({
+  ({
+    about,
+    location,
+    name,
+    picture,
+    points,
+    theme,
+    username,
+    yearsTopContributor
+  }) => ({
     about,
     currentTheme: theme,
     initialValues: { name, location, about, picture },
     location,
     name,
     picture,
     points,
-    username
+    username,
+    yearsTopContributor
   })
 );
 
-const formFields = [ 'name', 'location', 'picture', 'about' ];
+const formFields = ['name', 'location', 'picture', 'about'];
 
 function validator(values) {
   const errors = {};
-  const {
-    about,
-    picture
-  } = values;
+  const { about, picture } = values;
   errors.about = max288Char(about);
   errors.picutre = validURL(picture);
-
 }
 
 function mapDispatchToProps(dispatch) {
-  return bindActionCreators({
-    toggleNightMode,
-    updateUserBackend
-  }, dispatch);
+  return bindActionCreators(
+    {
+      toggleNightMode,
+      updateUserBackend
+    },
+    dispatch
+  );
 }
 
 const propTypes = {
-    about: PropTypes.string,
-    currentTheme: PropTypes.string,
-    fields: PropTypes.object,
-    handleSubmit: PropTypes.func.isRequired,
-    location: PropTypes.string,
-    name: PropTypes.string,
-    picture: PropTypes.string,
-    points: PropTypes.number,
-    toggleNightMode: PropTypes.func.isRequired,
-    updateUserBackend: PropTypes.func.isRequired,
-    username: PropTypes.string
+  about: PropTypes.string,
+  currentTheme: PropTypes.string,
+  fields: PropTypes.object,
+  handleSubmit: PropTypes.func.isRequired,
+  location: PropTypes.string,
+  name: PropTypes.string,
+  picture: PropTypes.string,
+  points: PropTypes.number,
+  toggleNightMode: PropTypes.func.isRequired,
+  updateUserBackend: PropTypes.func.isRequired,
+  username: PropTypes.string,
+  yearsTopContributor: PropTypes.array
 };
 
 class AboutSettings extends PureComponent {
@@ -120,41 +117,42 @@ class AboutSettings extends PureComponent {
     };
     return (
       <div>
-        <FormFields
-          fields={ fields }
-          options={ options }
-        />
+        <FormFields fields={fields} options={options} />
       </div>
     );
   }
 
   renderPreview() {
     const {
       fields: {
-      picture: { value: picture },
-      name: { value: name },
-      location: { value: location },
-      about: { value: about }
+        picture: { value: picture },
+        name: { value: name },
+        location: { value: location },
+        about: { value: about }
       },
       points,
-      username
+      username,
+      yearsTopContributor
     } = this.props;
     return (
       <Camper
-        about={ about }
-        location={ location }
-        name={ name }
-        picture={ picture }
-        points={ points }
-        username={ username }
+        about={about}
+        location={location}
+        name={name}
+        picture={picture}
+        points={points}
+        username={username}
+        yearsTopContributor={yearsTopContributor}
       />
     );
   }
 
   render() {
     const {
       currentTheme,
-      fields: { _meta: { allPristine } },
+      fields: {
+        _meta: { allPristine }
+      },
       handleSubmit,
       toggleNightMode,
       username
@@ -164,10 +162,10 @@ class AboutSettings extends PureComponent {
     const toggleTheme = () => toggleNightMode(username, currentTheme);
     return (
       <div className='about-settings'>
-        <UsernameSettings username={ username }/>
+        <UsernameSettings username={username} />
         <FullWidthRow>
           <Nav
-            activeKey={ view }
+            activeKey={view}
             bsStyle='tabs'
             className='edit-preview-tabs'
             onSelect={k => this.handleTabSelect(k)}
@@ -182,20 +180,18 @@ class AboutSettings extends PureComponent {
         </FullWidthRow>
         <br />
         <FullWidthRow>
-        <form id='camper-identity' onSubmit={ handleSubmit(this.handleSubmit) }>
-          {
-            this.show[view]()
-          }
-          <BlockSaveWrapper>
-            <BlockSaveButton disabled={ allPristine } />
-          </BlockSaveWrapper>
-        </form>
+          <form id='camper-identity' onSubmit={handleSubmit(this.handleSubmit)}>
+            {this.show[view]()}
+            <BlockSaveWrapper>
+              <BlockSaveButton disabled={allPristine} />
+            </BlockSaveWrapper>
+          </form>
         </FullWidthRow>
         <Spacer />
         <FullWidthRow>
           <ThemeSettings
-            currentTheme={ currentTheme }
-            toggleNightMode={ toggleTheme }
+            currentTheme={currentTheme}
+            toggleNightMode={toggleTheme}
           />
         </FullWidthRow>
       </div>

common/app/routes/Settings/components/Camper.jsx

@@ -42,46 +42,37 @@ function Camper({
   about,
   yearsTopContributor
 }) {
-
   return (
     <div>
       <Row>
-        <Col className='avatar-container' xs={ 12 }>
-            <img
-              alt={ username + '\'s profile picture' }
-              className='avatar'
-              src={ picture }
-            />
+        <Col className='avatar-container' xs={12}>
+          <img
+            alt={username + "'s profile picture"}
+            className='avatar'
+            src={picture}
+          />
         </Col>
       </Row>
       <SocialIcons />
-      <h2 className='text-center username'>@{ username }</h2>
-      { name && <p className='text-center name'>{ name }</p> }
-      { location && <p className='text-center location'>{ location }</p> }
-      { about && <p className='bio text-center'>{ about }</p> }
-      {
-        typeof points === 'number' ? (
-          <p className='text-center points'>
-            { `${points} ${pluralise('point', points !== 1)}` }
-          </p>
-        ) : null
-      }
-      { yearsTopContributor.filter(Boolean).length > 0 &&
-        (
-          <div>
-          <br/>
+      <h2 className='text-center username'>@{username}</h2>
+      {name && <p className='text-center name'>{name}</p>}
+      {location && <p className='text-center location'>{location}</p>}
+      {about && <p className='bio text-center'>{about}</p>}
+      {typeof points === 'number' ? (
+        <p className='text-center points'>
+          {`${points} ${pluralise('point', points !== 1)}`}
+        </p>
+      ) : null}
+      {yearsTopContributor.filter(Boolean).length > 0 && (
+        <div>
+          <br />
           <p className='text-center yearsTopContributor'>
-            <FontAwesomeIcon
-              icon={faAward}
-            /> Top Contributor
+            <FontAwesomeIcon icon={faAward} /> Top Contributor
           </p>
-          <p className='text-center'>
-          { joinArray(yearsTopContributor) }
-          </p>
-          </div>
-        )
-      }
-      <br/>
+          <p className='text-center'>{joinArray(yearsTopContributor)}</p>
+        </div>
+      )}
+      <br />
     </div>
   );
 }