diff --git a/app/locations/[location]/page.tsx b/app/locations/[location]/page.tsx index c2017f1..e8f1c46 100644 --- a/app/locations/[location]/page.tsx +++ b/app/locations/[location]/page.tsx @@ -38,13 +38,9 @@ export default function Page({ params }: { params: { location: number } }) { //get username and set it let username = ""; - try { - const userInfo = await fetchUserInfo(); - username = userInfo.email ? userInfo.email : "anonymous"; - //console.log("username is: ", username); - } catch (error) { - console.error("Failed to fetch user info:", error); - } + const userInfo = await fetchUserInfo(); + username = userInfo.email; + //console.log("username is:", username); fetchFoodReviewsBulk({ food_names: food_names, diff --git a/app/requests.ts b/app/requests.ts index 97363f4..dec6c33 100644 --- a/app/requests.ts +++ b/app/requests.ts @@ -50,7 +50,7 @@ export async function updateReview(data: { return res.data; } -export async function fetchUserInfo() { +export const fetchUserInfo = async () => { try { const access_token = sessionStorage.getItem("token"); @@ -62,7 +62,7 @@ export async function fetchUserInfo() { "https://www.googleapis.com/oauth2/v3/userinfo", { headers: { Authorization: `Bearer ${access_token}` }, - }, + } ); const userInfo = response.data; @@ -73,7 +73,8 @@ export async function fetchUserInfo() { picture: userInfo.picture, }; } catch (error) { - console.error("Error fetching user info:", error); - throw error; // Re-throw the error so it can be handled by the calling code + return { + email: "anonymous", + }; } -} +}; diff --git a/components/food/comments.tsx b/components/food/comments.tsx index f5f719b..a1b1eda 100644 --- a/components/food/comments.tsx +++ b/components/food/comments.tsx @@ -1,4 +1,3 @@ -"use client"; import { useEffect, useState } from "react"; import { Food, Comment } from "@/interfaces/Food"; import axios from "axios"; @@ -21,47 +20,45 @@ function pythonDatetimeToJsDatetime(pythonDatetime: string): Date { export default function Comments({ food }: { food: Food }) { const [comments, setComments] = useState(food.comments); const [textField, setTextField] = useState(""); - const [user_id, setUserId] = useState("anonymous"); - const [editIndex, setEditIndex] = useState(null); - const [editTextField, setEditTextField] = useState(""); + const [userId, setUserId] = useState("anonymous"); + const [userInfoLoaded, setUserInfoLoaded] = useState(false); // Track if user info is loaded + //const [editIndex, setEditIndex] = useState(null); + //const [editTextField, setEditTextField] = useState(""); useEffect(() => { const getUserInfo = async () => { - try { - const userInfo = await fetchUserInfo(); - const email = userInfo.email; - setUserId(email ? email : "anonymous"); - } catch (error) { - console.error("Failed to fetch user info:", error); - } + const userInfo = await fetchUserInfo(); + setUserId(userInfo.email); + setUserInfoLoaded(true); // Set to true + //console.log("comments userid:", userId); }; getUserInfo(); // Call the function to fetch user info - }, []); + }, [userId]); - const postComment = (comment: { + const postComment = async (comment: { food_name: string; user_id: string; comment: string; }) => { - axios - .post("http://localhost:8000/api/comments/", comment) - .then((response) => { - const updatedFood: Food = response.data; - const updatedComments = updatedFood.comments; - setComments(updatedComments); - setTextField(""); // Clear the textarea after submission - }) - .catch((error) => { - console.error(error); - }); + if (!userInfoLoaded) return; // Ensure user info is loaded before posting + + try { + const response = await axios.post("http://localhost:8000/api/comments/", comment); + const updatedFood: Food = response.data; + const updatedComments = updatedFood.comments; + setComments(updatedComments); + setTextField(""); // Clear the textarea after submission + } catch (error) { + console.error(error); + } }; - const editComment = (index: number) => { +/* const editComment = (index: number) => { setEditIndex(index); setEditTextField(comments[index].comment); // Set textarea value to the comment text }; - const saveEditedComment = (commentId: number) => { + const saveEditedComment = async (commentId: number) => { const updatedComments = [...comments]; updatedComments[editIndex!].comment = editTextField; // Update the comment text setComments(updatedComments); @@ -74,19 +71,20 @@ export default function Comments({ food }: { food: Food }) { comment: editTextField, }; - axios - .put(`http://localhost:8000/api/comments/${commentId}/`, editedComment) - .then((response) => { - console.log("Comment updated successfully:", response.data); - }) - .catch((error) => { - console.error("Failed to update comment:", error); - }); - }; + try { + const response = await axios.put(`http://localhost:8000/api/comments/${commentId}/`, editedComment); + console.log("Comment updated successfully:", response.data); + } catch (error) { + console.error("Failed to update comment:", error); + } + }; */ return (
-
+

+ {food && food.name} +

+
{comments.map((comment, i) => (
{pythonDatetimeToJsDatetime(comment.date).toLocaleString()} - {user_id === comment.user_id && ( + {/* {userId === comment.user_id && ( <> {editIndex !== i ? ( - + ) : ( <> - + )} - )} + )} */}
-

- {editIndex !== i ? ( - comment.comment - ) : ( - setEditTextField(e.target.value)} - className="w-full border border-gray-300 p-2 mb-2 mt-2 break-all max-w-full" - style={{ borderColor: "rgb(107, 114, 128)" }} - /> - )} -

+

{comment.comment}

))}
@@ -151,16 +127,16 @@ export default function Comments({ food }: { food: Food }) { onClick={() => postComment({ food_name: food.name, - user_id: user_id, + user_id: userId, comment: textField, }) } className={`ml-2 text-white ${ - textField.length === 0 + textField.length === 0 || !userInfoLoaded ? "bg-gray-300 cursor-default" : "bg-blue-500 hover:bg-blue-700" } rounded-md px-4 py-2`} - disabled={textField.length === 0} + disabled={textField.length === 0 || !userInfoLoaded} > Post diff --git a/components/food/images.tsx b/components/food/images.tsx index 14b2e77..f45a20d 100644 --- a/components/food/images.tsx +++ b/components/food/images.tsx @@ -2,8 +2,7 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; import { Food } from "@/interfaces/Food"; -import ImageDisplay from "@/components/images_section/ImageDisplay"; // Import ImageDisplay component -import { fetchUserInfo } from "@/app/user_info"; // Import fetchUserInfo function +import { fetchUserInfo } from "@/app/requests"; import "@/components/food/Images.css"; // Import the CSS file interface ImagesProps { @@ -47,7 +46,7 @@ const Images: React.FC = ({ food }) => { // Send image data to backend const response = await axios.post( "http://localhost:8000/api/upload_image/", - formData, + formData ); // Log the response to debug diff --git a/components/location/categories.tsx b/components/location/categories.tsx index 017e139..bb6e109 100644 --- a/components/location/categories.tsx +++ b/components/location/categories.tsx @@ -36,14 +36,9 @@ export default function LocationCategories({ useEffect(() => { const getUserInfo = async () => { - try { - const userInfo = await fetchUserInfo(); - const username = userInfo.email ? userInfo.email : "anonymous"; - setUserId(username); - } catch (error) { - console.error("Failed to fetch user info:", error); - setUserId("anonymous"); - } + //get username and set it + const userInfo = await fetchUserInfo(); + setUserId(userInfo.email); }; getUserInfo(); //console.log("userId =", userId); diff --git a/db.sqlite3 b/db.sqlite3 index a3f8b93..2487f2a 100644 Binary files a/db.sqlite3 and b/db.sqlite3 differ diff --git a/interfaces/Food.ts b/interfaces/Food.ts index 51446c5..9b8a378 100644 --- a/interfaces/Food.ts +++ b/interfaces/Food.ts @@ -1,5 +1,5 @@ export interface Comment { - id: number; + // id: number; user_id: string; comment: string; date: string;