Merge branch 'code100x:main' into main

code100x · Aug 30, 2024 · b2727dc · b2727dc
2 parents 71b3486 + 390d08c
commit b2727dc
Show file tree

Hide file tree

Showing 41 changed files with 638 additions and 233 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,4 +38,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-*storybook.log
+*storybook.log
+
+# ignore yarn.lock & package-lock
+yarn.lock
+package-lock.json
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -4,4 +4,9 @@
 npm run format:fix
 npm run lint:fix
 
-git add .
+git add .
+
+if [ -f "yarn.lock" ] || [ -f "package-lock.json" ]; then
+  echo "Error: yarn.lock or package-lock.json is present. Please remove them before committing."
+  exit 1
+fi
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts"
   },
   "scripts": {
+    "preinstall": "npx only-allow pnpm",
     "postinstall": "prisma generate",
     "dev": "next dev",
     "build": "next build",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/admin/content/[courseId]/[...moduleId]/page.tsx b/src/app/admin/content/[courseId]/[...moduleId]/page.tsx
@@ -13,18 +13,20 @@ export default async function UpdateCourseContent({
   const rest = params.moduleId;
   const course = await getCourse(parseInt(courseId, 10));
   const fullCourseContent = await getFullCourseContent(parseInt(courseId, 10));
+
   const courseContent = findContentById(
     fullCourseContent,
     rest.map((x) => parseInt(x, 10)),
   );
-  const contentType =
-    courseContent?.length === 1 ? courseContent[0]?.type : 'folder';
+  const contentType = courseContent?.folder
+    ? 'folder'
+    : courseContent?.value?.type;
 
   if (contentType === 'video') {
     return (
       <div className="mx-auto max-w-screen-xl justify-between p-4 text-white">
         {/* @ts-ignore */}
-        <UpdateVideoClient content={courseContent[0]} />
+        <UpdateVideoClient content={courseContent.value} />
       </div>
     );
   }
@@ -48,11 +50,12 @@ export default async function UpdateCourseContent({
       />
       <AdminCourseContent
         rest={rest}
-        //@ts-ignore
-        courseContent={courseContent?.map((x: any) => ({
+        // @ts-ignore
+        courseContent={courseContent?.value?.map((x: any) => ({
           title: x?.title || '',
           image: x?.thumbnail || '',
           id: x?.id || 0,
+          createdAt: x?.createdAt,
         }))}
         courseId={parseInt(courseId, 10)}
       />

diff --git a/src/app/admin/content/[courseId]/page.tsx b/src/app/admin/content/[courseId]/page.tsx
@@ -16,8 +16,9 @@ export default async function UpdateCourseContent({
     fullCourseContent,
     rest.map((x) => parseInt(x, 10)),
   );
-  const contentType =
-    courseContent?.length === 1 ? courseContent[0]?.type : 'folder';
+  const contentType = courseContent?.folder
+    ? 'folder'
+    : courseContent?.value.type;
 
   if (contentType === 'video') {
     return (
@@ -45,11 +46,12 @@ export default async function UpdateCourseContent({
       />
       <AdminCourseContent
         rest={rest}
-        //@ts-ignore
-        courseContent={courseContent?.map((x: any) => ({
+        // @ts-ignore
+        courseContent={courseContent?.value.map((x: any) => ({
           title: x?.title || '',
           image: x?.thumbnail || '',
           id: x?.id || 0,
+          createdAt: x?.createdAt,
         }))}
         courseId={parseInt(courseId, 10)}
       />

diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
@@ -2,7 +2,7 @@ import { cache } from '@/db/Cache';
 import db from '@/db';
 import { CourseContent } from '@prisma/client';
 import Fuse from 'fuse.js';
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 
 export type TSearchedVideos = {
   id: number;
@@ -21,7 +21,7 @@ const fuzzySearch = (videos: TSearchedVideos[], searchQuery: string) => {
   return searchedVideos.map((video) => video.item);
 };
 
-export async function GET(request: Request) {
+export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url);
   const searchQuery = searchParams.get('q');
 

diff --git a/src/app/courses/[courseId]/[...moduleId]/page.tsx b/src/app/courses/[courseId]/[...moduleId]/page.tsx
@@ -20,15 +20,12 @@ export default async function Course({
     fullCourseContent,
     rest.map((x) => parseInt(x, 10)),
   );
-  const contentType =
-    courseContent?.length === 1 ? courseContent[0]?.type : 'folder';
   const nextContent = null; //await getNextVideo(Number(rest[rest.length - 1]))
 
   return (
     <CourseView
       rest={rest}
       course={course}
-      contentType={contentType}
       nextContent={nextContent}
       courseContent={courseContent}
       fullCourseContent={fullCourseContent}

diff --git a/src/app/courses/[courseId]/page.tsx b/src/app/courses/[courseId]/page.tsx
@@ -15,15 +15,13 @@ export default async function Course({
   const fullCourseContent = await getFullCourseContent(parseInt(courseId, 10));
 
   const courseContent = findContentById(fullCourseContent, []);
-  const contentType =
-    courseContent?.length === 1 ? courseContent[0]?.type : 'folder';
+
   const nextContent = null;
 
   return (
     <CourseView
       rest={[]}
       course={course}
-      contentType={contentType}
       nextContent={nextContent}
       courseContent={courseContent}
       fullCourseContent={fullCourseContent}

diff --git a/src/app/questions/[slug]/@question/page.tsx b/src/app/questions/[slug]/@question/page.tsx
@@ -53,7 +53,7 @@ const SingleQuestionPage = async ({
       <Link href="/questions" className="p-4">
         Go Back
       </Link>
-      <div className="mt-3 flex items-center justify-center px-3">
+      <div className="mt-3 items-center justify-center px-3">
         {question && (
           <PostCard
             post={question}

diff --git a/src/app/questions/page.tsx b/src/app/questions/page.tsx
@@ -160,7 +160,7 @@ export default async function Home({
         <NewPostDialog />
         <div className="mx-auto md:mx-[15%] md:p-10">
           <div className="flex flex-col items-center p-4 dark:text-white">
-            <div className="flex">
+            <div className="mb-5 flex">
               <Search />
               <div className="px-3">
                 <DropdownMenu>

diff --git a/src/components/BreadCrumbComponent.tsx b/src/components/BreadCrumbComponent.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/components/ui/breadcrumb';
 import { FullCourseContent } from '@/db/course';
 import Link from 'next/link';
-import { useMemo } from 'react';
+import { Fragment, useMemo } from 'react';
 
 export default function BreadCrumbComponent({
   rest,
@@ -83,7 +83,7 @@ export default function BreadCrumbComponent({
               finalRouteArray = [...rest];
             }
             return (
-              <>
+              <Fragment key={breadcrumb.id}>
                 {index !== array.length - 1 ? (
                   <>
                     <BreadcrumbItem>
@@ -105,7 +105,7 @@ export default function BreadCrumbComponent({
                     </BreadcrumbPage>
                   </BreadcrumbItem>
                 )}
-              </>
+              </Fragment>
             );
           })}
         </BreadcrumbList>

diff --git a/src/components/CardComponent.tsx b/src/components/CardComponent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import bgImage from '../../public/Content-Cover.png';
 
 const CardComponent = ({
   title,
@@ -14,12 +14,14 @@ const CardComponent = ({
   const [, secondPart] = title.split(' | ');
 
   return (
-    <div
-      className="h-[224px] bg-cover bg-center bg-no-repeat px-4 py-4 sm:h-[224px] sm:px-5 sm:py-4 md:h-[180px] lg:h-[224px]"
-      style={{ backgroundImage: "url('/Content-Cover.png')" }}
-    >
-      <div className="flex h-full flex-col items-center justify-center">
-        <p className="sm:text-md flex-wrap whitespace-normal text-wrap rounded-full border-black bg-gray-400/20 px-3 py-1 text-center text-xs capitalize text-white sm:text-lg">
+    <div className="flex min-h-[22vh] items-center overflow-clip rounded-t-md">
+      <img
+        src={bgImage.src}
+        alt="background"
+        className="absolute h-full w-full rounded-t-md"
+      />
+      <div className="relative flex h-full flex-grow flex-col items-center justify-center">
+        <p className="md:text-md flex-wrap whitespace-normal text-wrap rounded-full border-black bg-gray-400/20 px-3 py-1 text-center text-xs capitalize text-white sm:text-lg lg:text-sm">
           100xdevs
         </p>
         <p className="sm:text-md flex-wrap whitespace-normal text-wrap border-black text-center text-xs capitalize text-white sm:text-lg">

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -1,9 +1,10 @@
-import { CheckCircle2, Play } from 'lucide-react';
+import { CheckCircle2 } from 'lucide-react';
 import { Bookmark } from '@prisma/client';
 import BookmarkButton from './bookmark/BookmarkButton';
 import { formatTime } from '@/lib/utils';
 import VideoThumbnail from './videothumbnail';
 import CardComponent from './CardComponent';
+import DonutChart from './DonutChart';
 
 export const ContentCard = ({
   title,
@@ -15,6 +16,7 @@ export const ContentCard = ({
   bookmark,
   contentId,
   contentDuration,
+  createdAt,
 }: {
   type: 'folder' | 'video' | 'notion';
   contentId?: number;
@@ -27,26 +29,26 @@ export const ContentCard = ({
   hoverExpand?: boolean;
   bookmark?: Bookmark | null;
   contentDuration?: number;
+  createdAt: Date;
 }) => {
-  // let image ;
-  // image = ""
+  const formattedDate = createdAt?.toLocaleDateString('en-GB', {
+    day: '2-digit',
+    month: 'long',
+    year: 'numeric',
+  });
+
   return (
     <div
       onClick={onClick}
-      className={`relative cursor-pointer rounded-2xl border border-gray-700/50 duration-200 ease-in group${hoverExpand ? ' ' : ''} `}
+      className={`relative min-h-fit cursor-pointer rounded-2xl border border-gray-700/50 duration-200 ease-in group${hoverExpand ? ' ' : ''} `}
     >
       {markAsCompleted && (
         <div className="absolute right-2 top-2 z-10">
           <CheckCircle2 color="green" size={30} fill="lightgreen" />
         </div>
       )}
-      {type === 'video' && (
-        <div className="text-blue-900g absolute bottom-12 right-2 z-10 rounded-md bg-zinc-900 p-1 px-2 font-semibold text-white">
-          {contentDuration && formatTime(contentDuration)}
-        </div>
-      )}
       {type !== 'video' && (
-        <div className="relative overflow-hidden rounded-md">
+        <div className="relative overflow-hidden">
           <CardComponent
             title={title}
             contentDuration={contentDuration && formatTime(contentDuration)}
@@ -63,14 +65,12 @@ export const ContentCard = ({
         </div>
       )}
       {type === 'video' && (
-        <div className="relative overflow-hidden rounded-md">
+        <div className="relative overflow-hidden">
           <VideoThumbnail
             title={title}
             contentId={contentId ?? 0}
+            contentDuration={contentDuration && formatTime(contentDuration)}
             imageUrl=""
-            // imageUrl={
-            //   'https://d2szwvl7yo497w.cloudfront.net/courseThumbnails/video.png'
-            // }
           />
         </div>
       )}
@@ -89,15 +89,17 @@ export const ContentCard = ({
       <div className="flex items-center justify-between p-4">
         <div className="space-y-2">
           <h3 className="text-bold text-lg tracking-normal">{title}</h3>
-          <h4 className="text-bold text-sm tracking-normal text-[#64748B]">
-            Posted on: 10 Aug 2024
+          <h4 className="text-bold text-xs tracking-normal text-[#64748B]">
+            Posted on: {formattedDate}
           </h4>
         </div>
-        <div className="hidden rounded-full border border-gray-700/60 p-4 lg:block">
-          <div className="rounded-full border border-[#64748b] p-2">
-            <Play size={15} color="#64748b" />
+        {type === 'video' && videoProgressPercent && (
+          <div className="flex items-center justify-center">
+            <DonutChart
+              percentage={parseInt(videoProgressPercent.toFixed(0), 10)}
+            />
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
@@ -27,7 +27,7 @@ export const CourseCard = ({
   const router = useRouter();
   return (
     <div
-      className={`flex max-w-sm flex-col border border-gray-200 bg-white ${roundedClassName} w-full shadow transition-colors duration-300 ease-in-out hover:bg-[#E2E8F0] dark:border dark:border-gray-700/50 dark:bg-[#020817] hover:dark:bg-[#1E293B]`}
+      className={`flex max-w-sm cursor-pointer flex-col border border-gray-200 bg-white ${roundedClassName} w-full shadow transition-colors duration-300 ease-in-out hover:bg-[#E2E8F0] dark:border dark:border-gray-700/50 dark:bg-[#020817] hover:dark:bg-[#1E293B]`}
       onClick={onClick}
     >
       <img