Add Firebase dependency and update data retrieval from API

Author: withoutwax

app/game/page.js

@@ -15,7 +15,7 @@ export default function Game() {
     theme,
     easterEgg,
     setEasterEgg,
-    apiData,
+    dbData,
   } = useGameContext();
 
   const [stage, setStage] = useState(1);
@@ -49,7 +49,7 @@ export default function Game() {
             spyMode,
             spyNumber,
             theme,
-            apiData,
+            dbData,
           }}
           nextStage={progressNextStage}
           setVocab={updateGlobalVocab}
@@ -90,7 +90,7 @@ export default function Game() {
             spyMode,
             spyNumber,
             theme,
-            apiData,
+            dbData,
           }}
           nextStage={progressNextStage}
           setVocab={updateGlobalVocab}

app/settings/page.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+// import { useEffect } from "react";
 import { useGameContext } from "@/components/GameContextWrapper";
 import Link from "next/link";
 
@@ -14,37 +14,17 @@ export default function Settings() {
     setSpyMode,
     spyNumber,
     setSpyNumber,
-    theme,
     setTheme,
     themeKr,
     easterEgg,
-    setEasterEgg,
-    apiData,
-    setApiData,
+    dbData,
   } = useGameContext();
 
-  useEffect(() => {
-    if (easterEgg !== "") {
-      setEasterEgg(easterEgg);
-    }
-
-    // Get data from API
-    getDataFromDb();
-  }, []);
-
-  const getDataFromDb = () => {
-    fetch("https://liar-game-api.withoutwax.now.sh/api/getData")
-      .then((data) => data.json())
-      .then((res) => {
-        setApiData(res);
-      });
-  };
-
   let themeButton = [];
   // After apiData state has value from the API
-  if (apiData) {
-    themeButton = apiData.data.map((theme) => {
-      return theme.easterEgg === "false" || theme.easterEgg === easterEgg ? (
+  if (dbData) {
+    themeButton = dbData.map((theme) => {
+      return theme.easterEgg === false || theme.easterEgg === easterEgg ? (
         <Link
           href="/game"
           onClick={() => setTheme(theme.type)}
@@ -168,8 +148,6 @@ export default function Settings() {
           })}
         </div>
       </div>
-
-      {/* <div>{startGameButton}</div> */}
     </section>
   );
 }

components/Game.js

@@ -1,8 +1,22 @@
 "use client";
-import { createContext, useState, useContext } from "react";
+import { createContext, useEffect, useState, useContext } from "react";
+import { initializeApp } from "firebase/app";
+// import { getAnalytics } from "firebase/analytics";
+import { getFirestore, collection, getDocs } from "firebase/firestore/lite";
 
 const GameContext = createContext();
 
+// Initialize Firebase
+const firebaseConfig = {
+  apiKey: "AIzaSyCVaCt88HHIpwktXRD7yvp-ocmhwOm_sks",
+  authDomain: "liar-game-15738.firebaseapp.com",
+  projectId: "liar-game-15738",
+  storageBucket: "liar-game-15738.appspot.com",
+  messagingSenderId: "604644848255",
+  appId: "1:604644848255:web:418478bd5426c19c09854a",
+  measurementId: "G-4JGZ8JGX1V",
+};
+
 export const GameContextWrapper = ({ children }) => {
   const [playerNum, setPlayerNum] = useState(3);
   const [timer, setTimer] = useState(60);
@@ -11,7 +25,25 @@ export const GameContextWrapper = ({ children }) => {
   const [theme, setTheme] = useState("");
   const [themeKr, setThemeKr] = useState("");
   const [easterEgg, setEasterEgg] = useState("false");
-  const [apiData, setApiData] = useState(null);
+  // const [apiData, setApiData] = useState(null);
+  const [dbData, setDbData] = useState(null);
+
+  const app = initializeApp(firebaseConfig);
+  // const analytics = getAnalytics(app);
+  const db = getFirestore(app);
+
+  // console.log("db", db);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const querySnapshot = await getDocs(collection(db, "words"));
+      const data = querySnapshot.docs.map((doc) => doc.data());
+      setDbData(data);
+      console.log(data);
+    };
+
+    fetchData();
+  }, [db]);
 
   return (
     <GameContext.Provider
@@ -30,8 +62,9 @@ export const GameContextWrapper = ({ children }) => {
         setThemeKr,
         easterEgg,
         setEasterEgg,
-        apiData,
-        setApiData,
+        // apiData,
+        // setApiData,
+        dbData,
       }}
     >
       {children}

components/GameContextWrapper.js

@@ -11,7 +11,7 @@ const Select = (props) => {
     playerNum,
     spyMode,
     spyNumber,
-    apiData,
+    dbData,
     theme,
     easterEgg,
     setEasterEgg,
@@ -39,9 +39,7 @@ const Select = (props) => {
     // If the API is not present
     let chosenTheme;
     let data;
-    console.log("theme", theme);
-    if (apiData === null) {
-      console.log("foodData", foodData);
+    if (dbData === null) {
       chosenTheme = {
         food: foodData,
         place: placeData,
@@ -51,17 +49,15 @@ const Select = (props) => {
       };
       data = chosenTheme[theme || "food"].kr;
     } else {
-      console.log("apiData", apiData);
-      for (let i = 0; i < apiData.data.length; i++) {
-        let words = apiData.data[i];
+      for (let i = 0; i < dbData.length; i++) {
+        let words = dbData[i];
         if (words.type === (theme || "food")) {
           chosenTheme = words.kr;
         }
       }
       data = chosenTheme;
     }
 
-    console.log("data", data);
     setSelectData(data);
     generateRandomNumber(data);
   }, []);