Skip to content

Commit

Permalink
Merge pull request #17 from Aromiii/newDatamodel
Browse files Browse the repository at this point in the history
New datamodel
  • Loading branch information
Aromiii authored Oct 22, 2022
2 parents 5d85aab + 201c0be commit cb6f652
Show file tree
Hide file tree
Showing 7 changed files with 95 additions and 67 deletions.
6 changes: 3 additions & 3 deletions components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ const Dropdown = () => {

const RecipeSearchBar = () => {
return <div className="mx-auto flex">
<IoFilterOutline size="35"/>
<IoFilterOutline/>
<input type="text"
placeholder=" Search recipes..."
className="text-xl rounded-3xl bg-gray-300 text p-1 mx-3"/>
className="text-xl rounded-3xl bg-gray-300 p-1 mx-3 w-[80%]"/>
<Link href="/recipes/addnew" passHref>
<a>
<IoAdd size="35"/>
<IoAdd/>
</a>
</Link>
</div>;
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "food-helper-next",
"version": "0.1.0",
"name": "food-helper",
"version": "1.0.0-BETA",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
9 changes: 5 additions & 4 deletions pages/profile/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import Head from "next/head";
import {getAuth, signOut} from "firebase/auth";
import {onAuthStateChanged, signOut} from "firebase/auth";
import {auth, db} from "../../config/firebase";
import {collection, getDocs} from "@firebase/firestore";
import {useState} from "react";

const Profile = () => {

const auth = getAuth();
console.log(auth)

const Profile = () => {
const signOutHandler = () => {
signOut(auth).then(() => {
location.replace("/")
Expand Down
18 changes: 15 additions & 3 deletions pages/recipes/addnew.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
import Head from "next/head";
import {useState} from "react";
import {addDoc, collection} from "@firebase/firestore";
import {db} from "../../config/firebase";
import {addDoc, collection, CollectionReference, getDocs} from "@firebase/firestore";
import {auth, db} from "../../config/firebase";
import {onAuthStateChanged} from "firebase/auth";

const AddNew = () => {
//TODO on refresh browser lost auth so its null
const [name, setName] = useState("")
const [desc, setDesc] = useState("")
const [recipe, setRecipe] = useState("")
const [imageLink, setImageLink] = useState("")

const colRef = collection(db, 'recipes')
let colRef: CollectionReference
onAuthStateChanged(auth, (user) => {
if (user) {
//Collection reference to recipes that current user owns
const colRef = collection(db, 'users', user.uid, 'recipes')

} else {
console.log("Sign in required for adding new recipe")
}
})


const handleSubmit = () => {
if (name != "" || recipe != "") {
Expand Down
73 changes: 44 additions & 29 deletions pages/recipes/index.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,70 @@
import Head from "next/head";
import React, {useEffect, useState} from "react";
import React, {useState} from "react";
import Link from "next/link";
import {collection, DocumentData, getDocs} from "@firebase/firestore";
import {db} from '../../config/firebase'
import {db, auth} from '../../config/firebase'
import {onAuthStateChanged} from "firebase/auth";

const RecipeContainer = (props: { data: DocumentData }) => {

return (
<Link href={"/recipes/recipe/" + props.data.id}>
<div className="recipeContainer">
<img src={props.data.image} className="recipeContainerImage"/>
<div className="p-2">
<h1>{props.data.name}</h1>
<p>{props.data.desc}</p>
</div>
<Link href={"/recipes/recipe/" + props.data.id}>
<div className="bg-gray-500 m-2 rounded-2xl h-96 object-cover overflow-hidden">
<img src={props.data.image} className="rounded-2xl max-h-[60%] w-screen object-cover"/>
<div className="p-2">
<h1>{props.data.name}</h1>
<p>{props.data.desc}</p>
</div>
</Link>
</div>
</Link>
);
}

const Recipes = () => {
//TODO migrate to getServerSideProps to make flash go away
const [recipes, setRecipes] = useState<DocumentData[]>([])

// Collection refs
const colRef = collection(db, 'recipes')
onAuthStateChanged(auth, (user) => {
if (user) {
//Collection reference to recipes that current user owns
const colRef = collection(db, 'users', user.uid, 'recipes')

// Get collection data
useEffect(() => {
getDocs(colRef)
//Getting recipes from the database
getDocs(colRef)
.then((snapshot) => {
setRecipes([])
snapshot.docs.forEach((doc) => {
setRecipes(recipes => [...recipes, {...doc.data(), id: doc.id}])
})
}).catch(error => {
console.log(error.message)
})
}, [])

console.log(error.message)
})
}
})

return (
<main className="grid grid-cols-recipe3 justify-center place-content-start
<main className="grid grid-cols-recipe3 justify-center place-content-start
bg-gradient-to-bl from-blue-800 to-green-400 h-[100%] min-h-[calc(100vh-4rem)]">
<Head>
<title>Recipes</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
{
recipes.map((recipe: DocumentData) => <RecipeContainer data={recipe} key={recipe.id}/>)
}
</main>

<Head>
<title>Recipes</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
{auth.currentUser === null ? (
<div className="h-[calc(100vh-4rem)] place-content-center place-items-center flex">
<Link href="/recipes/addnew">
<h1 className="text-center">
Create your first recipe by clicking here
</h1>
</Link>
</div>
) : (
<div>
{
recipes.map((recipe: DocumentData) => <RecipeContainer data={recipe} key={recipe.id}/>)
}
</div>
)}
</main>
)
}
export default Recipes;
44 changes: 26 additions & 18 deletions pages/recipes/recipe/[recipeId].tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import Head from "next/head";
import {useRouter} from "next/router";
import {db} from "../../../config/firebase";
import {getDoc, doc, deleteDoc, DocumentData} from "@firebase/firestore";
import {useEffect, useState} from "react";
import {auth, db} from "../../../config/firebase";
import {getDoc, doc, deleteDoc, DocumentReference, DocumentData} from "@firebase/firestore";
import {useState} from "react";
import {onAuthStateChanged} from "firebase/auth";

const RecipeSiteBody = (props: {image: string, name: string, desc: string, recipe: string}) => {
return <>
Expand All @@ -24,29 +25,36 @@ const RecipeSiteBody = (props: {image: string, name: string, desc: string, recip
}

const Recipe = () => {
//TODO on refresh browser lost auth so its null
const [image, setImage] = useState("Error")
const [name, setName] = useState("Error")
const [desc, setDesc] = useState("Error")
const [recipe, setRecipe] = useState("Error")

const router = useRouter()

const docRef = doc(db, "recipes", "" + router.query.recipeId)
let docRef: DocumentReference

//TODO migrate to getServerSideProps to make flash go away
onAuthStateChanged(auth, (user) => {
if (user) {
//Document reference to recipes that current user owns
docRef = doc(db, 'users', user.uid, 'recipes', "" + router.query.recipeId)

useEffect(() => {
getDoc(docRef).then((doc) => {
const data = doc.data()
if (data != undefined) {
setImage(data.image)
setDesc(data.desc)
setName(data.name)
setRecipe(data.recipe)
}
}).catch((error) => {
alert(error)
})
//Getting recipes from the database
getDoc(docRef).then((doc) => {
const data = doc.data()
if (data != undefined) {
setImage(data.image)
setDesc(data.desc)
setName(data.name)
setRecipe(data.recipe)
} else {
console.error("Data was undefined")
}
}).catch((error) => {
console.error(error)
alert(error)
})
}
})

const handleRemove = () => {
Expand Down
8 changes: 0 additions & 8 deletions styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,6 @@
}

@layer components {
.recipeContainer {
@apply bg-gray-500 m-2 rounded-2xl h-96 object-cover overflow-hidden
}

.recipeContainerImage {
@apply rounded-2xl max-h-[60%] w-screen object-cover
}

.navbarListItem {
@apply rounded-3xl w-12 h-12 justify-center place-items-center flex
}
Expand Down

1 comment on commit cb6f652

@vercel
Copy link

@vercel vercel bot commented on cb6f652 Oct 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

food-helper – ./

food-helper-rho.vercel.app
food-helper-git-main-aromiii.vercel.app
food-helper-aromiii.vercel.app

Please sign in to comment.