diff --git a/src/App.js b/src/App.js index eaf0af78..30828feb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,9 @@ -import React, { useState, Suspense, lazy } from 'react'; +import React, { Suspense, lazy } from 'react'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; +import { useSelector } from 'react-redux'; import 'bootstrap/dist/css/bootstrap.min.css'; import './fonts/stylesheet.css'; +import { selectAuth } from './redux/outstaffingSlice'; const AuthPageForDevelopers = lazy(() => import('./pages/AuthPageForDevelopers')); // const AuthPageForPartners = lazy(() => import('./pages/AuthPageForPartners')); @@ -11,18 +13,13 @@ const CalendarPage = lazy(() => import('./pages/CalendarPage')); const ReportPage = lazy(() => import('./pages/ReportFormPage.js')); const App = () => { - const [isAuth, setIsAuth] = useState(true); - const [candidates, setCandidates] = useState([]); - const [candidateForCalendar, setCandidateForCalendar] = useState([]); + const isAuth = useSelector(selectAuth); + // const [candidateForCalendar, setCandidateForCalendar] = useState([]); - const getCandidate = (candidateArr) => { - console.log('candidateArr ', candidateArr); - setCandidates(candidateArr); - }; - - const getCandidateForCalendar = (candidate) => { - setCandidateForCalendar(candidate); - }; + // const getCandidateForCalendar = (candidate) => { + // console.log('candidate ', candidate); + // setCandidateForCalendar(candidate); + // }; return ( @@ -30,13 +27,13 @@ const App = () => { {isAuth ? ( - + - + - + @@ -47,8 +44,8 @@ const App = () => { ) : ( - - {/* */} + {/* */} + )} diff --git a/src/components/Auth/AuthForDevelopers.js b/src/components/Auth/AuthForDevelopers.js index f47eabf8..d4e2e26d 100644 --- a/src/components/Auth/AuthForDevelopers.js +++ b/src/components/Auth/AuthForDevelopers.js @@ -1,4 +1,6 @@ import React from 'react'; +import { useDispatch } from 'react-redux'; +import { auth } from '../../redux/outstaffingSlice'; import style from './AuthForDevelopers.module.css'; import ellipse from '../../images/ellipse.png'; import arrow from '../../images/arrow__login_page.png'; @@ -11,7 +13,8 @@ import telegram from '../../images/telegram.png'; import vector from '../../images/Vector_Smart_Object.png'; import vectorBlack from '../../images/Vector_Smart_Object_black.png'; -const AuthForDevelopers = ({ setAuthed }) => { +const AuthForDevelopers = () => { + const dispatch = useDispatch(); return (
@@ -35,7 +38,7 @@ const AuthForDevelopers = ({ setAuthed }) => { - diff --git a/src/components/Auth/AuthForPartners.js b/src/components/Auth/AuthForPartners.js index 76f85f01..4b79d1dc 100644 --- a/src/components/Auth/AuthForPartners.js +++ b/src/components/Auth/AuthForPartners.js @@ -1,10 +1,11 @@ import React from 'react'; +import { useDispatch } from 'react-redux'; +import { auth } from '../../redux/outstaffingSlice'; import style from './AuthForPartners.module.css'; import ellipse from '../../images/ellipse.png'; import arrow from '../../images/arrow__login_page.png'; import medium from '../../images/medium_male_big.png'; import cross from '../../images/cross.png'; -// import specialists from '../../images/specialists.png'; import text from '../../images/Body_Text.png'; import align from '../../images/align-left.png'; import phone from '../../images/phone.png'; @@ -12,7 +13,9 @@ import telegram from '../../images/telegram.png'; import vector from '../../images/Vector_Smart_Object.png'; import vectorBlack from '../../images/Vector_Smart_Object_black.png'; -const AuthForPartners = ({ setAuthed }) => { +const AuthForPartners = () => { + const dispatch = useDispatch(); + return (
@@ -36,7 +39,7 @@ const AuthForPartners = ({ setAuthed }) => { - diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js index 5aac10b9..2aca5077 100644 --- a/src/components/Calendar/Calendar.js +++ b/src/components/Calendar/Calendar.js @@ -1,4 +1,6 @@ import React, { useEffect, useState } from 'react'; +import { useSelector } from 'react-redux'; +import { selectCurrentCandidate } from '../../redux/outstaffingSlice'; import { Link } from 'react-router-dom'; import style from './Calendar.module.css'; import calendarMale from '../../images/medium_male.png'; @@ -6,7 +8,9 @@ import rectangle from '../../images/rectangle_secondPage.png'; import CalendarComponent from './CalendarComponent'; import { currentMonth } from './calendarHelper'; -const Calendar = ({ candidateForCalendar }) => { +const Calendar = () => { + const candidateForCalendar = useSelector(selectCurrentCandidate); + const [month, setMonth] = useState(''); useEffect(() => { diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index cdb13c86..7e93b5fa 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -1,24 +1,24 @@ import React from 'react'; import { useHistory, useParams } from 'react-router-dom'; +import { useSelector, useDispatch } from 'react-redux'; +import { selectCandidates, currentCandidate, selectCurrentCandidate } from '../../redux/outstaffingSlice'; import style from './Candidate.module.css'; import arrow from '../../images/right-arrow.png'; import rectangle from '../../images/rectangle_secondPage.png'; import Sidebar from '../Sidebar/Sidebar'; -import SectionOne from './sections/SectionOne'; -import SectionTwo from './sections/SectionTwo'; -import SectionThree from './sections/SectionThree'; -import SectionFour from './sections/SectionFour'; -import SectionFive from './sections/SectionFive'; -import SectionSkills from './sections/SectionSkills'; +import SectionSkills from './SectionSkills'; -const Candidate = ({ candidatesArr, getCandidateForCalendar }) => { +const Candidate = () => { const history = useHistory(); - const { id: candidateId } = useParams(); - const currentCandidate = candidatesArr.find((el) => Number(el.id) === Number(candidateId)); + const dispatch = useDispatch(); - const { name, skillsName, img } = currentCandidate; + const candidatesArr = useSelector(selectCandidates); + dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId)))); + const currentCandidateObj = useSelector(selectCurrentCandidate); + + const { name, skillsName, img, skills } = currentCandidateObj; let classes; @@ -66,24 +66,67 @@ const Candidate = ({ candidatesArr, getCandidateForCalendar }) => {
- +
-

{name}

# Описание опыта

- +
+

SVM - сервис выездных менеджеров для банка ПСБ

+

+ Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их + услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое + обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все + необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) + время и место. +

+

Senior PHP/JS Developer

+

# Средства и инструменты:

- +
+

+ - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, + MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. + Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node. +

+

+ - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и + JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания + всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs. +

+

# Описание опыта

- +
+

Multitur - личный кабинет для сервиса поиска/подбора отелей

+

+ Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте. +

+

Senior PHP/JS Developer

+

# Средства и инструменты:

- +
+

Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8

+

Frontend - Vue.js

+

БД - MYSQL

+

# Функционал:

- - + <> +
+

Регистрации/авторизации;

+

Управления правами менеджеров отеля, назначение поставщиков

+

Управления описанием и профилем отелей;

+

Управления финансами, ценообразованием, квотами;

+

Переписки со своими менеджерами, а также с вышестоящими инстанциями;

+

Управления новостями отеля;

+

Просмотра расширенной статистики по заявкам и людям;

+
+ + +
diff --git a/src/components/Candidate/Candidate.module.css b/src/components/Candidate/Candidate.module.css index b0c1b3cd..199d0d39 100644 --- a/src/components/Candidate/Candidate.module.css +++ b/src/components/Candidate/Candidate.module.css @@ -182,3 +182,162 @@ text-align: left; margin: 20px 0px; } + +.SectionOne > h3 { + font-family: 'GT Eesti Pro Display'; + font-size: 2.2em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: left; +} + +.SectionOne > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 28px; + text-align: left; +} + +.SectionOne > h4 { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: left; +} + +.SectionTwo > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 28px; + text-align: left; +} + +.SectionThree > h3 { + font-family: 'GT Eesti Pro Display'; + font-size: 2.2em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: left; +} + +.SectionThree > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 28px; + text-align: left; +} + +.SectionThree > h4 { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 36px; + text-align: left; +} + +.SectionFour > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 18px; + text-align: left; +} + +.SectionFive > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 400; + font-style: normal; + letter-spacing: normal; + line-height: 16px; + text-align: left; +} + +@media (min-width: 576.98px) { + .SectionFive__btn { + display: none; + } +} + +@media (max-width: 575.98px) { + .SectionFive__btn { + display: block; + width: 221px; + height: 49px; + box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21); + border-radius: 24px; + background-color: #ffffff; + background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), + linear-gradient( + 36deg, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.16) 47%, + rgba(255, 255, 255, 0.17) 50%, + rgba(255, 255, 255, 0) 100% + ); + color: #ffffff; + font-family: 'Muller'; + font-size: 1.3em; + letter-spacing: normal; + text-align: left; + border: none; + text-align: center; + margin: 28px auto; + } +} + +.SectionSkills { + display: flex; + border: 1px solid #69bf2c; + padding: 28px 40px 16px 30px; + margin-top: 60px; + border-radius: 10px; + margin-bottom: 60px; +} + +@media (max-width: 575.98px) { + .SectionSkills { + display: none; + } +} + +.SectionSkills > h3 { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 700; + font-style: normal; + letter-spacing: normal; + line-height: 28px; + text-align: left; +} + +.SectionSkills > p { + font-family: 'GT Eesti Pro Display'; + font-size: 1.8em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 28px; + text-align: left; + margin-left: 20px; +} diff --git a/src/components/Candidate/SectionSkills.js b/src/components/Candidate/SectionSkills.js new file mode 100644 index 00000000..a8e9a153 --- /dev/null +++ b/src/components/Candidate/SectionSkills.js @@ -0,0 +1,15 @@ +import React from 'react'; +import style from './Candidate.module.css'; + +const SectionSkills = ({ skillsArr }) => { + return ( +
+

Навыки:

+ {skillsArr.map((skills) => ( +

{skills.skill.name}

+ ))} +
+ ); +}; + +export default SectionSkills; diff --git a/src/components/Candidate/sections/Section.module.css b/src/components/Candidate/sections/Section.module.css deleted file mode 100644 index 292a7706..00000000 --- a/src/components/Candidate/sections/Section.module.css +++ /dev/null @@ -1,156 +0,0 @@ -.SectionOne > h3 { - font-family: 'GT Eesti Pro Display'; - font-size: 2.2em; - font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: 36px; - text-align: left; -} - -.SectionOne > p { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 100; - font-style: normal; - letter-spacing: normal; - line-height: 28px; - text-align: left; -} - -.SectionOne > h4 { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 700; - font-style: normal; - letter-spacing: normal; - line-height: 36px; - text-align: left; -} - -.SectionTwo > p { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: 28px; - text-align: left; -} - -.SectionThree > h3 { - font-family: 'GT Eesti Pro Display'; - font-size: 2.2em; - font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: 36px; - text-align: left; -} - -.SectionThree > p { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 100; - font-style: normal; - letter-spacing: normal; - line-height: 28px; - text-align: left; -} - -.SectionThree > h4 { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 700; - font-style: normal; - letter-spacing: normal; - line-height: 36px; - text-align: left; -} - -.SectionFour > p { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: 18px; - text-align: left; -} - -.SectionFive > p { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: 16px; - text-align: left; -} - -@media (min-width: 576.98px) { - .SectionFive__btn { - display: none; - } -} - -@media (max-width: 575.98px) { - .SectionFive__btn { - display: block; - width: 221px; - height: 49px; - box-shadow: 0 8px 20px rgba(82, 151, 34, 0.21); - border-radius: 24px; - background-color: #ffffff; - background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), - linear-gradient( - 36deg, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.16) 47%, - rgba(255, 255, 255, 0.17) 50%, - rgba(255, 255, 255, 0) 100% - ); - color: #ffffff; - font-family: 'Muller'; - font-size: 1.3em; - letter-spacing: normal; - text-align: left; - border: none; - text-align: center; - margin: 28px auto; - } -} - -.SectionSkills { - border: 1px solid #69bf2c; - padding: 28px 40px 16px 30px; - margin-top: 60px; - border-radius: 10px; - margin-bottom: 60px; -} - -@media (max-width: 575.98px) { - .SectionSkills { - display: none; - } -} - -.SectionSkills > h3 { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 700; - font-style: normal; - letter-spacing: normal; - line-height: 28px; - text-align: left; -} - -.SectionSkills > p { - font-family: 'GT Eesti Pro Display'; - font-size: 1.8em; - font-weight: 100; - font-style: normal; - letter-spacing: normal; - line-height: 28px; - text-align: left; -} diff --git a/src/components/Candidate/sections/SectionFive.js b/src/components/Candidate/sections/SectionFive.js deleted file mode 100644 index cbf5f4cd..00000000 --- a/src/components/Candidate/sections/SectionFive.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import style from './Section.module.css'; - -const SectionFive = () => { - return ( - <> -
-

Регистрации/авторизации;

-

Управления правами менеджеров отеля, назначение поставщиков

-

Управления описанием и профилем отелей;

-

Управления финансами, ценообразованием, квотами;

-

Переписки со своими менеджерами, а также с вышестоящими инстанциями;

-

Управления новостями отеля;

-

Просмотра расширенной статистики по заявкам и людям;

-
- - - ); -}; - -export default SectionFive; diff --git a/src/components/Candidate/sections/SectionFour.js b/src/components/Candidate/sections/SectionFour.js deleted file mode 100644 index 6a2c489e..00000000 --- a/src/components/Candidate/sections/SectionFour.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import style from './Section.module.css'; - -const SectionFour = () => { - return ( -
-

Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8

-

Frontend - Vue.js

-

БД - MYSQL

-
- ); -}; - -export default SectionFour; diff --git a/src/components/Candidate/sections/SectionOne.js b/src/components/Candidate/sections/SectionOne.js deleted file mode 100644 index d002dded..00000000 --- a/src/components/Candidate/sections/SectionOne.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import style from './Section.module.css'; - -const SectionOne = () => { - return ( -
-

SVM - сервис выездных менеджеров для банка ПСБ

-

- Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их услуги - своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое обслуживание или - регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все необходимые бумаги ВМ - подготовит заранее и принесет на согласование и подпись в удобное ему (клиент) время и место. -

-

Senior PHP/JS Developer

-
- ); -}; - -export default SectionOne; diff --git a/src/components/Candidate/sections/SectionSkills.js b/src/components/Candidate/sections/SectionSkills.js deleted file mode 100644 index 9113ebb4..00000000 --- a/src/components/Candidate/sections/SectionSkills.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import style from './Section.module.css'; - -const SectionSkills = () => { - return ( -
-

Навыки:

-

- PHP: Native, Laravel, Zend Framework, CodeIgniter, YII, Symfony. JavaScript: Native, jQuery, AngularJS, ExtJS, - BackboneJS, ReactJS + Redux, VueJS. Search Engines: Sphinx, Elastic Search. Cache: Memcache, Redis. Profiling: - Xdebug, XHProf. WebSockets: Ratchet, Socket.io. Очереди: RabbitMQ, Beanstalk. MySQL, PostgreSQL, Oracle, MsSQL, - Vertica, HBase, Cassandra, MongoDB, Redis, Tarantool. CSS 2/3 (Sass, Less). HTML 4/5. -

-
- ); -}; - -export default SectionSkills; diff --git a/src/components/Candidate/sections/SectionThree.js b/src/components/Candidate/sections/SectionThree.js deleted file mode 100644 index c0bd7aaa..00000000 --- a/src/components/Candidate/sections/SectionThree.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import style from './Section.module.css'; - -const SectionThree = () => { - return ( -
-

Multitur - личный кабинет для сервиса поиска/подбора отелей

-

Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.

-

Senior PHP/JS Developer

-
- ); -}; - -export default SectionThree; diff --git a/src/components/Candidate/sections/SectionTwo.js b/src/components/Candidate/sections/SectionTwo.js deleted file mode 100644 index 845194f4..00000000 --- a/src/components/Candidate/sections/SectionTwo.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import style from './Section.module.css'; - -const SectionTwo = () => { - return ( -
-

- - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js, MySQL, - JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP. Перевел существующую - платформу с Laravel на современную архитектуру React/Redux и Node. -

-

- - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и JavaScript. - - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания всех основных компонентов - и внедрения новой архетиктуры. - Разработал персональное APIs. -

-
- ); -}; - -export default SectionTwo; diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index a5d33440..c77319c3 100644 --- a/src/components/Description/Description.js +++ b/src/components/Description/Description.js @@ -1,12 +1,13 @@ -import React from 'react'; +import React, { useState } from 'react'; import style from './Description.module.css'; import dog from '../../images/dog.jpg'; import rectangle from '../../images/rectangle_secondPage.png'; -import arrowLeft from '../../images/arrow_left.png'; -import arrowRight from '../../images/arrow_right.png'; import { Link } from 'react-router-dom'; +import { LEVELS } from '../constants/constants'; + +const Description = ({ candidatesListArr, onLoadMore }) => { + const [text, setText] = useState([]); -const Description = ({ candidatesListArr, getCandidate, onLoadMore }) => { return (
@@ -17,15 +18,24 @@ const Description = ({ candidatesListArr, getCandidate, onLoadMore }) => {
-

{el.header} разработчик

-

- - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift. -

-

- 5 лет руковожу командами мобильной разработки.

-

- 3 года преподаю в IOS-школе Сбера

+

+ {el.skillsName} разработчик, {LEVELS[el.level]} +

+ + {text.length > 0 ? ( + <> +

+ - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift. +

+

- 5 лет руковожу командами мобильной разработки.

+

- 3 года преподаю в IOS-школе Сбера

+ + ) : ( +

Описание отсутствует

+ )}
- getCandidate(candidatesListArr)}> +
@@ -49,7 +59,7 @@ const Description = ({ candidatesListArr, getCandidate, onLoadMore }) => {
-
+ {/*
@@ -57,7 +67,7 @@ const Description = ({ candidatesListArr, getCandidate, onLoadMore }) => {
-
+
*/}
diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index b50e672a..ebc9943c 100644 --- a/src/components/Description/Description.module.css +++ b/src/components/Description/Description.module.css @@ -84,6 +84,17 @@ line-height: 28px; } +.description__textSecondary { + font-family: 'GT Eesti Pro Display'; + font-size: 1.7em; + font-weight: 100; + font-style: normal; + letter-spacing: normal; + line-height: 24px; + text-align: left; + line-height: 28px; +} + @media (max-width: 575.98px) { .description__text { margin-left: 20px; diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 9720c0e4..a210ea6a 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -2,22 +2,24 @@ import React, { useState, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import Outstaffing from '../Outstaffing/Outstaffing'; import Description from '../Description/Description'; +import { fetchProfile, fetchSkills } from '../../server/server'; import front from '../../images/front_end.png'; import back from '../../images/back_end.png'; import design from '../../images/design.png'; -import { fetchProfile, fetchSkills } from '../../server/server'; import { profiles, selectProfiles, tags, candidates, selectCandidates, selectTab } from '../../redux/outstaffingSlice'; -const Home = ({ getCandidate }) => { - const [count, setCount] = useState(2); +const Home = () => { + const [index, setIndex] = useState(2); const dispatch = useDispatch(); const profilesArr = useSelector(selectProfiles); + const candidatesArr = useSelector(selectCandidates); + const selectedTab = useSelector(selectTab); useEffect(() => { - fetchProfile('https://guild.craft-group.xyz/api/profile') + fetchProfile(`https://guild.craft-group.xyz/api/profile?limit=`, index) .then((profileArr) => dispatch(profiles(profileArr))) .catch((e) => console.log(e)); @@ -32,28 +34,25 @@ const Home = ({ getCandidate }) => { ); dispatch(tags(tempTags)); }); - }, [dispatch]); + }, [dispatch, index]); useEffect(() => { dispatch( candidates( profilesArr.map((profile) => { let skillsName = ''; - let img; let header; + let img; if (Number(profile.position_id) === 1) { skillsName = 'Frontend'; img = front; - header = 'Фронтенд'; } else if (Number(profile.position_id) === 2) { skillsName = 'Backend'; img = back; - header = 'Бэкенд'; } else if (Number(profile.position_id) === 3) { skillsName = 'Marketer'; img = design; - header = 'Маркетинг'; } return { @@ -61,19 +60,18 @@ const Home = ({ getCandidate }) => { profileId: profile.position_id, name: profile.fio, skills: profile.skillValues, + level: profile.level, skillsName, - img, header, + img, }; }) ) ); }, [profilesArr, dispatch]); - const shorthandArray = candidatesArr.slice(0, count); - const loadMore = (count) => { - setCount((prev) => prev + count); + setIndex((prev) => prev + count); }; return ( @@ -81,9 +79,8 @@ const Home = ({ getCandidate }) => { item.skillsName === selectedTab) : shorthandArray + selectedTab ? candidatesArr.filter((item) => item.skillsName === selectedTab) : candidatesArr } - getCandidate={getCandidate} onLoadMore={loadMore} /> diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index 7cf0a05d..675838e7 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -4,6 +4,9 @@ import style from './Outstaffing.module.css'; import OutstaffingBlock from './OutstaffingBlock'; import TagSelect from '../Select/TagSelect'; import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice'; +import front from '../../images/front_end.png'; +import back from '../../images/back_end.png'; +import design from '../../images/design.png'; const Outstaffing = () => { const tagsArr = useSelector(selectTags); @@ -30,6 +33,8 @@ const Outstaffing = () => { data={candidatesArr.find((item) => item.skillsName === 'Frontend')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')} selected={selected === 'Frontend'} + img={front} + header="Фронтенд" />
@@ -37,6 +42,8 @@ const Outstaffing = () => { data={candidatesArr.find((item) => item.skillsName === 'Backend')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')} selected={selected === 'Backend'} + img={back} + header="Бэкенд" />
@@ -44,6 +51,8 @@ const Outstaffing = () => { data={candidatesArr.find((item) => item.skillsName === 'Marketer')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')} selected={selected === 'Marketer'} + img={design} + header="Маркетинг" />
diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index 5e3cfe77..1a8088b7 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -3,12 +3,12 @@ import { useDispatch, useSelector } from 'react-redux'; import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice'; import style from './Outstaffing.module.css'; -const OutstaffingBlock = ({ dataTags = [], data = {}, selected }) => { +const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) => { const dispatch = useDispatch(); const itemsArr = useSelector(selectItems); - const { header, img, skillsName } = data; + const { skillsName } = data; const handleBlockClick = (item) => { if (!itemsArr.find((el) => item === el.value)) { diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index b162c118..eacc0e98 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -1,24 +1,22 @@ import React from 'react'; import { Link } from 'react-router-dom'; import dogBig from '../../images/dog.jpg'; -import arrowLeft from '../../images/arrow_left.png'; -import arrowRight from '../../images/arrow_right.png'; import style from './Sidebar.module.css'; -const Sidebar = ({ getCandidateForCalendar, currentCandidateObj }) => { +const Sidebar = () => { return (

Опыт работы

4+ лет

- getCandidateForCalendar(currentCandidateObj)}> + -

Посмотреть ещё

+ {/*

Посмотреть ещё

*/}
-
+ {/*
@@ -26,7 +24,7 @@ const Sidebar = ({ getCandidateForCalendar, currentCandidateObj }) => {
-
+
*/}
); }; diff --git a/src/components/constants/constants.js b/src/components/constants/constants.js new file mode 100644 index 00000000..3b72d176 --- /dev/null +++ b/src/components/constants/constants.js @@ -0,0 +1,6 @@ +export const LEVELS = { + 1: 'Junior', + 2: 'Middle', + 3: 'Middle+', + 4: 'Senior', +}; diff --git a/src/pages/AuthPageForDevelopers.js b/src/pages/AuthPageForDevelopers.js index 031a9ea9..9bb5889c 100644 --- a/src/pages/AuthPageForDevelopers.js +++ b/src/pages/AuthPageForDevelopers.js @@ -1,8 +1,8 @@ import React from 'react'; import AuthForDevelopers from '../components/Auth/AuthForDevelopers'; -const AuthPageForDevelopers = ({ setAuth }) => { - return ; +const AuthPageForDevelopers = () => { + return ; }; export default AuthPageForDevelopers; diff --git a/src/pages/AuthPageForPartners.js b/src/pages/AuthPageForPartners.js index 184f8a25..96704c66 100644 --- a/src/pages/AuthPageForPartners.js +++ b/src/pages/AuthPageForPartners.js @@ -1,8 +1,8 @@ import React from 'react'; import AuthForPartners from '../components/Auth/AuthForPartners'; -const AuthPageForPartners = ({ setAuth }) => { - return ; +const AuthPageForPartners = () => { + return ; }; export default AuthPageForPartners; diff --git a/src/pages/CalendarPage.js b/src/pages/CalendarPage.js index b89bb7ea..960b2d1a 100644 --- a/src/pages/CalendarPage.js +++ b/src/pages/CalendarPage.js @@ -1,8 +1,8 @@ import React from 'react'; import Calendar from '../components/Calendar/Calendar'; -const CalendarPage = ({ candidateForCalendar }) => { - return ; +const CalendarPage = () => { + return ; }; export default CalendarPage; diff --git a/src/pages/CandidatePage.js b/src/pages/CandidatePage.js index 737e50ea..7348bf82 100644 --- a/src/pages/CandidatePage.js +++ b/src/pages/CandidatePage.js @@ -2,8 +2,6 @@ import React from 'react'; import Candidate from '../components/Candidate/Candidate'; -const CandidatePage = ({ candidatesArr, getCandidateForCalendar }) => ( - -); +const CandidatePage = () => ; export default CandidatePage; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 7919c26c..66bfc266 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -2,6 +2,6 @@ import React from 'react'; import Home from '../components/Home/Home'; -const HomePage = ({ getCandidate }) => ; +const HomePage = () => ; export default HomePage; diff --git a/src/redux/outstaffingSlice.js b/src/redux/outstaffingSlice.js index 5441ba3a..0c2a0ef6 100644 --- a/src/redux/outstaffingSlice.js +++ b/src/redux/outstaffingSlice.js @@ -4,8 +4,10 @@ const initialState = { tags: [], profiles: [], candidates: [], - selectedTab: '', selectedItems: [], + selectedTab: '', + currentCandidate: {}, + auth: true, }; export const outstaffingSlice = createSlice({ @@ -27,15 +29,24 @@ export const outstaffingSlice = createSlice({ selectedItems: (state, action) => { state.selectedItems = action.payload; }, + currentCandidate: (state, action) => { + state.currentCandidate = action.payload; + }, + auth: (state, action) => { + state.auth = action.payload; + }, }, }); -export const { tags, profiles, candidates, selectedTab, selectedItems } = outstaffingSlice.actions; +export const { tags, profiles, candidates, selectedTab, selectedItems, auth, currentCandidate } = + outstaffingSlice.actions; export const selectProfiles = (state) => state.outstaffing.profiles; export const selectTags = (state) => state.outstaffing.tags; export const selectCandidates = (state) => state.outstaffing.candidates; export const selectTab = (state) => state.outstaffing.selectedTab; export const selectItems = (state) => state.outstaffing.selectedItems; +export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate; +export const selectAuth = (state) => state.outstaffing.auth; export default outstaffingSlice.reducer; diff --git a/src/server/server.js b/src/server/server.js index b3968a4f..70017c46 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -1,5 +1,5 @@ -export const fetchProfile = async (link, index = '') => { - const response = await fetch(`${link}/${index}`); +export const fetchProfile = async (link, index) => { + const response = await fetch(`${link}${index}`); let data = await response.json(); return data;