Merge pull request #247 from Markkos89/staging

feat: small fixes and refactoring (to staging)

Author: Markkos89

src/components/NavBar.tsx

@@ -34,10 +34,7 @@ function NavBar() {
   const router = useRouter();
   // Hooks
   const { data: sessionData } = useSession();
-  // const { data: secretMessage } = api.example.getSecretMessage.useQuery(
-  //   undefined, // no input
-  //   { enabled: sessionData?.user !== undefined }
-  // );
+
   // State
   const [showConnection, setShowConnection] = useState(false);
 

src/components/mdx/Quiz.tsx

@@ -19,6 +19,7 @@ import {
   haveSameElements,
 } from "@/utils/QuizHelpers";
 import { api } from "@/utils/api";
+import { useAppContext } from "@/contexts/AppContext";
 
 interface QuizProps {
   quiz: string;
@@ -51,6 +52,7 @@ const Quiz = (props: QuizProps): JSX.Element => {
   const [answers, setAnswers] = useState<Answers>({});
   const [correctAnswers, setCorrectAnswers] = useState<number[] | null>(null);
   const toast = useToast();
+  const { refetchCompletedQuizzesAll, allLessonsData } = useAppContext();
 
   const nextQuestion = () => {
     setCurrentQuestionIndex(currentQuestionIndex + 1);
@@ -123,18 +125,17 @@ const Quiz = (props: QuizProps): JSX.Element => {
     });
   };
 
-  // - Get All lessons to get the Id's
-  const { data: allLessons } = api.lessons.getAll.useQuery();
-
   // - Add
   const { mutate: quizzesAddMutate, isLoading: quizzesAddIsLoading } =
     api.completedQuizzes.add.useMutation({
-      onSuccess: () => {
+      onSuccess: async () => {
+        refetchCompletedQuizzesAll && (await refetchCompletedQuizzesAll());
         return quizSuccessToast();
       },
     });
 
   const quizSuccessToast = () => {
+    cancelQuiz();
     toast({
       title: "Amazing!",
       description: "You have passed the lesson!",
@@ -172,7 +173,9 @@ const Quiz = (props: QuizProps): JSX.Element => {
 
     // return quizSuccessToast();
 
-    const lessonIdToSave = allLessons?.find(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const lessonIdToSave: string = allLessonsData?.find(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       (lesson) => lesson.quizFileName === `${props.quiz}.json`,
     )?.id;
 

src/components/mdx/QuizStatusChecker.tsx

@@ -5,52 +5,34 @@
 import { Badge, Center, Text } from "@chakra-ui/react";
 import Quiz from "./Quiz";
 import { useMemo, useState } from "react";
-import { useSession } from "next-auth/react";
-import { api } from "@/utils/api";
 import { useAccount } from "wagmi";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { useAppContext } from "@/contexts/AppContext";
 
 type QuizStatusCheckerTye = {
   quiz: string;
 };
 
 const QuizStatusChecker = ({ quiz }: QuizStatusCheckerTye) => {
-  const [fetchNow, setFetchNow] = useState<boolean>(true);
   const [quizCompleted, setQuizCompleted] = useState<boolean>(false);
-  const { data: sessionData } = useSession();
   const { address, isDisconnected } = useAccount();
+  const { completedQuizzesIds, allLessonsData } = useAppContext();
 
   // Requests
 
-  // - Get All lessons to get the Id's
-  const { data: allLessons } = api.lessons.getAll.useQuery();
-
-  // - All completed
-  const { data: completedQuizzesAllData } = api.completedQuizzes.all.useQuery(
-    undefined, // no input
-    {
-      // Disable request if no session data
-      enabled: sessionData?.user !== undefined && fetchNow,
-    },
-  );
-
   useMemo(() => {
-    if (allLessons?.length && completedQuizzesAllData?.length && fetchNow) {
-      const completedIds = completedQuizzesAllData.map((quiz) => quiz.lesson);
-
-      const actualLessonId = allLessons?.find(
+    if (allLessonsData?.length && completedQuizzesIds?.length) {
+      const actualLessonId: string = allLessonsData?.find(
         (lesson) => lesson.quizFileName === `${quiz}.json`,
       )?.id;
 
       if (actualLessonId === undefined) return;
 
-      if (completedIds.includes(actualLessonId)) {
+      if (completedQuizzesIds.includes(actualLessonId)) {
         setQuizCompleted(true);
       }
-
-      setFetchNow(false);
     }
-  }, [allLessons, completedQuizzesAllData, fetchNow, quiz]);
+  }, [allLessonsData, completedQuizzesIds, quiz]);
 
   return isDisconnected || !address ? (
     <>

src/contexts/AppContext.tsx

@@ -5,14 +5,26 @@ interface IAppContext {
   completedQuizzesIds: string[];
   projects: Project[];
   fundamentals: Fundamental[];
+  allLessonsData: any[];
+  refetchCompletedQuizzesAll?: () => Promise<any>;
 }
 
 export const AppContext = createContext<IAppContext>({
   completedQuizzesIds: [],
   projects: [],
   fundamentals: [],
+  allLessonsData: [],
+  refetchCompletedQuizzesAll: () => Promise.resolve(),
 });
 
 AppContext.displayName = "AcademyAppContext";
 
-export const useAppContext = () => useContext(AppContext);
+// export const useAppContext = () => useContext(AppContext);
+
+export function useAppContext() {
+  const context = useContext(AppContext);
+  if (!context) {
+    throw new Error("useAppContext must be used within the AppContextProvider");
+  }
+  return context;
+}

src/contexts/AppContextProvider.tsx

@@ -24,8 +24,8 @@ export function AppContextProvider({ children }: IProps) {
   const [completedQuizzesIds, setCompletedQuizzesIds] = useState<string[]>([]);
   const [sessionDataUser, setSessionDataUser] = useState<any>(null);
 
-  const { data: sessionData } = useSession();
-  const { address } = useAccount();
+  const { data: sessionData, status: sessionStatus } = useSession();
+  const { address, status: walletStatus } = useAccount();
 
   useEffect(() => {
     if (sessionData?.user && sessionData.user !== sessionDataUser) {
@@ -39,16 +39,27 @@ export function AppContextProvider({ children }: IProps) {
   const {
     data: completedQuizzesAllData,
     // isLoading: completedQuizzesAllIsLoading,
-    // refetch: refetchCompletedQuizzesAll,
+    refetch: refetchCompletedQuizzesAll,
   } = api.completedQuizzes.all.useQuery(
     undefined, // no input
     {
       // Disable request if no session data
-      enabled: !!sessionDataUser && !!address,
+      enabled: sessionDataUser !== null && address !== undefined,
       refetchOnWindowFocus: false,
     },
   );
 
+  useEffect(() => {
+    if (
+      walletStatus === "disconnected" ||
+      sessionStatus === "unauthenticated"
+    ) {
+      setSessionDataUser(null);
+      setCompletedQuizzesIds([]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionStatus, walletStatus]);
+
   useEffect(() => {
     if (completedQuizzesAllData) {
       const completedIds = completedQuizzesAllData.map(
@@ -82,7 +93,9 @@ export function AppContextProvider({ children }: IProps) {
   }, []);
 
   // - Get All lessons to get the Id's
-  const { data: allLessonsData } = api.lessons.getAll.useQuery();
+  const { data: allLessonsData } = api.lessons.getAll.useQuery(undefined, {
+    refetchOnWindowFocus: false,
+  });
 
   useEffect(() => {
     if (allLessonsData && projects && completedQuizzesIds.length !== 0) {
@@ -98,6 +111,11 @@ export function AppContextProvider({ children }: IProps) {
         return { ...lesson, completed };
       });
 
+      setProjects(projectsWithCompleteStatus);
+    } else if (allLessonsData && projects && completedQuizzesIds.length === 0) {
+      const projectsWithCompleteStatus = projects.map((lesson) => {
+        return { ...lesson, completed: false };
+      });
       setProjects(projectsWithCompleteStatus);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -109,6 +127,8 @@ export function AppContextProvider({ children }: IProps) {
         completedQuizzesIds,
         projects,
         fundamentals,
+        allLessonsData: allLessonsData || [],
+        refetchCompletedQuizzesAll,
       }}
     >
       {children}