Refactor Code

mazharalibaig · Oct 2, 2023 · 017cc86 · 017cc86
1 parent 55689cb
commit 017cc86
Show file tree

Hide file tree

Showing 13 changed files with 340 additions and 434 deletions.
diff --git a/fridgeflix-frontend/.firebase/hosting.YnVpbGQ.cache b/fridgeflix-frontend/.firebase/hosting.YnVpbGQ.cache
@@ -1,9 +1,9 @@
-asset-manifest.json,1696274897335,573ae7b3a3ceb5148415df6019ad9eeeccf1d3c7a7a501ccdfbfdc857c0b3d01
-index.html,1696274897335,1d34dbeae113226b332c3c56a614180263953296b5a1e283df3d4c477ba42ee1
-static/css/main.4066f7cf.css,1696274897341,3eeece4f3400e4402107b0eab7f38e32231626500450f0da7c0c9b60f5892d41
-static/css/main.4066f7cf.css.map,1696274897340,330b380bd5172429c671cbe2645b2b6d47ddb1d855c733bee39ecc270c26a9cb
-static/js/main.c923b12a.js.LICENSE.txt,1696274897340,51d661b9f06db1e544b52d2cf226d67371b12776c4ce8ee67adbd4fc5ddd635e
-robots.txt,1696274878933,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
-manifest.json,1696274878930,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
-static/js/main.c923b12a.js,1696274897340,d42721fc29f258bd8c87b7d7cc0a49a240c8353fdde8445306bb4d86959705c2
-static/js/main.c923b12a.js.map,1696274897341,7f7d08b47394b02ed8cecb2f6be3fe8b9093cbfc99c3de7bc837b63f93f555be
+asset-manifest.json,1696286081808,0d48636bc78ccb75f5d569431d5a698d0949f52d5fcfe1de53010003b3654381
+robots.txt,1696286051468,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
+manifest.json,1696286051466,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
+index.html,1696286081808,2f8238ced5aac54429f4d787e239b8f14b4d9c01afc1c457a526b5bd3c71462c
+static/js/main.5223ea86.js.LICENSE.txt,1696286081814,51d661b9f06db1e544b52d2cf226d67371b12776c4ce8ee67adbd4fc5ddd635e
+static/css/main.b6fc4e61.css,1696286081814,913ddd2a068e50cc46fdb27f43246dae60a8c227ee6572e78c19d3fe5136cadd
+static/css/main.b6fc4e61.css.map,1696286081814,c1890b3185aecd1df80563472edadd32e25c935352ded6ff6bb1dbbd97fe8cc7
+static/js/main.5223ea86.js,1696286081814,13ce1da3c8f0135dec878fadc614333c7dc9ab833606510dace2950597ed21f3
+static/js/main.5223ea86.js.map,1696286081814,96a23ae835fca0e0057430dd16bb67f3f8fcbf48a73a4dddbcc18557931f2af4
diff --git a/fridgeflix-frontend/src/App.js b/fridgeflix-frontend/src/App.js
@@ -2,74 +2,12 @@ import React, { useState, useCallback, useEffect } from "react";
 import axios from "axios";
 import { Chip, Button, CircularProgress } from "@mui/material";
 import "./FridgeFlix.css";
-
-const VEGETABLES = [
-  "avocado",
-  "bell peppers",
-  "broccoli",
-  "cabbage",
-  "carrots",
-  "cauliflower",
-  "celery",
-  "cucumber",
-  "garlic",
-  "lettuce",
-  "mushrooms",
-  "olives",
-  "onions",
-  "peppers",
-  "potatoes",
-  "spinach",
-  "tomatoes",
-];
-
-const PROTEINS = [
-  "anchovies",
-  "beef",
-  "bread",
-  "butter",
-  "cheese",
-  "chicken",
-  "clams",
-  "crab",
-  "duck",
-  "eggs",
-  "fish",
-  "lamb",
-  "lobster",
-  "salmon",
-  "sardines",
-  "shrimp",
-  "tofu",
-  "trout",
-  "turkey",
-  "tuna",
-];
-
-const SPICES = [
-  "basil",
-  "black pepper",
-  "cardamom",
-  "chili powder",
-  "chives",
-  "cilantro",
-  "cinnamon",
-  "cloves",
-  "coriander",
-  "cumin",
-  "fennel",
-  "ginger",
-  "mint",
-  "nutmeg",
-  "oregano",
-  "paprika",
-  "parsley",
-  "rosemary",
-  "saffron",
-  "salt",
-  "thyme",
-  "turmeric",
-];
+import { VEGETABLES, PROTEINS, SPICES } from "./Constants";
+import Banner from "./Banner";
+import WordCloud from "./WordCloud";
+import RecipeResults from "./RecipeResults";
+import Footer from "./Footer";
+import { distributeWordsToRows } from "./utilities";
 
 const SearchComponent = () => {
   const [selectedWords, setSelectedWords] = useState([]);
@@ -106,10 +44,13 @@ const SearchComponent = () => {
     });
 
     try {
-      const response = await axios.post("https://cba5-2601-282-4100-9f10-68d5-7d8f-1bf5-2e12.ngrok-free.app/search", {
-        searchTerm: ingredients.join(" "),
-        mealType: mealType,
-      });
+      const response = await axios.post(
+        "https://cba5-2601-282-4100-9f10-68d5-7d8f-1bf5-2e12.ngrok-free.app/search",
+        {
+          searchTerm: ingredients.join(" "),
+          mealType: mealType,
+        }
+      );
       setRecipes(response.data.metaphorResults);
     } catch (error) {
       console.error("Error making API call:", error);
@@ -206,96 +147,4 @@ const SearchComponent = () => {
   );
 };
 
