Merge pull request #130 from HungrySlugs-CSE115A/profile-page

Profile page

Author: IanHollow

app/locations/[location]/page.tsx

@@ -7,14 +7,21 @@ import {
 import { Location } from "@/interfaces/Location";
 import { FrontEndReviews } from "@/interfaces/Review";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
+import { useCookies } from "react-cookie";
 
 import LocationCategories from "@/components/location/categories";
 import Link from "next/link";
 
 export default function Page({ params }: { params: { location: number } }) {
   const [location, setLocation] = useState<Location | null>(null);
   const [foodReviews, setFoodReviews] = useState<FrontEndReviews | null>(null);
+  const [cookies] = useCookies(["userEmail", "notificationsEnabled"]);
+  const alertShown = useRef(false);
+
+  const notificationsEnabled = cookies.notificationsEnabled === true;
+
+  const user_email = cookies.userEmail || "anonymous";
 
   useEffect(() => {
     fetchLocations().then(async (locations: Location[]) => {
@@ -41,13 +48,31 @@ export default function Page({ params }: { params: { location: number } }) {
 
       fetchFoodReviewsBulk({
         food_names: food_names,
-        user_id: username,
+        user_id: user_email,
       }).then((reviews: FrontEndReviews) => {
         setLocation(location);
         setFoodReviews(reviews);
       });
     });
   }, [params.location]);
+  useEffect(() => {
+    if (
+      location &&
+      foodReviews &&
+      notificationsEnabled &&
+      !alertShown.current
+    ) {
+      Object.keys(foodReviews).forEach((foodName) => {
+        const review = foodReviews[foodName];
+        if (user_email !== "anonymous" && review.user_rating === 5) {
+          alert(
+            `One of your favorite foods is being served! Food: ${foodName}`,
+          );
+          alertShown.current = true;
+        }
+      });
+    }
+  }, [location, foodReviews, notificationsEnabled, user_email]);
 
   if (!location || !foodReviews) {
     return <h1>Loading...</h1>;

app/profile/page.tsx

@@ -1,65 +1,166 @@
 "use client";
-import React from "react";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { googleLogout } from "@react-oauth/google";
 import axios from "axios";
-import { fetchUserInfo } from "@/app/requests";
+import { useCookies } from "react-cookie";
+import Image from "next/image";
+import { FrontEndReviews } from "@/interfaces/Review";
+import { Location } from "@/interfaces/Location";
+import { fetchLocations, fetchFoodReviewsBulk, fetchUserInfo } from "@/app/requests";
 
 interface User {
   name: string;
   email: string;
   picture: string;
 }
-import Image from "next/image";
+
 const imageWidth = 100;
 const imageHeight = 100;
 
 const Page = () => {
   const [user, setUser] = useState<User | null>(null);
-  const getUserInfo = async () => {
-    try {
-      const userInfo = await fetchUserInfo();
-      setUser(userInfo);
-    } catch (error) {
-      console.error("Failed to fetch user info:", error);
-    }
-  };
+  const [cookies, setCookie, removeCookie] = useCookies([
+    "authToken",
+    "userEmail",
+    "notificationsEnabled",
+  ]);
+  const [reviews, setReviews] = useState<FrontEndReviews>({});
+  const [notificationsEnabled, setNotificationsEnabled] = useState(
+    cookies.notificationsEnabled === "true",
+  );
+  const [foodNames, setFoodNames] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
+    const getUserInfo = async () => {
+      try {
+        const access_token = cookies.authToken;
+
+        if (!access_token) {
+          console.error("No access token found");
+          return;
+        }
+
+        const userInfo = await axios
+          .get("https://www.googleapis.com/oauth2/v3/userinfo", {
+            headers: { Authorization: `Bearer ${access_token}` },
+          })
+          .then((res) => res.data);
+
+        setUser({
+          name: userInfo.name,
+          email: userInfo.email,
+          picture: userInfo.picture,
+        });
+        setCookie("userEmail", userInfo.email, { path: "/" });
+      } catch (error) {
+        console.error("Error fetching user info:", error);
+      }
+    };
+    const getLocationsAndFoodNames = async () => {
+      try {
+        const locations = await fetchLocations();
+        const allFoodNames = locations.flatMap((location) =>
+          location.categories.flatMap((category) =>
+            category.sub_categories.flatMap((sub_category) =>
+              sub_category.foods.map((food) => food.name),
+            ),
+          ),
+        );
+        setFoodNames(allFoodNames);
+        console.log("Food Names:", allFoodNames);
+      } catch (error) {
+        console.error("Error fetching locations and food names:", error);
+      }
+    };
     getUserInfo();
-  }, []);
+
+    getLocationsAndFoodNames();
+  }, [cookies.authToken, cookies.notificationsEnabled, setCookie]);
 
   const handleLogout = () => {
     googleLogout();
-    axios
-      .post("http://localhost:8000/api/logout/")
-      .then((res) => console.log("Backend logout successful", res))
-      .catch((err) => console.error("Backend logout failed", err));
-
-    // Remove the token from sessionStorage
-    sessionStorage.removeItem("token");
-    // Redirect the user to the main page after logging out
+    removeCookie("authToken", { path: "/" });
+    removeCookie("userEmail", { path: "/" });
     window.location.href = "/";
     console.log("Logged out successfully");
   };
+  useEffect(() => {
+    if (user && user.email) {
+      fetchReviews(user.email);
+    }
+  }, [user, foodNames]);
+
+  const fetchReviews = async (userEmail: string) => {
+    try {
+      const reviews = await fetchFoodReviewsBulk({
+        food_names: foodNames,
+        user_id: userEmail,
+      });
+      const filteredReviews = Object.fromEntries(
+        Object.entries(reviews).filter(
+          ([_, review]) => review.user_rating != null,
+        ),
+      );
+      setReviews(filteredReviews);
+      setLoading(false);
+      console.log("Fetched Reviews:", filteredReviews);
+    } catch (error) {
+      console.error("Error fetching reviews:", error);
+    }
+  };
+
+  const toggleNotifications = () => {
+    const newState = !notificationsEnabled;
+    setNotificationsEnabled(newState);
+    setCookie("notificationsEnabled", newState.toString(), { path: "/" });
+
+    console.log(`Notifications are now ${newState ? "enabled" : "disabled"}`);
+  };
 
   return (
     <div>
-      <h1>Profile</h1>
+      <h1 className="text-[#003C6C] font-medium text-xl">Profile</h1>
       {user && (
         <div>
           <Image
             src={user.picture}
             alt="User profile"
             width={imageWidth}
             height={imageHeight}
+            className="rounded-full border-4 border-[#003C6C]"
           />
           <h2>
             Welcome, {user.name} - {user.email}
           </h2>
         </div>
       )}
+      <div>
+        <h2 className="text-[#003C6C] font-medium text-xl">
+          Your Food Reviews:
+        </h2>
+        {loading ? (
+          <h1>Loading...</h1>
+        ) : (
+          <ul className="bg-gray-100 p-4 rounded-lg">
+            {Object.entries(reviews).map(([food_name, review]) => (
+              <li key={food_name} className="mb-2 text-[#003C6C]">
+                <h3 className="font-bold">{food_name}</h3>
+                <p>Rating: {review.user_rating}</p>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      <button
+        onClick={toggleNotifications}
+        className="hover:underline decoration-yellow-400 underline-offset-8 top-0 right-0 m-5 p-2 text-[#003C6C] font-medium text-xl"
+      >
+        {notificationsEnabled
+          ? "Disable Notifications"
+          : "Enable Notifications"}
+      </button>
       <button
-        onClick={() => handleLogout()}
+        onClick={handleLogout}
         className="hover:underline decoration-yellow-400 underline-offset-8 top-0 right-0 m-5 p-2 text-[#003C6C] font-medium text-xl"
       >
         Logout

backend/api/views.py

@@ -169,8 +169,8 @@ def validate_user(request):
         # add user_info to database using get or create possibly
 
         # add current user
-        current_user = CurrentUser(request.session)
-        request.session["current_user"] = user_info["email"]
+        # current_user = CurrentUser(request.session)
+        # request.session["current_user"] = user_info["email"]
 
     except requests.RequestException as e:
         return JsonResponse({"error": "Failed to validate access token"}, status=500)

backend/backend/settings.py

@@ -12,7 +12,12 @@
 
 from pathlib import Path
 
-from private.private_settings import DJANGO_SECRET_KEY, IS_DEV
+from private.private_settings import (
+    DJANGO_SECRET_KEY,
+    IS_DEV,
+    DJANGO_GOOGLE_CLIENT_ID,
+    DJANGO_GOOGLE_CLIENT_SECRET,
+)
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = (
@@ -29,6 +34,9 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = IS_DEV
 
+GOOGLE_CLIENT_ID = DJANGO_GOOGLE_CLIENT_ID
+GOOGLE_SECRET_KEY = DJANGO_GOOGLE_CLIENT_SECRET
+
 ALLOWED_HOSTS = [
     "127.0.0.1",
     "localhost",
@@ -61,6 +69,12 @@
 ]
 
 CORS_ORIGIN_ALLOW_ALL = True
+CORS_ALLOW_CREDENTIALS = True
+CORS_ALLOW_HEADERS = [
+    "authorization",
+    "content-type",
+    "Access-Control-Allow-Origin",
+]
 
 ROOT_URLCONF = "backend.urls"
 

components/login.tsx

@@ -2,6 +2,8 @@
 import React, { useEffect, useState } from "react";
 import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";
 import axios from "axios";
+import { useCookies } from "react-cookie";
+
 import { GOOGLE_CLIENT_ID } from "@/private/secrets";
 
 interface User {
@@ -18,21 +20,38 @@ const LoginPage = () => {
 };
 
 const LoginComponent = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [cookies, setCookie] = useCookies(["authToken", "userEmail"]);
+
   useEffect(() => {
     console.log("LoginPage component mounted");
   }, []);
 
   const handleLogin = useGoogleLogin({
     flow: "implicit",
 
-    onSuccess: (tokenResponse) => {
+    onSuccess: async (tokenResponse) => {
       console.log(tokenResponse);
       // Store authentication token in the browser's storage for navigation bar use
-      sessionStorage.setItem("token", tokenResponse.access_token);
+      //sessionStorage.setItem("token", tokenResponse.access_token);
+      const expires = new Date();
+      expires.setHours(expires.getHours() + 3);
+      setCookie("authToken", tokenResponse.access_token, {
+        path: "/",
+        expires,
+      });
       // Redirect the user to main page
       window.location.href = "/";
       //handleLoginSuccess
       //client side authentication retrieve user info from access token
+      const userInfo = await axios
+        .get("https://www.googleapis.com/oauth2/v3/userinfo", {
+          headers: { Authorization: `Bearer ${tokenResponse.access_token}` },
+        })
+        .then((res) => res.data);
+      //console.log("userEmail:", userInfo.email);
+      setCookie("userEmail", userInfo.email, { path: "/", expires });
       //send the token to backend
       axios
         .post("http://localhost:8000/api/users", {

components/navbar.tsx

@@ -1,16 +1,23 @@
 "use client";
 import { useState, useEffect } from "react";
 import LoginPage from "./login"; // Used if not logged in
+import { useCookies } from "react-cookie";
 import Link from "next/link";
 
 export default function Navbar({ height }: { height: string }) {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-
-  useEffect(() => {
+  const [cookies] = useCookies(["authToken"]);
+  /*useEffect(() => {
     // Check if sessionStorage is available and if token exists
     const token = sessionStorage.getItem("token");
     setIsLoggedIn(!!token);
-  }, []);
+  }, []);*/
+
+  useEffect(() => {
+    // Check if the authToken exists in cookies
+    const token = cookies.authToken;
+    setIsLoggedIn(!!token);
+  }, [cookies]);
 
   return (
     <nav className="bg-white fixed w-full  top-0 start-0 ">

package.json

@@ -14,6 +14,7 @@
     "next": "14.2.3",
     "prettier": "^3.2.5",
     "react": "^18",
+    "react-cookie": "^7.1.4",
     "react-dom": "^18"
   },
   "devDependencies": {