From f2553c5c2864f346d60fa5911e3fd37503017cf4 Mon Sep 17 00:00:00 2001 From: Azizi Adeyemo Date: Thu, 17 Sep 2020 11:47:57 +0100 Subject: [PATCH 1/4] fish card component created Relates #7 #2 Co-authored-by: shaya --- src/modules/fish-card.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/modules/fish-card.js diff --git a/src/modules/fish-card.js b/src/modules/fish-card.js new file mode 100644 index 0000000..0277759 --- /dev/null +++ b/src/modules/fish-card.js @@ -0,0 +1,35 @@ +import React from "react"; + +const fishCard = ({ + Genus, // + Species, // + // Fresh, + // Saltwater, + // BodyShapeI, + Vulnerability, // stats + Length, // stats + Dangerous, // stats + Electrogenic, // stats + Description, //- + image, //- +}) => { + return ( +
+

+ {Genus}; {Species} +

+ {image} +
+ Stats +
    +
      Danger: {Dangerous}
    +
      Vulnerability: {Vulnerability}
    +
      Length: {Length}
    +
      Electrogenic: {Electrogenic}
    +
+
+

Description:

+

{Description}

+
+ ); +}; From b34e2125c23bf2b4ace63ec32cb10954180bcfed Mon Sep 17 00:00:00 2001 From: Azizi Adeyemo Date: Thu, 17 Sep 2020 12:45:19 +0100 Subject: [PATCH 2/4] function to get random fish data from API Relates #7 #2 Co-authored-by: shaya --- src/modules/fetch-helper.js | 22 +++++++++++++++++++++- src/modules/fish-card.js | 8 +++++--- 2 files changed, 26 insertions(+), 4 deletions(-) diff --git a/src/modules/fetch-helper.js b/src/modules/fetch-helper.js index 02dbdd9..9cf23f7 100644 --- a/src/modules/fetch-helper.js +++ b/src/modules/fetch-helper.js @@ -11,4 +11,24 @@ 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 randomNum = Math.floor(Math.random() * speciesCodeArr.length); + const randFishNo = speciesCodeArr[randomNum]; + // fetch fish data for species number random generated no. + return fetchHelper(`species/${randFishNo}`); +}; + +export { fetchHelper, getRandomFishData }; diff --git a/src/modules/fish-card.js b/src/modules/fish-card.js index 0277759..e1e7637 100644 --- a/src/modules/fish-card.js +++ b/src/modules/fish-card.js @@ -1,6 +1,6 @@ import React from "react"; -const fishCard = ({ +const FishCard = ({ Genus, // Species, // // Fresh, @@ -18,14 +18,14 @@ const fishCard = ({

{Genus}; {Species}

- {image} + fish pic
Stats
      Danger: {Dangerous}
      Vulnerability: {Vulnerability}
      Length: {Length}
    -
      Electrogenic: {Electrogenic}
    +
      Lightning magic: {Electrogenic}

Description:

