Merge remote-tracking branch 'origin/main' into profile_page_new

HungrySlugs · Jun 3, 2024 · d1b18ce · d1b18ce
2 parents 9448420 + 8275a89
commit d1b18ce
Show file tree

Hide file tree

Showing 27 changed files with 638 additions and 159 deletions.
diff --git a/README.md b/README.md
diff --git a/app/foods/[food]/page.tsx b/app/foods/[food]/page.tsx
@@ -53,7 +53,8 @@ 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

diff --git a/app/global_search/page.tsx b/app/global_search/page.tsx
@@ -4,7 +4,7 @@ import axios from "axios";
 import Image from "next/image";
 import Link from "next/link";
 import styles from "./Search.module.css";
-import { fetchLocations } from "@/app/db";
+import { fetchLocations } from "@/app/requests";
 import { Location, Food } from "@/interfaces/Location";
 
 interface FoodWithCategory {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,10 +25,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={monst.className}>
-        <Navbar height={navbarHeight} />
-        <div className="" style={{ paddingTop: navbarHeight }}>
-          {children}
+      <body className="font-sans">
+        <div className={`${monst.className}`}>
+          <Navbar height={navbarHeight} />
+          <div className="" style={{ paddingTop: navbarHeight }}>
+            {children}
+          </div>
         </div>
       </body>
     </html>

diff --git a/app/locations/[location]/DH_Search/page.tsx b/app/locations/[location]/DH_Search/page.tsx
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 
-import { fetchLocations } from "@/app/db";
+import { fetchLocations } from "@/app/requests";
 import { Location, Food } from "@/interfaces/Location";
 
 interface FoodWithCategory {

diff --git a/app/locations/[location]/page.tsx b/app/locations/[location]/page.tsx
@@ -1,5 +1,9 @@
 "use client";
-import { fetchLocations, fetchFoodReviewsBulk } from "@/app/db";
+import {
+  fetchLocations,
+  fetchFoodReviewsBulk,
+  fetchUserInfo,
+} from "@/app/requests";
 import { Location } from "@/interfaces/Location";
 import { FrontEndReviews } from "@/interfaces/Review";
 
@@ -20,7 +24,7 @@ export default function Page({ params }: { params: { location: number } }) {
   const user_email = cookies.userEmail || "anonymous";
 
   useEffect(() => {
-    fetchLocations().then((locations: Location[]) => {
+    fetchLocations().then(async (locations: Location[]) => {
       if (params.location < 0 || params.location >= locations.length) {
         return <h1>Location not found</h1>;
       }
@@ -32,6 +36,11 @@ export default function Page({ params }: { params: { location: number } }) {
         ),
       );
 
+      //get username and set it
+      let username = "";
+      const userInfo = await fetchUserInfo();
+      username = userInfo.email;
+
       fetchFoodReviewsBulk({
         food_names: food_names,
         user_id: user_email,

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,6 +1,6 @@
 "use server";
 
-import { fetchLocations } from "@/app/db";
+import { fetchLocations } from "@/app/requests";
 import LocationsClient from "@/components/LocationsClient";
 import { Location } from "@/interfaces/Location";
 

diff --git a/app/profile/page.tsx b/app/profile/page.tsx
@@ -4,10 +4,11 @@ import { googleLogout } from "@react-oauth/google";
 import axios from "axios";
 import { useCookies } from "react-cookie";
 import { fetchLocations, fetchFoodReviewsBulk } from "../db";
-import { fetchUserInfo } from "@/app/user_info";
+//import { fetchUserInfo } from "@/app/user_info";
 import Image from "next/image";
 import { FrontEndReviews } from "@/interfaces/Review";
 import { Location } from "@/interfaces/Location";
+import { fetchUserInfo } from "@/app/requests";
 
 interface User {
   name: string;

diff --git a/app/db.ts → app/requests.ts b/app/db.ts → app/requests.ts
@@ -21,7 +21,7 @@ export async function fetchLocations(): Promise<Location[]> {
 
 export async function fetchFoodReviewsBulk(data: {
   food_names: string[];
-  user_id: string | null;
+  user_id: string;
 }): Promise<FrontEndReviews> {
   const res = await api.post(`/get_ratings_bulk/`, data).catch((err) => {
     console.error(err);
@@ -49,3 +49,34 @@ export async function updateReview(data: {
 
   return res.data;
 }
+
+export const fetchUserInfo = async () => {
+  try {
+    const access_token = sessionStorage.getItem("token");
+
+    if (!access_token) {
+      throw new Error("No access token found in session storage.");
+    }
+
+    const response = await axios.get(
+      "https://www.googleapis.com/oauth2/v3/userinfo",
+      {
+        headers: { Authorization: `Bearer ${access_token}` },
+      }
+    );
+
+    const userInfo = response.data;
+
+    return {
+      name: userInfo.name,
+      email: userInfo.email,
+      picture: userInfo.picture,
+    };
+  } catch (error) {
+    return {
+      email: "anonymous",
+      name: "anonymous",
+      picture: "",
+    };
+  }
+};
diff --git a/app/user_info.ts b/app/user_info.ts
diff --git a/backend/api/model_logic/foods/views.py b/backend/api/model_logic/foods/views.py
@@ -65,7 +65,7 @@ def get_food(request, name: str):
 @api_view(["POST"])
 def return_ratings_bulk(request):
     food_names: list[str] = request.data.get("food_names")
-    user_id: str | None = request.data.get("user_id")
+    user_id: str = request.data.get("user_id")
 
     if food_names == None:
         print("food_names is None")

diff --git a/backend/api/urls.py b/backend/api/urls.py
@@ -10,4 +10,6 @@
     path("comments/", foods_views.add_comment, name="comments"),
     path("rating_update/", foods_views.user_rating_update, name="rating_update"),
     path("get_ratings_bulk/", foods_views.return_ratings_bulk, name="get_ratings_bulk"),
+    # Add the new endpoint for image uploads
+    path("upload_image/", views.upload_image, name="upload_image"),
 ]
diff --git a/backend/api/views.py b/backend/api/views.py
@@ -1,5 +1,7 @@
 import json
 from .model_logic.foods.actions import get_food, set_food, update_food
+from django.http import JsonResponse
+
 
 from rest_framework.response import Response
 from rest_framework.decorators import api_view
@@ -185,6 +187,19 @@ def current_logout(request):
     return JsonResponse({"message": "User has been logged out"})
 
 
+@api_view(["POST"])
+def upload_image(request):
+    if request.method == "POST" and request.FILES.get("image"):
+        # Handle image upload logic here
+        uploaded_image = request.FILES["image"]
+        # Process the uploaded image (e.g., save it to a storage location)
+        # Return a JSON response indicating success
+        return JsonResponse({"success": True, "message": "Image uploaded successfully"})
+    else:
+        # Return a JSON response with an error message if no image is provided or method is not POST
+        return JsonResponse({"success": False, "message": "Image upload failed"})
+
+
 # @api_view(["GET"])
 # def get_user_rating(request):
 #     user = get_rating(request.user_ids)

diff --git a/components/food/Images.css b/components/food/Images.css
@@ -0,0 +1,59 @@
+.images-container {
+  padding: 20px;
+  max-width: 600px;
+  margin: 0 auto;
+  font-family: Arial, sans-serif;
+}
+
+.food-name {
+  text-align: center;
+  font-size: 2em;
+  margin-bottom: 10px;
+}
+
+.section-title {
+  text-align: center;
+  font-size: 1.5em;
+  margin-bottom: 20px;
+}
+
+.upload-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.file-input {
+  margin-bottom: 10px;
+}
+
+.upload-button {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.upload-button:hover {
+  background-color: #45a049;
+}
+
+.uploaded-image-details {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.image-details {
+  margin-bottom: 10px;
+}
+
+.uploaded-image {
+  max-width: 100%;
+  height: auto;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 5px;
+  margin-top: 10px;
+}