Merge pull request #458 from claushaas/dev

update lesson activity pages on member area
claushaas · Jan 19, 2025 · 03ca696 · 03ca696
2 parents efaa182 + 3dcba4c
commit 03ca696
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 23 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v22.12.0
+v22.13.0
diff --git a/app/components/entities-cards.tsx b/app/components/entities-cards.tsx
@@ -32,6 +32,14 @@ type LessonEntityCardPropierties = ClassCardPropierties & {
 	}> | undefined;
 };
 
+type LessonWithoutSuspenseEntityCardProperties = ClassCardPropierties & {
+	readonly activity: {
+		saved: boolean | undefined;
+		completed: boolean | undefined;
+		favorited: boolean | undefined;
+	} | undefined;
+};
+
 export function AdminEntityCard({course, to}: ClassCardPropierties) {
 	return (
 		<motion.div
@@ -141,7 +149,7 @@ export function LessonEntityCard({course, to, activity}: LessonEntityCardPropier
 						<p className='text-mauve-5 text-xs text-ellipsis line-clamp-3'>{course.description}</p>
 						<Suspense fallback={<YemSpinner/>}>
 							<Await resolve={activity}>
-								{activity => activity?.data && (
+								{activity => activity && (
 									<div className='flex justify-end'>
 										<div className='flex gap-3 items-center w-fit p-1 bg-mauvea-10 rounded-xl'>
 											{activity.data.completed ? <SolidCheckCircleIcon className='size-4 stroke-purple-11 fill-purple-11'/> : <CheckCircleIcon className='size-4'/>}
@@ -158,3 +166,42 @@ export function LessonEntityCard({course, to, activity}: LessonEntityCardPropier
 		</motion.div>
 	);
 }
+
+export function LessonWithoutSuspenseEntityCard({course: lesson, to, activity}: LessonWithoutSuspenseEntityCardProperties) {
+	return (
+		<motion.div
+			whileHover={{
+				scale: 1.05,
+				transition: {duration: 0.5},
+			}}
+			className='portrait:w-48 w-72 portrait:h-80 h-48 relative rounded-xl shadow-sm shadow-mauve-11 dark:shadow-mauvedark-3 flex-shrink-0'
+		>
+			<Image
+				className='absolute top-0 left-0 w-full h-full rounded-xl -z-10'
+				src={buildImgSource(`${lesson.thumbnailUrl}`)}
+				cdn='cloudflare_images'
+				layout='constrained'
+				width={320}
+				height={320}
+				alt={lesson.name as string}
+			/>
+			<Link to={to}>
+				<div className='absolute top-0 left-0 h-full w-full rounded-xl bg-mauvea-10 py-2 px-3 flex flex-col justify-between'>
+					<h2 className='text-mauve-3 text-sm drop-shadow-md'>
+						{lesson.name}
+					</h2>
+					<div>
+						<p className='text-mauve-5 text-xs text-ellipsis line-clamp-3'>{lesson.description}</p>
+						<div className='flex justify-end'>
+							<div className='flex gap-3 items-center w-fit p-1 bg-mauvea-10 rounded-xl'>
+								{activity?.completed ? <SolidCheckCircleIcon className='size-4 stroke-purple-11 fill-purple-11'/> : <CheckCircleIcon className='size-4'/>}
+								{activity?.saved ? <SolidBookmarkIcon className='size-4 stroke-purple-11 fill-purple-11'/> : <BookmarkIcon className='size-4'/>}
+								{activity?.favorited ? <SolidHeartIcon className='size-4 stroke-purple-11 fill-purple-11'/> : <HeartIcon className='size-4'/>}
+							</div>
+						</div>
+					</div>
+				</div>
+			</Link>
+		</motion.div>
+	);
+}
diff --git a/app/routes/profile.completed-lessons.tsx b/app/routes/profile.completed-lessons.tsx
@@ -1,6 +1,5 @@
 import {type LoaderFunctionArgs, useLoaderData, type MetaArgs} from 'react-router';
-import {LessonEntityCard} from '~/components/entities-cards';
-import {LessonActivityService} from '~/services/lesson-activity.service.server';
+import {LessonWithoutSuspenseEntityCard} from '~/components/entities-cards';
 import {LessonService} from '~/services/lesson.service.server';
 import {type TypeUserSession} from '~/types/user-session.type';
 import {getUserSession} from '~/utils/session.server';
@@ -18,11 +17,13 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
 
 	const completedLessons = await new LessonService().getCompletedLessonsByUser(userData);
 
-	const lessonActivityService = new LessonActivityService();
-
 	const completedLessonsWithActivity = completedLessons.data.map(lesson => ({
 		...lesson,
-		activity: lessonActivityService.getLessonActivityForUser(lesson.lessonSlug, userData.id),
+		activity: {
+			completed: true,
+			saved: lesson.lesson.savedBy[0]?.isSaved ?? false,
+			favorited: lesson.lesson.favoritedBy[0]?.isFavorited ?? false,
+		},
 	}));
 
 	return {
@@ -50,7 +51,7 @@ export default function CompletedLessons() {
 
 			<div className='flex gap-4 my-4 flex-wrap'>
 				{completedLessonsWithActivity?.map(lesson => (
-					<LessonEntityCard key={lesson.id} course={lesson.lesson} to={lesson.link} activity={lesson.activity}/>
+					<LessonWithoutSuspenseEntityCard key={lesson.id} course={lesson.lesson} to={lesson.link} activity={lesson.activity}/>
 				))}
 			</div>
 		</div>

diff --git a/app/routes/profile.favorited-lessons.tsx b/app/routes/profile.favorited-lessons.tsx
@@ -1,6 +1,5 @@
 import {type LoaderFunctionArgs, useLoaderData, type MetaArgs} from 'react-router';
-import {LessonEntityCard} from '~/components/entities-cards';
-import {LessonActivityService} from '~/services/lesson-activity.service.server';
+import {LessonWithoutSuspenseEntityCard} from '~/components/entities-cards';
 import {LessonService} from '~/services/lesson.service.server';
 import {type TypeUserSession} from '~/types/user-session.type';
 import {getUserSession} from '~/utils/session.server';
@@ -18,11 +17,13 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
 
 	const favoritedLessons = await new LessonService().getFavoritedLessonsByUser(userData);
 
-	const lessonActivityService = new LessonActivityService();
-
 	const favoritedLessonsWithActivity = favoritedLessons.data.map(lesson => ({
 		...lesson,
-		activity: lessonActivityService.getLessonActivityForUser(lesson.lessonSlug, userData.id),
+		activity: {
+			favorited: true,
+			saved: lesson.lesson.savedBy[0]?.isSaved ?? false,
+			completed: lesson.lesson.completedBy[0]?.isCompleted ?? false,
+		},
 	}));
 
 	return {
@@ -50,7 +51,7 @@ export default function FavoritedLessons() {
 
 			<div className='flex gap-4 my-4 flex-wrap'>
 				{favoritedLessonsWithActivity.map(lesson => (
-					<LessonEntityCard key={lesson.id} course={lesson.lesson} to={lesson.link} activity={lesson.activity}/>
+					<LessonWithoutSuspenseEntityCard key={lesson.id} course={lesson.lesson} to={lesson.link} activity={lesson.activity}/>
 				))}
 			</div>
 		</div>

diff --git a/app/routes/profile.saved-lessons.tsx b/app/routes/profile.saved-lessons.tsx
@@ -1,6 +1,5 @@
 import {type LoaderFunctionArgs, useLoaderData, type MetaArgs} from 'react-router';
-import {LessonEntityCard} from '~/components/entities-cards';
-import {LessonActivityService} from '~/services/lesson-activity.service.server';
+import {LessonWithoutSuspenseEntityCard} from '~/components/entities-cards';
 import {LessonService} from '~/services/lesson.service.server';
 import {type TypeUserSession} from '~/types/user-session.type';
 import {getUserSession} from '~/utils/session.server';
@@ -26,11 +25,13 @@ export const loader = async ({request}: LoaderFunctionArgs) => {
 
 	const savedLessons = await new LessonService().getSavedLessonsByUser(userData);
 
-	const lessonActivityService = new LessonActivityService();
-
 	const savedLessonsWithActivity = savedLessons.data.map(lesson => ({
 		...lesson,
-		activity: lessonActivityService.getLessonActivityForUser(lesson.lessonSlug, userData.id),
+		activity: {
+			saved: true,
+			completed: lesson.lesson.completedBy[0]?.isCompleted ?? false,
+			favorited: lesson.lesson.favoritedBy[0]?.isFavorited ?? false,
+		},
 	}));
 
 	return {
@@ -58,7 +59,7 @@ export default function CompletedLessons() {
 
 			<div className='flex gap-4 my-4 flex-wrap'>
 				{savedLessonsWithActivity.map(lesson => (
-					<LessonEntityCard key={lesson.id} course={lesson.lesson} to={lesson.link} activity={lesson.activity}/>
+					<LessonWithoutSuspenseEntityCard key={lesson.id} course={lesson.lesson} to={lesson.link} activity={lesson.activity}/>
 				))}
 			</div>
 		</div>

diff --git a/app/services/lesson-activity.service.server.ts b/app/services/lesson-activity.service.server.ts
@@ -274,5 +274,3 @@ export class LessonActivityService {
 		}
 	}
 }
-
-type test = Prisma.LessonToModuleWhereInput;
diff --git a/app/services/lesson.service.server.ts b/app/services/lesson.service.server.ts
@@ -578,6 +578,18 @@ export class LessonService {
 								},
 							},
 						},
+						favoritedBy: {
+							where: {
+								userId: user.id,
+								isFavorited: true,
+							},
+						},
+						savedBy: {
+							where: {
+								userId: user.id,
+								isSaved: true,
+							},
+						},
 					},
 				},
 			},
@@ -644,6 +656,18 @@ export class LessonService {
 								},
 							},
 						},
+						favoritedBy: {
+							where: {
+								userId: user.id,
+								isFavorited: true,
+							},
+						},
+						completedBy: {
+							where: {
+								userId: user.id,
+								isCompleted: true,
+							},
+						},
 					},
 				},
 			},
@@ -710,6 +734,18 @@ export class LessonService {
 								},
 							},
 						},
