fix(client): refactor footer and fix internal links (#36726)

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({ title, links }) {
-
-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}>
+    <div className='footer-col'>
-          {item.text}
-        </Link>
-      );
-    return (
-      <Link external={true} key={i} to={item.to}>
-        {item.text}
-      </Link>
-    );
-  });
-  return (
-    <div className={`footer-col-${colNum}`}>
       <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
 };
 

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"

client/src/components/Footer/footer.css

@@ -39,10 +39,7 @@
   flex-wrap: wrap;
 }
 
-.footer-col-1,
+.footer-col {
-.footer-col-2,
-.footer-col-3,
-.footer-col-4 {
   display: flex;
   flex-direction: column;
   flex: 0 0 100%;
@@ -52,17 +49,11 @@
   margin: 0 0 1.45rem;
 }
 
-.footer-col-1 a,
+.footer-col a {
-.footer-col-2 a,
-.footer-col-3 a,
-.footer-col-4 a {
   text-decoration: none;
 }
 
-.footer-col-1 a:hover,
+.footer-col a:hover {
-.footer-col-2 a:hover,
-.footer-col-3 a:hover,
-.footer-col-4 a:hover {
   text-decoration: underline;
 }
 
@@ -79,10 +70,7 @@
 }
 
 @media (min-width: 500px) {
-  .footer-col-1,
+  .footer-col {
-  .footer-col-2,
-  .footer-col-3,
-  .footer-col-4 {
     flex: 1 0 45%;
     height: auto;
     font-size: 16.5;
@@ -93,15 +81,12 @@
   .footer-container {
     width: 750px;
   }
-  .footer-col-1,
+  .footer-col {
-  .footer-col-2,
-  .footer-col-3,
-  .footer-col-4 {
     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 {
-  .footer-col-2,
-  .footer-col-3 {
     flex: 1 0 120px;
   }
-  .footer-col-4 {
+  .footer-col:last-of-type {
     flex: 4 0 100px;
   }
 }

client/src/components/Footer/footerLinks.json

@@ -1,6 +1,8 @@
 {
   "footerLinks": [
-    [
+    {
+      "title": "Our Nonprofit",
+      "links": [
         { "to": "/news/about/", "text": "About" },
         { "to": "/donate", "text": "Donate", "internal": true },
         { "to": "/news/shop/", "text": "Shop" },
@@ -11,14 +13,19 @@
         { "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/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" },
@@ -38,13 +45,19 @@
           "to": "/news/best-angular-tutorial-angularjs/",
           "text": "Angular Tutorial"
         },
-      { "to": "/news/best-wordpress-tutorial/", "text": "WordPress 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" },
@@ -56,15 +69,21 @@
         { "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-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"
@@ -125,5 +144,6 @@
           "text": "How to Set Up SSH Keys"
         }
       ]
+    }
   ]
 }

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'} />
+          {footerLinks.map(({ title, links }, index) => (
-          <FootCol colNum={2} title={'Best Tutorials'} />
+            <FooterCol
-          <FootCol colNum={3} title={'Best Examples'} />
+              key={`footer-col-${index}`}
-          <FootCol colNum={4} title={'Trending Reference'} />
+              links={links}
+              title={title}
+            />
+          ))}
         </div>
       </div>
     </footer>