промежуточная заготовка

HN_TalentMatch.Server/appsettings.json

@@ -7,6 +7,6 @@
   },
   "AllowedHosts": "*",
   "ConnectionStrings": {
-    "HN_TalentMatchServerContext": "server=localhost;username=postgres;database=HN_TalentMatch_dev;password=qwertyuiop"
+    "HN_TalentMatchServerContext": "server=localhost;username=osbelyi;database=HN_TalentMatch_dev;password=1111"
   }
 }

hn_talentmatch.client/package.json

@@ -11,9 +11,13 @@
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.1",
+    "redux": "^5.0.1",
+    "redux-thunk": "^3.1.0",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {

hn_talentmatch.client/src/components/Header/Header.jsx

@@ -7,8 +7,8 @@ const Header = () => {
         <Container>
             <Nav>
                 <NavItem><Link to="/">Добро пожаловать!</Link></NavItem>
-                <NavItem><Link to="/data">Посмотреть прогноз погоды</Link></NavItem>
-                <NavItem><Link to="/dataCard">Посмотреть и редактировать прогноз погоды</Link></NavItem>
+                <NavItem><Link to="/vacancies">Посмотреть вакансии</Link></NavItem>
+                <NavItem><Link to="/resume">Посмотреть резюме</Link></NavItem>
             </Nav>
         </Container>
     );

hn_talentmatch.client/src/components/HomePage/HomePage.jsx

@@ -5,9 +5,9 @@ import { Link } from 'react-router-dom';
 const HomePage = () => {
     return (
         <Container>
-            <Title>Добро пожаловать в прогноз погоды!</Title>
-            <p>Для просмотра прогноза погоды на ближайшие дни нажмите <Link to="/data">Посмотреть прогноз</Link> или кнопку в меню навигации.</p>
-            <p>Для просмотра и редактирования прогноза погоды на ближайшие дни нажмите <Link to="/dataCard">Посмотреть и редактировать прогноз</Link> или кнопку в меню навигации.</p>
+            <Title>Добро пожаловать в подбор резюме!</Title>
+            <p>Для просмотра вакансий нажмите <Link to="/vacancies">Посмотреть вакансии</Link> или кнопку в меню навигации.</p>
+            <p>Для просмотра резюме нажмите <Link to="/resume">Посмотреть резюме</Link> или кнопку в меню навигации.</p>
         </Container>
     );
 }

hn_talentmatch.client/src/components/ResumePage/ResumePage.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { Container, Title } from '../../styles/ResumePageStyles.js';
+import ResumeCard from '../resumeCard/ResumeCard';
+import useData from '../../hooks/useData.js';
+import Modal from '../modal/Modal';
+import Pagination from "../pagination/Pagination.jsx";
+
+const ResumePage = () => {
+    const { resumeData, loading, error } = useData();
+    const [currentPage, setCurrentPage] = useState(1);
+    const [resumesPerPage] = useState(10);
+    const [selectedResume, setSelectedResume] = useState(null);
+
+    const indexOfLastResume = currentPage * resumesPerPage;
+    const indexOfFirstResume = indexOfLastResume - resumesPerPage;
+    const currentResumes = resumeData.slice(indexOfFirstResume, indexOfLastResume);
+
+    const paginate = pageNumber => setCurrentPage(pageNumber);
+
+    const handleViewResume = (resume) => {
+        setSelectedResume(resume);
+    };
+
+    const handleCloseDetails = () => {
+        setSelectedResume(null);
+    };
+
+    if (loading) {
+        return <Container>Loading...</Container>;
+    }
+
+    if (error) {
+        return <Container>Error: {error.message}</Container>;
+    }
+
+    return (
+        <Container style={{ display: 'flex', flexDirection: 'column' }}>
+            <Title>Список резюме</Title>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '20px' }}>
+                {currentResumes.map(resume => (
+                    <ResumeCard
+                        key={resume.uuid}
+                        resume={resume}
+                        handleViewResume={() => handleViewResume(resume)}
+                    />
+                ))}
+            </div>
+            <Pagination
+                resumesPerPage={resumesPerPage}
+                totalResumes={resumeData.length}
+                paginate={paginate}
+            />
+            {selectedResume && (
+                <Modal onClose={handleCloseDetails}>
+                    <ResumeCard
+                        first_name={selectedResume.first_name}
+                        about={selectedResume.about}
+                    />
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default ResumePage;

hn_talentmatch.client/src/components/VacancyPage/VacancyPage.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { Container, VacancyCardsContainer, VacancyCardView, VacancyTitle, VacancyDescription, VacancyKeywords } from '../../styles/VacancyStyles.js';
+import Modal from '../modal/Modal';
+import VacancyCard from "../vacancyCard/VacancyCard.jsx";
+import useData from '../../hooks/useData'; // Импортируем созданный вами хук
+
+const VacancyPage = () => {
+    const { vacancyData, loading, error, getVacancyById } = useData(); // Используем хук useData
+
+    const [selectedVacancy, setSelectedVacancy] = useState(null);
+
+    useEffect(() => {
+        // Вызываем метод получения данных, если это необходимо
+        // Пример использования: fetchVacancies();
+    }, []); // Указываем зависимость, если это необходимо
+
+    const handleViewDetails = async (vacancyId) => {
+        try {
+            const vacancy = await getVacancyById(vacancyId);
+            setSelectedVacancy(vacancy);
+        } catch (error) {
+            console.error("Error fetching vacancy details:", error);
+        }
+    };
+
+    const handleCloseDetails = () => {
+        setSelectedVacancy(null);
+    };
+
+    if (loading) {
+        return <div>Loading...</div>; // Отображаем индикатор загрузки, пока данные загружаются
+    }
+
+    if (error) {
+        return <div>Error: {error.message}</div>; // Отображаем сообщение об ошибке, если произошла ошибка при загрузке данных
+    }
+
+    return (
+        <Container>
+            <div>
+                <h2>Список вакансий</h2>
+                <VacancyCardsContainer>
+                    {vacancyData.map(vacancy => (
+                        <VacancyCardView key={vacancy.uuid}>
+                            <VacancyTitle>{vacancy.name}</VacancyTitle>
+                            <VacancyDescription>{vacancy.description}</VacancyDescription>
+                            <VacancyKeywords>Требуемые навыки: {vacancy.keywords}</VacancyKeywords>
+                            <button onClick={() => handleViewDetails(vacancy.id)}>Подробнее</button>
+                        </VacancyCardView>
+                    ))}
+                </VacancyCardsContainer>
+            </div>
+
+            {selectedVacancy && (
+                <Modal onClose={handleCloseDetails}>
+                    <VacancyCard vacancyId={selectedVacancy.id} />
+                </Modal>
+            )}
+        </Container>
+    );
+}
+
+export default VacancyPage;