From e8b7fbb2f35b851e383f76b0a765b21f9d9048bc Mon Sep 17 00:00:00 2001 From: Hope87 Date: Mon, 5 Jul 2021 12:33:24 +0300 Subject: [PATCH] fixed code --- src/components/Candidate/Candidate.js | 164 +++--------------- src/components/Form/Form.js | 13 +- src/components/Home/Home.js | 54 +----- src/components/Outstaffing/Outstaffing.js | 10 +- .../Outstaffing/Outstaffing.module.css | 2 - .../Outstaffing/OutstaffingBlock.js | 11 +- src/redux/outstaffingSlice.js | 13 +- src/server/server.js | 4 +- 8 files changed, 39 insertions(+), 232 deletions(-) diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 0b63eb1b..af9c9415 100644 --- a/src/components/Candidate/Candidate.js +++ b/src/components/Candidate/Candidate.js @@ -1,146 +1,15 @@ 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 { currentCandidate, selectCurrentCandidate, selectProfiles } 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 SectionSkills from './SectionSkills'; - -// const Candidate = () => { -// const history = useHistory(); -// const { id: candidateId } = useParams(); - -// const dispatch = useDispatch(); - -// const candidatesArr = useSelector(selectCandidates); -// dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId)))); -// const currentCandidateObj = useSelector(selectCurrentCandidate); - -// console.log('currentCandidateObj ', currentCandidateObj); - -// const { name, skillsName, img, skills, text } = currentCandidateObj; - -// let classes; - -// if (skillsName === 'Backend') { -// classes = style.back; -// console.log(classes); -// } else if (skillsName === 'Design') { -// classes = style.des; -// } else if (skillsName === 'Frontend') { -// classes = style.front; -// } - -// return ( -//
-//
-//
-//
-//
-//

-// Аутстаффинг it-персонала -//

-//
-//
-//
- -//
-//
-//
-//
history.push('/')}> -//
-// -//
-//
-// Вернуться к списку -//
-//
- -//
-//

{skillsName}

-// -//
-//
-//
-//
-//
-//
-//
-// -//
-//
-//
-//

