From a5536b07908a4016092a7cbaab467c70d97bd91b Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Fri, 30 Aug 2019 20:19:26 +0300
Subject: [PATCH] fix(client): refactor footer and fix internal links (#36726)

---
 client/src/components/Footer/FooterCol.js     |  37 +--
 .../Footer/__snapshots__/Footer.test.js.snap  |  10 +-
 client/src/components/Footer/footer.css       |  33 +--
 client/src/components/Footer/footerLinks.json | 248 ++++++++++--------
 client/src/components/Footer/index.js         |  14 +-
 5 files changed, 169 insertions(+), 173 deletions(-)

diff --git a/client/src/components/Footer/FooterCol.js b/client/src/components/Footer/FooterCol.js
index d8bc329ea2..aebccef50c 100644
--- a/client/src/components/Footer/FooterCol.js
+++ b/client/src/components/Footer/FooterCol.js
@@ -2,37 +2,28 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Link from '../helpers/Link';
-import { footerLinks } from './footerLinks';
 
-import './footer.css';
-
-function FooterCol({ colNum, title }) {
-  // if the column number is not applicable return an empty div
-  if (colNum < 1 || colNum > footerLinks + 1) return <div></div>;
-
-  let linksRow = footerLinks[colNum - 1].map(function(item, i) {
-    if (item.interal)
-      return (
-        <Link key={i} to={item.to}>
-          {item.text}
-        </Link>
-      );
-    return (
-      <Link external={true} key={i} to={item.to}>
-        {item.text}
-      </Link>
-    );
-  });
+function FooterCol({ title, links }) {
   return (
-    <div className={`footer-col-${colNum}`}>
+    <div className='footer-col'>
       <div className='col-header'>{title}</div>
-      {linksRow}
+      {links.map(({ to, text, internal }, i) => (
+        <Link external={!internal} key={`link-${i}`} to={to}>
+          {text}
+        </Link>
+      ))}
     </div>
   );
 }
 
 const propTypes = {
-  colNum: PropTypes.number,
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      to: PropTypes.string.isRequired,
+      text: PropTypes.string,
+      internal: PropTypes.bool
+    })
+  ).isRequired,
   title: PropTypes.string
 };
 
diff --git a/client/src/components/Footer/__snapshots__/Footer.test.js.snap b/client/src/components/Footer/__snapshots__/Footer.test.js.snap
index 5ad6567488..e3ad6c2354 100644
--- a/client/src/components/Footer/__snapshots__/Footer.test.js.snap
+++ b/client/src/components/Footer/__snapshots__/Footer.test.js.snap
@@ -31,7 +31,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
         </p>
       </div>
       <div
-        className="footer-col-1"
+        className="footer-col"
       >
         <div
           className="col-header"
@@ -47,8 +47,6 @@ exports[`<Footer /> renders to the DOM 1`] = `
         </a>
         <a
           href="/donate"
-          rel="noopener noreferrer"
-          target="_blank"
         >
           Donate
         </a>
@@ -124,7 +122,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
         </a>
       </div>
       <div
-        className="footer-col-2"
+        className="footer-col"
       >
         <div
           className="col-header"
@@ -217,7 +215,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
         </a>
       </div>
       <div
-        className="footer-col-3"
+        className="footer-col"
       >
         <div
           className="col-header"
@@ -310,7 +308,7 @@ exports[`<Footer /> renders to the DOM 1`] = `
         </a>
       </div>
       <div
-        className="footer-col-4"
+        className="footer-col"
       >
         <div
           className="col-header"
diff --git a/client/src/components/Footer/footer.css b/client/src/components/Footer/footer.css
index 4112e3d10b..f6a398137a 100644
--- a/client/src/components/Footer/footer.css
+++ b/client/src/components/Footer/footer.css
@@ -39,10 +39,7 @@
   flex-wrap: wrap;
 }
 
