apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed code

Browse Source
This commit is contained in:
Hope87 2021-07-05 12:33:24 +03:00
parent 082ae23f49
commit e8b7fbb2f3
8 changed files with 39 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/components/Candidate/Candidate.js
View File

@ -1,146 +1,15 @@
import React from 'react'; import React from 'react';
import { useHistory, useParams } from 'react-router-dom'; import { useHistory, useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'; 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 style from './Candidate.module.css';
import arrow from '../../images/right-arrow.png'; import arrow from '../../images/right-arrow.png';
import rectangle from '../../images/rectangle_secondPage.png'; import rectangle from '../../images/rectangle_secondPage.png';
import Sidebar from '../Sidebar/Sidebar'; import Sidebar from '../Sidebar/Sidebar';
import SectionSkills from './SectionSkills'; import SectionSkills from './SectionSkills';
import front from '../../images/front_end.png';
// const Candidate = () => { import back from '../../images/back_end.png';
// const history = useHistory(); import design from '../../images/design.png';
// 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 (
// <section className={style.candidate}>
// <div className="container">
// <div className="row">
// <div className="col-12">
// <div className={style.candidate__title}>
// <h2>
// <span>Аутстаффинг</span> it-персонала
// </h2>
// </div>
// </div>
// </div>
// <div className="row">
// <div className="col-12">
// <div className={style.candidate__header}>
// <div className={style.arrow} onClick={() => history.push('/')}>
// <div className={style.arrow__img}>
// <img src={arrow} alt="" />
// </div>
// <div className={style.arrow__sp}>
// <span>Вернуться к списку</span>
// </div>
// </div>
// <div className={style.icon}>
// <h3>{skillsName}</h3>
// <img className={classes} src={img} alt="" />
// </div>
// </div>
// </div>
// </div>
// <div className={style.candidate__main}>
// <div className="row">
// <div className="col-12 col-xl-4">
// <Sidebar />
// </div>
// <div className="col-12 col-xl-8">
// <div className={style.candidate__main__description}>
// <h2>{name}</h2>
// <img src={rectangle} alt="" />
// <p className={style.hashtag}># Описание опыта</p>
// <div className={style.SectionOne}>
// <h3>SVM - сервис выездных менеджеров для банка ПСБ</h3>
// <p>
// Приложение, которое позволяет управлять работой т.н. выездных менеджеров (ВМ). Банк предоставляет их
// услуги своим (потенциальным или реальным) клиентам, позволяя подключать расчетно-кассовое
// обслуживание или регистрировать свой бизнес. Клиенту не нужно приходить в отделение/офис банка - все
// необходимые бумаги ВМ подготовит заранее и принесет на согласование и подпись в удобное ему (клиент)
// время и место.
// </p>
// <h4>Senior PHP/JS Developer</h4>
// </div>
// <p className={style.hashtag}># Средства и инструменты:</p>
// <div className={style.SectionTwo}>
// <p>
// - Разработал и внедрил веб приложения, а также программное обеспечение с использованием Node.js,
// MySQL, JavaScript, HTML, CSS, React.js и Vue.JS. - Поддерживал существующий веб-сайт на базе PHP.
// Перевел существующую платформу с Laravel на современную архитектуру React/Redux и Node.
// </p>
// <p>
// - Проектировал и разрабатывал компоненты пользовательского интерфейса с использованием HTML, CSS и
// JavaScript. - Повысил скорость загрузки веб-сайта и время безотказной работы за счете переписывания
// всех основных компонентов и внедрения новой архетиктуры. - Разработал персональное APIs.
// </p>
// </div>
// <p className={style.hashtag}># Описание опыта</p>
// <div className={style.SectionThree}>
// <h3>Multitur - личный кабинет для сервиса поиска/подбора отелей</h3>
// <p>
// Личный кабинет для сотрудников отелей, который позволяет управлять информацией по отелю на сайте.
// </p>
// <h4>Senior PHP/JS Developer</h4>
// </div>
// <div className={style.SectionFour}>
// <p className={style.hashtag}># Средства и инструменты:</p>
// <p>Backend - REST API на PHP 7.1 с использованием фреймворка Laravel 5.8</p>
// <p>Frontend - Vue.js</p>
// <p>БД - MYSQL</p>
// </div>
// <p className={style.hashtag}># Функционал:</p>
// <>
// <div className={style.SectionFive}>
// <p>Регистрации/авторизации;</p>
// <p>Управления правами менеджеров отеля, назначение поставщиков</p>
// <p>Управления описанием и профилем отелей;</p>
// <p>Управления финансами, ценообразованием, квотами;</p>
// <p>Переписки со своими менеджерами, а также с вышестоящими инстанциями;</p>
// <p>Управления новостями отеля;</p>
// <p>Просмотра расширенной статистики по заявкам и людям;</p>
// </div>
// <button type="submit" className={style.SectionFive__btn}>
// Выбрать к собеседованию
// </button>
// </>
// <SectionSkills skillsArr={skills} />
// </div>
// </div>
// </div>
// </div>
// </div>
// </section>
// );
// };
// export default Candidate;
//////////////////////////////////////////////////
const Candidate = () => { const Candidate = () => {
const history = useHistory(); const history = useHistory();
@ -148,23 +17,32 @@ const Candidate = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const candidatesArr = useSelector(selectCandidates); const candidatesArr = useSelector(selectProfiles);
dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId)))); dispatch(currentCandidate(candidatesArr.find((el) => Number(el.id) === Number(candidateId))));
const currentCandidateObj = useSelector(selectCurrentCandidate); const currentCandidateObj = useSelector(selectCurrentCandidate);
console.log('currentCandidateObj ', currentCandidateObj); console.log('currentCandidateObj ', currentCandidateObj);
const { name, skillsName, img, skills, text } = currentCandidateObj; const { fio: name, position_id, skillValues, vc_text: text } = currentCandidateObj;
let classes; let classes;
let header;
let img;
if (skillsName === 'Backend') { if (Number(position_id) === 1) {
classes = style.back; classes = style.back;
console.log(classes); header = 'Backend';
} else if (skillsName === 'Design') { img = back;
} else if (Number(position_id) === 2) {
classes = style.des; classes = style.des;
} else if (skillsName === 'Frontend') { header = 'Frontend';
img = front;
} else if (Number(position_id) === 3) {
classes = style.front; classes = style.front;
header = 'Design';
img = design;
} }
function createMarkup(text) { function createMarkup(text) {
@ -197,7 +75,7 @@ const Candidate = () => {
</div> </div>
<div className={style.icon}> <div className={style.icon}>
<h3>{skillsName}</h3> <h3>{header}</h3>
<img className={classes} src={img} alt="" /> <img className={classes} src={img} alt="" />
</div> </div>
</div> </div>
@ -221,7 +99,7 @@ const Candidate = () => {
<button type="submit" className={style.SectionFive__btn}> <button type="submit" className={style.SectionFive__btn}>
Выбрать к собеседованию Выбрать к собеседованию
</button> </button>
<SectionSkills skillsArr={skills} /> <SectionSkills skillsArr={skillValues} />
</div> </div>
</div> </div>
</div> </div>

13
src/components/Form/Form.js
View File

@ -6,6 +6,7 @@ const Form = () => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [phone, setPhone] = useState(''); const [phone, setPhone] = useState('');
const [comment, setСomment] = useState(''); const [comment, setСomment] = useState('');
const [name, setName] = useState('');
const handleChange = (e) => { const handleChange = (e) => {
const name = e.target.name; const name = e.target.name;
@ -31,11 +32,17 @@ const Form = () => {
comment: comment, comment: comment,
}; };
fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info).then((el) => fetchForm('https://guild.craft-group.xyz/api/profile/add-to-interview', info)
el.json().then((e) => console.log('object ', e)) .then((el) => {
); return el.json();
})
.then((e) => {
setName(e);
});
}; };
console.log('NAME ', name);
return ( return (
<div className="container"> <div className="container">
<div className="row"> <div className="row">

54
src/components/Home/Home.js
View File

@ -1,23 +1,14 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch } from 'react-redux';
import Outstaffing from '../Outstaffing/Outstaffing'; import Outstaffing from '../Outstaffing/Outstaffing';
import Description from '../Description/Description'; import Description from '../Description/Description';
import { fetchProfile, fetchSkills } from '../../server/server'; import { fetchProfile, fetchSkills } from '../../server/server';
import front from '../../images/front_end.png'; import { profiles, tags } from '../../redux/outstaffingSlice';
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';
const Home = () => { const Home = () => {
const [index, setIndex] = useState(2); const [index, setIndex] = useState(2);
const dispatch = useDispatch(); const dispatch = useDispatch();
const profilesArr = useSelector(selectProfiles);
// const candidatesArr = useSelector(selectCandidates);
// const selectedTab = useSelector(selectTab);
useEffect(() => { useEffect(() => {
fetchProfile(`https://guild.craft-group.xyz/api/profile?limit=`, index) fetchProfile(`https://guild.craft-group.xyz/api/profile?limit=`, index)
@ -37,41 +28,6 @@ const Home = () => {
}); });
}, [dispatch, index]); }, [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) => { const loadMore = (count) => {
setIndex((prev) => prev + count); setIndex((prev) => prev + count);
}; };
@ -79,12 +35,6 @@ const Home = () => {
return ( return (
<> <>
<Outstaffing /> <Outstaffing />
{/* <Description
candidatesListArr={
selectedTab ? candidatesArr.filter((item) => item.skillsName === selectedTab) : candidatesArr
}
onLoadMore={loadMore}
/> */}
<Description onLoadMore={loadMore} /> <Description onLoadMore={loadMore} />
</> </>
); );

10
src/components/Outstaffing/Outstaffing.js
View File

@ -3,15 +3,13 @@ import { useSelector } from 'react-redux';
import style from './Outstaffing.module.css'; import style from './Outstaffing.module.css';
import OutstaffingBlock from './OutstaffingBlock'; import OutstaffingBlock from './OutstaffingBlock';
import TagSelect from '../Select/TagSelect'; 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 front from '../../images/front_end.png';
import back from '../../images/back_end.png'; import back from '../../images/back_end.png';
import design from '../../images/design.png'; import design from '../../images/design.png';
const Outstaffing = () => { const Outstaffing = () => {
const tagsArr = useSelector(selectTags); const tagsArr = useSelector(selectTags);
const selected = useSelector(selectTab);
const candidatesArr = useSelector(selectCandidates);
return ( return (
<> <>
@ -30,27 +28,21 @@ const Outstaffing = () => {
<div className="row"> <div className="row">
<div className="col-12 col-xl-4"> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
data={candidatesArr.find((item) => item.skillsName === 'Frontend')}
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_front')}
selected={selected === 'Frontend'}
img={front} img={front}
header="Фронтенд" header="Фронтенд"
/> />
</div> </div>
<div className="col-12 col-xl-4"> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
data={candidatesArr.find((item) => item.skillsName === 'Backend')}
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_back')}
selected={selected === 'Backend'}
img={back} img={back}
header="Бэкенд" header="Бэкенд"
/> />
</div> </div>
<div className="col-12 col-xl-4"> <div className="col-12 col-xl-4">
<OutstaffingBlock <OutstaffingBlock
data={candidatesArr.find((item) => item.skillsName === 'Marketer')}
dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')} dataTags={tagsArr.flat().filter((tag) => tag.name === 'skills_design')}
selected={selected === 'Marketer'}
img={design} img={design}
header="Дизайн" header="Дизайн"
/> />

2
src/components/Outstaffing/Outstaffing.module.css
View File

@ -48,7 +48,6 @@
.outstaffing__box__img { .outstaffing__box__img {
min-width: 260px; min-width: 260px;
min-height: 120px; min-height: 120px;
cursor: pointer;
background-color: #f9f9f9; background-color: #f9f9f9;
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
@ -68,7 +67,6 @@
} }
.outstaffing__box__img > img { .outstaffing__box__img > img {
cursor: pointer;
position: absolute; position: absolute;
} }

11
src/components/Outstaffing/OutstaffingBlock.js
View File

@ -1,15 +1,13 @@
import React from 'react'; import React from 'react';
import { useDispatch, useSelector } from 'react-redux'; 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'; import style from './Outstaffing.module.css';
const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) => { const OutstaffingBlock = ({ dataTags = [], selected, img, header }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const itemsArr = useSelector(selectItems); const itemsArr = useSelector(selectItems);
const { skillsName } = data;
const handleBlockClick = (item, id) => { const handleBlockClick = (item, id) => {
if (!itemsArr.find((el) => item === el.value)) { if (!itemsArr.find((el) => item === el.value)) {
dispatch(selectedItems([...itemsArr, { id, value: item, label: item }])); dispatch(selectedItems([...itemsArr, { id, value: item, label: item }]));
@ -30,10 +28,7 @@ const OutstaffingBlock = ({ dataTags = [], data = {}, selected, img, header }) =
return ( return (
<div className={style.outstaffing__box}> <div className={style.outstaffing__box}>
<div <div className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}>
className={`${style.outstaffing__box__img} ${selected ? style.border : null}`}
onClick={() => dispatch(selectedTab(skillsName))}
>
<h3>{header}</h3> <h3>{header}</h3>
<img className={classes} src={img} alt="img" /> <img className={classes} src={img} alt="img" />
</div> </div>

13
src/redux/outstaffingSlice.js
View File

@ -3,10 +3,8 @@ import { createSlice } from '@reduxjs/toolkit';
const initialState = { const initialState = {
tags: [], tags: [],
profiles: [], profiles: [],
candidates: [],
filteredCandidates: [], filteredCandidates: [],
selectedItems: [], selectedItems: [],
selectedTab: '',
currentCandidate: {}, currentCandidate: {},
auth: true, auth: true,
}; };
@ -21,15 +19,9 @@ export const outstaffingSlice = createSlice({
profiles: (state, action) => { profiles: (state, action) => {
state.profiles = action.payload; state.profiles = action.payload;
}, },
candidates: (state, action) => {
state.candidates = action.payload;
},
filteredCandidates: (state, action) => { filteredCandidates: (state, action) => {
state.filteredCandidates = action.payload; state.filteredCandidates = action.payload;
}, },
selectedTab: (state, action) => {
state.selectedTab = action.payload;
},
selectedItems: (state, action) => { selectedItems: (state, action) => {
state.selectedItems = action.payload; state.selectedItems = action.payload;
}, },
@ -42,14 +34,11 @@ export const outstaffingSlice = createSlice({
}, },
}); });
export const { tags, profiles, candidates, selectedTab, selectedItems, auth, currentCandidate, filteredCandidates } = export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates } = outstaffingSlice.actions;
outstaffingSlice.actions;
export const selectProfiles = (state) => state.outstaffing.profiles; export const selectProfiles = (state) => state.outstaffing.profiles;
export const selectTags = (state) => state.outstaffing.tags; export const selectTags = (state) => state.outstaffing.tags;
export const selectCandidates = (state) => state.outstaffing.candidates;
export const selectFilteredCandidates = (state) => state.outstaffing.filteredCandidates; export const selectFilteredCandidates = (state) => state.outstaffing.filteredCandidates;
export const selectTab = (state) => state.outstaffing.selectedTab;
export const selectItems = (state) => state.outstaffing.selectedItems; export const selectItems = (state) => state.outstaffing.selectedItems;
export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate; export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate;
export const selectAuth = (state) => state.outstaffing.auth; export const selectAuth = (state) => state.outstaffing.auth;

4
src/server/server.js
View File

@ -2,8 +2,6 @@ export const fetchProfile = async (link, index) => {
const response = await fetch(`${link}${index}`); const response = await fetch(`${link}${index}`);
let data = await response.json(); let data = await response.json();
console.log('data ', data);
return data; return data;
}; };
@ -24,10 +22,10 @@ export const fetchItemsForId = async (link, id) => {
export const fetchForm = async (link, info) => { export const fetchForm = async (link, info) => {
const response = await fetch(link, { const response = await fetch(link, {
method: 'POST', method: 'POST',
body: JSON.stringify(info),
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify(info),
}); });
return response; return response;