Working landing page and fight screen load button

Relates #2 #8 Co-authored-by: shaya <[email protected]>
fac20 · Sep 17, 2020 · 75318e4 · 75318e4
1 parent 838eab4
commit 75318e4
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 22 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,33 +1,19 @@
 import React from "react";
 import "./App.css";
-import FishCard from "./modules/fish-card";
-import { getRandomFishData } from "./modules/fetch-helper";
 import LandingPage from "./modules/landing-page";
+import FightPage from "./modules/fight-page";
 
 function App() {
-  const [fishData, setFishData] = React.useState(null);
-  // opponentFish data
-
-  // button activated effect - rejects button
-  React.useEffect(() => {
-    getRandomFishData().then((data) => {
-      setFishData(data);
-    });
-  }, []);
+  const [page, setPage] = React.useState(true);
 
   return (
-    // return landing page on first load - logo and randomizer button
     <div className="App">
       <header className="App-header"></header>
-      {/* title - some kind of fish pun */}
       <body className="App-body">
-        <LandingPage />
-        {/* <FishCard {...fishData} /> */}
-        {/* accept or reject buttons */}
+        {page ? <LandingPage setPage={setPage} /> : <FightPage />}
       </body>
     </div>
   );
 }
-//landing page function
-//fight page function
+
 export default App;
diff --git a/public/Sword-Fish-Fencing.png → src/logo.png b/public/Sword-Fish-Fencing.png → src/logo.png
diff --git a/src/modules/fight-page.js b/src/modules/fight-page.js
@@ -0,0 +1,33 @@
+import React from "react";
+import FishCard from "./fish-card";
+import { getRandomFishData } from "./fetch-helper";
+
+const FightPage = () => {
+  const [fishData, setFishData] = React.useState(null);
+  const [opponentFishData, setOpponentFishData] = React.useState(null);
+
+  // button activated effect - rejects button
+  React.useEffect(() => {
+    getRandomFishData().then((data) => {
+      setFishData(data);
+    });
+  }, []);
+  return (
+    <>
+      <h1>Being weighed in the scales</h1>
+      <FishCard {...fishData} />
+      <button>I'm hooked - Accept</button>
+      <button
+        onClick={() => {
+          getRandomFishData().then((data) => {
+            setFishData(data);
+          });
+        }}
+      >
+        A load of pollocks! - Choose again.
+      </button>
+    </>
+  );
+};
+
+export default FightPage;
diff --git a/src/modules/landing-page.js b/src/modules/landing-page.js
@@ -1,17 +1,19 @@
 import React from "react";
-import logo from "Sword-Fish-Fencing.png";
+import logo from "../logo.png";
+// import FishPage from "./fight-page";
+import { loadFish } from "../App";
 
-const LandingPage = () => {
+const LandingPage = ({ setPage }) => {
   return (
     <>
       <h1>Fish Fight!</h1>
       <img
-        onClick={/*generate fight page with first fish*/}
+        onClick={() => setPage(false)}
         src={logo}
         className="App-logo"
         alt="logo"
       />
-      <button onClick={/*generate fight page with first fish*/}>
+      <button onClick={() => setPage(false)}>
         There are plenty of fish in the sea. Which will you be?
       </button>
     </>