Course page demo

frontend/src/app/(cabinet)/courses/[id]/page.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import ClientCoursePage from "@/components/cabinet/ClientCoursePage";
+
+interface Module {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface Course {
+  id: string;
+  name: string;
+  description: string;
+  modules: Module[];
+}
+
+interface CoursePageProps {
+  course: Course;
+}
+
+const CoursePage: React.FC<CoursePageProps> = ({ course }) => {
+  return (
+    <div className="container">
+      <h1>{ course.name }</h1>
+      <p>{ course.description }</p>
+      <ClientCoursePage course={ course } />
+    </div>
+  );
+};
+
+// Fetch data at build time
+export async function generateStaticParams() {
+  // Replace this with your data fetching logic to get all course IDs
+  const courses = [
+    { id: "1" },
+    { id: "2" },
+    { id: "3" }
+  ];
+
+  return courses.map((course) => ({
+    id: course.id
+  }));
+}
+
+async function getData(id: string) {
+  // Replace this with your data fetching logic
+  return {
+    id,
+    name: `Course ${ id }`,
+    description: `This is the description for Course ${ id }.`,
+    modules: [
+      {
+        id: "module1",
+        title: "Module 1",
+        content: "Content for module 1"
+      },
+      {
+        id: "module2",
+        title: "Module 2",
+        content: "Content for module 2"
+      }
+      // Add more modules as needed
+    ]
+  };
+}
+
+export default async function Page({ params }: { params: { id: string } }) {
+  const course = await getData(params.id);
+
+  if (!course) {
+    return <p>Course not found</p>;
+  }
+
+  return <CoursePage course={ course } />;
+}

frontend/src/app/(cabinet)/courses/page.tsx

@@ -1,28 +1,51 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useProfile } from "@/hooks/useProfile";
 import { LuLoader } from "react-icons/lu";
-import { Container, Row, Col, Card } from "react-bootstrap"; // Import Bootstrap components
+import { Container, Row, Col, Card, Dropdown, ButtonGroup } from "react-bootstrap";
+import { COURSES_PAGE } from "@/constants/pages-url.constants";
+import Link from "next/link";
 
