Co-authored-by: viggobryantfrost@outlook.com <viggobryantfrost@outloo…

…k.com>

src/pages/404.tsx

@@ -0,0 +1,10 @@
+export default function Custom404() {
+    return (
+        <><div>
+            <br />
+            <h1>404</h1>
+        </div><div>
+                <p></p>
+            </div></>
+    );
+}

src/pages/_app.tsx

@@ -1,42 +1,72 @@
-  import '@/styles/globals.css'
-import { SpeedInsights } from '@vercel/speed-insights/next'
-import type { AppProps } from 'next/app'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useState } from 'react'
-import log from './api/log'
-import { listenForUser } from './api/users/functions'
-
+import "@/styles/globals.css";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import type { AppProps } from "next/app";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import log from "./api/log";
+import { listenForUser } from "./api/users/functions";
 
 var loggedIn = false;
 export function toggleLoggedIn() {
-  loggedIn = !loggedIn;
-  return loggedIn;
+	loggedIn = !loggedIn;
+	return loggedIn;
+}
+
+function LoginButton() {
+	return (
+		<button className="primary" style={{ float: "right", marginRight: "0" }}>
+			Log in
+		</button>
+	);
+}
+
+function LogoutButton() {
+  return (
+		<button onClick={() => {
+
+    }} className="primary" style={{ float: "right", marginRight: "0" }}>
+			Log out
+		</button>
+	);
 }
 
 export default function App({ Component, pageProps }: AppProps) {
-  const [topBarClass, setTopBarClass] = useState('topBar')
-  const [buttonText, setButtonText] = useState('Log in')
-  const router = useRouter()
-  function pushToIndex() { router.push('/')}
-  listenForUser((userr) => {
-    log("User logged in!", "_app/listenForUser")
-    setButtonText('Log out');
-  });
+	const [topBarClass, setTopBarClass] = useState("topBar");
+	const [buttons, setButtons] = useState([<LoginButton/>]);
+	const router = useRouter();
+	function pushToIndex() {
+		router.push("/");
+	}
 
+	listenForUser((user) => {
+		log("User logged in!", "_app/listenForUser");
+    setButtons([])
+	});
 
-  return <span>
-    <SpeedInsights/>
-
-    <div id='topBar' className={topBarClass}>
-      <Image alt='Escodon logo' onClick={pushToIndex} style={{ marginTop: '6px', marginBottom: '2px', float: 'left', cursor: 'pointer' }} width='22' height='22' src={'/assets/logo_simple.svg'} />
-      <Link href="/users/login">
-        <button className='primary' style={{ float: 'right', marginRight: '0' }} >{buttonText}</button>
-      </Link>
-      {/* <button className='primary' style={{ float: 'right' }}>Sign up</button> */} {/* We dont need two buttons*/}
-    </div>
+	return (
+		<span>
+			<div id="topBar" className={topBarClass}>
+				<Image
+					alt="Escodon logo"
+					onClick={pushToIndex}
+					style={{
+						marginTop: "6px",
+						marginBottom: "2px",
+						float: "left",
+						cursor: "pointer",
+					}}
+					width="22"
+					height="22"
+					src={"/assets/logo_simple.svg"}
+				/>
+				{buttons}
+				{/* <button className='primary' style={{ float: 'right' }}>Sign up</button> */}{" "}
+				{/* We dont need two buttons*/}
+			</div>
 
-    <Component {...pageProps} />
-  </span>
+			<Component {...pageProps} />
+			<SpeedInsights />
+		</span>
+	);
 }

src/pages/api/firebase.ts

@@ -6,23 +6,23 @@ import { getFirestore } from "firebase/firestore";
 
 let firebaseConfig;
 
