Merge pull request #66 from TeamHSE/feat/frontend

Демо профиль, дашборд, курсы

backend/src/config/Config.ts

@@ -1,5 +1,4 @@
 import * as fs from "fs";
-import * as path from "path";
 
 class Config {
   dbHost: string;

backend/src/controllers/AuthControllerLogin.ts

@@ -34,7 +34,7 @@ export const AuthControllerLogin = [
       const privateKey = config.readPrivateKey();
 
       const token = jwt.sign({ login: user.email }, privateKey, {
-        expiresIn: "1h",
+        expiresIn: "1000h",
         algorithm: "RS256",
       });
 

backend/src/controllers/AuthControllerRegister.ts

@@ -51,10 +51,10 @@ export const AuthControllerRegister = [
     await userRepository.save(newUser);
 
     try {
-      const privateKey = config.readPrivateKey(); 
+      const privateKey = config.readPrivateKey();
 
       const token = jwt.sign({ login: newUser.email }, privateKey, {
-        expiresIn: "1h",
+        expiresIn: "1000h",
         algorithm: "RS256",
       });
 

compose.yaml

@@ -2,21 +2,17 @@ services:
   backend:
     build:
       context: ./backend
-    #      target: final
     container_name: backend-box
     ports:
       - 3000:3000
     environment:
       DB_HOST: postgres
       PRIVATE_KEY_PATH: src/config/private.pem
       PUBLIC_KEY_PATH: src/config/public.pem
-      FRONTEND_URL: "http://frontend-ui:3001"
+      FRONTEND_URL: "http://localhost:3001"
     depends_on:
       postgres:
         condition: service_healthy
-    networks:
-      - backend-network
-      - application-network
 
   postgres:
     image: "postgres:14.8-alpine3.18"
@@ -33,29 +29,17 @@ services:
     volumes:
       - db:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD", "pg_isready"]
+      test: [ "CMD", "pg_isready" ]
       interval: 10s
       timeout: 5s
       retries: 5
-    networks:
-      - backend-network
 
   frontend:
     container_name: frontend-ui
     build:
       context: ./frontend
-    environment:
-      NODE_ENV: production
     ports:
       - 3001:3001
-    networks:
-      - application-network
-
-networks:
-  backend-network:
-    driver: bridge
-  application-network:
-    driver: bridge
 
 volumes:
   db:

frontend/.env.development

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:3000/api

frontend/.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:3000/api

frontend/.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["next", "prettier"]
+  "extends": [
+    "next",
+    "prettier"
+  ]
 }

frontend/README.md

@@ -20,4 +20,3 @@ bun dev
 Откройте http://localhost:3001 в вашем браузере, чтобы увидеть результат.
 
 По любым трудностям пишите в [Дискуссии](https://github.com/TeamHSE/train-platform/discussions/62) – будем рады оперативно помочь!
-

frontend/package.json

@@ -15,11 +15,15 @@
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
+    "chart.js": "^4.4.3",
     "js-cookie": "^3.0.5",
     "next": "14.2.3",
     "react": "^18",
     "react-bootstrap": "^2.10.2",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
+    "react-hook-form": "^7.52.0",
+    "react-icons": "^5.2.1",
     "reactstrap": "^9.2.2",
     "sonner": "^1.5.0"
   },

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

@@ -0,0 +1,7 @@
+import Dashboard from "@/components/cabinet/Dashboard";
+
+const DashboardPage = () => {
+  return <Dashboard />;
+};
+
+export default DashboardPage;

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

@@ -1,4 +1,9 @@
+"use client";
+
 import React from "react";
+import { useProfile } from "@/hooks/useProfile";
+import { LuLoader } from "react-icons/lu";
+import { Container, Row, Col, Card } from "react-bootstrap"; // Import Bootstrap components
 
 const courses = [
   {
@@ -17,29 +22,35 @@ const courses = [
 ];
 
 const Courses: React.FC = () => {
+  const { user } = useProfile();
+
   return (
-    <div>
-      <div className="d-flex justify-content-between align-items-center mb-4">
-        <h1>Курсы</h1>
-        <div>
-          <span className="text-white">User Name</span>
-        </div>
-      </div>
-      <div className="row">
+    <Container fluid>
+      <Row className="mb-4">
+        <Col>
+          <div className="d-flex justify-content-between align-items-center">
+            <h1>Курсы</h1>
+            <div>
+              <span className="text-dark">{ user?.username ?? <LuLoader /> }</span>
+            </div>
+          </div>
+        </Col>
+      </Row>
+      <Row>
         { courses.map((course, index) => (
-          <div key={ index } className="col-md-6 col-lg-4 mb-4">
-            <div className="card">
-              <div className="card-body">
+          <Col key={ index } md={ 6 } lg={ 4 } className="mb-4">
+            <Card>
+              <Card.Body>
                 <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>
-              </div>
-            </div>
-          </div>
+              </Card.Body>
+            </Card>
+          </Col>
         )) }
-      </div>
-    </div>
+      </Row>
+    </Container>
   );
 };
 

frontend/src/app/(cabinet)/layout.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
-import Link from "next/link";
-import { COURSES_PAGE, PROFILE_PAGE } from "@/constants/pages-url.constants";
+import Sidebar from "@/components/Sidebar";
 
 interface LayoutProps {
   children: ReactNode;
@@ -9,15 +8,8 @@ interface LayoutProps {
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="d-flex">
-      <aside className="bg-dark text-white p-4 position-fixed" style={ { width: "250px", height: "100vh" } }>
-        <div className="mb-4">
-          <Link className="h2 bi-person-badge" href={ PROFILE_PAGE }>Профиль</Link>
-        </div>
-        <nav className="nav flex-column">
-          <Link className="nav-link text-white" href={ COURSES_PAGE }>📚 Курсы</Link>
-        </nav>
-      </aside>
-      <main className="p-4" style={ { marginLeft: "250px", width: "calc(100% - 250px)" } }>
+      <Sidebar />
+      <main className="p-4" style={ { marginLeft: "300px", width: "calc(100% - 300px)" } }>
         { children }
       </main>
     </div>

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

@@ -1,27 +1,8 @@
 import React from "react";
+import Profile from "@/components/cabinet/Profile";
 
-const Profile = () => {
-  return (
-    <div className="container">
-      <div className="row">
-        <div className="col-md-4 text-center">
-          <h2>LOGO</h2>
-          <p className="text-muted"></p>
-        </div>
-        <div className="col-md-8">
-          <h3>Информация</h3>
-          <ul className="list-unstyled">
-            <li><strong>Email:</strong> [email protected]</li>
-            <li><strong>Телефон:</strong> (123) 456-7890</li>
-          </ul>
-          <div className="d-flex">
-            <button className="btn btn-primary">Редактировать профиль</button>
-            <button className="btn btn-danger">Выйти из аккаунта</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+const ProfilePage = () => {
+  return <Profile />;
 };
 
-export default Profile;
+export default ProfilePage;