Skip to content

Commit 112af9f

Browse files
Markkos89Markkos89
committed
feat: checkpoint advances
1 parent f2ae0ac commit 112af9f

File tree

5 files changed

+139
-121
lines changed

5 files changed

+139
-121
lines changed

‎src/components/Topbar.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,7 @@ const DesktopNav = () => {
143143
<PopoverTrigger>
144144
<Link
145145
p={2}
146+
as={NextLink}
146147
href={navItem.href ?? "#"}
147148
// fontSize={'sm'}
148149
// fontWeight={500}
@@ -187,6 +188,7 @@ const DesktopNav = () => {
187188
const DesktopSubNav = ({ label, href, subLabel }: NavItem) => {
188189
return (
189190
<Link
191+
as={NextLink}
190192
href={href}
191193
role={"group"}
192194
display={"block"}
@@ -242,7 +244,7 @@ const MobileNavItem = ({ label, children, href }: NavItem) => {
242244
<Stack spacing={4} onClick={children && onToggle}>
243245
<Flex
244246
py={2}
245-
as={Link}
247+
as={NextLink}
246248
href={href ?? "#"}
247249
justify={"space-between"}
248250
align={"center"}
@@ -278,7 +280,7 @@ const MobileNavItem = ({ label, children, href }: NavItem) => {
278280
>
279281
{children &&
280282
children.map((child) => (
281-
<Link key={child.label} py={2} href={child.href}>
283+
<Link key={child.label} as={NextLink} py={2} href={child.href}>
282284
{child.label}
283285
</Link>
284286
))}

‎src/contexts/AppContext.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
import { type IFormatedLessons } from "@/interfaces";
1+
import {
2+
type Project,
3+
type IFormatedLessons,
4+
type Fundamental,
5+
} from "@/interfaces";
26
import { createContext, useContext } from "react";
37

48
interface IAppContext {
5-
formattedLessons: IFormatedLessons;
69
completedQuizzesSlugs: string[];
7-
lessonsWithStatus: IFormatedLessons;
10+
projects: Project[];
11+
fundamentals: Fundamental[];
812
}
913

1014
export const AppContext = createContext<IAppContext>({
11-
formattedLessons: {
12-
projects: [],
13-
fundamentals: [],
14-
},
1515
completedQuizzesSlugs: [],
16-
lessonsWithStatus: {
17-
projects: [],
18-
fundamentals: [],
19-
},
16+
projects: [],
17+
fundamentals: [],
2018
});
2119

2220
AppContext.displayName = "AcademyAppContext";

‎src/contexts/AppContextProvider.tsx

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
66
import { type ReactNode, useEffect, useState } from "react";
77
import { AppContext } from "./AppContext";
8-
import { type IFormatedLessons } from "@/interfaces";
8+
import {
9+
type Project,
10+
type Fundamental,
11+
type IFormatedLessons,
12+
} from "@/interfaces";
913
import { useSession } from "next-auth/react";
1014
import { api } from "@/utils/api";
1115

@@ -14,17 +18,11 @@ interface IProps {
1418
}
1519

1620
export function AppContextProvider({ children }: IProps) {
17-
const [formattedLessons, setFormattedLessons] = useState<IFormatedLessons>({
18-
projects: [],
19-
fundamentals: [],
20-
});
21+
const [fundamentals, setFundamentals] = useState<Fundamental[]>([]);
22+
const [projects, setProjects] = useState<Project[]>([]);
2123
const [completedQuizzesSlugs, setCompletedQuizzesSlugs] = useState<string[]>(
2224
[],
2325
);
24-
const [lessonsWithStatus, setLessonsWithStatus] = useState<IFormatedLessons>({
25-
projects: [],
26-
fundamentals: [],
27-
});
2826

2927
const { data: sessionData } = useSession();
3028

@@ -63,40 +61,33 @@ export function AppContextProvider({ children }: IProps) {
6361
{},
6462
);
6563

66-
setFormattedLessons(lessonsFormatResult);
64+
setFundamentals(lessonsFormatResult.fundamentals);
65+
setProjects(lessonsFormatResult.projects);
6766
};
6867

6968
useEffect(() => {
7069
void fetchFromDirs();
7170
}, []);
7271

7372
useEffect(() => {
74-
if (
75-
sessionData?.user &&
76-
formattedLessons.fundamentals &&
77-
formattedLessons.projects &&
78-
completedQuizzesSlugs.length !== 0
79-
) {
80-
const projectsWithCompleteStatus = formattedLessons.projects.map(
81-
(lesson) => {
82-
const completed = completedQuizzesSlugs.includes(lesson.slug);
83-
return { ...lesson, completed };
84-
},
85-
);
73+
if (projects && completedQuizzesSlugs.length !== 0) {
74+
const projectsWithCompleteStatus = projects.map((lesson) => {
75+
const completed = completedQuizzesSlugs.includes(lesson.slug);
76+
console.log({ completed });
77+
return { ...lesson, completed };
78+
});
8679

87-
const obj = {
88-
projects: projectsWithCompleteStatus,
89-
fundamentals: formattedLessons.fundamentals,
90-
};
91-
92-
setLessonsWithStatus(obj);
80+
setProjects(projectsWithCompleteStatus);
9381
}
94-
// eslint-disable-next-line react-hooks/exhaustive-deps
95-
}, [completedQuizzesSlugs, formattedLessons]);
82+
}, [completedQuizzesSlugs, projects]);
9683

9784
return (
9885
<AppContext.Provider
99-
value={{ formattedLessons, completedQuizzesSlugs, lessonsWithStatus }}
86+
value={{
87+
completedQuizzesSlugs,
88+
projects,
89+
fundamentals,
90+
}}
10091
>
10192
{children}
10293
</AppContext.Provider>

‎src/pages/getting-started.tsx

Lines changed: 79 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import { type Lessons, type Lesson } from "@/interfaces";
2323
import { useAppContext } from "@/contexts/AppContext";
2424

2525
const GettingStartedPage: NextPageWithLayout<Lessons> = () => {
26-
const { lessonsWithStatus } = useAppContext();
26+
const { projects, fundamentals } = useAppContext();
2727

2828
return (
2929
<Flex
@@ -70,66 +70,87 @@ const GettingStartedPage: NextPageWithLayout<Lessons> = () => {
7070
>
7171
Current Lessons
7272
</Heading>
73-
{lessonsWithStatus
74-
? Object.entries(lessonsWithStatus).map((track: any, idx: number) => {
75-
return (
76-
<UnorderedList
77-
listStyleType="none"
78-
textAlign="center"
79-
as="div"
80-
key={idx}
73+
<UnorderedList listStyleType="none" textAlign="center" as="div">
74+
<Heading size="md" color="yellow.300">
75+
{`PROJECTS`}
76+
</Heading>
77+
<>
78+
{projects.map((lesson: Lesson, idx: number) => (
79+
<ListItem key={idx} my="2" py="2" maxW="40vw" margin="0 auto">
80+
<Link
81+
as={NextLink}
82+
href={`/lessons/${lesson.path}/${lesson.slug}`}
83+
passHref
8184
>
82-
<Heading size="md" color="yellow.300">
83-
{track[0].toUpperCase()}
84-
</Heading>
85-
<>
86-
{track[1].map((lesson: Lesson, idx: number) => (
87-
<ListItem
88-
key={idx}
89-
my="2"
90-
py="2"
91-
maxW="40vw"
92-
margin="0 auto"
85+
<Button
86+
height="auto"
87+
style={{
88+
whiteSpace: "normal",
89+
wordWrap: "break-word",
90+
padding: "0.5rem",
91+
width: "100%",
92+
fontSize: "xl",
93+
}}
94+
>
95+
{lesson.frontMatter.title}
96+
{lesson && lesson.completed && lesson.completed === true ? (
97+
<Badge
98+
ml="1"
99+
alignItems={"flex-end"}
100+
colorScheme="green"
101+
position="absolute"
102+
right={3}
93103
>
94-
<Link
95-
as={NextLink}
96-
href={`/lessons/${lesson.path}/${lesson.slug}`}
97-
passHref
98-
>
99-
<Button
100-
height="auto"
101-
style={{
102-
whiteSpace: "normal",
103-
wordWrap: "break-word",
104-
padding: "0.5rem",
105-
width: "100%",
106-
fontSize: "xl",
107-
}}
108-
>
109-
{lesson.frontMatter.title}
110-
{lesson &&
111-
lesson.completed &&
112-
lesson.completed === true ? (
113-
<Badge
114-
ml="1"
115-
alignItems={"flex-end"}
116-
colorScheme="green"
117-
position="absolute"
118-
right={3}
119-
>
120-
Completed
121-
</Badge>
122-
) : null}
123-
</Button>
124-
</Link>
125-
</ListItem>
126-
))}
127-
</>
128-
</UnorderedList>
129-
);
130-
})
131-
: null}
104+
Completed
105+
</Badge>
106+
) : null}
107+
</Button>
108+
</Link>
109+
</ListItem>
110+
))}
111+
</>
112+
</UnorderedList>
132113
<Divider />
114+
<UnorderedList listStyleType="none" textAlign="center" as="div">
115+
<Heading size="md" color="yellow.300">
116+
{`FUNDAMENTALS`}
117+
</Heading>
118+
<>
119+
{fundamentals.map((lesson: Lesson, idx: number) => (
120+
<ListItem key={idx} my="2" py="2" maxW="40vw" margin="0 auto">
121+
<Link
122+
as={NextLink}
123+
href={`/lessons/${lesson.path}/${lesson.slug}`}
124+
passHref
125+
>
126+
<Button
127+
height="auto"
128+
style={{
129+
whiteSpace: "normal",
130+
wordWrap: "break-word",
131+
padding: "0.5rem",
132+
width: "100%",
133+
fontSize: "xl",
134+
}}
135+
>
136+
{lesson.frontMatter.title}
137+
{lesson && lesson.completed && lesson.completed === true ? (
138+
<Badge
139+
ml="1"
140+
alignItems={"flex-end"}
141+
colorScheme="green"
142+
position="absolute"
143+
right={3}
144+
>
145+
Completed
146+
</Badge>
147+
) : null}
148+
</Button>
149+
</Link>
150+
</ListItem>
151+
))}
152+
</>
153+
</UnorderedList>
133154

134155
<Heading apply="mdx.h3" as="h3" fontSize="2xl" textAlign="center" p={5}>
135156
This project is just getting started.

‎src/pages/lessons/index.tsx

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,36 @@ import { useAppContext } from "@/contexts/AppContext";
1010
import { type Lesson } from "@/interfaces";
1111

1212
const LessonsPage: NextPageWithLayout = () => {
13-
const { lessonsWithStatus } = useAppContext();
13+
const { projects, fundamentals } = useAppContext();
1414

1515
return (
1616
<Flex py={5} px={[4, 10, 16]} direction="column" minH="90vh">
1717
<Stack spacing={5} direction="column">
1818
<>
19-
{Object.entries(lessonsWithStatus).map((track, idx: number) => {
20-
const trackName = track[0].toUpperCase();
21-
const lessons = track[1];
22-
return (
23-
<Box key={idx}>
24-
<Heading size="lg" color="yellow.300">
25-
{trackName}
26-
</Heading>
27-
{lessons.map((lesson: Lesson, idx: number) => {
28-
return (
29-
<Box marginTop="4" key={idx}>
30-
<ContentBanner lesson={lesson} idx={idx} />
31-
</Box>
32-
);
33-
})}
34-
</Box>
35-
);
36-
})}
19+
<Box>
20+
<Heading size="lg" color="yellow.300">
21+
{`PROJECTS`}
22+
</Heading>
23+
{projects.map((lesson: Lesson, idx: number) => {
24+
return (
25+
<Box marginTop="4" key={idx}>
26+
<ContentBanner lesson={lesson} idx={idx} />
27+
</Box>
28+
);
29+
})}
30+
</Box>
31+
<Box>
32+
<Heading size="lg" color="yellow.300">
33+
{`FUNDAMENTALS`}
34+
</Heading>
35+
{fundamentals.map((lesson: Lesson, idx: number) => {
36+
return (
37+
<Box marginTop="4" key={idx}>
38+
<ContentBanner lesson={lesson} idx={idx} />
39+
</Box>
40+
);
41+
})}
42+
</Box>
3743
</>
3844
</Stack>
3945
</Flex>

0 commit comments

Comments
 (0)