feat: introduce intro to ethereum track

Author: wolovim

src/contexts/AppContext.tsx

@@ -1,10 +1,11 @@
-import { type Project, type Fundamental } from "@/interfaces";
+import { type Project, type Fundamental, type EthIntro } from "@/interfaces";
 import { createContext, useContext } from "react";
 
 interface IAppContext {
   completedQuizzesIds: string[];
   projects: Project[];
   fundamentals: Fundamental[];
+  ethIntro: EthIntro[];
   allLessonsData: any[];
   refetchCompletedQuizzesAll?: () => Promise<any>;
 }
@@ -13,6 +14,7 @@ export const AppContext = createContext<IAppContext>({
   completedQuizzesIds: [],
   projects: [],
   fundamentals: [],
+  ethIntro: [],
   allLessonsData: [],
   refetchCompletedQuizzesAll: () => Promise.resolve(),
 });

src/contexts/AppContextProvider.tsx

@@ -8,6 +8,7 @@ import { AppContext } from "./AppContext";
 import {
   type Project,
   type Fundamental,
+  type EthIntro,
   type IFormatedLessons,
 } from "@/interfaces";
 import { useSession } from "next-auth/react";
@@ -21,6 +22,7 @@ interface IProps {
 export function AppContextProvider({ children }: IProps) {
   const [fundamentals, setFundamentals] = useState<Fundamental[]>([]);
   const [projects, setProjects] = useState<Project[]>([]);
+  const [ethIntro, setEthIntro] = useState<EthIntro[]>([]);
   const [completedQuizzesIds, setCompletedQuizzesIds] = useState<string[]>([]);
   const [sessionDataUser, setSessionDataUser] = useState<any>(null);
 
@@ -86,6 +88,7 @@ export function AppContextProvider({ children }: IProps) {
 
     setFundamentals(lessonsFormatResult.fundamentals);
     setProjects(lessonsFormatResult.projects);
+    setEthIntro(lessonsFormatResult.ethIntro);
   };
 
   useEffect(() => {
@@ -97,6 +100,31 @@ export function AppContextProvider({ children }: IProps) {
     refetchOnWindowFocus: false,
   });
 
+  useEffect(() => {
+    if (allLessonsData && ethIntro && completedQuizzesIds.length !== 0) {
+      const lessonsWithCompleteStatus = ethIntro.map((lesson) => {
+        const currentLessonId = allLessonsData.find(
+          (lessonData) =>
+            lessonData.projectLessonNumber?.toString() ===
+            lesson.slug.toString(), // DEV_NOTE: forcing .toString() to avoid type errors
+        )?.id;
+
+        const completed = currentLessonId
+          ? completedQuizzesIds.includes(currentLessonId)
+          : false; // DEV_NOTE: if the lesson is not found, it is not completed
+        return { ...lesson, completed };
+      });
+
+      setEthIntro(lessonsWithCompleteStatus);
+    } else if (allLessonsData && ethIntro && completedQuizzesIds.length === 0) {
+      const lessonsWithCompleteStatus = ethIntro.map((lesson) => {
+        return { ...lesson, completed: false };
+      });
+      setEthIntro(lessonsWithCompleteStatus);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [completedQuizzesIds]);
+
   useEffect(() => {
     if (allLessonsData && projects && completedQuizzesIds.length !== 0) {
       const projectsWithCompleteStatus = projects.map((lesson) => {
@@ -157,6 +185,7 @@ export function AppContextProvider({ children }: IProps) {
         completedQuizzesIds,
         projects,
         fundamentals,
+        ethIntro,
         allLessonsData: allLessonsData || [],
         refetchCompletedQuizzesAll,
       }}

src/interfaces/index.ts

@@ -15,6 +15,7 @@ export interface Lessons {
 export interface IFormatedLessons {
   projects: Project[];
   fundamentals: Fundamental[];
+  ethIntro: EthIntro[];
 }
 
 export interface Fundamental {
@@ -43,6 +44,13 @@ export interface Project {
   completed?: boolean;
 }
 
+export interface EthIntro {
+  path: string;
+  frontMatter: ProjectFrontMatter;
+  slug: string;
+  completed?: boolean;
+}
+
 export interface ProjectFrontMatter {
   title: string;
   description: string;

src/pages/getting-started.tsx

@@ -24,7 +24,7 @@ import type { Lessons, Lesson } from "@/interfaces";
 import { useAppContext } from "@/contexts/AppContext";
 
 const GettingStartedPage: NextPageWithLayout<Lessons> = () => {
-  const { projects, fundamentals } = useAppContext();
+  const { ethIntro, projects, fundamentals } = useAppContext();
   const [isMobile] = useMediaQuery("(max-width: 768px)", {
     ssr: true,
     fallback: true, // return false on the server, and re-evaluate on the client side
@@ -76,7 +76,55 @@ const GettingStartedPage: NextPageWithLayout<Lessons> = () => {
         </Heading>
         <UnorderedList listStyleType="none" textAlign="center" as="div">
           <Heading size="md" color="yellow.300">
-            {`PROJECTS`}
+            {`INTRO TO ETHEREUM`}
+          </Heading>
+          <>
+            {ethIntro.map((lesson: Lesson, idx: number) => (
+              <ListItem key={idx} my="2" py="2" maxW="40vw" margin="0 auto">
+                <Link
+                  as={NextLink}
+                  href={`/lessons/${lesson.path}/${lesson.slug}`}
+                  passHref
+                >
+                  <Button
+                    height="auto"
+                    style={{
+                      whiteSpace: "normal",
+                      wordWrap: "break-word",
+                      padding: "0.5rem",
+                      width: "100%",
+                      fontSize: "xl",
+                    }}
+                  >
+                    <Flex direction={!isMobile ? "row" : "column"}>
+                      <Box>{lesson.frontMatter.title}</Box>
+                      <Box>
+                        {lesson &&
+                        lesson.completed &&
+                        lesson.completed === true ? (
+                          <>
+                            <Badge
+                              ml="1"
+                              alignItems={"flex-end"}
+                              colorScheme="green"
+                              position={!isMobile ? "absolute" : "relative"}
+                              right={3}
+                            >
+                              Completed
+                            </Badge>
+                          </>
+                        ) : null}
+                      </Box>
+                    </Flex>
+                  </Button>
+                </Link>
+              </ListItem>
+            ))}
+          </>
+        </UnorderedList>
+        <UnorderedList listStyleType="none" textAlign="center" as="div">
+          <Heading size="md" color="yellow.300">
+            {`PROJECT: BUILD AN NFT COLLECTION`}
           </Heading>
           <>
             {projects.map((lesson: Lesson, idx: number) => (