Merge branch 'main' into Login

Author: anyazhang17

app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Montserrat } from "next/font/google";
 import "./globals.css";
-//import Link from "next/link";
 
 import Navbar from "@/components/navbar";
 import Testbar from "@/components/testbar";
@@ -13,8 +12,6 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-
-
 // This is the height of the navbar which will also be used to set the padding-top of the main content
 // NOTE: you should modify this value to match the height of the navbar
 const navbarHeight: string = "60px";
@@ -32,9 +29,7 @@ export default function RootLayout({
 
           {children}
         </div>
-
       </body>
-
     </html>
   );
 }

app/loginPage/page.tsx

@@ -4,7 +4,6 @@ import { GoogleOAuthProvider, useGoogleLogin, googleLogout, TokenResponse} from
 import { jwtDecode } from "jwt-decode";
 import axios from "axios";
 
-
 interface User {
   name: string;
   email: string;

app/page.tsx

@@ -2,6 +2,12 @@
 import { useState, useEffect } from "react";
 import axios from "axios";
 import Link from "next/link";
+import {
+  GoogleOAuthProvider,
+  GoogleLogin,
+  googleLogout,
+} from "@react-oauth/google";
+import { jwtDecode } from "jwt-decode";
 
 interface Food {
   name: string;
@@ -15,7 +21,6 @@ interface subCategory {
 }
 
 interface Category {
-  forEach(arg0: (category: any) => void): unknown;
   name: string;
   sub_categories: Array<subCategory>;
 }
@@ -47,7 +52,7 @@ function ButtonLink(props: any) {
   );
 }
 
-export default function Home() {
+function Home() {
   const [dhs, setDhs] = useState<DiningHall[]>([]);
   const [dhs_names, set_dhs_names] = useState([""]);
   const [searchInput, setSearchInput] = useState("");
@@ -80,7 +85,7 @@ export default function Home() {
     const allFoods: { food: Food; dhName: string; categoryName: string }[] = [];
     dhs.forEach((dh) => {
       dh.categories.forEach((category) => {
-        category.sub_categories.forEach((subCategory: { foods: any[]; }) => {
+        category.sub_categories.forEach((subCategory) => {
           subCategory.foods.forEach((food) => {
             allFoods.push({
               food,
@@ -155,7 +160,55 @@ export default function Home() {
         </h3>
 
       </div>
-      {/* Account Button */}
     </main>
   );
 }
+
+export default function Page() {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    console.log(
+      "Page component loaded and GoogleOAuthProvider should be active",
+    );
+  }, []);
+
+  const handleLogout = () => {
+    googleLogout();
+    setUser(null); // Clear user state on logout
+    console.log("Logout Successful");
+  };
+
+  const handleLoginSuccess = (credentialResponse: any) => {
+    console.log("Login Successful", credentialResponse);
+    const decoded: User = jwtDecode(credentialResponse.credential);
+    setUser({
+      name: decoded.name,
+      picture: decoded.picture,
+    });
+  };
+
+  return (
+    <GoogleOAuthProvider clientId="1040494859138-vji3ddfil5jancg23ifaginvmn71hktf.apps.googleusercontent.com">
+      <Home />
+      <GoogleLogin
+        onSuccess={handleLoginSuccess}
+        onError={() => {
+          console.log("Login Failed");
+        }}
+      />
+      {user && (
+        <div>
+          <img src={user.picture} alt="User profile" />
+          <h2>{user.name}</h2>
+        </div>
+      )}
+      <button
+        onClick={handleLogout}
+        className="p-2 mt-2 text-white bg-red-600 rounded"
+      >
+        Logout
+      </button>
+    </GoogleOAuthProvider>
+  );
+}

components/navbar.tsx

@@ -25,7 +25,7 @@ export default function Navbar({ height }: { height: string }) {
                             </a>
                         </li>
                         <li>
-                            <a href="/loginPage" className="pl-4 pr-5">
+                            <a href="#" className="pl-4 pr-5">
                                 Account
                             </a>
                             {/* pr-X dicates how far off right we want.  */}