-const Banner = () => (
-  <div className="banner">
-    FridgeFlix<span className="trademark-symbol">®</span>
-  </div>
-);
-
-const WordCloud = ({
-  words,
-  selectedWords,
-  onClick,
-  header,
-  chipClass,
-  selectedChipClass,
-  headerClass,
-  onCustomInputChange,
-  customInputValue,
-}) => (
-  <div className="word-cloud">
-    {header && <div className={headerClass}>{header}</div>}
-    {words.map((row, rowIndex) => (
-      <div key={rowIndex} className="word-row">
-        {row.map((word) => (
-          <Chip
-            key={word}
-            label={word}
-            onClick={() => onClick(word)}
-            variant="outlined"
-            className={
-              selectedWords.includes(word) ? selectedChipClass : chipClass
-            }
-          />
-        ))}
-      </div>
-    ))}
-    {header === "Spices" && (
-      <input
-        className="custom-ingredient-input"
-        value={customInputValue || ""}
-        placeholder={`Enter Items not found above as "Squash Venison Fenugreek"`}
-        onChange={(e) => onCustomInputChange(e.target.value)}
-      />
-    )}
-  </div>
-);
-
-const RecipeResults = ({ recipes }) => (
-  <div className="recipe-results">
-    {recipes.map((recipe, index) => {
-      const dishName = Object.keys(recipe)[0];
-      const links = recipe[dishName];
-      return (
-        <div key={index} className="recipe-item">
-          <h3 className="recipe-title">{dishName}</h3>
-          <ul style={{ listStyleType: "none", padding: 0 }}>
-            {links.map((link, linkIndex) => (
-              <li key={linkIndex}>
-                <a href={link} target="_blank" rel="noopener noreferrer">
-                  {new URL(link).hostname}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      );
-    })}
-  </div>
-);
-
-const Footer = () => (
-  <div className="footer">
-    Created by{" "}
-    <a
-      href="https://www.linkedin.com/in/mazharalibaig/"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      Mazhar Ali Baig
-    </a>
-  </div>
-);
-
-function distributeWordsToRows(words) {
-  let rows = [];
-  let remainingWords = [...words];
-  while (remainingWords.length) {
-    let rowCount = Math.ceil(remainingWords.length * 0.4);
-    let row = remainingWords.splice(0, rowCount);
-    rows.push(row);
-  }
-  return rows;
-}
-
 export default SearchComponent;
diff --git a/fridgeflix-frontend/src/Banner.js → fridgeflix-frontend/src/Banner.jsx b/fridgeflix-frontend/src/Banner.js → fridgeflix-frontend/src/Banner.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 const Banner = () => (
   <div className="banner">

diff --git a/fridgeflix-frontend/src/Constants.js b/fridgeflix-frontend/src/Constants.js
@@ -0,0 +1,67 @@
+export const VEGETABLES = [
+  "avocado",
+  "bell peppers",
+  "broccoli",
+  "cabbage",
+  "carrots",
+  "cauliflower",
+  "celery",
+  "cucumber",
+  "garlic",
+  "lettuce",
+  "mushrooms",
+  "olives",
+  "onions",
+  "peppers",
+  "potatoes",
+  "spinach",
+  "tomatoes",
+];
+
+export const PROTEINS = [
+  "anchovies",
+  "beef",
+  "bread",
+  "butter",
+  "cheese",
+  "chicken",
+  "clams",
+  "crab",
+  "duck",
+  "eggs",
+  "fish",
+  "lamb",
+  "lobster",
+  "salmon",
+  "sardines",
+  "shrimp",
+  "tofu",
+  "trout",
+  "turkey",
+  "tuna",
+];
+
+export const SPICES = [
+  "basil",
+  "black pepper",
+  "cardamom",
+  "chili powder",
+  "chives",
+  "cilantro",
+  "cinnamon",
+  "cloves",
+  "coriander",
+  "cumin",
+  "fennel",
+  "ginger",
+  "mint",
+  "nutmeg",
+  "oregano",
+  "paprika",
+  "parsley",
+  "rosemary",
+  "saffron",
+  "salt",
+  "thyme",
+  "turmeric",
+];
diff --git a/fridgeflix-frontend/src/Footer.jsx b/fridgeflix-frontend/src/Footer.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Footer = () => (
+    <div className="footer">
+      Created by{" "}
+      <a
+        href="https://www.linkedin.com/in/mazharalibaig/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Mazhar Ali Baig
+      </a>
+    </div>
+  );
+
+export default Footer;