From a92c24f88b597e5f0df1c8aea7524270ffa975a8 Mon Sep 17 00:00:00 2001
From: Edgar Zanella Alvarenga <e@vaz.io>
Date: Sat, 15 Jul 2023 18:23:45 +0200
Subject: [PATCH] Simplify RenderFoods use

---
 src/components/RenderFoods.tsx | 9 +++++++--
 src/routes/FoodOfTheMonth.tsx  | 8 ++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/RenderFoods.tsx b/src/components/RenderFoods.tsx
index abc2e7b..65893bd 100644
--- a/src/components/RenderFoods.tsx
+++ b/src/components/RenderFoods.tsx
@@ -1,7 +1,7 @@
-
 import type { FoodList } from "../types/food";
 import Item from "./Item";
 import { Grid, styled } from "@mui/material";
+import { FunctionComponent } from "react"
 
 const StyledGrid = styled(Grid)(() => ({
   display: "flex",
@@ -10,8 +10,13 @@ const StyledGrid = styled(Grid)(() => ({
   margin: "0.25em",
 }));
 
+interface RenderFoodProps {
+  foodList: FoodList
+}
+
 //render the grid of foods
-function RenderFoods(foodList: FoodList) {
+const RenderFoods:FunctionComponent<RenderFoodProps> = (props:RenderFoodProps) => {
+  const foodList = props.foodList
   const foodItems = foodList.map((item, key) => {
     return (
       <Grid item xs={4} key={key}>
diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index 633e258..5f69a35 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -33,10 +33,6 @@ export default function FoodOfTheMonth() {
   const fruitsList = filterFoodType(monthFood, "Fruits");
   const veggiesList = filterFoodType(monthFood, "Veggies");
 
-  //renders the fruits, veggies and others
-  const RenderFruits = () => RenderFoods(fruitsList);
-  const RenderVeggies = () => RenderFoods(veggiesList);
-
   //variables to handle the changing tabs
   const [foodType, setFoodType] = useState("Fruits" as FoodCategory);
   // @ts-ignore
@@ -48,9 +44,9 @@ export default function FoodOfTheMonth() {
   const changeTab = (foodType: FoodCategory) => {
     switch (foodType) {
       case "Fruits":
-        return <RenderFruits />;
+        return <RenderFoods foodList={fruitsList}/>;
       case "Veggies":
-        return <RenderVeggies />;
+        return <RenderFoods foodList={veggiesList}/>;
     }
   };