remove next-pwa package

components/CategoryCard.jsx

@@ -3,7 +3,7 @@ import React from "react";
 
 const CategoryCard = ({ title, image, icon, slug, quizzes, id }) => {
   return (
-    <Link key={id} href={`/category/${slug}`}>
+    <Link key={id} href={`/category/[cSlug]`} as={`/category/${slug}`}>
       <div
         className="relative ml-2 mt-2 flex h-32 cursor-pointer flex-col justify-end border-2 border-midnight-500 p-3 pb-2 text-white-500 before:absolute before:right-[2px] before:bottom-[2px] before:bg-white-500 after:bg-white-500 before:-left-[6px] before:-top-[6px] before:-z-10 before:border-2 before:border-midnight-500 after:absolute after:right-2 after:bottom-2 after:-left-[10px] after:-top-[10px] after:-z-20 after:border-2 after:border-midnight-500"
         style={{

components/Footer.jsx

@@ -1,13 +1,15 @@
+import Link from "next/link";
+
 const Footer = () => {
   return (
     <footer className="mt-8 w-full bg-midnight-500 pt-10">
       <div className="container mx-auto text-white-500">
         <ul className="mb-12 flex flex-col items-center justify-center gap-4 uppercase md:flex-row md:items-end lg:gap-12">
           <li className="pb-3">
-            <a href="#">About Us</a>
+            <Link href="/about">About Us</Link>
           </li>
           <li className="pb-3">
-            <a href="#">Quizzes</a>
+            <Link href="/">Quizzes</Link>
           </li>
           <li>
             <img
@@ -17,10 +19,10 @@ const Footer = () => {
             />
           </li>
           <li className="pb-3">
-            <a href="#">Contact</a>
+            <Link href="/contact">Contact</Link>
           </li>
           <li className="pb-3">
-            <a href="#">Team</a>
+            <Link href="/">Team</Link>
           </li>
         </ul>
         <ul className="mb-8 flex flex-wrap items-center justify-center gap-4 uppercase lg:gap-16">

components/Header.jsx

@@ -33,7 +33,7 @@ const Header = ({ title, imageUrl, slug, subText, color }) => {
         <div className="hero-l">
           <h1 className="main-title">{title}</h1>
           {subText && slug && color && (
-            <Link href={`/category/${slug}`}>
+            <Link href={`/category/[cSlug]`} as={`/category/${slug}`}>
               <div className="flex items-center gap-1">
                 <div
                   className="h-px w-12 bg-aquamarine-500 sm:w-20 md:w-32 lg:w-52 xl:w-64 2xl:w-96"

components/QuizCard.jsx

@@ -2,7 +2,10 @@ import Link from "next/link";
 
 const QuizCard = ({ title, description, time, slug, category, questions }) => {
   return (
-    <Link href={`/category/${category.slug}/quiz/${slug}`}>
+    <Link
+      href={`/category/[cSlug]/quiz/[qSlug]`}
+      as={`/category/${category.slug}/quiz/${slug}`}
+    >
       <div className="border border-midnight-500 p-3 flex flex-col gap-5 cursor-pointer">
         <div className="">
           <span className="text-xs tracking-md capitalize">

contexts/AuthContext.js

@@ -7,8 +7,8 @@ import {
   signInWithEmailAndPassword,
   signInWithPopup,
   signOut,
-  updateProfile,
 } from "firebase/auth";
+// import cookies from "js-cookie";
 import React, { createContext, useContext, useEffect, useState } from "react";
 import "../services/firebase";
 
@@ -18,15 +18,41 @@ export function useAuth() {
   return useContext(AuthContext);
 }
 
+const formatUser = (user) => {
+  return {
+    uid: user.uid,
+    email: user.email,
+    name: user.displayName,
+    provider: user.providerData[0].providerId,
+    photoURL: user.photoURL,
+  };
+};
+
 export function AuthProvider({ children }) {
   const [loading, setLoading] = useState(true);
   const [currentUser, setCurrentUser] = useState();
 
+  const handleUser = (rawUser) => {
+    if (rawUser) {
+      console.log(rawUser);
+      const user = formatUser(rawUser);
+      console.log(user);
+      setCurrentUser(user);
+      // cookies.set("biofidelicX-quiz-auth", true, { expires: 1 });
+      setLoading(false);
+      return user;
+    } else {
+      // cookies.remove("biofidelicX-quiz-auth");
+      setCurrentUser(false);
+      return false;
+    }
+  };
+
   useEffect(() => {
     const auth = getAuth();
+
     const unsubscribe = onAuthStateChanged(auth, (user) => {
-      setCurrentUser(user);
-      setLoading(false);
+      handleUser(user);
     });
 
     return unsubscribe;
@@ -35,42 +61,71 @@ export function AuthProvider({ children }) {
   // signup function
   async function signup(email, password, name) {
     const auth = getAuth();
-    await createUserWithEmailAndPassword(auth, email, password);
 
+    try {
+      const res = await createUserWithEmailAndPassword(auth, email, password);
+      handleUser(res.user);
+    } catch (error) {
+      console.log(error);
+    }
     // update profile
-    await updateProfile(auth.currentUser, {
-      displayName: name,
-    });
+    // await updateProfile(auth.currentUser, {
+    //   displayName: name,
+    // });
 
-    const user = auth.currentUser;
-    setCurrentUser({
-      ...user,
-    });
+    // const user = auth.currentUser;
+    // setCurrentUser({
+    //   ...user,
+    // });
   }
 
   // login function
-  function login(email, password) {
+  async function login(email, password) {
     const auth = getAuth();
-    return signInWithEmailAndPassword(auth, email, password);
+
+    try {
+      const res = await signInWithEmailAndPassword(auth, email, password);
+      handleUser(res.user);
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   // login with google function
-  function loginWithGoogle() {
+  async function loginWithGoogle() {
     const googleProvider = new GoogleAuthProvider();
     const auth = getAuth();
-    return signInWithPopup(auth, googleProvider);
+
+    try {
+      const res = await signInWithPopup(auth, googleProvider);
+      handleUser(res.user);
+    } catch (error) {
+      console.log(error);
+    }
   }
 
-  function loginWithFacebook() {
+  async function loginWithFacebook() {
     const facebookProvider = new FacebookAuthProvider();
     const auth = getAuth();
-    return signInWithPopup(auth, facebookProvider);
+
+    try {
+      const res = await signInWithPopup(auth, facebookProvider);
+      handleUser(res.user);
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   // logout function
-  function logout() {
+  async function logout() {
     const auth = getAuth();
-    return signOut(auth);
+
+    try {
+      const res = await signOut(auth);
+      handleUser(false);
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   const value = {

next.config.js

@@ -1,11 +1,6 @@
-/** @type {import('next').NextConfig} */
-const withPWA = require("next-pwa")({
-  dest: "public",
-  register: true,
-  skipWaiting: true,
-  disable: process.env.NODE_ENV === "development",
-});
-
+/**
+ * @type {import('next').NextConfig}
+ */
 const nextConfig = {
   reactStrictMode: true,
   async redirects() {
@@ -17,6 +12,13 @@ const nextConfig = {
       },
     ];
   },
+  // generateBuildId: async () => {
+  //   if (process.env.BUILD_ID) {
+  //     return process.env.BUILD_ID;
+  //   } else {
+  //     return `${new Date().getTime()}`;
+  //   }
+  // },
 };
 
-module.exports = withPWA(nextConfig);
+module.exports = nextConfig;

package.json

@@ -13,8 +13,8 @@
     "firebase": "^9.15.0",
     "graphql": "^16.6.0",
     "graphql-request": "^5.0.0",
+    "js-cookie": "^3.0.1",
     "next": "12.1.6",
-    "next-pwa": "^5.6.0",
     "react": "18.2.0",
     "react-countdown": "^2.3.3",
     "react-dom": "18.2.0",

pages/_document.js

@@ -5,8 +5,8 @@ class MyDocument extends Document {
     return (
       <Html>
         <Head>
-          <link rel="manifest" href="/manifest.json" />
-          <link rel="apple-touch-icon" href="/icon.png"></link>
+          {/* <link rel="manifest" href="/manifest.json" /> */}
+          {/* <link rel="apple-touch-icon" href="/icon.png"></link> */}
           <link rel="preconnect" href="https://fonts.googleapis.com"></link>
           <link
             rel="preconnect"

pages/category/[cSlug]/index.js

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Header, QuizCard, RecentQuizzes } from "../../../components";
 import { getCategories, getCategory } from "../../../services";
 
@@ -23,7 +23,7 @@ export async function getStaticPaths() {
   };
 }
 
-const Category = ({ categoryInfo }) => {
+const SpecificCategoryPage = ({ categoryInfo }) => {
   const [category, setCategory] = useState([]);
 
   useEffect(() => {
@@ -77,4 +77,4 @@ const Category = ({ categoryInfo }) => {
   );
 };
 
-export default Category;
+export default SpecificCategoryPage;

pages/category/[cSlug]/quiz/[qSlug].js

@@ -1,6 +1,6 @@
 import Head from "next/head";
 import Image from "next/image";
-import { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   Checkbox,
   Header,
@@ -36,7 +36,7 @@ export async function getStaticPaths() {
   };
 }
 
-const Quiz = ({ quizInfo }) => {
+const QuizPage = ({ quizInfo }) => {
   const [quiz, setQuiz] = useState();
   const [questions, setQuestions] = useState();
   const [index, setIndex] = useState(0);
@@ -139,7 +139,7 @@ const Quiz = ({ quizInfo }) => {
     if (finished) {
       setResult((100 / quiz?.questions?.length) * correctAnswers?.size);
     }
-  }, [finished]);
+  }, [finished, correctAnswers?.size, quiz?.questions?.length]);
 
   return (
     <>
@@ -319,4 +319,4 @@ const Quiz = ({ quizInfo }) => {
   );
 };
 
-export default Quiz;
+export default QuizPage;

pages/category/index.js

@@ -10,7 +10,7 @@ export async function getStaticProps() {
   };
 }
 
-const Category = ({ categoriesInfo }) => {
+const CategoryPage = ({ categoriesInfo }) => {
   const [categories, setCategories] = useState([]);
 
   useEffect(() => {
@@ -42,4 +42,4 @@ const Category = ({ categoriesInfo }) => {
   );
 };
 
-export default Category;
+export default CategoryPage;