feat: add local navigation

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

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { isEmpty } from 'lodash';
 
@@ -9,7 +8,8 @@ import {
   userByNameSelector,
   userProfileFetchStateSelector,
   fetchProfileForUser,
-  usernameSelector
+  usernameSelector,
+  hardGoTo as navigate
 } from '../redux';
 import FourOhFourPage from '../components/FourOhFour';
 import Profile from '../components/profile/Profile';
@@ -19,6 +19,7 @@ const propTypes = {
   fetchProfileForUser: PropTypes.func.isRequired,
   isSessionUser: PropTypes.bool,
   maybeUser: PropTypes.string,
+  navigate: PropTypes.func.isRequired,
   requestedUser: PropTypes.shape({
     username: PropTypes.string,
     profileUI: PropTypes.object
@@ -43,8 +44,10 @@ const makeMapStateToProps = () => (state, props) => {
   };
 };
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators({ fetchProfileForUser }, dispatch);
+const mapDispatchToProps = {
+  fetchProfileForUser,
+  navigate
+};
 
 class ShowProfileOrFourOhFour extends Component {
   componentDidMount() {
@@ -59,7 +62,7 @@ class ShowProfileOrFourOhFour extends Component {
       return null;
     }
 
-    const { isSessionUser, requestedUser, showLoading } = this.props;
+    const { isSessionUser, requestedUser, showLoading, navigate } = this.props;
     if (isEmpty(requestedUser)) {
       if (showLoading) {
         // We don't know if /:maybeUser is a user or not, we will show
@@ -74,7 +77,13 @@ class ShowProfileOrFourOhFour extends Component {
 
     // We have a response from the API, and we have some state in the
     // store for /:maybeUser, we now handover rendering to the Profile component
-    return <Profile isSessionUser={isSessionUser} user={requestedUser} />;
+    return (
+      <Profile
+        isSessionUser={isSessionUser}
+        navigate={navigate}
+        user={requestedUser}
+      />
+    );
   }
 }
 

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

@@ -172,7 +172,7 @@ export function ShowSettings(props) {
       <Grid>
         <main>
           <Spacer size={2} />
-          <FullWidthRow>
+          <FullWidthRow className='button-group'>
             <Link
               className='btn-invert btn btn-lg btn-primary btn-block'
               to={`/${username}`}

client/src/components/Intro/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, Spacer, Loader } from '../helpers';
+import { Link, Spacer, Loader, FullWidthRow } from '../helpers';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
-import { navigate as gatsbyNavigate } from 'gatsby';
 import { apiLocation } from '../../../config/env.json';
 import { randomQuote } from '../../utils/get-words';
 
@@ -47,26 +46,20 @@ function Intro({
                 ? 'Welcome back, ' + name + '.'
                 : 'Welcome to freeCodeCamp.org'}
             </h1>
-          </Col>
-          <Col sm={10} smOffset={1} xs={12}>
             <Spacer />
-            <div className='btn-group-wrap'>
-              <div className='btn-group' role='group'>
-                <button
-                  className={'btn-primary btn'}
-                  onClick={() => gatsbyNavigate(`/${username}`)}
-                >
-                  View my Portfolio
-                </button>
-                <button
-                  className={'btn-primary btn'}
-                  onClick={() => gatsbyNavigate(`/settings`)}
-                >
-                  Update my settings
-                </button>
-              </div>
-            </div>
           </Col>
+
+          <FullWidthRow className='button-group'>
+            <Link
+              className='btn btn-lg btn-primary btn-block'
+              to={`/${username}`}
+            >
+              View my Portfolio
+            </Link>
+            <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
+              Update my settings
+            </Link>
+          </FullWidthRow>
         </Row>
         <Spacer />
         <Row className='text-center quote-partial'>

client/src/components/Intro/intro.css

@@ -33,17 +33,6 @@
   text-align: center;
 }
 
-#learn-app-wrapper div.btn-group {
-  display: flex;
-  justify-items: center;
-}
-
-#learn-app-wrapper .btn-group-wrap {
-  text-align: center;
-  display: flex;
-  justify-content: center;
-}
-
 .quote-partial .blockquote {
   font-size: 1.3rem;
   border: none;

client/src/components/helpers/FullWidthRow.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col } from '@freecodecamp/react-bootstrap';
 
-function FullWidthRow({ children }) {
+function FullWidthRow({ children, className }) {
   return (
-    <Row>
+    <Row className={className}>
       <Col sm={8} smOffset={2} xs={12}>
         {children}
       </Col>
@@ -14,7 +14,8 @@ function FullWidthRow({ children }) {
 
 FullWidthRow.displayName = 'FullWidthRow';
 FullWidthRow.propTypes = {
-  children: PropTypes.any
+  children: PropTypes.any,
+  className: PropTypes.string
 };
 
 export default FullWidthRow;

client/src/components/layouts/global.css

@@ -240,6 +240,9 @@ fieldset[disabled] .btn-primary.focus {
   color: inherit;
 }
 
+.button-group .btn:not(:last-child) {
+  margin-bottom: 10px;
+}
 strong {
   color: var(--secondary-color);
 }

client/src/components/profile/Profile.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
+import { Grid, Row, Button } from '@freecodecamp/react-bootstrap';
 import Helmet from 'react-helmet';
 import Link from '../helpers/Link';
 
@@ -10,9 +10,11 @@ import HeatMap from './components/HeatMap';
 import Certifications from './components/Certifications';
 import Portfolio from './components/Portfolio';
 import Timeline from './components/TimeLine';
+import { apiLocation } from '../../../config/env.json';
 
 const propTypes = {
   isSessionUser: PropTypes.bool,
+  navigate: PropTypes.func.isRequired,
   user: PropTypes.shape({
     profileUI: PropTypes.shape({
       isLocked: PropTypes.bool,
@@ -152,12 +154,17 @@ function renderProfile(user) {
   );
 }
 
-function Profile({ user, isSessionUser }) {
+function Profile({ user, isSessionUser, navigate }) {
   const {
     profileUI: { isLocked = true },
     username
   } = user;
 
+  const createHandleSignoutClick = navigate => e => {
+    e.preventDefault();
+    return navigate(`${apiLocation}/signout`);
+  };
+
   return (
     <Fragment>
       <Helmet>
@@ -166,13 +173,21 @@ function Profile({ user, isSessionUser }) {
       <Spacer />
       <Grid>
         {isSessionUser ? (
-          <Row>
-            <Col sm={4} smOffset={4}>
-              <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
-                Update my settings
-              </Link>
-            </Col>
-          </Row>
+          <FullWidthRow className='button-group'>
+            <Link className='btn btn-lg btn-primary btn-block' to='/settings'>
+              Update my settings
+            </Link>
+            <Button
+              block={true}
+              bsSize='lg'
+              bsStyle='primary'
+              className='btn-invert'
+              href={'/signout'}
+              onClick={createHandleSignoutClick(navigate)}
+            >
+              Sign me out of freeCodeCamp
+            </Button>
+          </FullWidthRow>
         ) : null}
         <Spacer />
         {isLocked ? renderMessage(isSessionUser, username) : null}