Fix passing food object to Council

Nonhuman-Nonsense · Apr 5, 2024 · 6e7e1af · 6e7e1af
1 parent cac43e9
commit 6e7e1af
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -59,9 +59,11 @@ function App() {
     setIsActiveOverlay(true);
 
     if (!topic) {
+      // Reset from the start
       setHumanName("");
       setCurrentView("landing");
     } else {
+      // Reset from foods selection
       setCurrentView("foods");
     }
   }

diff --git a/client/src/components/Council.jsx b/client/src/components/Council.jsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import io from "socket.io-client";
-import foodsData from "../foods.json";
 import FoodItem from "./FoodItem";
 import Overlay from "./Overlay";
 import About from "./About";
@@ -14,8 +13,7 @@ import useWindowSize from "../hooks/useWindowSize";
 
 function Council({ options }) {
   const { foods } = options;
-  const { foodsData } = foodsData;
-  const [activeOverlay, setActiveOverlay] = useState(""); // Tracks which overlay to show
+  const [activeOverlay, setActiveOverlay] = useState("");
   const { width: screenWidth } = useWindowSize();
 
   const foodsContainerStyle = {
@@ -92,7 +90,7 @@ function Council({ options }) {
         <div style={foodsContainerStyle}>
           {foods.map((food, index) => (
             <FoodItem
-              key={index}
+              key={food.name}
               food={food}
               index={index}
               total={foods.length}

diff --git a/client/src/components/FoodInfo.jsx b/client/src/components/FoodInfo.jsx
@@ -6,8 +6,6 @@ function FoodInfo({ food }) {
     return null;
   }
 
-  console.log(food.name);
-
   const capitalizedFoodName = capitalizeFirstLetter(food.name);
 
   return (

diff --git a/client/src/components/FoodItem.jsx b/client/src/components/FoodItem.jsx
@@ -83,9 +83,12 @@ function FoodItem({ food, index, total, screenWidth }) {
 
   return (
     <div style={foodItemStyle(index, total)}>
-      <img src={`/images/foods/${food}.png`} style={responsiveStyle} />
       <img
-        src={`/images/foods/${food}.png`}
+        src={`/images/foods/${food.name}.png`}
+        style={responsiveStyle}
+      />
+      <img
+        src={`/images/foods/${food.name}.png`}
         style={{ ...responsiveStyle, ...foodImageShadowStyle(index, total) }}
       />
     </div>

diff --git a/client/src/components/Foods.jsx b/client/src/components/Foods.jsx
@@ -21,8 +21,6 @@ function Foods({ topic, onContinueForward }) {
   }
 
   function handleOnMouseEnter(food) {
-    console.log("Setting current food:", food); // This should log the entire food object
-
     setCurrentFood(food);
   }