Manage topics component

client/src/App.css

@@ -55,6 +55,17 @@ h4 {
   font-weight: normal;
 }
 
+.text-container {
+  z-index: 10;
+  color: white;
+  text-align: center;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
 .link {
   color: white;
   text-decoration: none;
@@ -108,6 +119,10 @@ h4 {
   cursor: pointer;
 }
 
+.wide-button {
+  padding: 8px 100px 8px 100px !important;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

client/src/App.js

@@ -12,7 +12,7 @@ function App() {
   const [name, setName] = useState("");
   const [topic, setTopic] = useState("");
   const [foods, setFoods] = useState([]);
-  const pages = ["landing", "welcome", "issues", "foods", "council"];
+  const pages = ["landing", "welcome", "topics", "foods", "council"];
   const [currentView, setCurrentView] = useState(pages[0]);
   const [backgroundImageURL, setBackgroundImageURL] = useState(
     "/images/welcome-background.jpg"
@@ -31,13 +31,10 @@ function App() {
   function continueForward(props) {
     if (props && props.hasOwnProperty("name")) {
       setName(props.name);
-    } else if (
-      props &&
-      props.hasOwnProperty("topic") &&
-      props.hasOwnProperty("foods")
-    ) {
+    } else if (props && props.hasOwnProperty("topic")) {
       setTopic(props.topic);
-      setFoods(props.Foods);
+    } else if (props && props.hasOwnProperty("foods")) {
+      setFoods(props.foods);
     }
 
     const currentIndex = pages.indexOf(currentView);
@@ -46,18 +43,19 @@ function App() {
   }
 
   // Placeholder for goBack function implementation
+  function goBack() {}
 
   return (
     <div className="App" style={backgroundStyle}>
       <Overlay isActive={isActive}>
         {currentView === pages[0] ? (
           <Landing onContinueForward={continueForward} />
         ) : currentView === pages[1] ? (
-          <Welcome onContinueForward={continueForward} />
+          <Welcome name={name} onContinueForward={continueForward} />
         ) : currentView === pages[2] ? (
           <Topics onContinueForward={continueForward} />
         ) : currentView === pages[3] ? (
-          <Foods onContinueForward={continueForward} />
+          <Foods topic={topic} onContinueForward={continueForward} />
         ) : (
           <div>
             <Navbar topic={topic} />

client/src/components/FoodButton.jsx

@@ -1,20 +1,24 @@
-import React, { useState } from "react";
+import React from "react";
 
-function FoodButton({ name, onSelectFood, onDeselectFood }) {
-  const [isSelected, setIsSelected] = useState(false);
+function FoodButton({
+  name,
+  onSelectFood,
+  onDeselectFood,
+  isSelected,
+  selectLimitReached,
+}) {
+  const isModerator = onSelectFood === undefined;
 
   const imageUrl = `/images/foods/${name}.png`;
 
   function handleClickFood() {
-    if (!isSelected) {
-      // Select food
-      onSelectFood(name);
-    } else {
-      // Deselect food
-      onDeselectFood(name);
+    if (!isModerator && (!selectLimitReached || isSelected)) {
+      if (!isSelected) {
+        onSelectFood?.(name);
+      } else {
+        onDeselectFood?.(name);
+      }
     }
-
-    setIsSelected(!isSelected);
   }
 
   const buttonStyle = {
@@ -27,29 +31,29 @@ function FoodButton({ name, onSelectFood, onDeselectFood }) {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-
-    border: isSelected ? "2px solid white" : "2px solid transparent", // Apply a white border if selected
+    border: isModerator // Use isModerator to determine border style
+      ? "4px solid white"
+      : isSelected
+      ? "2px solid white"
+      : selectLimitReached
+      ? "2px solid transparent"
+      : "2px solid transparent",
   };
 
   const imageStyle = {
     width: "80%",
     height: "80%",
     objectFit: "cover",
-    cursor: "pointer",
+    cursor:
+      isModerator || (selectLimitReached && !isSelected)
+        ? "default"
+        : "pointer",
     borderRadius: "50%",
   };
 
   return (
-    <div
-      className="food-button"
-      style={buttonStyle}
-    >
-      <img
-        src={imageUrl}
-        alt={name}
-        style={imageStyle}
-        onClick={handleClickFood}
-      />
+    <div className="food-button" style={buttonStyle} onClick={handleClickFood}>
+      <img src={imageUrl} alt={name} style={imageStyle} />
     </div>
   );
 }

client/src/components/Foods.jsx

@@ -0,0 +1,71 @@
+// Import statements are consolidated at the top.
+import React, { useState } from "react";
+import FoodButton from "./FoodButton";
+
+function Foods({ topic, onContinueForward }) {
+  // State and variables declaration section.
+  const [selectedFoods, setSelectedFoods] = useState([]);
+  const moderator = "water";
+  const foods = ["banana", "bratwurst", "lollipop", "meat", "potato", "tomato"];
+  const minFoods = 2;
+  const maxFoods = 5;
+  // Function to handle proceeding forward if the conditions are met.
+  function continueForward() {
+    if (selectedFoods.length >= minFoods && selectedFoods.length <= maxFoods) {
+      onContinueForward({ foods: selectedFoods });
+    }
+  }
+
+  // Function to handle the selection of a food item.
+  function selectFood(foodName) {
+    if (selectedFoods.length < maxFoods && !selectedFoods.includes(foodName)) {
+      setSelectedFoods((prevFoods) => [...prevFoods, foodName]);
+    }
+  }
+
+  // Function to handle the deselection of a food item.
+  function deselectFood(foodName) {
+    setSelectedFoods((prevFoods) =>
+      prevFoods.filter((food) => food !== foodName)
+    );
+  }
+
+  // JSX structure of the component.
+  return (
+    <div className="text-container">
+      <div>
+        <h1>THE FOODS:</h1>
+        <h4>
+          Please select 2-5 foods
+          <br /> to participate in the discussion about:
+        </h4>
+        <h4>{topic}</h4>
+      </div>
+      <div className="food-buttons">
+        <FoodButton name={moderator} />
+        {foods.map((food) => (
+          <FoodButton
+            key={food}
+            name={food}
+            onSelectFood={selectFood}
+            onDeselectFood={deselectFood}
+            isSelected={selectedFoods.includes(food)}
+            selectLimitReached={selectedFoods.length >= maxFoods}
+          />
+        ))}
+      </div>
+      <button
+        className={`${
+          selectedFoods.length >= minFoods && selectedFoods.length <= maxFoods
+            ? ""
+            : "hidden"
+        } outline-button`}
+        onClick={continueForward}
+      >
+        Start
+      </button>
+    </div>
+  );
+}
+
+export default Foods;

client/src/components/Landing.jsx

@@ -1,26 +1,14 @@
 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",
-  };
-
+function Welcome({ onContinueForward }) {
   return (
-    <div style={welcomeStyle}>
-      {/* Wrap the text content for individual styling */}
+    <div className="text-container">
       <div>
         <h2>welcome to</h2>
         <h1>COUNCIL OF FOODS</h1>
       </div>
-      <NameInput onEnterSetup={onEnterSetup} />
+      <NameInput onContinueForward={onContinueForward} />
     </div>
   );
 }

client/src/components/NameInput.jsx

@@ -26,11 +26,10 @@ function NameInput(props) {
     }
   }
 
-  function enterSetup() {
+  function continueForward() {
     if (name) {
-      props.onEnterSetup(name);
+      props.onContinueForward({ name: name });
     } else {
-      console.log("No name...");
       setIsNameMissing(true);
     }
   }
@@ -39,7 +38,7 @@ function NameInput(props) {
     if (e.key === "Enter") {
       e.preventDefault(); // Prevent the default behavior of the Enter key
 
-      enterSetup();
+      continueForward();
     }
   }
 
@@ -59,7 +58,7 @@ function NameInput(props) {
         <FontAwesomeIcon
           icon={faArrowRight}
           className="input-arrow"
-          onClick={enterSetup}
+          onClick={continueForward}
           style={{ cursor: "pointer" }}
         />
       </div>

client/src/components/Navbar.jsx

@@ -28,52 +28,30 @@ function Navbar({ topic }) {
     <div style={navbarStyle}>
       <div>
         <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="/"
-          >
+          <a className="link" href="/">
             COUNCIL OF FOODS
           </a>
         </h3>
-        <h4>
-          Topic: <br />
-          {topic}
-        </h4>
+        <h4>{topic}</h4>
       </div>
       <div style={{ display: "flex" }}>
         <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            style={linkItemStyle}
-          >
+          <a className="link" href="#" style={linkItemStyle}>
             ABOUT
           </a>
         </h3>
         <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            style={linkItemStyle}
-          >
+          <a className="link" href="#" style={linkItemStyle}>
             SETTINGS
           </a>
         </h3>
         <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            style={linkItemStyle}
-          >
+          <a className="link" href="#" style={linkItemStyle}>
             CONTACT
           </a>
         </h3>
         <h3 style={navbarItemStyle}>
-          <a
-            className="link"
-            href="#"
-            style={linkItemStyle}
-          >
+          <a className="link" href="#" style={linkItemStyle}>
             SHARE
           </a>
         </h3>