Develop

package.json

@@ -65,6 +65,7 @@
     "react-resize-detector": "^7.1.2",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.8.1",
+    "react-router-hash-link": "^2.4.3",
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "react-slider": "^2.0.4",

src/app/common/components/modals/HeaderLogin/HeaderLoginModal.component.tsx

@@ -3,29 +3,50 @@ import './HeaderLoginModal.styles.scss';
 import CancelBtn from '@images/utils/Cancel_btn.svg';
 
 import { observer } from 'mobx-react-lite';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { HashLink as Link } from 'react-router-hash-link';
 import FRONTEND_ROUTES from '@constants/frontend-routes.constants';
 import { useModalContext } from '@stores/root-store';
+import scrollWithOffset from '@utils/window.utility';
 
 import { Button, Modal } from 'antd';
 
+import JobApi from '@/app/api/job/Job.api';
 import {
     becomePartnerEvent,
     donateEvent,
     joinToStreetcodeClickEvent,
 } from '@/app/common/utils/googleAnalytics.unility';
 
 const HeaderLoginModal = () => {
-    const SURVEY_LINK = "https://forms.gle/eWwX5RP84X7dymLR6";
+    const [hasVacancies, setHasVacancies] = useState(false);
+    const SURVEY_LINK = 'https://forms.gle/eWwX5RP84X7dymLR6';
     const { modalStore: { setModal, modalsState: { login } } } = useModalContext();
-    const navigate = useNavigate();
+
+    useEffect(() => {
+        JobApi.getActive()
+            .then(
+                (result) => {
+                    setHasVacancies(result.length > 0);
+                },
+            )
+            .catch(
+                (e) => {
+                    console.log(e);
+                },
+            );
+    }, [login.isOpen]);
 
     const becomePartnerHandler = () => {
         login.isOpen = false;
         setModal('partners');
         becomePartnerEvent('modal');
     };
 
+    const joinToTeamHandler = () => {
+        login.isOpen = false;
+    };
+
     return (
         <Modal
             className="loginModal"
@@ -43,14 +64,20 @@ const HeaderLoginModal = () => {
                 <Button onClick={becomePartnerHandler}>
                     Стати партнером
                 </Button>
-                <Button onClick={() => {
-                    joinToStreetcodeClickEvent();
-                    navigate(`${FRONTEND_ROUTES.OTHER_PAGES.ERROR404}`);
-                    login.isOpen = false;
-                }}
-                >
-                        Долучитися до команди
-                </Button>
+                {hasVacancies && (
+                    <Button onClick={() => {
+                        joinToStreetcodeClickEvent();
+                        joinToTeamHandler();
+                    }}
+                    >
+                        <Link
+                            to={`${FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US}#vacancies`}
+                            scroll={(el:any) => scrollWithOffset(el, 100)}
+                        >
+                            Долучитися до команди
+                        </Link>
+                    </Button>
+                )}
                 <Button onClick={() => {
                     setModal('donates');
                     setModal('login');

src/app/common/utils/window.utility.tsx

@@ -0,0 +1,10 @@
+const scrollWithOffset = (el: any, offset: number) => {
+    const elementPosition = el.offsetTop - offset;
+    window.scroll({
+        top: elementPosition,
+        left: 0,
+        behavior: 'smooth',
+    });
+};
+
+export default scrollWithOffset;

src/app/layout/footer/Footer.component.tsx

@@ -7,12 +7,26 @@ import TikTok from '@images/footer/TikTok.webp';
 import Twitter from '@images/footer/Twitter.webp';
 import Youtube from '@images/footer/Youtube.webp';
 
+import { useEffect, useState } from 'react';
+import { HashLink as Link } from 'react-router-hash-link';
 import useWindowSize from '@hooks/stateful/useWindowSize.hook';
 
+import JobApi from '@/app/api/job/Job.api';
 import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
+import scrollWithOffset from '@/app/common/utils/window.utility';
 
 const Footer = () => {
     const windowSize = useWindowSize();
+    const [hasVacancies, setHasVacancies] = useState(false);
+    useEffect(() => {
+        JobApi.getActive()
+            .then(
+                (result) => {
+                    setHasVacancies(result.length > 0);
+                },
+            )
+            .catch();
+    }, []);
     return (
         <>
             {windowSize.width > 1024 && (
@@ -29,12 +43,22 @@ const Footer = () => {
                         </ul>
                         <ul className="usefulLinksColumn">
                             <li><a href={FRONTEND_ROUTES.OTHER_PAGES.PARTNERS}>Партнери</a></li>
-                            <li><a href={FRONTEND_ROUTES.OTHER_PAGES.ERROR404}>Вакансії</a></li>
+                            {hasVacancies ? (
+                                <li>
+                                    <Link
+                                        to={`${FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US}#vacancies`}
+                                        scroll={(el:any) => scrollWithOffset(el, 100)}
+                                    >
+                                        Вакансії
+                                    </Link>
+                                </li>
+                            ) : null}
                             <li><a href={FRONTEND_ROUTES.OTHER_PAGES.SUPPORT_US}>Донати</a></li>
                         </ul>
                         <ul className="usefulLinksColumn supportLinks">
                             <li><a href={FRONTEND_ROUTES.OTHER_PAGES.PRIVACY_POLICY}>Політика конфіденційності</a></li>
                             <li><a href={FRONTEND_ROUTES.OTHER_PAGES.CONTACT_US}>Зворотний зв&apos;язок</a></li>
+                            <li><a href="https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link" target="_blank" rel="noreferrer">Звітність ГО «Історична Платформа»</a></li>
                         </ul>
                         <ul className="socialIconContainer">
                             <li>
@@ -69,7 +93,11 @@ const Footer = () => {
             <section>
                 <div className="footerCopyright">
                     <p>
-                        © {new Date().getFullYear()} ГО «Історична Платформа». При використанні матеріалів сайту посилання на джерело
+                        ©
+                        {' '}
+                        {new Date().getFullYear()}
+                        {' '}
+                        ГО «Історична Платформа». При використанні матеріалів сайту посилання на джерело
                         обов’язкове.
                     </p>
                 </div>

src/app/router/Routes.tsx

@@ -1,10 +1,16 @@
-import { createBrowserRouter, createHashRouter, createRoutesFromElements, Route } from 'react-router-dom';
+import {
+    createBrowserRouter, createHashRouter, createRoutesFromElements, Route, Routes, useParams,
+} from 'react-router-dom';
 import FRONTEND_ROUTES from '@constants/frontend-routes.constants';
 import ForFansMainPage from '@features/AdminPage/ForFansPage/ForFansMainPage.component';
 import App from '@layout/app/App.component';
 import StreetcodeContent from '@streetcode/Streetcode.component';
 
 import ProtectedComponent from '@/app/common/components/ProtectedComponent.component';
+
+import AboutUsPage from '@/features/AboutUsPage/AboutUsPage.component';
+import Vacancies from '@/features/AboutUsPage/Vacancies/Vacancies.component';
+
 import ContactUs from '@/features/AdditionalPages/ContactUsPage/ContanctUs.component';
 import NewsPage from '@/features/AdditionalPages/NewsPage/News.component';
 import NotFound from '@/features/AdditionalPages/NotFoundPage/NotFound.component';
@@ -86,6 +92,10 @@ const router = createBrowserRouter(createRoutesFromElements(
         <Route index path="/:id" element={<StreetcodeContent />} />
         <Route index path={`${FRONTEND_ROUTES.OTHER_PAGES.NEWS}/:id`} element={<NewsPage />} />
         <Route path={FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US} element={<AboutUsPage />} />
+        <Route
+            path={`${FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US}/:section`}
+            element={<AboutUsPage />}
+        />
     </Route>,
 ));
 

src/features/AboutUsPage/AboutUsPage.component.tsx

@@ -1,22 +1,45 @@
 import './AboutUsPage.styles.scss';
 
-import TickerComponent from '../StreetcodePage/TickerBlock/Ticker.component';
+import React, { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import AboutUsHeaderText from './AboutUsHeaderText/AboutUsHeaderText.component';
 import Founders from './Founders/Founders.component';
 import TeamMembers from './TeamMembers/TeamMembers.component';
 import Vacancies from './Vacancies/Vacancies.component';
 
-const AboutUsPage = () => (
-    <div className="aboutUsPageContainer">
-        <div className="contentContainer">
-            {<AboutUsHeaderText />}
-            {<Founders />}
-            {<TeamMembers />}
-            {<Vacancies />}
-        </div>
-        <TickerComponent type="teamMembers" />
-    </div>
-);
+const AboutUsPage = () => {
+    const [hasVacancies, setHasVacancies] = useState(false);
+    const location = useLocation();
+    const section = location.hash.substring(1);
+    console.log('section:', section);
+
+    useEffect(() => {
+        const scrollToSection = (sectionName: string) => {
+            const sectionElement = document.getElementById(sectionName);
+            if (sectionElement) {
+                sectionElement.scrollIntoView({ behavior: 'smooth' });
+            }
+        };
 
+        if (section === 'vacancies') {
+            scrollToSection('vacancies-section');
+        } else {
+            window.scrollTo(0, 0);
+        }
+    }, [section]);
+
+    return (
+        <div className="aboutUsPageContainer">
+            <div className="contentContainer">
+                <AboutUsHeaderText />
+                <Founders />
+                <TeamMembers />
+                <div id="vacancies-section">
+                    <Vacancies setHasVacancies={setHasVacancies} />
+                </div>
+            </div>
+        </div>
+    );
+};
 export default AboutUsPage;

src/features/AboutUsPage/TeamMembers/TeamMembers.component.tsx

@@ -48,19 +48,20 @@ const TeamMembers = () => {
 
     return (
         positions.length
-        && (
-            <div className="aboutUsBlockContainer">
-                <SliderComponents
-                    positions={positions}
-                    setActive={setPositionId}
-                />
-                {window.innerWidth <= SCREEN_SIZES.tablet ? (
-                    <TeamMemberSlider team={team} />
-                ) : (
-                    <TeamMemberList teamMembers={team} />
-                )}
-            </div>
-        )
+            ? (
+                <div className="aboutUsBlockContainer">
+                    <SliderComponents
+                        positions={positions}
+                        setActive={setPositionId}
+                    />
+                    {window.innerWidth <= SCREEN_SIZES.tablet ? (
+                        <TeamMemberSlider team={team} />
+                    ) : (
+                        <TeamMemberList teamMembers={team} />
+                    )}
+                </div>
+            )
+            : null
     );
 };
 export default TeamMembers;

src/features/AboutUsPage/Vacancies/Vacancies.component.tsx

@@ -1,19 +1,20 @@
 import './Vacancies.styles.scss';
 
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import JobApi from '@/app/api/job/Job.api';
 
 import Vacancy from './Vacancy/Vacancy.component';
 
-const Vacancies = () => {
+const Vacancies = ({ setHasVacancies } : { setHasVacancies: (hasVacancies: boolean) => void }) => {
     const [jobs, setJobs] = useState<Job[]>([]);
 
     useEffect(() => {
         JobApi.getActive()
             .then(
                 (result) => {
                     setJobs(result);
+                    setHasVacancies(result.length > 0);
                 },
             )
             .catch(
@@ -22,11 +23,10 @@ const Vacancies = () => {
                 },
             );
     }, []);
-
     return (
         jobs.length
             ? (
-                <div className="aboutUsBlockContainer">
+                <div id="vacancies" className="aboutUsBlockContainer">
                     <h1>
                         <div />
                         <span>Вакансії</span>

src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.component.tsx

@@ -1,5 +1,7 @@
+import './Vacancy.syles.scss';
+
 import { useState } from 'react';
-import './Vacancy.syles.scss'
+
 import VacancyModal from './VacancyModal/VacancyModal.component';
 
 const Vacancy = (job: Job) => {
@@ -8,28 +10,43 @@ const Vacancy = (job: Job) => {
 
     const ChangeStatus = () => {
         setIsModalOpen(!isModalOpen);
-    }
+    };
     return (
-        <div className='vacancyContainer'>
+        <div className="vacancyContainer">
             <h2>{job.title}</h2>
             <h3>{job.salary}</h3>
             {
-                job.description.length < maxLength 
-                    ? <p>{job.description} 
-                        <label  
-                            onClick={ () => {setIsModalOpen(true)}}> Трохи ще
-                        </label>
-                    </p>
-                    : <p>{job.description.substring(0, maxLength)}... 
-                        <label  
-                            onClick={ () => {setIsModalOpen(true)}}> 
+                job.description.length < maxLength
+                    ? (
+                        <p>
+                            {job.description}
+                            <label
+                                onClick={() => {
+                                    setIsModalOpen(true);
+                                }}
+                            >
+                                {' '}
+Трохи ще
+                            </label>
+                        </p>
+                    )
+                    : (
+                        <p>
+                            {job.description.substring(0, maxLength)}
+...
+                            <label
+                                onClick={() => {
+                                    setIsModalOpen(true);
+                                }}
+                            >
                                 Трохи ще
-                        </label>
-                    </p>
+                            </label>
+                        </p>
+                    )
             }
-            <VacancyModal isOpen={isModalOpen} setOpen={ChangeStatus} job = {job}/>
+            <VacancyModal isOpen={isModalOpen} setOpen={ChangeStatus} job={job} />
         </div>
-    )
+    );
 };
 
-export default Vacancy
+export default Vacancy;