Add page flow

client/src/App.js

@@ -1,16 +1,19 @@
 import "./App.css";
 import React, { useState } from "react";
 import Overlay from "./components/Overlay";
+import Landing from "./components/Landing";
 import Welcome from "./components/Welcome";
-import Setup from "./components/Setup";
+import Topics from "./components/Topics";
+import Foods from "./components/Foods";
 import Navbar from "./components/Navbar";
 import Council from "./components/Council";
 
 function App() {
   const [name, setName] = useState("");
   const [topic, setTopic] = useState("");
   const [foods, setFoods] = useState([]);
-  const [currentView, setCurrentView] = useState("welcome");
+  const pages = ["landing", "welcome", "issues", "foods", "council"];
+  const [currentView, setCurrentView] = useState(pages[0]);
   const [backgroundImageURL, setBackgroundImageURL] = useState(
     "/images/welcome-background.jpg"
   );
@@ -21,39 +24,44 @@ function App() {
     backgroundPosition: "center",
     height: "100vh",
     width: "100vw",
-    minWidth: "0px",
   };
 
   const isActive = currentView !== "council";
 
-  function enterSetup(name) {
-    setName(name);
-    setCurrentView("setup");
-  }
-
-  function enterCouncil(topic, foods) {
-    setTopic(topic);
-    setFoods(foods);
+  function continueForward(props) {
+    if (props && props.hasOwnProperty("name")) {
+      setName(props.name);
+    } else if (
+      props &&
+      props.hasOwnProperty("topic") &&
+      props.hasOwnProperty("foods")
+    ) {
+      setTopic(props.topic);
+      setFoods(props.Foods);
+    }
 
-    setBackgroundImageURL("/images/council-background-test.png");
-
-    setCurrentView("council");
+    const currentIndex = pages.indexOf(currentView);
+    const nextIndex = (currentIndex + 1) % pages.length; // Use modulus to cycle back to the start
+    setCurrentView(pages[nextIndex]);
   }
 
+  // Placeholder for goBack function implementation
+
   return (
-    <div
-      className="App"
-      style={backgroundStyle}
-    >
+    <div className="App" style={backgroundStyle}>
       <Overlay isActive={isActive}>
-        {currentView === "welcome" ? (
-          <Welcome onEnterSetup={enterSetup} />
-        ) : currentView === "setup" ? (
-          <Setup onEnterCouncil={enterCouncil} />
+        {currentView === pages[0] ? (
+          <Landing onContinueForward={continueForward} />
+        ) : currentView === pages[1] ? (
+          <Welcome onContinueForward={continueForward} />
+        ) : currentView === pages[2] ? (
+          <Topics onContinueForward={continueForward} />
+        ) : currentView === pages[3] ? (
+          <Foods onContinueForward={continueForward} />
         ) : (
           <div>
             <Navbar topic={topic} />
-            <Council options={{ name: name, topic: topic, foods: foods }} />
+            <Council options={{ name, topic, foods }} />
           </div>
         )}
       </Overlay>

client/src/components/Landing.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+import NameInput from "./NameInput";
+
+function Welcome({ onEnterSetup }) {
+  const welcomeStyle = {
+    zIndex: 10,
+    color: "white",
+    textAlign: "center",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-around",
+    alignItems: "center",
+  };
+
+  return (
+    <div style={welcomeStyle}>
+      {/* Wrap the text content for individual styling */}
+      <div>
+        <h2>welcome to</h2>
+        <h1>COUNCIL OF FOODS</h1>
+      </div>
+      <NameInput onEnterSetup={onEnterSetup} />
+    </div>
+  );
+}
+
+export default Welcome;

client/src/components/Topics.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Topics() {
+  return <div></div>;
+}
+
+export default Topics;

client/src/components/Welcome.jsx

@@ -1,28 +1,6 @@
 import React from "react";
-import NameInput from "./NameInput";
-
-function Welcome({ onEnterSetup }) {
-  const welcomeStyle = {
-    zIndex: 10,
-    color: "white",
-    textAlign: "center",
-    minHeight: "100vh",
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "space-around",
-    alignItems: "center",
-  };
-
-  return (
-    <div style={welcomeStyle}>
-      {/* Wrap the text content for individual styling */}
-      <div>
-        <h2>welcome to</h2>
-        <h1>COUNCIL OF FOODS</h1>
-      </div>
-      <NameInput onEnterSetup={onEnterSetup} />
-    </div>
-  );
+function Welcome() {
+  return <div></div>;
 }
 
 export default Welcome;