Skip to content

Commit 001bfda

Browse files
codercatdevcodercatdev
committed
working build
1 parent 00753d0 commit 001bfda

File tree

13 files changed

+740
-242
lines changed

13 files changed

+740
-242
lines changed

‎frontend/main/src/components/CourseSections.tsx

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { AccessMode } from '@/models/access.model';
2+
import {
3+
CodingCatBuilderContent,
4+
Section,
5+
SectionLesson,
6+
} from '@/models/builder.model';
7+
import Link from 'next/link';
8+
import { useRouter } from 'next/router';
9+
import { useEffect, useState } from 'react';
10+
import { useUser } from 'reactfire';
11+
12+
export default function CourseSections({
13+
courseData,
14+
}: {
15+
courseData: CodingCatBuilderContent;
16+
}) {
17+
const [href, setHref] = useState('');
18+
const { data: user } = useUser();
19+
const router = useRouter();
20+
21+
const course = courseData?.data;
22+
23+
useEffect(() => {
24+
setHref(location.href);
25+
}, []);
26+
27+
function isActiveLink(lesson: SectionLesson) {
28+
if (router.asPath === `${course.url}${lesson.url}`) return true;
29+
return false;
30+
}
31+
return (
32+
<>
33+
{course && course.sections && (
34+
<section className="grid content-start grid-cols-1 row-start-2 gap-4 2xl:col-start-2 2xl:row-start-1">
35+
{course.sections.map((section, i) => (
36+
<section
37+
key={`section-${i}`}
38+
className="flex flex-col rounded-t-md"
39+
>
40+
<div className="p-2 m-0 text-2xl font-bold xl:p-4 rounded-t-md xl:flex-shrink-0 bg-secondary-600 dark:bg-secondary-600 text-basics-50 dark:text-basics-50">
41+
{section.title}
42+
</div>
43+
<ul className="flex flex-col flex-grow rounded-b rounded-tr bg-basics-50 justify-items-stretch">
44+
{section.lessons &&
45+
section.lessons.map((lesson, i) => (
46+
<li key={`lesson-${i}`} className="ml-0 list-none">
47+
<Link href={`${course.url}${lesson.url}`} passHref>
48+
<div
49+
className={`p-2 cursor-pointer hover:bg-primary-200 rounded m-1 flex flex-wrap justify-between
50+
${
51+
isActiveLink(lesson)
52+
? 'bg-primary-200'
53+
: 'bg-transparent'
54+
}
55+
`}
56+
>
57+
<a className="no-underline text-basics-900 hover:text-primary-900">
58+
{lesson.title}
59+
</a>
60+
{/* {lesson?.accessSettings?.accessMode && (
61+
<div className="no-underline text-basics-900 hover:text-primary-900">
62+
{lesson?.accessSettings?.accessMode !=
63+
AccessMode.free && (
64+
<svg
65+
xmlns="http://www.w3.org/2000/svg"
66+
className="w-5 h-5"
67+
viewBox="0 0 20 20"
68+
fill="currentColor"
69+
>
70+
<path
71+
fillRule="evenodd"
72+
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
73+
clipRule="evenodd"
74+
/>
75+
</svg>
76+
)}
77+
</div>
78+
)} */}
79+
</div>
80+
</Link>
81+
</li>
82+
))}
83+
</ul>
84+
</section>
85+
))}
86+
</section>
87+
)}
88+
</>
89+
);
90+
}