@@ -33,3 +33,5 @@ const fishCard = ({ ); }; + +export default FishCard; From 9a0b8a9f48b3bc8186f2f5bc9249ca21b6c7c6c0 Mon Sep 17 00:00:00 2001 From: Azizi Adeyemo Date: Thu, 17 Sep 2020 15:01:24 +0100 Subject: [PATCH 3/4] draw fish card to page Relates #2 #7 Co-authored-by: shaya --- src/App.css | 38 ------------------------------------- src/App.js | 29 +++++++++++++++++++++++++++- src/modules/fetch-helper.js | 8 +++++--- src/modules/fish-card.js | 9 +++------ 4 files changed, 36 insertions(+), 48 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..e69de29 100644 --- 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 index 940ac07..d86383d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,40 @@ 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(fish); + console.log(fishData); + React.useEffect(() => { + getRandomFishData().then((data) => { + setFishData(data); + }); + }, []); + return (
- + + +
); } export default App; + +const fish = { + SpecCode: 1353, + Genus: "Serranus", + Species: "cabrilla", + BodyShapeI: "fusiform / normal", + Vulnerability: 35.98, + Length: 40, + Dangerous: "harmless", + DangerousRef: null, + Electrogenic: "no special ability", + Comments: + "Found on the shelf and upper slope on rocks, Posidonia beds, sand and mud bottoms (Ref. 5506). Feed on fishes, cephalopods and crustaceans (Ref. 27121).", + image: "https://www.fishbase.de/images/species/Secab_u0.jpg", +}; diff --git a/src/modules/fetch-helper.js b/src/modules/fetch-helper.js index 9cf23f7..8a8b52b 100644 --- a/src/modules/fetch-helper.js +++ b/src/modules/fetch-helper.js @@ -25,10 +25,12 @@ const getRandomFishData = () => { 66825, 7199, ]; - const randomNum = Math.floor(Math.random() * speciesCodeArr.length); - const randFishNo = speciesCodeArr[randomNum]; + const randomArrayIndex = Math.floor(Math.random() * speciesCodeArr.length); + const randSpeciesNo = speciesCodeArr[randomArrayIndex]; // fetch fish data for species number random generated no. - return fetchHelper(`species/${randFishNo}`); + 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 index e1e7637..a430921 100644 --- a/src/modules/fish-card.js +++ b/src/modules/fish-card.js @@ -3,20 +3,17 @@ import React from "react"; const FishCard = ({ Genus, // Species, // - // Fresh, - // Saltwater, - // BodyShapeI, Vulnerability, // stats Length, // stats Dangerous, // stats Electrogenic, // stats - Description, //- + Comments, //- image, //- }) => { return (

- {Genus}; {Species} + {Genus} {Species}

fish pic
@@ -29,7 +26,7 @@ const FishCard = ({

Description:

-

{Description}

+

{Comments}

); }; From 669d9929fd5373fbf447e9eeebc49cd67dd14761 Mon Sep 17 00:00:00 2001 From: Azizi Adeyemo Date: Thu, 17 Sep 2020 15:13:33 +0100 Subject: [PATCH 4/4] Allowed FishCard to run and return a loading message with null input Relates #2 #7 Co-authored-by: shaya --- src/App.js | 17 +---------------- src/modules/fish-card.js | 27 +++++++++++++++++++++++---- 2 files changed, 24 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index d86383d..8b61780 100644 --- a/src/App.js +++ b/src/App.js @@ -4,7 +4,7 @@ import FishCard from "./modules/fish-card"; import { getRandomFishData } from "./modules/fetch-helper"; function App() { - const [fishData, setFishData] = React.useState(fish); + const [fishData, setFishData] = React.useState(null); console.log(fishData); React.useEffect(() => { getRandomFishData().then((data) => { @@ -23,18 +23,3 @@ function App() { } export default App; - -const fish = { - SpecCode: 1353, - Genus: "Serranus", - Species: "cabrilla", - BodyShapeI: "fusiform / normal", - Vulnerability: 35.98, - Length: 40, - Dangerous: "harmless", - DangerousRef: null, - Electrogenic: "no special ability", - Comments: - "Found on the shelf and upper slope on rocks, Posidonia beds, sand and mud bottoms (Ref. 5506). Feed on fishes, cephalopods and crustaceans (Ref. 27121).", - image: "https://www.fishbase.de/images/species/Secab_u0.jpg", -}; diff --git a/src/modules/fish-card.js b/src/modules/fish-card.js index a430921..18d0b08 100644 --- a/src/modules/fish-card.js +++ b/src/modules/fish-card.js @@ -10,6 +10,9 @@ const FishCard = ({ Comments, //- image, //- }) => { + if (!Genus) { + return

...Loading

; + } return (

@@ -19,10 +22,26 @@ const FishCard = ({
Stats
    -
      Danger: {Dangerous}
    -
      Vulnerability: {Vulnerability}
    -
      Length: {Length}
    -
      Lightning magic: {Electrogenic}
    +
  • + + ⚠️ + {" "} + Danger: {Dangerous}{" "} + + ⚠️ + {" "} +
    • +
  • Vulnerability: {Vulnerability}
    • +
  • Length: {Length} mm
    • +
  • + + ⚡ + {" "} + Lightning magic: {Electrogenic} + + ⚡ + +

Description: