remove .env forever and implement pr changes

client/.gitignore

@@ -6,6 +6,8 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.env
+
 
 node_modules
 dist

client/src/Components/LogIn.tsx

@@ -1,20 +1,23 @@
-import axios from "axios";
+import axios, { AxiosResponse } from "axios";
 import { UserButton, useUser, SignInButton } from "@clerk/clerk-react";
 import { useEffect } from "react";
 import "./LogIn.css";
 
+interface ServerResponse {
+  data: boolean;
+}
+
 export default function LogIn() {
-  const { isLoaded, isSignedIn, user } = useUser();
+  const { isSignedIn, user } = useUser();
 
   useEffect(() => {
     if (user) {
-      console.log("Occured");
       const fetchData = async () => {
-        const exists = await axios.get(
+        const existingUser: AxiosResponse<ServerResponse> = await axios.get(
           `http://localhost:3003/api/users/username/${user.username}`,
         );
 
-        if (!exists.data) {
+        if (!existingUser.data) {
           axios.post(`http://localhost:3003/api/users`, {
             username: user.username,
             password: "no_longer_necessary",

client/src/pages/flavor_page/FlavorPage.tsx

@@ -1,64 +1,77 @@
-import styles from ".flavorpage.module.css";
-import React from "react";
+import styles from "./flavorpage.module.css";
+import { useEffect, useState } from "react";
 import ToppingsBar from "../../Components/ToppingsBar";
 import Suggestions from "../../Components/Suggestions";
 import ProductCard from "../../Components/ProductCard";
 import { useParams, useNavigate } from "react-router-dom";
-import { useEffect, useState, useRef } from "react";
 import axios from "axios";
 
-const flavorSuggestions = await axios
-  .get(`http://localhost:3003/api/icecreams/suggestions/3`)
-  .then((res) => res.data);
+async function getFlavorSuggestions() {
+  // type dict = {[key:string]:{id:string, urlLink:string, image:string}[]};
 
-function FlavorPage() {
-  let SuggestionsList = flavorSuggestions.map((dict) => ({
+  const flavorSuggestions = await axios.get(
+    `http://localhost:3003/api/icecreams/suggestions/3`,
+  );
+  return flavorSuggestions.data.map((dict) => ({
     id: dict["_id"],
     urlLink: `/flavor/${dict["name"]}`,
     image: dict["imageURL"],
   }));
+}
 
-  const navigate = useNavigate();
+async function getFlavorInfo(flavor) {
+  const response = await axios.get(
+    `http://localhost:3003/api/icecreams/name/${flavor}`,
+  );
+  return response.data;
+}
 
-  const { flavor } = useParams();
+async function getQuantity(flavor) {
+  const soldQuantity = await axios.get(
+    `http://localhost:3003/api/hof/name/${flavor}`,
+  );
+  return soldQuantity.data.quantity;
+}
 
-  const [creator, setCreator] = useState("");
-  const [quantity, setQuantity] = useState(0);
-  const [image, setImage] = useState("");
+export default function FlavorPage() {
+  const navigate = useNavigate();
+  const { flavor } = useParams();
+  const [state, setState] = useState({ creator: "", quantity: 0, image: "" });
+  const[flavorSuggestions, setFlavorSuggestions] = useState([]);
 
   useEffect(() => {
-    const fetchData = async () => {
-      const flavorInfo = await axios
-        .get(`http://localhost:3003/api/icecreams/name/${flavor}`)
-        .then((res) => res.data);
-      if (flavorInfo) {
-        setCreator(flavorInfo.userId);
-        setImage(flavorInfo.imageURL);
-        const hofFlavors = await axios
-          .get(`http://localhost:3003/api/hof/name/${flavor}`)
-          .then((res) => {
-            setQuantity(res.data.quantity);
-          });
+    async function fetchData() {
+      const gotFlavorSuggestions = await getFlavorSuggestions();
+      const flavorInfo = await getFlavorInfo(flavor);
+      if (gotFlavorSuggestions && flavorInfo) {
+        setFlavorSuggestions(gotFlavorSuggestions);
+        setState({
+          creator: flavorInfo.userId,
+          image: flavorInfo.imageURL,
+          quantity: await getQuantity(flavor),
+        });
       } else {
         navigate("/error_page");
       }
-    };
+    }
     fetchData();
-  }, []);
+  }, [flavor, navigate]);
 
   return (
     <>
       <ProductCard
         name={flavor}
         description={"Description Goes Here!"}
-        image={image}
-        creator={creator}
-        purchaseHistory={quantity}
+        image={state.image}
+        creator={state.creator}
+        purchaseHistory={state.quantity}
+        className={styles.productCard}
       />
       <ToppingsBar />
-      <Suggestions itemList={SuggestionsList} />
+      <Suggestions
+        itemList={flavorSuggestions}
+        className={styles.suggestions}
+      />
     </>
   );
 }
-
-export default FlavorPage;

client/src/pages/home/HomePage.tsx

@@ -147,16 +147,16 @@ export default function HomePage({ currentFlavor = null }) {
       <div>
         <div className="flex justify-center flex-wrap m-10 gap-3">
           {generatedFlavors.map((flavor) => (
-            <div className="bg-white">
-              <FlavorThumbnail key={flavor.name} flavor={flavor} />
+            <div className="bg-white" key={flavor.name}>
+              <FlavorThumbnail flavor={flavor} />
             </div>
           ))}
         </div>
 
         <div className="flex justify-center flex-wrap m-10 gap-3">
           {userFlavors.map((flavor) => (
-            <div className="bg-white">
-              <FlavorThumbnail key={flavor.name} flavor={flavor} />
+            <div className="bg-white" key={flavor.name}>
+              <FlavorThumbnail flavor={flavor} />
             </div>
           ))}
         </div>

client/src/services/icecreams.ts

@@ -40,8 +40,7 @@ const getNoun = async () => {
 
 const saveFlavor = async (iceCream: newFlavor) => {
 
-  console.log(iceCream)
-  await axios.post(iceCreamUrl, iceCream
+await axios.post(iceCreamUrl, iceCream
   ).catch(function (error) {
     console.log(error.toJSON());
   });