feat: db refact and context creation

Author: Markkos89

.env.example

@@ -17,17 +17,9 @@
 # You can generate a new secret on the command line with:
 # openssl rand -base64 32
 # https://next-auth.js.org/configuration/options#secret
-# NEXTAUTH_SECRET=""
+NEXTAUTH_SECRET=""
 NEXTAUTH_URL="http://localhost:3000"
 
-POSTGRES_HOST=127.0.0.1
-POSTGRES_PORT=6500
-POSTGRES_USER=admin
-POSTGRES_PASSWORD=password123
-POSTGRES_DATABASE=nextauth_prisma
-
-DATABASE_URL=postgresql://admin:password123@localhost:6500/nextauth_prisma?schema=public
-
 POSTGRES_URL=
 POSTGRES_PRISMA_URL=postgresql://admin:password123@localhost:6500/nextauth_prisma?schema=public
 POSTGRES_URL_NON_POOLING=postgresql://admin:password123@localhost:6500/nextauth_prisma?schema=public

.eslintrc.cjs

@@ -29,10 +29,10 @@ const config = {
       },
     ],
     "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
-    "@typescript-eslint/no-unsafe-assignment": "off", // or "off" if you want to disable it
-    "@typescript-eslint/no-unsafe-call": "off", // or "off" if you want to disable it
-    "@typescript-eslint/no-unsafe-return": "off",
-    "@typescript-eslint/no-unsafe-member-access": "off",
+    "@typescript-eslint/no-unsafe-assignment": 0, // or "off" if you want to disable it
+    "@typescript-eslint/no-unsafe-call": 0, // or "off" if you want to disable it
+    "@typescript-eslint/no-unsafe-return": 0,
+    "@typescript-eslint/no-unsafe-member-access": 0,
   },
 };
 

src/contexts/AppContext.tsx

@@ -1,47 +1,24 @@
-import { api } from "@/utils/api";
-import { useSession } from "next-auth/react";
-import { createContext, useState } from "react";
+import { type IFormatedLessons } from "@/interfaces";
+import { createContext, useContext } from "react";
 