-.footer-col-1,
-.footer-col-2,
-.footer-col-3,
-.footer-col-4 {
+.footer-col {
   display: flex;
   flex-direction: column;
   flex: 0 0 100%;
@@ -52,17 +49,11 @@
   margin: 0 0 1.45rem;
 }
 
-.footer-col-1 a,
-.footer-col-2 a,
-.footer-col-3 a,
-.footer-col-4 a {
+.footer-col a {
   text-decoration: none;
 }
 
-.footer-col-1 a:hover,
-.footer-col-2 a:hover,
-.footer-col-3 a:hover,
-.footer-col-4 a:hover {
+.footer-col a:hover {
   text-decoration: underline;
 }
 
@@ -79,10 +70,7 @@
 }
 
 @media (min-width: 500px) {
-  .footer-col-1,
-  .footer-col-2,
-  .footer-col-3,
-  .footer-col-4 {
+  .footer-col {
     flex: 1 0 45%;
     height: auto;
     font-size: 16.5;
@@ -93,15 +81,12 @@
   .footer-container {
     width: 750px;
   }
-  .footer-col-1,
-  .footer-col-2,
-  .footer-col-3,
-  .footer-col-4 {
+  .footer-col {
     flex: 1 0 100px;
     height: auto;
     font-size: 16.5;
   }
-  .footer-col-4 {
+  .footer-col:last-of-type {
     flex: 1 0 180px;
   }
 }
@@ -119,12 +104,10 @@
   .footer-desc-col {
     flex: 1 0 31%;
   }
-  .footer-col-1,
-  .footer-col-2,
-  .footer-col-3 {
+  .footer-col {
     flex: 1 0 120px;
   }
-  .footer-col-4 {
+  .footer-col:last-of-type {
     flex: 4 0 100px;
   }
 }
diff --git a/client/src/components/Footer/footerLinks.json b/client/src/components/Footer/footerLinks.json
index a2bf02a010..18d014edb1 100644
--- a/client/src/components/Footer/footerLinks.json
+++ b/client/src/components/Footer/footerLinks.json
@@ -1,129 +1,149 @@
 {
   "footerLinks": [
-    [
-      { "to": "/news/about/", "text": "About" },
-      { "to": "/donate", "text": "Donate", "internal": true },
-      { "to": "/news/shop/", "text": "Shop" },
-      {
-        "to": "https://www.linkedin.com/school/free-code-camp/people/",
-        "text": "Alumni Network"
-      },
-      { "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
-      { "to": "/news/support/", "text": "Support" },
-      { "to": "/news/sponsors/", "text": "Sponsors" },
-      { "to": "/news/academic-honesty-policy/", "text": "Academic Honesty" },
-      { "to": "/news/code-of-conduct/", "text": "Code of Conduct" },
-      { "to": "/news/privacy-policy/", "text": "Privacy Policy" },
-      { "to": "/news/terms-of-service/", "text": "Terms of Service" },
-      { "to": "/news/copyright-policy/", "text": "Copyright Policy" }
-    ],
+    {
+      "title": "Our Nonprofit",
+      "links": [
+        { "to": "/news/about/", "text": "About" },
+        { "to": "/donate", "text": "Donate", "internal": true },
+        { "to": "/news/shop/", "text": "Shop" },
+        {
+          "to": "https://www.linkedin.com/school/free-code-camp/people/",
+          "text": "Alumni Network"
+        },
+        { "to": "https://github.com/freeCodeCamp/", "text": "Open Source" },
+        { "to": "/news/support/", "text": "Support" },
+        { "to": "/news/sponsors/", "text": "Sponsors" },
+        {
+          "to": "/news/academic-honesty-policy/",
+          "text": "Academic Honesty"
+        },
+        { "to": "/news/code-of-conduct/", "text": "Code of Conduct" },
+        { "to": "/news/privacy-policy/", "text": "Privacy Policy" },
+        { "to": "/news/terms-of-service/", "text": "Terms of Service" },
+        { "to": "/news/copyright-policy/", "text": "Copyright Policy" }
+      ]
+    },
+    {
+      "title": "Best Tutorials",
+      "links": [
+        { "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
+        { "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
+        { "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
+        {
+          "to": "/news/best-javascript-tutorial/",
+          "text": "JavaScript Tutorial"
+        },
+        {
+          "to": "/news/best-react-javascript-tutorial/",
+          "text": "React Tutorial"
+        },
+        { "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
+        { "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
+        { "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
+        { "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" },
+        {
+          "to": "/news/best-angular-tutorial-angularjs/",
+          "text": "Angular Tutorial"
+        },
+        {
+          "to": "/news/best-wordpress-tutorial/",
+          "text": "WordPress Tutorial"
+        },
+        {
+          "to": "/news/best-bootstrap-tutorial-responsive-web-design/",
+          "text": "Bootstrap Tutorial"
+        }
+      ]
+    },
+    {
+      "title": "Best Examples",
+      "links": [
+        { "to": "/news/python-example/", "text": "Python Example" },
+        { "to": "/news/javascript-example/", "text": "JavaScript Example" },
+        { "to": "/news/react-examples-reactjs/", "text": "React Example" },
+        {
+          "to": "/news/linux-example-bash-command-line/",
+          "text": "Linux Example"
+        },
+        { "to": "/news/html-and-html5-example/", "text": "HTML Example" },
+        { "to": "/news/css-example-css3/", "text": "CSS Example" },
+        { "to": "/news/sql-example/", "text": "SQL Example" },
+        { "to": "/news/java-example/", "text": "Java Example" },
+        {
+          "to": "/news/the-best-angular-examples/",
+          "text": "Angular Example"
+        },
+        { "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
+        {
+          "to": "/news/the-best-bootstrap-examples/",
+          "text": "Bootstrap Example"
+        },
+        { "to": "/news/the-best-php-examples/", "text": "PHP Example" }
+      ]
+    },
+    {
+      "title": "Trending Reference",
+      "links": [
+        {
+          "to": "/news/2019-web-developer-roadmap/",
+          "text": "2019 Web Developer Roadmap"
+        },
 
-    [
-      { "to": "/news/best-python-tutorial/", "text": "Python Tutorial" },
-      { "to": "/news/best-git-tutorial/", "text": "Git Tutorial" },
-      { "to": "/news/the-best-linux-tutorials/", "text": "Linux Tutorial" },
-      {
-        "to": "/news/best-javascript-tutorial/",
-        "text": "JavaScript Tutorial"
-      },
-      {
-        "to": "/news/best-react-javascript-tutorial/",
-        "text": "React Tutorial"
-      },
-      { "to": "/news/best-html-html5-tutorial/", "text": "HTML Tutorial" },
-      { "to": "/news/best-css-and-css3-tutorial/", "text": "CSS Tutorial" },
-      { "to": "/news/best-sql-database-tutorial/", "text": "SQL Tutorial" },
-      { "to": "/news/best-java-8-tutorial/", "text": "Java Tutorial" },
-      {
-        "to": "/news/best-angular-tutorial-angularjs/",
-        "text": "Angular Tutorial"
-      },
-      { "to": "/news/best-wordpress-tutorial/", "text": "WordPress Tutorial" },
-      {
-        "to": "/news/best-bootstrap-tutorial-responsive-web-design/",
-        "text": "Bootstrap Tutorial"
-      }
-    ],
-    [
-      { "to": "/news/python-example/", "text": "Python Example" },
-      { "to": "/news/javascript-example/", "text": "JavaScript Example" },
-      { "to": "/news/react-examples-reactjs/", "text": "React Example" },
-      {
-        "to": "/news/linux-example-bash-command-line/",
-        "text": "Linux Example"
-      },
-      { "to": "/news/html-and-html5-example/", "text": "HTML Example" },
-      { "to": "/news/css-example-css3/", "text": "CSS Example" },
-      { "to": "/news/sql-example/", "text": "SQL Example" },
-      { "to": "/news/java-example/", "text": "Java Example" },
-      { "to": "/news/the-best-angular-examples/", "text": "Angular Example" },
-      { "to": "/news/the-best-jquery-examples/", "text": "jQuery Example" },
-      {
-        "to": "/news/the-best-bootstrap-examples/",
-        "text": "Bootstrap Example"
-      },
-      { "to": "/news/the-best-php-examples/", "text": "PHP Example" }
-    ],
-    [
-      {
-        "to": "/news/2019-web-developer-roadmap/",
-        "text": "2019 Web Developer Roadmap"
-      },
+        {
+          "to": "/news/linux-command-line-bash-tutorial/",
+          "text": "Linux Command Line Guide"
+        },
 
-      {
-        "to": "/news/linux-command-line-bash-tutorial/",
-        "text": "Linux Command Line Guide"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-git-reset-and-git-revert/",
+          "text": "Git Reset and Git Revert"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-git-reset-and-git-revert/",
-        "text": "Git Reset and Git Revert"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-git-merge-and-git-rebase/",
+          "text": "Git Merge and Git Rebase"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-git-merge-and-git-rebase/",
-        "text": "Git Merge and Git Rebase"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-javascript-array-methods-map/",
+          "text": "JavaScript Array Map"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-javascript-array-methods-map/",
-        "text": "JavaScript Array Map"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-javascript-array-methods-reduce/",
+          "text": "JavaScript Array Reduce"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-javascript-array-methods-reduce/",
-        "text": "JavaScript Array Reduce"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-javascript-date-and-moment-js/",
+          "text": "JavaScript Date"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-javascript-date-and-moment-js/",
-        "text": "JavaScript Date"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-javascript-string-methods-split/",
+          "text": "JavaScript String Split"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-javascript-string-methods-split/",
-        "text": "JavaScript String Split"
-      },
+        {
+          "to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
+          "text": "CSS Flexbox Guide"
+        },
 
-      {
-        "to": "/news/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af/",
-        "text": "CSS Flexbox Guide"
-      },
+        {
+          "to": "/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/",
+          "text": "CSS Grid Guide"
+        },
 
-      {
-        "to": "/news/11-things-i-learned-reading-the-css-grid-specification-fb3983aa5e0/",
-        "text": "CSS Grid Guide"
-      },
+        {
+          "to": "/news/the-ultimate-guide-to-linux-creating-a-sudo-user/",
+          "text": "Create a Linux Sudo User"
+        },
 
-      {
-        "to": "/news/the-ultimate-guide-to-linux-creating-a-sudo-user/",
-        "text": "Create a Linux Sudo User"
-      },
-
-      {
-        "to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
-        "text": "How to Set Up SSH Keys"
-      }
-    ]
+        {
+          "to": "/news/the-ultimate-guide-to-ssh-setting-up-ssh-keys/",
+          "text": "How to Set Up SSH Keys"
+        }
+      ]
+    }
   ]
 }
diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js
index 98625e9ba8..666f6ff1ca 100644
--- a/client/src/components/Footer/index.js
+++ b/client/src/components/Footer/index.js
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Link from '../helpers/Link';
-import FootCol from './FooterCol';
+import FooterCol from './FooterCol';
 
+import { footerLinks } from './footerLinks';
 import './footer.css';
 
 const propTypes = {
@@ -43,10 +44,13 @@ function Footer() {
               .
             </p>
           </div>
-          <FootCol colNum={1} title={'Our Nonprofit'} />
-          <FootCol colNum={2} title={'Best Tutorials'} />
-          <FootCol colNum={3} title={'Best Examples'} />
-          <FootCol colNum={4} title={'Trending Reference'} />
+          {footerLinks.map(({ title, links }, index) => (
+            <FooterCol
+              key={`footer-col-${index}`}
+              links={links}
+              title={title}
+            />
+          ))}
         </div>
       </div>
     </footer>