‎frontend/main/src/components/PostsCards.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import AJPrimary from '@/components/global/icons/AJPrimary';
66
export default function PostsCards({
77
posts,
88
}: {
9-
posts: CodingCatBuilderContent[];
9+
posts?: CodingCatBuilderContent[];
1010
}): JSX.Element {
1111
return (
1212
<>

‎frontend/main/src/components/authors/AuthorCard.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ export default function AuthorCard({
88
}): JSX.Element {
99
return (
1010
<article className="grid items-start max-w-md grid-cols-1 gap-4 p-4 shadow-lg justify-items-center justify-self-center bg-basics-50 text-basics-900 hover:text-basics-900 hover:shadow-sm">
11+
{console.log(author)}
12+
1113
{author?.displayName && author?.photoURL ? (
1214
<Image
1315
src={author.photoURL.public_id}

‎frontend/main/src/components/authors/Authors.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default function Authors({
99
}): JSX.Element {
1010
return (
1111
<section className="grid gap-4 justify-items-center">
12+
{/* {JSON.stringify(authors)} */}
1213
<section className="max-w-2xl text-center">
1314
<h2 className="mb-2 text-4xl lg:text-5xl">Authors & Instructors</h2>
1415
<h3 className="font-sans text-2xl">
@@ -20,7 +21,7 @@ export default function Authors({
2021
</h3>
2122
</section>
2223
<section className="flex flex-wrap items-start justify-center w-full gap-10">
23-
{authors.map((author, i) => (
24+
{authors?.map((author, i) => (
2425
<Link href={`/authors/${author.slug}`} key={i}>
2526
<a>
2627
<AuthorCard author={author} />

‎frontend/main/src/components/builder/registerComponent.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -538,6 +538,40 @@ Builder.registerComponent(
538538
}
539539
);
540540

541+
Builder.registerComponent(
542+
dynamic(() =>
543+
import('@/components/authors/Authors').then((res) => res as any)
544+
),
545+
{
546+
name: 'Authors',
547+
image:
548+
'https://cdn.builder.io/api/v1/image/assets%2F303fa35cceca49e6ab548071602c8ebd%2Fd8328e4e1409459fbad3b0cdd1ae950b?quality=60&width=200&height=200',
549+
inputs: [
550+
{
551+
name: 'authors',
552+
type: 'list',
553+
},
554+
],
555+
}
556+
);
557+
558+
Builder.registerComponent(
559+
dynamic(() =>
560+
import('@/components/CourseSections').then((res) => res as any)
561+
),
562+
{
563+
name: 'CourseSections',
564+
image:
565+
'https://cdn.builder.io/api/v1/image/assets%2F303fa35cceca49e6ab548071602c8ebd%2Fd8328e4e1409459fbad3b0cdd1ae950b?quality=60&width=200&height=200',
566+
inputs: [
567+
{
568+
name: 'courseData',
569+
type: 'object',
570+
},
571+
],
572+
}
573+
);
574+
541575
Builder.registerComponent(
542576
dynamic(() =>
543577
import('@/components/PostMediaLocked').then((res) => res as any)

‎frontend/main/src/layout/Layout.tsx

Lines changed: 4 additions & 170 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,7 @@ import AppMenu from '@/layout/AppMenu';
99
import useIsNavigating from '@/hooks/useIsNavigating';
1010
import { Progress } from '@/components/global/loading/Progress';
1111
import dynamic from 'next/dynamic';
12-
import { Builder, BuilderComponent } from '@builder.io/react';
13-
import { useAuth, useUser } from 'reactfire';
14-
import useIsMember from '@/hooks/useIsMember';
15-
import { UserInfoExtended } from '@/models/user.model';
16-
import { ModelType } from '@/models/builder.model';
17-
import PostMediaLocked from '@/components/PostMediaLocked';
18-
import { StripeProduct } from '@/models/stripe.model';
19-
import Profile from '@/components/user/Profile';
20-
import AJ404 from '@/components/global/icons/AJ404';
21-
import Link from 'next/link';
12+
import { BuilderComponent } from '@builder.io/react';
2213

2314
const FirebaseProvider = dynamic<any>(
2415
() =>
@@ -83,23 +74,11 @@ const FirebaseFunctionsProvider = dynamic<any>(
8374
const Layout = ({
8475
header,
8576
footer,
86-
modelData,
87-
model,
88-
recentPosts,
89-
list,
90-
products,
91-
courseData,
92-
isLive,
77+
children,
9378
}: {
9479
header: any;
9580
footer: any;
96-
modelData: any;
97-
model: ModelType;
98-
recentPosts: any;
99-
list: any;
100-
products: StripeProduct[];
101-
courseData: any;
102-
isLive: boolean;
81+
children?: JSX.Element | JSX.Element[];
10382
}): JSX.Element => {
10483
const [overlayMenuActive, setOverlayMenuActive] = useState(false);
10584
const [userMenu, setUserMenu] = useState(false);
@@ -111,151 +90,6 @@ const Layout = ({
11190

11291
router.events.on('routeChangeComplete', () => setOverlayMenuActive(false));
11392

114-
const UserWrapper = ({
115-
modelData,
116-
model,
117-
recentPosts,
118-
list,
119-
courseData,
120-
}: {
121-
modelData: any;
122-
model: string;
123-
recentPosts: any;
124-
list: any;
125-
courseData: any;
126-
}) => {
127-
const { data: user } = useUser();
128-
if (user)
129-
return (
130-
<MemberWrapper
131-
user={user}
132-
modelData={modelData}
133-
model={model}
134-
recentPosts={recentPosts}
135-
list={list}
136-
courseData={courseData}
137-
/>
138-
);
139-
else return <PostMediaLocked />;
140-
};
141-
142-
const MemberWrapper = ({
143-
user,
144-
modelData,
145-
model,
146-
recentPosts,
147-
list,
148-
courseData,
149-
}: {
150-
user: UserInfoExtended;
151-
modelData: any;
152-
model: string;
153-
recentPosts: any;
154-
list: any;
155-
courseData: any;
156-
}) => {
157-
const { member, team } = useIsMember(user);
158-
159-
if (member || team) {
160-
return (
161-
<>
162-
<BuilderComponent
163-
options={{ includeRefs: true }}
164-
model={model}
165-
content={modelData}
166-
data={{
167-
recentPosts,
168-
modelData,
169-
list,
170-
user,
171-
team,
172-
member,
173-
courseData,
174-
}}
175-
/>
176-
</>
177-
);
178-
} else {
179-
return <PostMediaLocked />;
180-
}
181-
};
182-
183-
const BuilderWrapper = ({
184-
modelData,
185-
model,
186-
recentPosts,
187-
list,
188-
courseData,
189-
}: {
190-
modelData: any;
191-
model: string;
192-
recentPosts: any;
193-
list: any;
194-
courseData: any;
195-
}) => {
196-
return (
197-
<>
198-
<BuilderComponent
199-
options={{ includeRefs: true }}
200-
model={model}
201-
content={modelData}
202-
data={{
203-
recentPosts,
204-
modelData,
205-
list,
206-
courseData,
207-
}}
208-
/>
209-
</>
210-
);
211-
};
212-
213-
const getLayout = () => {
214-
if (!modelData && isLive) {
215-
return (
216-
<main className="grid justify-center w-full grid-cols-1 gap-10 bg-primary-50 dark:bg-basics-700">
217-
<section className="grid content-start grid-cols-1 gap-10 p-4 text-center justify-items-center">
218-
<AJ404 />
219-
<h1 className="text-5xl lg:text-6xl">
220-
Uh oh, that page doesn&apos;t seem to exist.
221-
</h1>
222-
<h2 className="font-sans text-4xl lg:text-5xl">
223-
Were you looking for{' '}
224-
{/* add some logic here to say which route they clicked? */}
225-
<Link href="/courses">
226-
<a className="underline text-secondary-600">Courses</a>
227-
</Link>
228-
</h2>
229-
</section>
230-
</main>
231-
);
232-
}
233-
234-
if (['user'].includes(model)) {
235-
return <Profile products={products} />;
236-
}
237-
if (model == ModelType.lesson) {
238-
return (
239-
<UserWrapper
240-
modelData={modelData}
241-
model={model}
242-
recentPosts={recentPosts}
243-
list={list}
244-
courseData={courseData}
245-
/>
246-
);
247-
}
248-
return (
249-
<BuilderWrapper
250-
modelData={modelData}
251-
model={model}
252-
recentPosts={recentPosts}
253-
list={list}
254-
courseData={courseData}
255-
/>
256-
);
257-
};
258-
25993
return (
26094
<>
26195
<FirebaseProvider>
@@ -277,7 +111,7 @@ const Layout = ({
277111
/>
278112
<div className="grid grid-cols-1 justify-items-center calc-height-wrapper lg:mx-auto lg:w-80 lg:max-w-8xl lg:justify-items-stretch">
279113
<main className="grid justify-center w-full grid-cols-1 gap-10 bg-primary-50 dark:bg-basics-700">
280-
{getLayout()}
114+
<>{children}</>
281115
</main>
282116
<BuilderComponent model="footer" content={footer} />
283117
</div>

‎frontend/main/src/models/builder.model.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -56,22 +56,14 @@ export enum ModelType {
5656
page = 'page',
5757
group = 'group',
5858
forum = 'forum',
59+
authors = 'authors',
5960
}
6061
export interface Section {
6162
title: string;
6263
lessons?: SectionLesson[];
6364
}
6465

6566
export interface SectionLesson {
66-
_id: string;
67-
slug: string;
67+
url: string;
6868
title: string;
69-
lessons: LessonRef[];
70-
}
71-
72-
export interface LessonRef {
73-
_key: string;
74-
_ref: string;
75-
_type: string;
76-
lesson: Page;
7769
}

0 commit comments

Comments
 (0)