RS-162

package.json

@@ -63,6 +63,7 @@
     "@types/jquery": "^3.5.29",
     "@types/react-helmet": "^6.1.11",
     "@types/react-slick": "^0.23.13",
-    "gh-pages": "^6.1.1"
+    "gh-pages": "^6.1.1",
+    "tailwindcss": "^3.4.5"
   }
 }

src/App.tsx

@@ -7,14 +7,14 @@ import {
 import 'bootstrap/dist/css/bootstrap.min.css';
 import {Helmet} from 'react-helmet';
 import Menu from "./components/utils/menu/Menu";
-import {News} from "./components/pages/News/News";
-import {Events} from "./components/pages/Events/Events";
+import {NewsPage} from "./components/pages/News/News";
+import {EventsPage} from "./components/pages/Events/Events";
 import {Event} from "./components/pages/Event/Event";
-import {Achievements} from "./components/pages/Achievements/Achievements";
-import {Partners} from "./components/pages/Partners/Partners";
-import {Contacts} from "./components/pages/Contacts/Contacts";
-import {Home} from "./components/pages/Home/Home";
-import {Hardathon} from "./components/pages/Hardathon/Hardathon";
+import {AchievementsPage} from "./components/pages/Achievements/Achievements";
+import {PartnersPage} from "./components/pages/Partners/Partners";
+import {ContactsPage} from "./components/pages/Contacts/Contacts";
+import {HomePage} from "./components/pages/Home/Home";
+import {HardathonPage} from "./components/pages/Hardathon/Hardathon";
 import {ProjectDetails} from "./components/pages/Hardathon/ProjectDetails/ProjectDetails";
 import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 
@@ -29,14 +29,14 @@ function App() {
                 </Helmet>
                 <Menu/>
                 <Routes>
-                    <Route path="/" element={<Home/>}/>
-                    <Route path="/news" element={<News/>}/>
-                    <Route path="/events" element={<Events/>}/>
+                    <Route path="/" element={<HomePage/>}/>
+                    <Route path="/news" element={<NewsPage/>}/>
+                    <Route path="/events" element={<EventsPage/>}/>
                     <Route path="/events/:id" element={<Event/>}/>
-                    <Route path="/achievements" element={<Achievements/>}/>
-                    <Route path="/partners" element={<Partners/>}/>
-                    <Route path="/contacts" element={<Contacts/>}/>
-                    <Route path="/hardathons" element={<Hardathon/>}/>
+                    <Route path="/achievements" element={<AchievementsPage/>}/>
+                    <Route path="/partners" element={<PartnersPage/>}/>
+                    <Route path="/contacts" element={<ContactsPage/>}/>
+                    <Route path="/hardathons" element={<HardathonPage/>}/>
                     {/*<Route path="/hardathons/:id/partners" element={<PartnersHardathon/>} />*/}
                     <Route path="/hardathons/:id/details" element={<ProjectDetails/>}/>
 

src/components/pages/Achievements/Achievements.tsx

@@ -1,36 +1,23 @@
-import React, {useEffect, useState, useRef, Ref} from 'react';
+import React, { useEffect, useState, useRef, Ref } from 'react';
 import "./achievements.scss"
 import Logo from "../../utils/logo/Logo"
 import AchieveCard from "../../utils/achieve-card/AchieveCard";
 import 'react-alice-carousel/lib/alice-carousel.css';
 import down_arrow from "../../assets/icons/arrow.svg";
-import axios from "axios";
-import {AppConfig} from "../../../core";
+import { useQuery } from '@tanstack/react-query';
+import { Achievement } from '../../../domain/entities/achievements';
+import { achievementsList } from '../../../shared/apis/achievements';
+import { eventPlaceholder } from '../../../shared/placeholders/achievements';
 
-interface Achievement {
-    id: number;
-    title: string,
-    description: string,
-    photo_album_url: string,
-    link_to_media: string,
-    photo: string,
-    index: number,
-    inputRef: Ref<HTMLDivElement>
-}
-
-export const Achievements = () => {
+export const AchievementsPage = () => {
 
-    const [achievements, setAchievements] = useState<Achievement[]>([]);
+    const { data: achievements} = useQuery<Achievement[]>({
+        queryKey: ['achievement-list'],
+        queryFn: achievementsList,
+        placeholderData: () => [eventPlaceholder],
+    }
+    );
 
-    useEffect(() => {
-        axios.get(`${AppConfig.apiUri}/api/v0/achievements/?page=1`)
-            .then(res => {
-                if (res.data)
-                    setAchievements(res.data.data);
-            }).catch(err => {
-            console.log(err);
-        })
-    }, []);
 
     const InputRefs = useRef<(HTMLDivElement | null)[]>([])
 
@@ -48,10 +35,10 @@ export const Achievements = () => {
 
     return (
         <section className="achievements-page page" id="achievements">
-            <Logo title="достижения"/>
+            <Logo title="достижения" />
             <div className="container-fluid mt-0 h-100 achievements-carousel d-flex justify-content-center px-0">
                 <div className="desktop-carousel-achievements">
-                    {achievements.map((achievement, index) => (
+                    {achievements?.map((achievement, index) => (
                         < AchieveCard
                             title={achievement.title}
                             description={achievement.description}
@@ -65,7 +52,7 @@ export const Achievements = () => {
                     ))}
                 </div>
                 <div className="mobile-carousel-achievements" id="achieve-wrapper">
-                    {achievements.map((achievement, index) => (
+                    {achievements?.map((achievement, index) => (
                         <AchieveCard
                             title={achievement.title}
                             description={achievement.description}
@@ -78,10 +65,10 @@ export const Achievements = () => {
                         />
                     ))}
                     <button className={"btn b-0 p-0 bg-transparent swap-card"} onClick={swapHandler}>
-                        <img src={down_arrow} alt="down-arrow"/>
+                        <img src={down_arrow} alt="down-arrow" />
                     </button>
                 </div>
             </div>
         </section>
     )
-}
+}

src/components/pages/Contacts/Contacts.tsx

@@ -8,7 +8,7 @@ import React from "react";
 
 
 
-export const Contacts = () => {
+export const ContactsPage = () => {
 
     const items = [
         <div className={"card mx-auto w-100 my-auto"}>