{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

-//
-//

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

-// <> -//
-//

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

-//

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

-//

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

-//

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

-//

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

-//

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

-//

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

-//
-// -// -// -//
-//
-//
-//
-//
-//
-// ); -// }; - -// export default Candidate; - -////////////////////////////////////////////////// +import front from '../../images/front_end.png'; +import back from '../../images/back_end.png'; +import design from '../../images/design.png'; const Candidate = () => { const history = useHistory(); @@ -148,23 +17,32 @@ const Candidate = () => { const dispatch = useDispatch(); - const candidatesArr = useSelector(selectCandidates); + const candidatesArr = useSelector(selectProfiles); + dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId)))); + const currentCandidateObj = useSelector(selectCurrentCandidate); console.log('currentCandidateObj ', currentCandidateObj); - const { name, skillsName, img, skills, text } = currentCandidateObj; + const { fio: name, position_id, skillValues, vc_text: text } = currentCandidateObj; let classes; + let header; + let img; - if (skillsName === 'Backend') { + if (Number(position_id) === 1) { classes = style.back; - console.log(classes); - } else if (skillsName === 'Design') { + header = 'Backend'; + img = back; + } else if (Number(position_id) === 2) { classes = style.des; - } else if (skillsName === 'Frontend') { + header = 'Frontend'; + img = front; + } else if (Number(position_id) === 3) { classes = style.front; + header = 'Design'; + img = design; } function createMarkup(text) { @@ -197,7 +75,7 @@ const Candidate = () => {
-

{skillsName}

+

{header}

@@ -221,7 +99,7 @@ const Candidate = () => { - + diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js index afd3337f..6ea924f4 100644 --- a/src/components/Form/Form.js +++ b/src/components/Form/Form.js @@ -6,6 +6,7 @@ const Form = () => { const [email, setEmail] = useState(''); const [phone, setPhone] = useState(''); const [comment, setСomment] = useState(''); + const [name, setName] = useState(''); const handleChange = (e) => { const name = e.target.name; @@ -31,11 +32,17 @@ const Form = () => { comment: comment, }; - fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info).then((el) => - el.json().then((e) => console.log('object ', e)) - ); + fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info) + .then((el) => { + return el.json(); + }) + .then((e) => { + setName(e); + }); }; + console.log('NAME ', name); + return (
diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 7a3c3c4c..7a8d241e 100644 --- a/src/components/Home/Home.js +++ b/src/components/Home/Home.js @@ -1,23 +1,14 @@ import React, { useState, useEffect } from 'react'; -import { useDispatch, useSelector } from 'react-redux'; +import { useDispatch } 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 { profiles, selectProfiles, tags, candidates, selectCandidates, selectTab } from '../../redux/outstaffingSlice'; -import { profiles, selectProfiles, tags, candidates } from '../../redux/outstaffingSlice'; +import { profiles, tags } from '../../redux/outstaffingSlice'; 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?limit=`, index) @@ -37,41 +28,6 @@ const Home = () => { }); }, [dispatch, index]); - useEffect(() => { - dispatch( - candidates( - profilesArr.map((profile) => { - let skillsName = ''; - let header; - let img; - - if (Number(profile.position_id) === 1) { - skillsName = 'Frontend'; - img = front; - } else if (Number(profile.position_id) === 2) { - skillsName = 'Backend'; - img = back; - } else if (Number(profile.position_id) === 3) { - skillsName = 'Marketer'; - img = design; - } - - return { - id: profile.id, - profileId: profile.position_id, - name: profile.fio, - skills: profile.skillValues, - level: profile.level, - text: profile.vc_text, - skillsName, - header, - img, - }; - }) - ) - ); - }, [profilesArr, dispatch]); - const loadMore = (count) => { setIndex((prev) => prev + count); }; @@ -79,12 +35,6 @@ const Home = () => { return ( <> - {/* item.skillsName === selectedTab) : candidatesArr - } - onLoadMore={loadMore} - /> */} ); diff --git a/src/components/Outstaffing/Outstaffing.js b/src/components/Outstaffing/Outstaffing.js index df64608e..2c1916d7 100644 --- a/src/components/Outstaffing/Outstaffing.js +++ b/src/components/Outstaffing/Outstaffing.js @@ -3,15 +3,13 @@ import { useSelector } from 'react-redux'; import style from './Outstaffing.module.css'; import OutstaffingBlock from './OutstaffingBlock'; import TagSelect from '../Select/TagSelect'; -import { selectTags, selectTab, selectCandidates } from '../../redux/outstaffingSlice'; +import { selectTags } 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); - const selected = useSelector(selectTab); - const candidatesArr = useSelector(selectCandidates); return ( <> @@ -30,27 +28,21 @@ const Outstaffing = () => {
item.skillsName === 'Frontend')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')} - selected={selected === 'Frontend'} img={front} header="Фронтенд" />
item.skillsName === 'Backend')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')} - selected={selected === 'Backend'} img={back} header="Бэкенд" />
item.skillsName === 'Marketer')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')} - selected={selected === 'Marketer'} img={design} header="Дизайн" /> diff --git a/src/components/Outstaffing/Outstaffing.module.css b/src/components/Outstaffing/Outstaffing.module.css index a57046b3..d7c1816e 100644 --- a/src/components/Outstaffing/Outstaffing.module.css +++ b/src/components/Outstaffing/Outstaffing.module.css @@ -48,7 +48,6 @@ .outstaffing__box__img { min-width: 260px; min-height: 120px; - cursor: pointer; background-color: #f9f9f9; border-radius: 20px; position: relative; @@ -68,7 +67,6 @@ } .outstaffing__box__img > img { - cursor: pointer; position: absolute; } diff --git a/src/components/Outstaffing/OutstaffingBlock.js b/src/components/Outstaffing/OutstaffingBlock.js index 13514562..93e20240 100644 --- a/src/components/Outstaffing/OutstaffingBlock.js +++ b/src/components/Outstaffing/OutstaffingBlock.js @@ -1,15 +1,13 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { selectedTab, selectItems, selectedItems } from '../../redux/outstaffingSlice'; +import { selectItems, selectedItems } from '../../redux/outstaffingSlice'; import style from './Outstaffing.module.css'; -const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) => { +const OutstaffingBlock = ({ dataTags = [], selected, img, header }) => { const dispatch = useDispatch(); const itemsArr = useSelector(selectItems); - const { skillsName } = data; - const handleBlockClick = (item, id) => { if (!itemsArr.find((el) => item === el.value)) { dispatch(selectedItems([...itemsArr, { id, value: item, label: item }])); @@ -30,10 +28,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) = return (
-
dispatch(selectedTab(skillsName))} - > +

{header}

img
diff --git a/src/redux/outstaffingSlice.js b/src/redux/outstaffingSlice.js index 9995ea3e..09de6405 100644 --- a/src/redux/outstaffingSlice.js +++ b/src/redux/outstaffingSlice.js @@ -3,10 +3,8 @@ import { createSlice } from '@reduxjs/toolkit'; const initialState = { tags: [], profiles: [], - candidates: [], filteredCandidates: [], selectedItems: [], - selectedTab: '', currentCandidate: {}, auth: true, }; @@ -21,15 +19,9 @@ export const outstaffingSlice = createSlice({ profiles: (state, action) => { state.profiles = action.payload; }, - candidates: (state, action) => { - state.candidates = action.payload; - }, filteredCandidates: (state, action) => { state.filteredCandidates = action.payload; }, - selectedTab: (state, action) => { - state.selectedTab = action.payload; - }, selectedItems: (state, action) => { state.selectedItems = action.payload; }, @@ -42,14 +34,11 @@ export const outstaffingSlice = createSlice({ }, }); -export const { tags, profiles, candidates, selectedTab, selectedItems, auth, currentCandidate, filteredCandidates } = - outstaffingSlice.actions; +export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates } = 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 selectFilteredCandidates = (state) => state.outstaffing.filteredCandidates; -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; diff --git a/src/server/server.js b/src/server/server.js index 8dcd1542..c25c03e8 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -2,8 +2,6 @@ export const fetchProfile = async (link, index) => { const response = await fetch(`${link}${index}`); let data = await response.json(); - console.log('data ', data); - return data; }; @@ -24,10 +22,10 @@ export const fetchItemsForId = async (link, id) => { export const fetchForm = async (link, info) => { const response = await fetch(link, { method: 'POST', - body: JSON.stringify(info), headers: { 'Content-Type': 'application/json', }, + body: JSON.stringify(info), }); return response;