-const courses = [
+const newCourses = [
   {
-    name: "Вс тело за 1 час",
+    name: "Всe тело за 1 час",
     price: "$350",
     date: "20/08/2024",
     category: "Full-body"
   },
   {
-    name: "Название курса",
+    name: "Утренняя зарядка",
     price: "$350",
     date: "20/08/2024",
-    category: "Coding"
+    category: "Разминки"
   }
-  // Add more courses as needed
+  // Add more new courses as needed
+];
+
+const initialAppliedCourses = [
+  {
+    name: "Advanced React",
+    price: "$500",
+    date: "01/09/2024",
+    category: "Programming"
+  },
+  {
+    name: "Data Science Bootcamp",
+    price: "$800",
+    date: "15/09/2024",
+    category: "Data Science"
+  }
+  // Add more applied courses as needed
 ];
 
 const Courses: React.FC = () => {
   const { user } = useProfile();
+  const [ appliedCourses, setAppliedCourses ] = useState(initialAppliedCourses);
+
+  const handleUnsubscribe = (courseIndex: number) => {
+    setAppliedCourses(appliedCourses.filter((_, index) => index !== courseIndex));
+  };
 
   return (
     <Container fluid>
@@ -36,12 +59,16 @@ const Courses: React.FC = () => {
           </div>
         </Col>
       </Row>
+
+      <h2 className="mb-4">Поиск новых курсов</h2>
       <Row>
-        { courses.map((course, index) => (
+        { newCourses.map((course, index) => (
           <Col key={ index } md={ 6 } lg={ 4 } className="mb-4">
             <Card>
               <Card.Body>
-                <h5 className="card-title">{ course.category }</h5>
+                <h5 className="card-title">
+                  <a href={ `${ COURSES_PAGE }/${ index }` } className="stretched-link">{ course.category }</a>
+                </h5>
                 <div className="card-text">Курс: { course.name }</div>
                 <div className="card-text">Цена: { course.price }</div>
                 <div className="card-text">Дата: { course.date }</div>
@@ -50,6 +77,34 @@ const Courses: React.FC = () => {
           </Col>
         )) }
       </Row>
+
+      <h2 className="my-4">Управление подписками</h2>
+      <Row>
+        { appliedCourses.map((course, index) => (
+          <Col key={ index } md={ 6 } lg={ 4 } className="mb-4">
+            <Card>
+              <Card.Body>
+                <div className="d-flex justify-content-between align-items-start">
+                  <Link href={ `${ COURSES_PAGE }/1` }>
+                    <h5 className="card-title">
+                      { course.category }
+                    </h5>
+                    <div className="card-text">Курс: { course.name }</div>
+                    <div className="card-text">Цена: { course.price }</div>
+                    <div className="card-text">Дата: { course.date }</div>
+                  </Link>
+                  <Dropdown as={ ButtonGroup }>
+                    <Dropdown.Toggle split variant="link" id={ `dropdown-split-basic-${ index }` } />
+                    <Dropdown.Menu>
+                      <Dropdown.Item onClick={ () => handleUnsubscribe(index) }>Отписаться</Dropdown.Item>
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </div>
+              </Card.Body>
+            </Card>
+          </Col>
+        )) }
+      </Row>
     </Container>
   );
 };

frontend/src/app/globals.css

@@ -127,4 +127,28 @@ a {
 
 .landing-section {
     height: 80dvh;
-}
+}
+
+/* Add this to your global CSS file */
+
+.apply-section {
+    margin-top: 50px;
+}
+
+.course-header {
+    text-align: center;
+    margin-top: 50px;
+}
+
+.course-content {
+    margin-top: 50px;
+}
+
+.modules-list {
+    list-style: none;
+    padding: 0;
+}
+
+.module-content {
+    margin-top: 20px;
+}

frontend/src/components/cabinet/ClientCoursePage.tsx

@@ -0,0 +1,80 @@
+"use client"; // Ensure this is a client component
+
+import React, { useState } from "react";
+import { Button, Row, Col, Card, ListGroup } from "react-bootstrap"; // Import Bootstrap components
+
+interface Module {
+  id: string;
+  title: string;
+  content: string;
+}
+
+interface Course {
+  id: string;
+  name: string;
+  description: string;
+  modules: Module[];
+}
+
+interface ClientCoursePageProps {
+  course: Course;
+}
+
+const ClientCoursePage: React.FC<ClientCoursePageProps> = ({ course }) => {
+  const [ applied, setApplied ] = useState(false);
+  const [ currentModule, setCurrentModule ] = useState<Module | null>(null);
+
+  const handleApply = () => {
+    setApplied(true);
+    setCurrentModule(course.modules[0]);
+  };
+
+  return (
+    <div>
+      { !applied ? (
+        <div className="apply-section my-5 text-center">
+          <Button variant="primary" size="lg" onClick={ handleApply }>
+            Записаться на курс
+          </Button>
+        </div>
+      ) : (
+        <div className="course-content my-5">
+          <Row>
+            <Col md={ 8 }>
+              { currentModule ? (
+                <Card>
+                  <Card.Body>
+                    <Card.Title>{ currentModule.title }</Card.Title>
+                    <Card.Text>{ currentModule.content }</Card.Text>
+                  </Card.Body>
+                </Card>
+              ) : (
+                <Card>
+                  <Card.Body>
+                    <Card.Title>Выберите модуль для просмотра его содержимого</Card.Title>
+                  </Card.Body>
+                </Card>
+              ) }
+            </Col>
+            <Col md={ 4 }>
+              <h2>Modules</h2>
+              <ListGroup>
+                { course.modules.map((module) => (
+                  <ListGroup.Item
+                    key={ module.id }
+                    action
+                    onClick={ () => setCurrentModule(module) }
+                  >
+                    { module.title }
+                  </ListGroup.Item>
+                )) }
+              </ListGroup>
+            </Col>
+          </Row>
+        </div>
+      ) }
+    </div>
+  );
+};
+
+export default ClientCoursePage;