feat: refactoring the db schema to include lessons table

Author: Markkos89

prisma/seed.ts

@@ -15,13 +15,20 @@ async function main() {
   //   },
   // });
   // console.log({ user });
-
-  const lesson1 = await prisma.lessons.create({
+  // const lesson1 = await prisma.lessons.create({
+  //   data: {
+  //     quizFileName: "lesson-4-quiz.json",
+  //   },
+  // });
+  // console.log({ lesson1 });
+  const completed2 = await prisma.completedQuizzes.create({
     data: {
-      quizFileName: "quiz-lesson-1.json",
+      userId: "cll3hcuim00001wujlay766tk",
+      lesson: "2",
+      completed: true,
     },
   });
-  console.log({ lesson1 });
+  console.log({ completed2 });
 }
 
 main()

src/pages/_app.tsx

@@ -1,8 +1,9 @@
 // Imports
 // ========================================================
-import React from "react";
+import React, { type ReactElement, type ReactNode } from "react";
+import { type NextPage } from "next";
+import { type AppProps } from "next/app";
 
-import { type AppType } from "next/app";
 import { type Session } from "next-auth";
 import { SessionProvider } from "next-auth/react";
 import { api } from "@/utils/api";
@@ -30,9 +31,7 @@ import { ChakraProvider } from "@chakra-ui/react";
 import { theme } from "@/theme";
 import { MDXProvider } from "@mdx-js/react";
 import Components from "@/components/mdx/Components";
-import Layout from "@/components/Layout";
 import { env } from "@/env.mjs";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 // Config
 // ========================================================
@@ -70,31 +69,37 @@ const wagmiConfig = createConfig({
   publicClient,
 });
 
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout<P> = AppProps<P> & {
+  Component: NextPageWithLayout<P>;
+};
+
 // App Wrapper Component
 // ========================================================
-const MyApp: AppType<{ session: Session | null }> = ({
+const MyApp = ({
   Component,
   pageProps,
-}) => {
+}: AppPropsWithLayout<{ session: Session }>) => {
+  const getLayout = Component.getLayout || ((page) => page);
+
   return (
-    <ChakraProvider theme={theme}>
-      <WagmiConfig config={wagmiConfig}>
+    <WagmiConfig config={wagmiConfig}>
+      <ChakraProvider theme={theme}>
         <SessionProvider refetchInterval={0} session={pageProps.session}>
           <RainbowKitSiweNextAuthProvider>
             <RainbowKitProvider chains={chains} initialChain={polygonMumbai}>
               <MDXProvider components={Components}>
-                <Layout>
-                  <>
-                    <Component {...pageProps} />
-                    <ReactQueryDevtools />
-                  </>
-                </Layout>
+                {getLayout(<Component {...pageProps} />)}
               </MDXProvider>
             </RainbowKitProvider>
           </RainbowKitSiweNextAuthProvider>
         </SessionProvider>
-      </WagmiConfig>
-    </ChakraProvider>
+      </ChakraProvider>
+    </WagmiConfig>
   );
 };
 

src/pages/api/auth/[...nextauth].ts

@@ -8,8 +8,6 @@ import { authOptions } from "@/server/auth";
 // Auth
 // ========================================================
 const Auth = async (req: NextApiRequest, res: NextApiResponse) => {
-  console.log("In [...nextauth].ts");
-
   const authOpts: NextAuthOptions = authOptions({ req });
 
   if (!Array.isArray(req.query.nextauth)) {

src/pages/getting-started.tsx

@@ -22,9 +22,11 @@ import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
 import { CONTENT_PATH } from "@/lib/constants";
-import { useEffect, useState } from "react";
+import { type ReactElement, useEffect, useState } from "react";
 import { api } from "@/utils/api";
 import { useSession } from "next-auth/react";
+import Layout from "@/components/Layout";
+import { type NextPageWithLayout } from "./_app";
 
 export interface Lesson {
   frontMatter: any;
@@ -78,7 +80,7 @@ export interface ProjectFrontMatter {
   author?: string;
 }
 
-const GettingStarted: React.FC<Lessons> = ({ lessons }) => {
+const GettingStartedPage: NextPageWithLayout<Lessons> = ({ lessons }) => {
   const [formattedLessons, setFormattedLessons] = useState<LessonProps>();
 
   const [fetchNow, setFetchNow] = useState(true);
@@ -98,6 +100,8 @@ const GettingStarted: React.FC<Lessons> = ({ lessons }) => {
     },
   );
 
+  console.log({ completedQuizzesAllData });
+
   useEffect(() => {
     const result: LessonProps = lessons.reduce((acc: any, curr: any) => {
       if (!acc[curr.path]) acc[curr.path] = [];
@@ -108,11 +112,7 @@ const GettingStarted: React.FC<Lessons> = ({ lessons }) => {
 
     if (sessionData?.user !== undefined && !!completedQuizzesAllData) {
       const completedSlugs: string[] = completedQuizzesAllData?.map(
-        (quiz: any) =>
-          quiz.lesson
-            .replace("quiz-lesson-", "")
-            .replace("lesson-", "")
-            .replace("-quiz", "") || [],
+        (quiz: any) => quiz.lesson,
       );
 
       const completedQuizzes: Project[] = result?.projects?.map(
@@ -354,4 +354,15 @@ export const getStaticProps = () => {
   };
 };
 
-export default GettingStarted;
+GettingStartedPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <Layout
+    // title="Dapp Starterkit Marketing Page" // DEV_NOTE: This is for the next-seo per page config
+    // description="A marketing page for your dapp." // DEV_NOTE: This is for the next-seo per page config
+    >
+      {page}
+    </Layout>
+  );
+};
+
+export default GettingStartedPage;

src/pages/index.tsx

@@ -1,8 +1,21 @@
-import type { NextPage } from "next";
 import Hero from "@/components/Hero";
+import { type NextPageWithLayout } from "./_app";
+import Layout from "@/components/Layout";
+import { type ReactElement } from "react";
 
-const Home: NextPage = () => {
+const Home: NextPageWithLayout = () => {
   return <Hero />;
 };
 
+Home.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <Layout
+    // title="Dapp Starterkit Marketing Page" // DEV_NOTE: This is for the next-seo per page config
+    // description="A marketing page for your dapp." // DEV_NOTE: This is for the next-seo per page config
+    >
+      {page}
+    </Layout>
+  );
+};
+
 export default Home;

src/pages/lessons/index.tsx

@@ -4,6 +4,9 @@ import path from "path";
 import matter from "gray-matter";
 import { ContentBanner } from "@/components/ContentBanner";
 import { CONTENT_PATH } from "@/lib/constants";
+import { type NextPageWithLayout } from "../_app";
+import { type ReactElement } from "react";
+import Layout from "@/components/Layout";
 
 interface Lesson {
   path: string;
@@ -20,7 +23,11 @@ interface LessonTrackMap {
   [key: string]: Lesson[];
 }
 
-const Lessons: React.FC<LessonProps> = ({ lessons }: { lessons: Lesson[] }) => {
+const LessonsPage: NextPageWithLayout<LessonProps> = ({
+  lessons,
+}: {
+  lessons: Lesson[];
+}) => {
   const result = lessons.reduce((acc: LessonTrackMap, curr) => {
     if (!acc[curr.path]) {
       // initial an array of lessons for a given track
@@ -59,7 +66,18 @@ const Lessons: React.FC<LessonProps> = ({ lessons }: { lessons: Lesson[] }) => {
   );
 };
 
-export default Lessons;
+LessonsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <Layout
+    // title="Dapp Starterkit Marketing Page" // DEV_NOTE: This is for the next-seo per page config
+    // description="A marketing page for your dapp." // DEV_NOTE: This is for the next-seo per page config
+    >
+      {page}
+    </Layout>
+  );
+};
+
+export default LessonsPage;
 
 export const getStaticProps = () => {
   const contentDir = path.join(CONTENT_PATH);