-if (process.env.DEV !== "true") {
-  firebaseConfig = {
-    apiKey: process.env.apiKey,
-    authDomain: process.env.authDomain,
-    projectId: process.env.projectId,
-    storageBucket: process.env.storageBucket,
-    messagingSenderId: process.env.messagingSenderId,
-    appId: process.env.appId,
-    measurementId: process.env.measurementId
-  };
-} else {
-  try {
+// if (process.env.DEV !== "true") {
+//   firebaseConfig = {
+//     apiKey: process.env.apiKey,
+//     authDomain: process.env.authDomain,
+//     projectId: process.env.projectId,
+//     storageBucket: process.env.storageBucket,
+//     messagingSenderId: process.env.messagingSenderId,
+//     appId: process.env.appId,
+//     measurementId: process.env.measurementId
+//   };
+// } else {
+//   try {
     firebaseConfig = require("../../../firebase.json");
-  } catch (error) {
-    console.log("Could not load firebase.json:", error);
-  }
-}
+//   } catch (error) {
+//     console.log("Could not load firebase.json:", error);
+//   }
+// }
 
 /**
  * The firebase app object. 

src/pages/api/food/functions.ts

@@ -85,7 +85,7 @@ export default interface Recipe {
 export async function newRecipe(recipe: Recipe, UserID: string | null, privateRecipe: boolean) {
   log(`Adding recipe "${recipe.name}"`, "newRecipe");
   if (UserID == null) { return false;}
-  let docRef = collection(db, "Users", UserID, "recipes");
+  let docRef = collection(db, "users", UserID, "recipes");
   let res = await addDoc(docRef, recipe);
   await updateIndex(recipe, privateRecipe);
   if (res == null) {

src/pages/api/users/functions.ts

@@ -14,7 +14,7 @@ export const runtime = 'edge';
 
 /**
  * Logs out the currently authenticated user.
- * @returns {Promise} .
+ * @returns {Promise}.
  */
 export async function logoutUser(): Promise<void> {
   log("Logging out user", "logoutUser");

src/pages/recipe/new.tsx

@@ -0,0 +1,107 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import Recipe, { instruction, newRecipe } from "../api/food/functions";
+import log from "../api/log";
+import { listenForUser } from "../api/users/functions";
+
+export default function NewFood() {
+	const [instructionBox, setTextBoxes] = useState([{ id: 0, value: "" }]);
+	const [localUser, setLocalUser] = useState<User | null>(null);
+	const router = useRouter();
+	var { uid } = router.query;
+	type User = {
+		displayName: string | null;
+		email: string | null;
+		uid: string | null;
+	};
+
+	listenForUser((user) => {
+		if (!user) {
+			log("User is null! Redirecting to login page", "food/new/listenForUser");
+			router.push({
+				pathname: "/login",
+				query: {
+					then: "/food/new",
+					thenDisplayName: "Settings",
+				},
+			});
+		} else {
+			setLocalUser(user);
+			log("User signed in. Continuing...", "food/new/listenForUser");
+		}
+	});
+
+	const addTextBox = () => {
+		setTextBoxes([...instructionBox, { id: instructionBox.length, value: "" }]);
+	};
+
+	const updateTextBox = (id: any, newValue: any) => {
+		setTextBoxes(
+			instructionBox.map((box) =>
+				box.id === id ? { id, value: newValue } : box
+			)
+		);
+	};
+
+	const getValues = async () => {
+		const values = instructionBox.map((box) => box.value);
+		let instructionsFormatted: instruction[] = [];
+		var i;
+		for (i in values) {
+			instructionsFormatted.push({
+				step: parseInt(i),
+				instruction: values[i],
+				time: 0,
+			});
+		}
+		let toDB: Recipe = {
+			name: "test",
+			description: "", // is this a test object? yeah
+			ingredients: [],
+			instructions: instructionsFormatted,
+			tags: [],
+		};
+    return toDB;
+
+	};
+  async function handleSubmit() {
+    let value = await getValues();
+    log("DEBUG: " + JSON.stringify(value), "food/new/getValues");
+		await newRecipe(value, localUser?.uid || null, false);
+  }
+
+	return (
+		<>
+			<Head>
+				<title>Create Recipe | Flavourdeck</title>
+				<meta name="description" content="Create a recipe | Flavourdeck" />
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<main>
+				<h1>New Recipe</h1>
+				<input type="text" placeholder="Recipe name" />
+				<br />
+				<textarea style={{resize: 'vertical'}} placeholder="Recipe description" />
+				<br />
+				{instructionBox.map((box, index) => (
+					<textarea
+						key={index}
+						placeholder={`Instruction No.${index + 1}`}
+						value={box.value}
+						onChange={(e) => updateTextBox(box.id, e.target.value)}
+						style={{
+							display: "block",
+							margin: "9px 0",
+							height: "300px",
+							resize: 'vertical'
+						}}
+					/>
+				))}
+				<button onClick={addTextBox}>New Instruction Box</button>
+				<button onClick={handleSubmit}>Submit</button>
+			</main>
+		</>
+	);
+}

src/pages/recipe/view.tsx

@@ -0,0 +1,7 @@
+export default function View() {
+    return (
+        <div>
+            <h1>View</h1>
+        </div>
+    );
+}