bmstu-itstech · MathewPr · Aug 20, 2024 · Aug 21, 2024 · Aug 21, 2024
diff --git a/.env.example b/.env.example
diff --git a/src/components/pages/Hardathon/Hardathon.tsx b/src/components/pages/Hardathon/Hardathon.tsx
@@ -1,72 +1,37 @@
 import "./hardathon.scss"
 import Logo from "../../utils/logo/Logo"
-import bizikov from "../../assets/images/bizikov.png"
-import React, {useEffect, useState} from "react";
-import axios from "axios";
-import {Link} from "react-router-dom";
+import {Link, useParams} from "react-router-dom";
+import {Hardathon} from "../../../domain/entities/hardathon";
+import {hardathonElement} from "../../../shared/apis/hardathon";
+import { useQuery } from '@tanstack/react-query';
 import {AppConfig} from "../../../core";
+import bizikov from "../../assets/images/bizikov.png"
+import React from "react";
 
-interface Hardathon {
-    title: string,
-    photo: string
-}
 
 export const HardathonPage = () => {
+    const { id } = useParams<{ id: string }>();
 
-    const [hardathons, setHardathons] = useState<Hardathon[]>([]);
-
-    useEffect(() => {
-        axios.get(`${AppConfig.apiUri}/api/v0/hardatons/?page=1`)
-            .then(res => {
-                setHardathons(res.data.hardatons);
-            }).catch(err => {
-                console.log(err);
-        })
-    }, []);
-
-    const slideRight = () => {
-        const board = document.querySelector('.board');
-        if (board) {
-            const firstSlide = board.firstElementChild;
-            const lastSlide = board.lastElementChild;
-            if (firstSlide) {
-                board.removeChild(firstSlide);
-                board.appendChild(firstSlide);
-            }
-        }
-    }
-
-    const slideLeft = () => {
-        const board = document.querySelector('.board');
-        if (board) {
-            const firstSlide = board.firstElementChild;
-            const lastSlide = board.lastElementChild;
-            if (lastSlide) {
-                board.removeChild(lastSlide);
-                board.insertBefore(lastSlide, firstSlide);
-            }
-        }
-    }
-
+    const { data: hardathon} = useQuery<Hardathon>({
+        queryKey: ['new-list', id],
+        queryFn: () => hardathonElement(id!)
+    });
     return (
         <section className={"page events-page"}>
-            <Logo title="Хардатон 2024"/>
+            <Logo title={hardathon?.title}/>
             <div className={"board-outer d-flex justify-content-center"}>
                 <div className="board">
-                    <div className={"bizikov-pic"}>
-                        <div className={"d-flex justify-content-center"}>
-                            <img src={bizikov} alt=""/>
-                        </div>
-
+                    <div className={"main-pic-container"}>
+                        <img className={"main-pic"} src={`${AppConfig.apiUri}${hardathon?.main_organizer_photo}`} alt=""/>
                     </div>
                     <div className={"box-hardathon d-inline-block"}>
                         <div className={"quote"}>
-                            <p>Давно полюбившийся формат робототехнических соревнований, где в течение нескольких дней финала участники разрабатывают робототехнический проект на определённую тему, а затем командам предстоит защитить свою работу.</p>
+                            <p>{hardathon?.main_organizer_word}</p>
                             <p className={"author"}>— главный организатор хардатона,
                                 Валерий Бизиков</p>
                         </div>
                         <div className={"buttons"}>
-                            <Link to={"/hardathons.ts.ts/1/details"}>
+                            <Link to={"details"}>
                                 <button className={"event-btn w-400"}>
                                     <p className="fw-bolder fs-4 text-uppercase text-light m-0">подробнее</p>
                                 </button>

diff --git a/src/components/pages/Hardathon/ProjectDetails/ProjectDetails.tsx b/src/components/pages/Hardathon/ProjectDetails/ProjectDetails.tsx
@@ -1,25 +1,33 @@
 import "./ProjectDetails.scss"
-import React, {useEffect, useState} from "react";
 import Logo from "../../../utils/logo/Logo"
-import {Link} from "react-router-dom";
+import {Link, useParams} from "react-router-dom";
+import {useQuery} from "@tanstack/react-query";
+import {Hardathon} from "../../../../domain/entities/hardathon";
+import {hardathonElement} from "../../../../shared/apis/hardathon";
 
 
 export const ProjectDetails = () => {
+    const { id } = useParams<{ id: string }>();
+
+    const { data: hardathon} = useQuery<Hardathon>({
+        queryKey: ['new-list', id],
+        queryFn: () => hardathonElement(id!)
+    });
     return (
         <section className={"page page-section"}>
-            <Logo title="хардатон 2024"/>
+            <Logo title={hardathon?.title}/>
              <button className={"button-main2"}>
                 <Link className="link" to="../.." relative={"path"}>
                     <p className={"text-light text-uppercase fw-bold fs-6 m-0"}>назад</p>
                 </Link>
             </button>
             <div className = {"main-container"}>
                 <div className={"text-main1"}>
-                    <p>Дата проведения: 31.10.2024</p>
-                    <p>Старт приёма заявок: 20.10.2024</p>
-                    <p>Окончание регистрации: 26.10.2024</p>
-                    <p>Подведение итогов: 10.11.2024</p>
-                    <p>Место проведения: <a className="link-place" href="#form">адрес/ссылка</a></p>
+                    <p>Дата проведения: {hardathon?.event_date}</p>
+                    <p>Старт приёма заявок: {hardathon?.date_for_accepting_applications}</p>
+                    <p>Окончание регистрации: {hardathon?.closing_date_for_applications}</p>
+                    <p>Подведение итогов: {hardathon?.summing_up_date}</p>
+                    <p>Место проведения: <a className="link-place" href={hardathon?.location}>адрес/ссылка</a></p>
                 </div>
             </div>
 
@@ -33,10 +41,10 @@ export const ProjectDetails = () => {
                      </Link>
                     </button>
                     <button className={"button-gr"}>
-                        <a className="link-group" href="#form">ФОТО</a>
+                        <a className="link-group" href={hardathon?.photo_album_url}>ФОТО</a>
                     </button>
                     <button className={"button-gr"}>
-                        <a className="link-group" href="#form">ДОКУМЕНТЫ</a>
+                        <a className="link-group" href={hardathon?.documents_url}>ДОКУМЕНТЫ</a>
                     </button>
                     <button className={"button-gr"}>
                     {/*<Link className="link" to={"../partners"} relative={"path"}>*/}

diff --git a/src/components/pages/Hardathon/hardathon.scss b/src/components/pages/Hardathon/hardathon.scss
@@ -1,11 +1,15 @@
-.bizikov-pic {
+.main-pic-container {
     width: 650px;
     height: 750px;
     display: inline-block;
+    position: relative;
+}
 
-    img {
-        margin: -211px;
-    }
+.main-pic {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: auto;
 }
 
 .quote {
@@ -111,10 +115,12 @@
     background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
     url("../../../../src/components/assets/images/background.svg") no-repeat;
     background-size: cover;
-    height: 100vh;
-    width: 100vw;
-    overflow: auto;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
     scrollbar-color: rgb(193 49 0 / 80%) transparent;
+    padding-bottom: 0 !important;
 }
 
 .line {

diff --git a/src/components/pages/Hardathons/Hardathons.scss b/src/components/pages/Hardathons/Hardathons.scss
@@ -1,7 +1,7 @@
 .hardathon-card {
   position: relative;
-  min-width: 24rem;
-  width: 600px;
+  height: 548.42px;
+  width: 667px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -27,9 +27,14 @@
 }
 
 .carousel_container {
-  position: relative;
-  display: flex;
-  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  display: block;
+}
+
+.slick-list {
+  margin-left: 68px !important;
+  margin-right: 43px !important;
 }
 
 .hardathons__title {
@@ -52,10 +57,6 @@
   text-transform: uppercase;
 }
 
-.slick-list {
-  padding-left: 100px !important;
-}
-
 @media (min-width: 768px) {
   .centered-text {
     font-size: 3.75rem;

diff --git a/src/components/pages/Hardathons/Hardathons.tsx b/src/components/pages/Hardathons/Hardathons.tsx
@@ -52,7 +52,6 @@ const SamplePrevArrow: FC<any> = (props) => {
                 width: 61,
                 height: 61,
                 position: 'absolute',
-                left: 0,
                 zIndex: 1}}
             onClick={onClick}
         />
@@ -67,7 +66,7 @@ const Carousel: FC<{ items: Hardathons[] }> = ({ items }) => {
         slidesToShow: 2,
         slidesToScroll: 1,
         nextArrow: <SampleNextArrow />,
-        prevArrow: <SamplePrevArrow />,
+        prevArrow: <SamplePrevArrow />
     };
 
     return (
@@ -99,10 +98,8 @@ const HardathonsPage: FC<HTMLAttributes<HTMLDivElement>> = () => {
                 <div className={'tw-h-24 md:tw-h-10 lg:tw-h-20'} />
                 <h2 className={"hardathons__title"}>ХАРДАТОНЫ</h2>
                 <div className={'tw-h-10 lg:tw-h-14 xl:tw-h-20'} />
-                <div className="justify-center">
-                    <div className="carousel-container tw-relative">
-                        <Carousel items={hardathons ?? []} />
-                    </div>
+                <div className="carousel-container">
+                    <Carousel items={hardathons ?? []} />
                 </div>
             </div>
         </>

diff --git a/src/domain/entities/hardathon.ts b/src/domain/entities/hardathon.ts
@@ -0,0 +1,17 @@
+interface Hardathon {
+    id: number,
+    title: string,
+    photo: string,
+    photo_album_url: string,
+    documents_url: string,
+    location: string,
+    date_for_accepting_applications: string,
+    closing_date_for_applications: string,
+    summing_up_date: string,
+    main_organizer_photo: string,
+    main_organizer_word: string,
+    competition_task: string,
+    event_date: string
+}
+
+export type { Hardathon };
diff --git a/src/shared/apis/hardathon.ts b/src/shared/apis/hardathon.ts
@@ -0,0 +1,12 @@
+import { client } from './axios';
+import {Hardathon} from "../../domain/entities/hardathon";
+
+const hardathonElement = async (id: string): Promise<Hardathon> => {
+    const res = await client.get(`/hardathons/${id}/`);
+    if (res.status >= 300) {
+        throw new Error();
+    }
+    return res.data;
+};
+
+export { hardathonElement };
diff --git a/src/shared/apis/hardathons.ts b/src/shared/apis/hardathons.ts
@@ -1,6 +1,5 @@
 import { client } from './axios';
 import {Hardathons} from "../../domain/entities/hardathons";
-import {AppConfig} from "../../core";
 
 const hardathonsList: () => Promise<Hardathons[]> = async () => {
     const res = await client.get(`/hardathons/`);