From f61efb225fdafbfe502d620c39bc2ab95e3cdc45 Mon Sep 17 00:00:00 2001
From: Mrugesh Mohapatra <me@raisedadead.com>
Date: Mon, 18 Feb 2019 17:13:00 +0530
Subject: [PATCH] fix(links): unify linking to pages internal/external

---
 client/src/components/Footer/index.js  |  23 +---
 client/src/components/Supporters.js    |   2 +-
 client/src/components/helpers/Link.js  |  20 +++
 client/src/components/helpers/index.js |   1 +
 client/src/pages/about.js              | 168 +++++++++++--------------
 client/src/pages/index.js              |   2 +-
 client/src/pages/learn.js              |   2 +-
 client/src/pages/sponsors.js           |  74 +++++------
 8 files changed, 135 insertions(+), 157 deletions(-)
 create mode 100644 client/src/components/helpers/Link.js

diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js
index 0b098af7bd..8b7d723df9 100644
--- a/client/src/components/Footer/index.js
+++ b/client/src/components/Footer/index.js
@@ -1,8 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Link as GatsbyLink } from 'gatsby';
 import { Grid, Row, Col } from '@freecodecamp/react-bootstrap';
 
+import Link from '../helpers/Link';
+
 import './footer.css';
 
 const propTypes = {
@@ -22,23 +22,6 @@ const linkPropTypes = {
   to: PropTypes.string.isRequired
 };
 
-const Link = ({ children, to, external, ...other }) => {
-  if (!external && /^\/[^/]?/.test(to)) {
-    return (
-      <GatsbyLink to={to} {...other}>
-        {children}
-      </GatsbyLink>
-    );
-  }
-
-  return (
-    <a href={to} {...other} rel='noopener noreferrer' target='_blank'>
-      {children}
-    </a>
-  );
-};
-Link.propTypes = linkPropTypes;
-
 function Footer() {
   return (
     <footer className='footer'>
@@ -70,7 +53,7 @@ function Footer() {
             <Link to='/about'>About</Link>
             <Link to='/donate'>Donate</Link>
             <Link to='https://shop.freecodecamp.org'>Shop</Link>
-            <Link to='https://sponsors.freecodecamp.org'>Sponsors</Link>
+            <Link to='/sponsors'>Sponsors</Link>
             <Link to='mailto:team@freecodecamp.org'>Email Us</Link>
           </Col>
           <Col sm={2} xs={6}>
diff --git a/client/src/components/Supporters.js b/client/src/components/Supporters.js
index 57eeca8cc5..9b0098c3b0 100644
--- a/client/src/components/Supporters.js
+++ b/client/src/components/Supporters.js
@@ -73,7 +73,7 @@ function Supporters({ isDonating, activeDonations }) {
           <Button
             bsSize='lg'
             bsStyle='primary'
-            href='https://donate.freecodecamp.org'
+            href='/donate'
             target='_blank'
           >
             Click here to become a Supporter
diff --git a/client/src/components/helpers/Link.js b/client/src/components/helpers/Link.js
new file mode 100644
index 0000000000..2cbbedd738
--- /dev/null
+++ b/client/src/components/helpers/Link.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link as GatsbyLink } from 'gatsby';
+
+const Link = ({ children, to, external, ...other }) => {
+  if (!external && (/^\/(?!\/)/).test(to)) {
+    return (
+      <GatsbyLink to={to} {...other}>
+        {children}
+      </GatsbyLink>
+    );
+  }
+
+  return (
+    <a href={to} {...other} rel='noopener noreferrer' target='_blank'>
+      {children}
+    </a>
+  );
+};
+
+export default Link;
diff --git a/client/src/components/helpers/index.js b/client/src/components/helpers/index.js
index 40f8c437f1..41895ccd16 100644
--- a/client/src/components/helpers/index.js
+++ b/client/src/components/helpers/index.js
@@ -4,3 +4,4 @@ export { default as SlimWidthRow } from './SlimWidthRow';
 export { default as Loader } from './Loader';
 export { default as SkeletonSprite } from './SkeletonSprite';
 export { default as Spacer } from './Spacer';
+export { default as Link } from './Link';
diff --git a/client/src/pages/about.js b/client/src/pages/about.js
index 957f6cb4f2..480b09e32d 100644
--- a/client/src/pages/about.js
+++ b/client/src/pages/about.js
@@ -1,7 +1,6 @@
 /* eslint-disable max-len */
 import React, { Fragment } from 'react';
 import Helmet from 'react-helmet';
-import { Link } from 'gatsby';
 import { Grid, Col, Row, Table } from '@freecodecamp/react-bootstrap';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import {
@@ -12,7 +11,6 @@ import {
   faMedium,
   faFacebook
 } from '@fortawesome/free-brands-svg-icons';
-
 import {
   faLock,
   faBalanceScale,
@@ -20,7 +18,7 @@ import {
   faBook
 } from '@fortawesome/free-solid-svg-icons';
 
-import Spacer from '../components/helpers/Spacer';
+import { Link, Spacer } from '../components/helpers';
 
 import './about.css';
 
@@ -63,34 +61,31 @@ const AboutPage = () => {
               Yes. Every year, thousands of people who join the freeCodeCamp
               community get their first software developer job. If you're
               curious, you can{' '}
-              <a
-                href='https://www.linkedin.com/school/4831032/alumni/'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://www.linkedin.com/school/4831032/alumni/'
                 >
                 browse our alumni network on LinkedIn here
-              </a>
+              </Link>
               .
             </p>
             <h4>How big is the freeCodeCamp community?</h4>
             <p>
               If you add up all the people who use our learning platform, read
               our{' '}
-              <a
-                href='https://medium.freecodecamp.org'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://medium.freecodecamp.org'
                 >
                 Medium publication
-              </a>
+              </Link>
               , watch our{' '}
-              <a
-                href='https://youtube.com/freecodecamp'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://youtube.com/freecodecamp'
                 >
                 YouTube channel
-              </a>
+              </Link>
               , and post on <Link to='/forum'>our forum</Link>, each month we
               help millions of people learn about coding and technology.
             </p>
@@ -99,13 +94,12 @@ const AboutPage = () => {
               Yes, we are a 501(c)(3){' '}
               <Link to='/donate'>donor-supported public charity</Link>. You
               can{' '}
-              <a
-                href='https://s3.amazonaws.com/freecodecamp/Free+Code+Camp+Inc+IRS+Determination+Letter.pdf'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://s3.amazonaws.com/freecodecamp/Free+Code+Camp+Inc+IRS+Determination+Letter.pdf'
                 >
                 download our IRS Determination Letter here
-              </a>
+              </Link>
               .
             </p>
             <h4>
@@ -114,9 +108,9 @@ const AboutPage = () => {
             </h4>
             <p>
               Yes. Our cryptographically signed wallet details are{' '}
-              <a href='https://twitter.com/freeCodeCamp/status/939512108449959936'>
+              <Link to='https://twitter.com/freeCodeCamp/status/939512108449959936'>
                 here
-              </a>
+              </Link>
               .
             </p>
             <h4>
@@ -153,13 +147,12 @@ const AboutPage = () => {
             </p>
             <h4>How did freeCodeCamp get started?</h4>
             <p>
-              <a
-                href='https://www.twitter.com/ossia'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://www.twitter.com/ossia'
                 >
                 Quincy
-              </a>{' '}
+              </Link>{' '}
               started the freeCodeCamp community in 2014. He is now just one
               of thousands of active contributors.
             </p>
@@ -196,40 +189,36 @@ const AboutPage = () => {
             <h4>Does freeCodeCamp have a mobile app?</h4>
             <p>
               You can learn on the go by listening to the{' '}
-              <a
-                href='https://podcast.freecodecamp.org'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://podcast.freecodecamp.org'
                 >
                 freeCodeCamp Podcast
-              </a>{' '}
+              </Link>{' '}
               or watching{' '}
-              <a
-                href='https://youtube.com/freecodecamp'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://youtube.com/freecodecamp'
                 >
                 freeCodeCamp's YouTube channel
-              </a>
+              </Link>
               . And if you want a mobile app designed specifically for
               learning to code, we recommend Grasshopper. It's free and
               designed by a freeCodeCamp contributor and her team. You can
               download it on{' '}
-              <a
-                href='https://itunes.apple.com/us/app/id1354133284'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://itunes.apple.com/us/app/id1354133284'
                 >
                 iOS
-              </a>{' '}
+              </Link>{' '}
               or{' '}
-              <a
-                href='https://play.google.com/store/apps/details?id=com.area120.grasshopper&hl=en'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://play.google.com/store/apps/details?id=com.area120.grasshopper&hl=en'
                 >
                 Android
-              </a>
+              </Link>
               .
             </p>
             <h4>Can I get a job at freeCodeCamp?</h4>
@@ -237,13 +226,12 @@ const AboutPage = () => {
               We're a small donor-supported nonprofit. We've hired several
               prominent contributors from within the freeCodeCamp community,
               but you're much more likely to get a job at{' '}
-              <a
-                href='https://www.linkedin.com/school/free-code-camp/alumni/'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://www.linkedin.com/school/free-code-camp/alumni/'
                 >
                 one of the hundreds of companies
-              </a>{' '}
+              </Link>{' '}
               where freeCodeCamp alumni work.
             </p>
             <h4>Can my company advertise on freeCodeCamp?</h4>
@@ -288,13 +276,12 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faYoutube} />
                   </td>
                   <td>
-                    <a
-                      href='https://youtube.com/freecodecamp'
-                      rel='noopener noreferrer'
-                      target='_blank'
+                    <Link
+                      external={true}
+                      to='https://youtube.com/freecodecamp'
                       >
                       Our YouTube channel
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -302,13 +289,12 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faGithub} />
                   </td>
                   <td>
-                    <a
-                      href='https://github.com/freecodecamp/'
-                      rel='noopener noreferrer'
-                      target='_blank'
+                    <Link
+                      external={true}
+                      to='https://github.com/freecodecamp/'
                       >
                       Our GitHub organization
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -316,13 +302,12 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faLinkedin} />
                   </td>
                   <td>
-                    <a
-                      href='https://www.linkedin.com/edu/school?id=166029'
-                      rel='noopener noreferrer'
-                      target='_blank'
+                    <Link
+                      external={true}
+                      to='https://www.linkedin.com/edu/school?id=166029'
                       >
                       Our LinkedIn university page
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -330,13 +315,12 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faMedium} />
                   </td>
                   <td>
-                    <a
-                      href='https://medium.freecodecamp.org'
-                      rel='noopener noreferrer'
-                      target='_blank'
+                    <Link
+                      external={true}
+                      to='https://medium.freecodecamp.org'
                       >
                       Our Medium publication
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -344,13 +328,12 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faTwitter} />
                   </td>
                   <td>
-                    <a
-                      href='https://twitter.com/freecodecamp'
-                      rel='noopener noreferrer'
-                      target='_blank'
+                    <Link
+                      external={true}
+                      to='https://twitter.com/freecodecamp'
                       >
                       Our Twitter feed
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -358,13 +341,12 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faFacebook} />
                   </td>
                   <td>
-                    <a
-                      href='https://facebook.com/freecodecamp'
-                      rel='noopener noreferrer'
-                      target='_blank'
+                    <Link
+                      external={true}
+                      to='https://facebook.com/freecodecamp'
                       >
                       Our Facebook page
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -372,9 +354,9 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faLock} />
                   </td>
                   <td>
-                    <a href='https://privacy-policy.freecodecamp.org'>
+                    <Link to='https://privacy-policy.freecodecamp.org'>
                       Our privacy policy
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -382,9 +364,9 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faBalanceScale} />
                   </td>
                   <td>
-                    <a href='https://code-of-conduct.freecodecamp.org'>
+                    <Link to='https://code-of-conduct.freecodecamp.org'>
                       Our code of conduct
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -392,9 +374,9 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faUniversity} />
                   </td>
                   <td>
-                    <a href='https://www.freecodecamp.org/academic-honesty'>
+                    <Link to='https://www.freecodecamp.org/academic-honesty'>
                       Our academic honesty policy
-                    </a>
+                    </Link>
                   </td>
                 </tr>
                 <tr>
@@ -402,9 +384,9 @@ const AboutPage = () => {
                     <FontAwesomeIcon icon={faBook} />
                   </td>
                   <td>
-                    <a href='https://terms-of-service.freecodecamp.org'>
+                    <Link to='https://terms-of-service.freecodecamp.org'>
                       Our terms of service
-                    </a>
+                    </Link>
                   </td>
                 </tr>
               </tbody>
diff --git a/client/src/pages/index.js b/client/src/pages/index.js
index 7d07a22776..b2c30af981 100644
--- a/client/src/pages/index.js
+++ b/client/src/pages/index.js
@@ -229,7 +229,7 @@ const IndexPage = () => (
         pay for servers, services, and staff. You can{' '}
         <a
           className='large-p underlined-link'
-          href='https://donate.freecodecamp.org/'
+          href='/donate'
           rel='noopener noreferrer'
           target='_blank'
         >
diff --git a/client/src/pages/learn.js b/client/src/pages/learn.js
index 6054435f84..ce22151cf0 100644
--- a/client/src/pages/learn.js
+++ b/client/src/pages/learn.js
@@ -50,7 +50,7 @@ const IndexPage = ({
         And yes - all of this is 100% free, thanks to the thousands of campers
         who{' '}
         <a
-          href='https://donate.freecodecamp.org'
+          href='/donate'
           rel='noopener noreferrer'
           target='_blank'
         >
diff --git a/client/src/pages/sponsors.js b/client/src/pages/sponsors.js
index 597f5357be..4006444081 100644
--- a/client/src/pages/sponsors.js
+++ b/client/src/pages/sponsors.js
@@ -3,7 +3,7 @@ import React, { Fragment } from 'react';
 import Helmet from 'react-helmet';
 import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 
-import Spacer from '../components/helpers/Spacer';
+import { Link, Spacer } from '../components/helpers';
 
 import './sponsors.css';
 
@@ -23,101 +23,93 @@ const SponsorsPage = () => {
             </h3>
             <hr />
             <Row className='sponsor-logos'>
-              <a
-                href='https://www.class-central.com'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://www.class-central.com'
                 >
                 <img
                   alt="Class Central's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/class-central-logo.jpg'
                 />
-              </a>
-              <a
-                href='https://www.tsugicloud.org'
-                rel='noopener noreferrer'
-                target='_blank'
+              </Link>
+              <Link
+                external={true}
+                to='https://www.tsugicloud.org'
                 >
                 <img
                   alt="TsugiCloud's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/tsugicloud-logo.png'
                 />
-              </a>
+              </Link>
             </Row>
             <h2>In-kind sponsors</h2>
             <h3>These companies donate their services to freeCodeCamp.org</h3>
             <hr />
             <Row className='sponsor-logos'>
-              <a
-                href='https://netlify.com'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://netlify.com'
                 >
                 <img
                   alt="Netlify's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/netlify-logo.jpg'
                 />
-              </a>
-              <a
-                href='https://www.mlab.com/'
-                rel='noopener noreferrer'
-                target='_blank'
+              </Link>
+              <Link
+                external={true}
+                to='https://www.mlab.com/'
                 >
                 <img
                   alt="mLab's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/mLab-logo.png'
                 />
-              </a>
-              <a
-                href='https://auth0.com'
-                rel='noopener noreferrer'
-                target='_blank'
+              </Link>
+              <Link
+                external={true}
+                to='https://auth0.com'
                 >
                 <img
                   alt="Auth0's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/auth0-logo.png'
                 />
-              </a>
+              </Link>
             </Row>
             <Row className='sponsor-logos'>
-              <a
-                href='https://www.discourse.org/'
-                rel='noopener noreferrer'
-                target='_blank'
+              <Link
+                external={true}
+                to='https://www.discourse.org/'
                 >
                 <img
                   alt="Discourse's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/discourse-logo.png'
                 />
-              </a>
-              <a
-                href='https://algolia.com'
-                rel='noopener noreferrer'
-                target='_blank'
+              </Link>
+              <Link
+                external={true}
+                to='https://algolia.com'
                 >
                 <img
                   alt="Algolia's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/algolia-logo.jpg'
                 />
-              </a>
-              <a
-                href='https://cloudflare.com'
-                rel='noopener noreferrer'
-                target='_blank'
+              </Link>
+              <Link
+                external={true}
+                to='https://cloudflare.com'
                 >
                 <img
                   alt="Cloudflare's logo"
                   className='img-responsive sponsor-logo'
                   src='https://s3.amazonaws.com/freecodecamp/cloudflare-logo.jpg'
                 />
-              </a>
+              </Link>
             </Row>
           </Col>
         </Row>