Refactor: Fetch_sponsors_from_json_file

fetch the sponsors' data from json file instead of an array of objects

Closes #13

package.json

@@ -12,7 +12,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",
-    "react-test-renderer": "^17.0.1",
+    "react-test-renderer": "^17.0.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/components/Sponsors/Sponsor.jsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { Col } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
-function Sponsor({ websiteUrl, imageLogo }) {
+function Sponsor({ websiteUrl, imageLogo, name }) {
   return (
     <Col>
       <a href={websiteUrl}>
-        <img className="sponsor-image" src={imageLogo} alt="sponsor"></img>
+        <img className="sponsor-image" src={imageLogo} alt={name}></img>
       </a>
     </Col>
   );
@@ -16,4 +16,5 @@ export default Sponsor;
 Sponsor.propTypes = {
   websiteUrl: PropTypes.string,
   imageLogo: PropTypes.string,
+  name: PropTypes.string,
 };

src/components/Sponsors/Sponsors.jsx

@@ -2,47 +2,25 @@ import React from 'react';
 import { Container, Row } from 'react-bootstrap';
 import './Sponsors.scss';
 import Sponsor from './Sponsor';
-import recodedLogo from '../../dist/img/ReCodedLogos.png';
+import data from './data.json';
+import recodedLogo from '../../dist/img/ReCodedLogo.jpg';
+
+const imgMap = { recodedLogo: recodedLogo };
 
 function Sponsors() {
-  const sponsors = [
-    {
-      name: 'Re:coded',
-      websiteUrl: 'https://www.re-coded.com/',
-      imageLogo: recodedLogo,
-    },
-    {
-      name: 'Re:coded',
-      websiteUrl: 'https://www.re-coded.com/',
-      imageLogo: recodedLogo,
-    },
-    {
-      name: 'Re:coded',
-      websiteUrl: 'https://www.re-coded.com/',
-      imageLogo: recodedLogo,
-    },
-    {
-      name: 'Re:coded',
-      websiteUrl: 'https://www.re-coded.com/',
-      imageLogo: recodedLogo,
-    },
-    {
-      name: 'Re:coded',
-      websiteUrl: 'https://www.re-coded.com/',
-      imageLogo: recodedLogo,
-    },
-  ];
   return (
     <div>
-      <h1 className="mb-4">Sponsors</h1>
-      <p className="mb-4">This project is generously sponsored by:</p>
+      <h1 className="heading mb-4">Sponsors</h1>
+      <p className="subheading mb-4">
+        This project is generously sponsored by:
+      </p>
       <Container>
         <Row className="justify-content-center" noGutters={true}>
-          {sponsors.map((e, index) => (
+          {data.map((sponsorsData, index) => (
             <Sponsor
+              {...sponsorsData}
               key={index}
-              websiteUrl={e.websiteUrl}
-              imageLogo={e.imageLogo}
+              imageLogo={imgMap[sponsorsData.imageLogo]}
             />
           ))}
         </Row>

src/components/Sponsors/Sponsors.scss

@@ -6,3 +6,29 @@
   width: 140px;
   height: 140px;
 }
+
+.heading {
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 24px;
+  line-height: 140.62%;
+  /* identical to box height, or 34px */
+  text-align: center;
+}
+
+.subheading {
+  left: 28.54%;
+  right: 28.47%;
+  top: 28.76%;
+  bottom: 63.59%;
+
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 20px;
+  line-height: 28px;
+  /* identical to box height */
+
+  text-align: center;
+}

src/components/Sponsors/__snapshots__/Sponsors.test.jsx.snap

@@ -3,12 +3,12 @@
 exports[`Sponsors snapshot 1`] = `
 <div>
   <h1
-    className="mb-4"
+    className="heading mb-4"
   >
     Sponsors
   </h1>
   <p
-    className="mb-4"
+    className="subheading mb-4"
   >
     This project is generously sponsored by:
   </p>
@@ -25,9 +25,9 @@ exports[`Sponsors snapshot 1`] = `
           href="https://www.re-coded.com/"
         >
           <img
-            alt="sponsor"
+            alt="Re:coded"
             className="sponsor-image"
-            src="ReCodedLogos.png"
+            src="ReCodedLogo.jpg"
           />
         </a>
       </div>
@@ -38,9 +38,9 @@ exports[`Sponsors snapshot 1`] = `
           href="https://www.re-coded.com/"
         >
           <img
-            alt="sponsor"
+            alt="Re:coded"
             className="sponsor-image"
-            src="ReCodedLogos.png"
+            src="ReCodedLogo.jpg"
           />
         </a>
       </div>
@@ -51,9 +51,9 @@ exports[`Sponsors snapshot 1`] = `
           href="https://www.re-coded.com/"
         >
           <img
-            alt="sponsor"
+            alt="Re:coded"
             className="sponsor-image"
-            src="ReCodedLogos.png"
+            src="ReCodedLogo.jpg"
           />
         </a>
       </div>
@@ -64,9 +64,9 @@ exports[`Sponsors snapshot 1`] = `
           href="https://www.re-coded.com/"
         >
           <img
-            alt="sponsor"
+            alt="Re:coded"
             className="sponsor-image"
-            src="ReCodedLogos.png"
+            src="ReCodedLogo.jpg"
           />
         </a>
       </div>
@@ -77,9 +77,9 @@ exports[`Sponsors snapshot 1`] = `
           href="https://www.re-coded.com/"
         >
           <img
-            alt="sponsor"
+            alt="Re:coded"
             className="sponsor-image"
-            src="ReCodedLogos.png"
+            src="ReCodedLogo.jpg"
           />
         </a>
       </div>

src/components/Sponsors/data.json

@@ -0,0 +1,27 @@
+[
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  },
+  {
+    "name": "Re:coded",
+    "websiteUrl": "https://www.re-coded.com/",
+    "imageLogo": "recodedLogo"
+  }
+]

yarn.lock

@@ -9465,6 +9465,11 @@ react-is@^16.3.2, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -9563,15 +9568,15 @@ react-shallow-renderer@^16.13.1:
     object-assign "^4.1.1"
     react-is "^16.12.0 || ^17.0.0"
 
-react-test-renderer@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3187e636c3063e6ae498aedf21ecf972721574c7"
-  integrity sha512-/dRae3mj6aObwkjCcxZPlxDFh73XZLgvwhhyON2haZGUEhiaY5EjfAdw+d/rQmlcFwdTpMXCSGVk374QbCTlrA==
+react-test-renderer@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
   dependencies:
     object-assign "^4.1.1"
-    react-is "^17.0.1"
+    react-is "^17.0.2"
     react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.1"
+    scheduler "^0.20.2"
 
 react-transition-group@^4.4.1:
   version "4.4.1"
@@ -10147,6 +10152,14 @@ scheduler@^0.20.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"