Merge pull request #9 from fac20/fish-card

Fish card
fac20 · Sep 17, 2020 · 6e3a5a8 · 6e3a5a8
2 parents 76ca1cd + 669d992
commit 6e3a5a8
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 40 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,23 @@
 import React from "react";
 import "./App.css";
+import FishCard from "./modules/fish-card";
+import { getRandomFishData } from "./modules/fetch-helper";
 
 function App() {
+  const [fishData, setFishData] = React.useState(null);
+  console.log(fishData);
+  React.useEffect(() => {
+    getRandomFishData().then((data) => {
+      setFishData(data);
+    });
+  }, []);
+
   return (
     <div className="App">
       <header className="App-header"></header>
-      <body className="App-body"></body>
+      <body className="App-body">
+        <FishCard {...fishData} />
+      </body>
     </div>
   );
 }

diff --git a/src/modules/fetch-helper.js b/src/modules/fetch-helper.js
@@ -11,4 +11,26 @@ const checkResponse = (res) => {
   return res.json();
 };
 
-export { fetchHelper, checkResponse };
+const getRandomFishData = () => {
+  // generate random number between 1 and 34342
+  const speciesCodeArr = [
+    2,
+    57917,
+    7198,
+    5205,
+    25417,
+    22822,
+    22963,
+    1353,
+    66825,
+    7199,
+  ];
+  const randomArrayIndex = Math.floor(Math.random() * speciesCodeArr.length);
+  const randSpeciesNo = speciesCodeArr[randomArrayIndex];
+  //  fetch fish data for species number random generated no.
+  return fetchHelper(`species/${randSpeciesNo}`).then((res) => {
+    return res.data[0];
+  });
+};
+
+export { fetchHelper, getRandomFishData };
diff --git a/src/modules/fish-card.js b/src/modules/fish-card.js
@@ -0,0 +1,53 @@
+import React from "react";
+
+const FishCard = ({
+  Genus, //
+  Species, //
+  Vulnerability, // stats
+  Length, // stats
+  Dangerous, // stats
+  Electrogenic, // stats
+  Comments, //-
+  image, //-
+}) => {
+  if (!Genus) {
+    return <h3>...Loading</h3>;
+  }
+  return (
+    <article>
+      <h2>
+        {Genus} {Species}
+      </h2>
+      <img src={image} alt="fish pic" />
+      <fieldset>
+        <legend>Stats</legend>
+        <ul>
+          <li>
+            <span role="img" aria-label="">
+              ⚠️
+            </span>{" "}
+            Danger: {Dangerous}{" "}
+            <span role="img" aria-label="">
+              ⚠️
+            </span>{" "}
+          </li>
+          <li>Vulnerability: {Vulnerability}</li>
+          <li>Length: {Length} mm</li>
+          <li>
+            <span role="img" aria-label="">
+              ⚡
+            </span>{" "}
+            Lightning magic: {Electrogenic}
+            <span role="img" aria-label="">
+              ⚡
+            </span>
+          </li>
+        </ul>
+      </fieldset>
+      <h3>Description:</h3>
+      <p>{Comments}</p>
+    </article>
+  );
+};
+
+export default FishCard;