+						savedBy: {
+							where: {
+								userId: user.id,
+								isSaved: true,
+							},
+						},
+						completedBy: {
+							where: {
+								userId: user.id,
+								isCompleted: true,
+							},
+						},
 					},
 				},
 			},

diff --git a/app/types/lesson.type.ts b/app/types/lesson.type.ts
@@ -129,6 +129,8 @@ export type TPrismaPayloadGetCompletedLessons = Array<Prisma.CompletedLessonsGet
 						};
 					};
 				};
+				favoritedBy: true;
+				savedBy: true;
 			};
 		};
 	};
@@ -169,6 +171,8 @@ export type TPrismaPayloadGetSavedLessons = Array<Prisma.SavedLessonsGetPayload<
 						};
 					};
 				};
+				favoritedBy: true;
+				completedBy: true;
 			};
 		};
 	};
@@ -209,6 +213,8 @@ export type TPrismaPayloadGetFavoritedLessons = Array<Prisma.FavoritedLessonsGet
 						};
 					};
 				};
+				savedBy: true;
+				completedBy: true;
 			};
 		};
 	};

diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
   "sideEffects": false,
   "type": "module",
   "engines": {
-    "node": ">=22.12.0"
+    "node": ">=22.13.0"
   },
   "bugs:": "https://github.com/claushaas/yem/issues",
   "scripts": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -274,5 +274,3 @@ export class LessonActivityService { @@
     		}
     	}
     }
-    type test = Prisma.LessonToModuleWhereInput;