Merge pull request #132 from HungrySlugs-CSE115A/rating

Rating ui

Author: Noahkmm

app/foods/[food]/page.tsx

@@ -28,9 +28,9 @@ export default function Page({ params }: { params: { food: string } }) {
       >,
       i,
     ) => [
-      category as string,
-      (<Component key={i} food={food} />) as JSX.Element,
-    ],
+        category as string,
+        (<Component key={i} food={food} />) as JSX.Element,
+      ],
   );
 
   useEffect(() => {
@@ -53,7 +53,10 @@ export default function Page({ params }: { params: { food: string } }) {
 
   return (
     <main className="flex flex-col items-center">
-      <ul className="flex font-medium text-2xl text-[#003C6C] items-center justify-center py-5">
+      <h1 className="font-normal py-4 text-2xl text-[#003C6C]">
+        {food.name}
+      </h1>
+      <ul className="flex font-medium text-2xl text-[#003C6C] items-center justify-center pb-5">
         {tabs.map(([category, _]: Array<string | JSX.Element>, i) => (
           <li key={i} className="">
             <button

components/food/comments.tsx

@@ -86,10 +86,8 @@ export default function Comments({ food }: { food: Food }) {
 
   return (
     <div>
-      <h1 className="text-2xl text-[#003C6C] flex items-center justify-center py-3 mr-2 mb-1">
-        {food && food.name}
-      </h1>
-      <div>
+
+      <div className="pt-5">
         {comments.map((comment, i) => (
           <div
             key={comment.id}
@@ -158,11 +156,10 @@ export default function Comments({ food }: { food: Food }) {
               comment: textField,
             })
           }
-          className={`ml-2 text-white ${
-            textField.length === 0
-              ? "bg-gray-300 cursor-default"
-              : "bg-blue-500 hover:bg-blue-700"
-          } rounded-md px-4 py-2`}
+          className={`ml-2 text-white ${textField.length === 0
+            ? "bg-gray-300 cursor-default"
+            : "bg-blue-500 hover:bg-blue-700"
+            } rounded-md px-4 py-2`}
           disabled={textField.length === 0}
         >
           Post

components/food/ratings.tsx

@@ -1,14 +1,29 @@
 import { Food } from "@/interfaces/Food";
+import { Doppio_One } from "next/font/google";
+
 
 export default function Ratings({ food }: { food: Food }) {
+  console.log(food);
   return (
-    <div>
-      <h1>{food && food.name}</h1>
-      <h2>Ratings</h2>
-      <div>
-        <p>Rating 1</p>
-        <p>Rating 2</p>
-        <p>Rating 3</p>
+    <div className="w-screen ">        {/* Yes I know this is horribly written and inefficent -Noah*/}
+      <h1 className="flex justify-center font-normal py-2 text-xl text-[#003C6C]">
+        <div className="flex w-1/3 pl-5">
+          User
+        </div>
+        <div className="flex w-3/2 ">
+          Rating
+        </div>
+      </h1>
+
+      <div className="flex flex-col justify-center ">
+        {/* convert ratings obj to array and map */
+          Object.entries(food.ratings).map(([user_id, rating]) => (
+            <p key={user_id} className="flex flex-row justify-center pb-2  my-1 text-med">
+              <div className="px-5 flex w-1/3 border-white border bg-[#F9F9F9] font-medium text-[#003C6C]">{user_id}</div>
+              <div className="px-5 flex w-3/2 border-white border bg-[#F9F9F9] font-medium text-gray-700">{rating.rating}</div>
+            </p>
+
+          ))}
       </div>
     </div>
   );

components/location/food.tsx

@@ -42,13 +42,14 @@ export default function LocationFood({
             ))}
           </ul>
 
-          <div>
-            <h4 className="flex justify-center"> {average ? average : "?"} </h4>
+          <div className="bg-gray-200 ">
+
+            <h4 className="flex justify-center px-2">Score: {average ? average : "?"} </h4>
           </div>
           <div>
-            <h4 className="flex justify-center">
-              <form>
-                <select
+            <h4 className="flex justify-center pl-2">
+              <form className="text-center">
+                <select className=" text-center py-0.5 px-2 w-20"
                   name="rating"
                   id="rating"
                   onChange={(e) =>
@@ -58,16 +59,17 @@ export default function LocationFood({
                       food_rating: parseInt(e.target.value),
                     }).then((data) => {
                       const newAverage = data.average;
+                      food_average = newAverage;
                       setAverage(newAverage);
                     })
                   }
                 >
-                  <option value={user_rating ? user_rating : 5}>
-                    {user_rating ? user_rating : "Rate"}
+                  <option className="font-sans" value={user_rating ? user_rating : 5}>
+                    {user_rating ? user_rating : "Rating"}
                   </option>
                   {ratings.map((rating, index) => (
                     <option
-                      className="flex justify-center"
+                      className="flex justify-center font-sans"
                       key={index}
                       value={rating}
                     >

interfaces/Food.ts

@@ -1,3 +1,5 @@
+
+
 export interface Comment {
   id: number;
   user_id: string;
@@ -6,9 +8,12 @@ export interface Comment {
 }
 
 export interface Rating {
-  user_id: string;
   rating: number;
-  date: string;
+
+}
+
+export interface Ratings {
+  [user_id: string]: Rating;
 }
 
 export interface Image {
@@ -21,6 +26,6 @@ export interface Food {
   name: string;
   restrictions: Array<string> | never[];
   comments: Array<Comment> | never[];
-  ratings: Array<Rating> | never[];
+  ratings: Ratings | never[];
   images: Array<Image> | never[];
 }