made frontend get data from firestore

components/navbar.tsx

@@ -40,7 +40,6 @@ const NavBar = () => {
             <img src={localStorage.getItem("profilePic")!} className="rounded-3xl"/>
           </Link>
         )}
-
       </li>
     </ul>
   )

config/firebase.ts

@@ -1,25 +1,29 @@
 // Import the functions you need from the SDKs you need
 import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from 'firebase/auth';
 import { initializeApp } from "firebase/app";
+import { getFirestore, collection, getDocs } from "firebase/firestore";
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
 
 // Your web app's Firebase configuration
 // For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
-  apiKey: "AIzaSyAjlx36rihQ_vS1KpU2WeCjTArR1Y_rh_M",
-  authDomain: "food-helper-a73b7.firebaseapp.com",
-  projectId: "food-helper-a73b7",
-  storageBucket: "food-helper-a73b7.appspot.com",
-  messagingSenderId: "404309027827",
-  appId: "1:404309027827:web:47b25e11243eb625ed8086",
-  measurementId: "G-9FCCSBNYT0"
+  apiKey: "AIzaSyDQlWrPV7vL1gPY3cjLIIt-1UUJaANGrEM",
+  authDomain: "food-helper-63fd0.firebaseapp.com",
+  projectId: "food-helper-63fd0",
+  storageBucket: "food-helper-63fd0.appspot.com",
+  messagingSenderId: "833087637499",
+  appId: "1:833087637499:web:b588bc7700c47a35266d5e"
 };
 
+
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 export const auth = getAuth(app)
 
+// Initialize Firestore
+export const db = getFirestore()
+
 //Initialize provider
 const provider = new GoogleAuthProvider()
 

pages/index.tsx

@@ -2,6 +2,7 @@ import type {NextPage} from 'next'
 import Head from 'next/head'
 import React from "react";
 
+
 const Home: NextPage = () => {
   return (
     <div className="h-[calc(100vh-4rem)]">

pages/profile/index.tsx

@@ -3,12 +3,12 @@ import {getAuth, signOut} from "firebase/auth";
 import {router} from "next/client";
 
 
-const ShoppingList = () => {
+const Profile = () => {
 
   const auth = getAuth();
   const signOutHandler = () => {
     signOut(auth).then(() => {
-      router.push("/")
+      router.replace("/")
     }).catch((error) => {
       console.log(error)
     });
@@ -26,4 +26,4 @@ const ShoppingList = () => {
 
   )
 }
-export default ShoppingList;
+export default Profile;

pages/recipes/[recipeId].tsx

@@ -2,6 +2,8 @@ import Head from "next/head";
 import {useRouter} from "next/router";
 import {useEffect, useState} from "react";
 import axios from "axios";
+import {getAuth, onAuthStateChanged} from "firebase/auth";
+
 
 const RecipeSiteBody = (props: { data: { image: string; name: string; recipe: string; desc: string } }) => {
   return <>

pages/recipes/index.tsx

@@ -2,8 +2,12 @@ import Head from "next/head";
 import React, {useEffect, useState} from "react";
 import axios from "axios";
 import Link from "next/link";
+import { collection, getDocs } from "@firebase/firestore";
+import { db } from '../../config/firebase'
+import {any} from "prop-types";
 
 const RecipeContainer = (props: { data: { image: string; name: string; desc: string; id: string } }) => {
+
   return (
     <Link href={"/recipes/" + props.data.id}>
       <div className="recipeContainer">
@@ -19,17 +23,23 @@ const RecipeContainer = (props: { data: { image: string; name: string; desc: str
 
 
 const Recipes = () => {
-  const [data, setData] = useState([""])
+  const [recipes, setRecipes] = useState([])
 
-  const getRecipes = () => {
-    //TODO
-    axios.get("/api/recipes/---placeholder---")
-      .then((res) => {
-        setData(res.data);
-      })
-  }
+  // Collection refs
+  const colRef = collection(db, 'recipes')
 
-  useEffect(() => getRecipes(), [])
+// Get collection data
+  useEffect(() => {
+    getDocs(colRef)
+      .then((snapshot) => {
+        snapshot.docs.forEach((doc) => {
+          setRecipes(recipes => [...recipes, { ...doc.data(), id: doc.id }])
+        })
+        console.log(recipes)
+      }).catch(error => {
+      console.log(error.message)
+    })
+  }, [])
 
 
   return (
@@ -40,7 +50,7 @@ const Recipes = () => {
       </Head>
       {
         // @ts-ignore
-        data.map((recipe) => <RecipeContainer data={recipe} key={recipe.id}/>)
+        recipes.map((recipe) => <RecipeContainer data={recipe} key={recipe.id}/>)
       }
     </div>