Merge branch 'main' of https://github.com/GamerBoss101/HooHacks-12

React/src/app/auth/session/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+import { auth0 } from "../../../lib/auth0";
+
+export async function GET() {
+	try {
+		const session = await auth0.getSession();
+		return NextResponse.json({ session });
+	} catch (error) {
+		console.error("Error getting session:", error);
+		return NextResponse.json({ session: null }, { status: 500 });
+	}
+}

React/src/app/call/page.tsx

@@ -78,7 +78,7 @@ function CallPage() {
 				"Content-Type": "application/json",
 			},
 			body: JSON.stringify({
-				message: `yo i need help`,
+				message: `John Smith needs help.`,
 			}),
 		});
 

React/src/app/page.tsx

@@ -1,40 +1,94 @@
 "use client";
-import { useState } from "react";
-import { auth0 } from "../lib/auth0";
-import { NextApiRequest, NextApiResponse } from "next";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
 
-
-
-
-export default async function Home() {
-
-	
+export default function Home() {
 	const [contacts, setContacts] = useState<string[]>([]);
 	const [codeword, setCodeword] = useState("");
+	const [session, setSession] = useState<any>(null);
+	const [loading, setLoading] = useState(true);
+	const router = useRouter();
 
-	const session = await auth0.getSession();
+	useEffect(() => {
+		// Fetch session data from an API route
+		fetch("/auth/session")
+			.then((response) => response.json())
+			.then((data) => {
+				setSession(data.session);
+				setLoading(false);
+			})
+			.catch((error) => {
+				console.error("Failed to fetch session:", error);
+				setLoading(false);
+			});
+	}, []);
 
-	console.log("Session:", session?.user);
+	function saveToDB() {
+		alert("Saving contacts...");
+		const contactInputs = document.querySelectorAll(
+			".text-input"
+		) as NodeListOf<HTMLInputElement>;
+		const contactValues = Array.from(contactInputs).map((input) => input.value);
 
+		fetch("/api/databaseStorage", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({
+				email: session?.user?.email || "",
+				codeword: codeword,
+				contacts: contactValues,
+			}),
+		})
+			.then((response) => {
+				if (response.ok) {
+					alert("Contacts saved successfully!");
+				} else {
+					alert("Error saving contacts.");
+				}
+			})
+			.catch((error) => {
+				console.error("Error:", error);
+				alert("Error saving contacts.");
+			});
+	}
+
+	if (loading) {
+		return <div>Loading...</div>;
+	}
 
 	// If no session, show sign-up and login buttons
-	if (!session) {	
-
+	if (!session) {
 		return (
 			<div className="space-y-7 bg-indigo-800 items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 				<main className="space-x-2 flex flex-row gap-[32px] row-start-2 items-center sm:items-start">
 					<a href="/auth/login?screen_hint=signup">
-						<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">Sign up</button>
+						<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-300">
+							Sign up
+						</button>
 					</a>
 					<a href="/auth/login">
-						<button className = "box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">Log in</button>
+						<button className="box-content w-32 border-2 h-16 text-2xl bg-violet-900 text-green-400">
+							Log in
+						</button>
 					</a>
 				</main>
-				<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
-				<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">Set emergency contacts</h2>
-				<p>If you stop speaking or say the codeword, these contacts will be notified</p>
+				<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">
+					Fauxcall
+				</h1>
+				<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">
+					Set emergency contacts
+				</h2>
+				<p>
+					If you stop speaking or say the codeword, these contacts will be
+					notified
+				</p>
 				{/* form for setting codeword */}
-				<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
+				<form
+					className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
+					onSubmit={(e) => e.preventDefault()}
+				>
 					<input
 						type="text"
 						value={codeword}
@@ -43,11 +97,17 @@ export default async function Home() {
 						className="border border-gray-300 rounded-md p-2"
 					/>
 					<button
-					className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
-					type="submit">Set codeword</button>
+						className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
+						type="submit"
+					>
+						Set codeword
+					</button>
 				</form>
 				{/* form for adding contacts */}
-				<form className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
+				<form
+					className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
+					onSubmit={(e) => e.preventDefault()}
+				>
 					<input
 						type="text"
 						value={contacts}
@@ -70,7 +130,12 @@ export default async function Home() {
 						className="border border-gray-300 rounded-md p-2"
 					/>
 					<button type="button">Add</button>
-					<button className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2" type="submit">Set contacts</button>
+					<button
+						className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2"
+						type="submit"
+					>
+						Set contacts
+					</button>
 				</form>
 			</div>
 		);
@@ -80,25 +145,42 @@ export default async function Home() {
 		<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
 			<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
 				<h1>Welcome, {session.user.name}!</h1>
-				
-					<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">Fauxcall</h1>
-					<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">Set emergency contacts</h2>
-					<p>If you stop speaking or say the codeword, these contacts will be notified</p>
-					{/* form for setting codeword */}
-					<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
-						<input
-							type="text"
-							value={codeword}
-							onChange={(e) => setCodeword(e.target.value)}
-							placeholder="Codeword"
-							className="border border-gray-300 rounded-md p-2"
-						/>
-						<button
+
+				<h1 className="space-y-3 text-6xl text-lime-500 subpixel-antialiased font-stretch-semi-expanded font-serif">
+					Fauxcall
+				</h1>
+				<h2 className="space-y-3 text-6x1 text-red-700 antialiased font-mono">
+					Set emergency contacts
+				</h2>
+				<p>
+					If you stop speaking or say the codeword, these contacts will be
+					notified
+				</p>
+				{/* form for setting codeword */}
+				<form
+					className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
+					onSubmit={(e) => e.preventDefault()}
+				>
+					<input
+						type="text"
+						value={codeword}
+						onChange={(e) => setCodeword(e.target.value)}
+						placeholder="Codeword"
+						className="border border-gray-300 rounded-md p-2"
+					/>
+					<button
 						className="bg-blue-500 text-white font-semibold font-lg rounded-md p-2"
-						type="submit">Set codeword</button>
-					</form>
-					{/* form for adding contacts */}
-					<form id="Contacts" className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}>
+						type="submit"
+					>
+						Set codeword
+					</button>
+				</form>
+				{/* form for adding contacts */}
+				<form
+					id="Contacts"
+					className="space-y-5 flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
+					onSubmit={(e) => e.preventDefault()}
+				>
 					<input
 						type="text"
 						value={contacts}
@@ -127,19 +209,37 @@ export default async function Home() {
 						placeholder="Write down an emergency contact"
 						className="text-input border border-gray-300 rounded-md p-2"
 					/>
-					<button onClick={() => {
-						alert("Adding contact...");
-						let elem = document.getElementsByClassName("text-input")[0] as HTMLElement;
-						console.log("Element:", elem);
-						let d = elem.cloneNode(true) as HTMLElement;
-						document.getElementById("Contacts")?.appendChild(d);
-					}}
-					className="bg-emerald-500 text-fuchsia-300"
-					type="button">Add</button>
-					
-						<button className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2" type="submit">Set contacts</button>
-					</form>
-				
+					<button
+						onClick={() => {
+							alert("Adding contact...");
+							let elem = document.getElementsByClassName(
+								"text-input"
+							)[0] as HTMLElement;
+							console.log("Element:", elem);
+							let d = elem.cloneNode(true) as HTMLElement;
+							document.getElementById("Contacts")?.appendChild(d);
+						}}
+						className="bg-emerald-500 text-fuchsia-300"
+						type="button"
+					>
+						Add
+					</button>
+
+					<button
+						type="button"
+						onClick={saveToDB}
+						className="bg-slate-500 text-yellow-300 text-stretch-50% font-lg rounded-md p-2"
+					>
+						Save
+					</button>
+				</form>
+				<div>
+					<a href="/call">
+						<button className="bg-zinc-700 text-lime-300 font-semibold font-lg rounded-md p-2">
+							Call
+						</button>
+					</a>
+				</div>
 				<p>
 					<a href="/auth/logout">
 						<button>Log out</button>

React/src/pages/api/databaseStorage.ts

@@ -0,0 +1,56 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import mongoose from "mongoose";
+
+const uri = process.env.MONGODB_URI || "mongodb://localhost:27017/mydatabase";
+const clientOptions = { serverApi: { version: "1" as const, strict: true, deprecationErrors: true } };
+
+// Create a reusable connection function
+async function connectToDatabase() {
+  if (mongoose.connection.readyState === 0) {
+    // Only connect if not already connected
+    await mongoose.connect(uri, clientOptions);
+    console.log("Connected to MongoDB!");
+    mongoose.model("User", new mongoose.Schema({
+        email: { type: String, required: true, unique: true },
+        codeword: { type: String, required: true },
+        contacts: [{ type: String }],
+        }));
+  }
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    // Ensure the database is connected
+    await connectToDatabase();
+
+
+    if (req.method === 'POST') {
+      const { email, codeword, contacts } = req.body;
+
+      // Perform database operations here
+      // query database to see if document with email exists
+      const existingUser = await mongoose.model('User').findOne({ email });
+      if (existingUser) {
+        // If user exists, update their codeword and contacts
+        await mongoose.model('User').updateOne({ email }, { codeword, contacts });
+      } else {
+        // If user does not exist, create a new user
+        const User = mongoose.model('User');
+        const newUser = new User({ email, codeword, contacts });
+        await newUser.save();
+      }
+
+
+      console.log("Codeword:", codeword);
+      console.log("Contacts:", contacts);
+
+      res.status(200).json({ success: true, message: "Data saved successfully!" });
+    } else {
+      res.setHeader('Allow', ['POST']);
+      res.status(405).end(`Method ${req.method} Not Allowed`);
+    }
+  } catch (error) {
+    console.error("Error:", error);
+    res.status(500).json({ success: false, error: "Internal Server Error" });
+  }
+}