From 6e7e1af5995aeae38c106ff3c993a9d9a422764f Mon Sep 17 00:00:00 2001
From: albin-karlsson <55614148+albin-karlsson@users.noreply.github.com>
Date: Sat, 6 Apr 2024 00:19:12 +0200
Subject: [PATCH] Fix passing food object to Council

---
 client/src/App.js                  | 2 ++
 client/src/components/Council.jsx  | 6 ++----
 client/src/components/FoodInfo.jsx | 2 --
 client/src/components/FoodItem.jsx | 7 +++++--
 client/src/components/Foods.jsx    | 2 --
 5 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/client/src/App.js b/client/src/App.js
index 40b366e..605ee49 100644
--- 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
index 290def3..25577c3 100644
--- 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
index 75177b6..3ee121b 100644
--- 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
index 520b429..771fd26 100644
--- 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
index ef54668..57e8133 100644
--- 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);
   }