-type ContextProps = {
-  message: string;
-  setMessage: (message: string) => void;
-  children: React.ReactElement;
-};
-
-const initialState = {
-  message: "",
-  // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
-  setMessage: (message: string) => {},
-};
-
-export const AppContext = createContext(initialState);
-
-function Context({ children }: ContextProps) {
-  const [message, setMessage] = useState("");
-  const { data: sessionData } = useSession();
-  const [fetchNow, setFetchNow] = useState(true);
-
-  console.log({ sessionData });
-
-  // Requests
-  // - All
-  const {
-    // data: completedQuizzesAllData,
-    // isLoading: completedQuizzesAllIsLoading,
-    // refetch: refetchCompletedQuizzesAll,
-  } = api.completedQuizzes.all.useQuery(
-    undefined, // no input
-    {
-      // Disable request if no session data
-      enabled: sessionData?.user !== undefined && fetchNow,
-    },
-  );
-
-  return (
-    <AppContext.Provider value={{ message, setMessage }}>
-      {children}
-    </AppContext.Provider>
-  );
+interface IAppContext {
+  formattedLessons: IFormatedLessons;
+  completedQuizzesSlugs: string[];
+  lessonsWithStatus: IFormatedLessons;
 }
 
-export default Context;
+export const AppContext = createContext<IAppContext>({
+  formattedLessons: {
+    projects: [],
+    fundamentals: [],
+  },
+  completedQuizzesSlugs: [],
+  lessonsWithStatus: {
+    projects: [],
+    fundamentals: [],
+  },
+});
+
+AppContext.displayName = "AcademyAppContext";
+
+export const useAppContext = () => useContext(AppContext);

src/contexts/AppContextProvider.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { type ReactNode, useEffect, useState } from "react";
+import { AppContext } from "./AppContext";
+import { type IFormatedLessons } from "@/interfaces";
+import { useSession } from "next-auth/react";
+import { api } from "@/utils/api";
+
+interface IProps {
+  children: ReactNode;
+}
+
+export function AppContextProvider({ children }: IProps) {
+  const [formattedLessons, setFormattedLessons] = useState<IFormatedLessons>({
+    projects: [],
+    fundamentals: [],
+  });
+  const [completedQuizzesSlugs, setCompletedQuizzesSlugs] = useState<string[]>(
+    [],
+  );
+  const [lessonsWithStatus, setLessonsWithStatus] = useState<IFormatedLessons>({
+    projects: [],
+    fundamentals: [],
+  });
+
+  const { data: sessionData } = useSession();
+
+  // Requests
+  // - All
+  const {
+    data: completedQuizzesAllData,
+    // isLoading: completedQuizzesAllIsLoading,
+    // refetch: refetchCompletedQuizzesAll,
+  } = api.completedQuizzes.all.useQuery(
+    undefined, // no input
+    {
+      // Disable request if no session data
+      enabled: sessionData?.user !== undefined,
+    },
+  );
+
+  useEffect(() => {
+    if (completedQuizzesAllData) {
+      const slugs = completedQuizzesAllData.map((quiz: any) => quiz.lesson);
+      if (slugs !== completedQuizzesSlugs) setCompletedQuizzesSlugs(slugs);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [completedQuizzesAllData]);
+
+  const fetchFromDirs = async () => {
+    const lessonsData = await fetch("/api/readfiles").then((res) => res.json());
+
+    const lessonsFormatResult: IFormatedLessons = lessonsData.reduce(
+      (acc: any, curr: any) => {
+        if (!acc[curr.path]) acc[curr.path] = [];
+
+        acc[curr.path].push(curr);
+        return acc;
+      },
+      {},
+    );
+
+    setFormattedLessons(lessonsFormatResult);
+  };
+
+  useEffect(() => {
+    void fetchFromDirs();
+  }, []);
+
+  useEffect(() => {
+    if (
+      sessionData?.user &&
+      formattedLessons.fundamentals &&
+      formattedLessons.projects &&
+      completedQuizzesSlugs.length !== 0
+    ) {
+      const projectsWithCompleteStatus = formattedLessons.projects.map(
+        (lesson) => {
+          const completed = completedQuizzesSlugs.includes(lesson.slug);
+          return { ...lesson, completed };
+        },
+      );
+
+      const obj = {
+        projects: projectsWithCompleteStatus,
+        fundamentals: formattedLessons.fundamentals,
+      };
+
+      setLessonsWithStatus(obj);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [completedQuizzesSlugs, formattedLessons]);
+
+  return (
+    <AppContext.Provider
+      value={{ formattedLessons, completedQuizzesSlugs, lessonsWithStatus }}
+    >
+      {children}
+    </AppContext.Provider>
+  );
+}

src/interfaces/index.ts

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export interface Lesson {
+  frontMatter: any;
+  slug: string;
+  path: string;
+  completed?: boolean;
+}
+export interface Lessons {
+  lessons: {
+    frontMatter: any;
+    slug: string;
+  }[];
+}
+
+export interface IFormatedLessons {
+  projects: Project[];
+  fundamentals: Fundamental[];
+}
+
+export interface Fundamental {
+  path: Path;
+  frontMatter: FundamentalFrontMatter;
+  slug: string;
+}
+
+export interface FundamentalFrontMatter {
+  title: string;
+  description: string;
+  icons: string[];
+  authors?: string[];
+  i18n?: string;
+  author?: string[] | string;
+}
+
+export enum Path {
+  Fundamentals = "fundamentals",
+}
+
+export interface Project {
+  path: string;
+  frontMatter: ProjectFrontMatter;
+  slug: string;
+  completed?: boolean;
+}
+
+export interface ProjectFrontMatter {
+  title: string;
+  description: string;
+  icons: string[];
+  i18n?: string;
+  author?: string;
+}

src/pages/_app.tsx

@@ -32,7 +32,7 @@ import { theme } from "@/theme";
 import { MDXProvider } from "@mdx-js/react";
 import Components from "@/components/mdx/Components";
 import { env } from "@/env.mjs";
-
+import { AppContextProvider } from "@/contexts/AppContextProvider";
 // Config
 // ========================================================
 /**
@@ -93,7 +93,9 @@ const MyApp = ({
           <RainbowKitSiweNextAuthProvider>
             <RainbowKitProvider chains={chains} initialChain={polygonMumbai}>
               <MDXProvider components={Components}>
-                {getLayout(<Component {...pageProps} />)}
+                <AppContextProvider>
+                  {getLayout(<Component {...pageProps} />)}
+                </AppContextProvider>
               </MDXProvider>
             </RainbowKitProvider>
           </RainbowKitSiweNextAuthProvider>

src/pages/api/readfiles.ts

@@ -0,0 +1,34 @@
+import { CONTENT_PATH } from "@/lib/constants";
+import fs from "fs";
+import matter from "gray-matter";
+import { type NextApiRequest, type NextApiResponse } from "next";
+import path from "path";
+
+const handler = (req: NextApiRequest, res: NextApiResponse) => {
+  const contentDir = path.join(CONTENT_PATH);
+  const directories = fs.readdirSync(path.join(contentDir));
+  const lessons: object[] = [];
+  directories.reverse().map((folder) => {
+    if (fs.lstatSync(path.join(contentDir, folder)).isDirectory()) {
+      fs.readdirSync(path.join(contentDir, folder)).map((file) => {
+        if (!fs.lstatSync(path.join(contentDir, folder, file)).isDirectory()) {
+          const markdownWithMeta = fs.readFileSync(
+            path.join(contentDir, folder, file),
+            "utf-8",
+          );
+
+          const { data: frontMatter } = matter(markdownWithMeta);
+          lessons.push({
+            path: folder,
+            frontMatter,
+            slug: `${file.replace(".mdx", "")}`,
+          });
+        }
+      });
+    }
+  });
+  res.statusCode = 200;
+  res.json(lessons);
+};
+
+export default handler;