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

Author: AkhilS2

.gitignore

@@ -55,3 +55,7 @@ bun.lockb
 package-lock.json
 yarn.lock
 pnpm-lock.yaml
+
+# image folder
+/public/uploaded_images/*
+!/public/uploaded_images/

backend/api/urls.py

@@ -12,4 +12,5 @@
     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"),
+    
 ]

backend/api/views.py

@@ -8,6 +8,15 @@
 import requests
 from django.http import JsonResponse
 
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.core.files.storage import default_storage
+from django.core.files.base import ContentFile
+import logging
+import os
+logger = logging.getLogger(__name__)
+
+
 
 from .model_logic.locations.actions import (
     get_locations as get_locations_db,
@@ -37,6 +46,7 @@
 
 # Get the list of locations at UCSC and their information
 @api_view(["GET"])
+@csrf_exempt
 def get_locations(request):
     # Get the last update time of the locations
     last_update: datetime | None = get_last_update_time(task_name="locations")
@@ -187,23 +197,36 @@ 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)
-#     if(user==None):
-#         return Response({"message": "No user found"})
-#     else:
-#         return Response({"message": "User found: {user}", "user data": user})
+@csrf_exempt
+def upload_image(request):
+    try:
+        if request.method == "POST" and request.FILES.get("image"):
+            uploaded_image = request.FILES["image"]
+            
+            # Define the folder path to save the image
+            folder_path = 'public/uploaded_images'
+            if not os.path.exists(folder_path):
+                os.makedirs(folder_path)
+            
+            # Save the image to the specific folder
+            file_name = default_storage.save(os.path.join(folder_path, uploaded_image.name), ContentFile(uploaded_image.read()))
+            file_url = default_storage.url(file_name)
+
+            return JsonResponse({
+                "success": True,
+                "message": "Image uploaded successfully",
+                "imageName": uploaded_image.name,
+                "imageUrl": file_url
+            })
+        else:
+            return JsonResponse({"success": False, "message": "No image provided or incorrect request method"})
+    except Exception as e:
+        logger.error(f"Error during image upload: {e}")
+        return JsonResponse({"success": False, "message": f"Image upload failed: {str(e)}"})
+    
+
+
+
+    

components/food/images.tsx

@@ -4,19 +4,22 @@ import axios from "axios";
 import { Food } from "@/interfaces/Food";
 import { fetchUserInfo } from "@/app/requests"; // Import fetchUserInfo function
 import "@/components/food/Images.css"; // Import the CSS file
+import Image from "next/image";
 
 interface ImagesProps {
   food: Food;
 }
 
+interface ImageDetails {
+  imageName: string;
+  uploadedBy: string;
+  date: string;
+  imageUrl: string;
+}
+
 const Images: React.FC<ImagesProps> = ({ food }) => {
   const [image, setImage] = useState<File | null>(null);
-  const [uploadedImageDetails, setUploadedImageDetails] = useState<{
-    imageName: string;
-    uploadedBy: string; // Rename to avoid conflict
-    date: string;
-    imageUrl: string;
-  } | null>(null);
+  const [uploadedImages, setUploadedImages] = useState<ImageDetails[]>([]);
   const [userId, setUserId] = useState("anonymous");
 
   useEffect(() => {
@@ -37,6 +40,7 @@ const Images: React.FC<ImagesProps> = ({ food }) => {
       console.error("No image selected");
       return;
     }
+//still testing gitignore
 
     try {
       const formData = new FormData();
@@ -46,20 +50,29 @@ const Images: React.FC<ImagesProps> = ({ food }) => {
       // Send image data to backend
       const response = await axios.post(
         "http://localhost:8000/api/upload_image/",
-        formData,
+        formData
       );
 
       // Log the response to debug
       console.log("API response:", response.data);
 
       // Handle success and set uploaded image details
-      const { imageName, user_id, date, imageUrl } = response.data;
-      setUploadedImageDetails({
+      const { imageName, imageUrl } = response.data;
+      const date = new Date().toISOString();
+
+      // Remove "/public" from the imageUrl
+      const cleanImageUrl = imageUrl.replace("/public", "");
+
+      console.log("Uploaded image URL:", cleanImageUrl); // Log the cleaned image URL
+
+      const newImageDetails: ImageDetails = {
         imageName,
-        uploadedBy: user_id,
-        date,
-        imageUrl,
-      });
+        uploadedBy: userId,
+        date: date,
+        imageUrl: cleanImageUrl,
+      };
+
+      setUploadedImages((prevImages) => [...prevImages, newImageDetails]);
     } catch (error) {
       // Handle error
       console.error("Failed to upload image:", error);
@@ -91,26 +104,29 @@ const Images: React.FC<ImagesProps> = ({ food }) => {
           Upload Image
         </button>
       </div>
-      {uploadedImageDetails && (
-        <div className="uploaded-image-details">
-          <div className="image-details">
-            <p>
-              <strong>Name:</strong> {uploadedImageDetails.imageName}
-            </p>
-            <p>
-              <strong>Uploaded by:</strong> {uploadedImageDetails.uploadedBy}
-            </p>
-            <p>
-              <strong>Date:</strong> {formatDateTime(uploadedImageDetails.date)}
-            </p>
+      <div className="uploaded-images-list">
+        {uploadedImages.map((details, index) => (
+          <div key={index} className="uploaded-image-details">
+            <div className="image-details">
+              <p>
+                <strong>Name:</strong> {details.imageName}
+              </p>
+              <p>
+                <strong>Uploaded by:</strong> {details.uploadedBy}
+              </p>
+              <p>
+                <strong>Date:</strong> {formatDateTime(details.date)}
+              </p>
+            </div>
+            <Image
+              src={details.imageUrl}
+              alt={details.imageName}
+              width={100}
+              height={100}
+            />
           </div>
-          <img
-            src={uploadedImageDetails.imageUrl}
-            alt={uploadedImageDetails.imageName}
-            className="uploaded-image"
-          />
-        </div>
-      )}
+        ))}
+      </div>
     </div>
   );
 };

components/location/categories.tsx

@@ -20,13 +20,13 @@ export default function LocationCategories({
     new Array(location.categories.length).fill(false).map((_, index) => {
       switch (index) {
         case 0: // Breakfast (6 AM - 11 AM)
-          return currentHour < 11 && currentHour >= 6;
+          return currentHour < 11;
         case 1: // Lunch (11 AM - 3 PM)
-          return currentHour < 15 && currentHour >= 11;
+          return currentHour < 15;
         case 2: // Dinner (6 PM - 9 PM)
-          return currentHour < 21 && currentHour >= 18;
+          return currentHour < 21;
         case 3: // Late Night (9 PM - 11 PM)
-          return currentHour < 23 && currentHour >= 21;
+          return currentHour < 23;
         default:
           return false;
       }