feat(settings) Scaffold /settings route

client/gatsby-config.js

@@ -11,7 +11,14 @@ module.exports = {
     'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-plugin-create-client-paths',
-      options: { prefixes: ['/certification/*', '/unsubscribed/*', '/user/*'] }
+      options: {
+        prefixes: [
+          '/certification/*',
+          '/unsubscribed/*',
+          '/user/*',
+          '/settings/*'
+        ]
+      }
     },
     {
       resolve: 'gatsby-plugin-manifest',

client/src/client-only-routes/ShowSettings.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Grid, Button } from '@freecodecamp/react-bootstrap';
+
+import { signInLoadingSelector, userSelector } from '../redux';
+
+import Layout from '../components/Layout';
+import Spacer from '../components/helpers/Spacer';
+import Loader from '../components/helpers/Loader';
+import { FullWidthRow } from '../components/helpers';
+import About from '../components/settings/About';
+
+const propTypes = {
+  about: PropTypes.string,
+  location: PropTypes.string,
+  name: PropTypes.string,
+  picture: PropTypes.string,
+  points: PropTypes.number,
+  showLoading: PropTypes.bool,
+  theme: PropTypes.string,
+  username: PropTypes.string
+};
+
+const mapStateToProps = createSelector(
+  signInLoadingSelector,
+  userSelector,
+  (
+    showLoading,
+    { username = '', about, picture, points, name, location, theme }
+  ) => ({
+    showLoading,
+    username,
+    about,
+    picture,
+    points,
+    name,
+    theme,
+    location
+  })
+);
+
+const mapDispatchToProps = dispatch => bindActionCreators({}, dispatch);
+
+function ShowSettings(props) {
+  const {
+    showLoading,
+    username,
+    about,
+    picture,
+    points,
+    theme,
+    location,
+    name
+  } = props;
+
+  if (showLoading) {
+    return (
+      <Layout>
+        <div className='loader-wrapper'>
+          <Loader />
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <Grid>
+        <Spacer size={2} />
+        <FullWidthRow>
+          <Button
+            block={true}
+            bsSize='lg'
+            bsStyle='primary'
+            className='btn-invert'
+            href={`/${username}`}
+            >
+            Show me my public portfolio
+          </Button>
+          <Button
+            block={true}
+            bsSize='lg'
+            bsStyle='primary'
+            className='btn-invert'
+            href={'/signout'}
+            >
+            Sign me out of freeCodeCamp
+          </Button>
+        </FullWidthRow>
+        <Spacer />
+        <h1 className='text-center'>{`Account Settings for ${username}`}</h1>
+       {/* <About
+          about={about}
+          currentTheme={theme}
+          location={location}
+          name={name}
+          picture={picture}
+          points={points}
+          username={username}
+        />
+        <Spacer />
+         <PrivacySettings />
+        <Spacer />
+        <EmailSettings />
+        <Spacer />
+        <InternetSettings />
+        <Spacer />
+        <PortfolioSettings />
+        <Spacer />
+        <Honesty />
+        <Spacer />
+        <CertificationSettings />
+        <Spacer />
+<DangerZone /> */}
+      </Grid>
+    </Layout>
+  );
+}
+
+ShowSettings.displayName = 'ShowSettings';
+ShowSettings.propTypes = propTypes;
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ShowSettings);

client/src/components/helpers/ButtonSpacer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function ButtonSpacer() {
-  return <div className='button-spacer' />;
+  return <div className='button-spacer' style={{ padding: '5px 0' }} />;
 }
 
 ButtonSpacer.displayName = 'ButtonSpacer';

client/src/components/helpers/form/BlockSaveButton.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@freecodecamp/react-bootstrap';
+
+function BlockSaveButton({ children, ...restProps }) {
+  return (
+    <Button
+      block={true}
+      bsSize='lg'
+      bsStyle='primary'
+      type='submit'
+      {...restProps}
+      >
+      {children || 'Save'}
+    </Button>
+  );
+}
+
+BlockSaveButton.displayName = 'BlockSaveButton';
+BlockSaveButton.propTypes = {
+  children: PropTypes.any
+};
+
+export default BlockSaveButton;

client/src/components/helpers/form/BlockSaveWrapper.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.node
+};
+
+const style = {
+  padding: '0 15px'
+};
+
+function BlockSaveWrapper({ children, ...restProps }) {
+  return (
+    <div style={style} {...restProps}>
+      {children}
+    </div>
+  );
+}
+
+BlockSaveWrapper.displayName = 'BlockSaveWrapper';
+BlockSaveWrapper.propTypes = propTypes;
+
+export default BlockSaveWrapper;

client/src/pages/settings.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Router } from '@reach/router';
+
+import RedirectHome from '../components/RedirectHome';
+import ShowSettings from '../client-only-routes/ShowSettings';
+
+function Settings() {
+  return (
+    <Router>
+      <ShowSettings path='/settings' />
+      <RedirectHome default={true} />
+    </Router>
+  );
+}
+
+Settings.displayName = 'Settings';
+
+export default Settings;