2021-06-29 17:58:15 +03:00

116 lines
3.1 KiB
JavaScript

import React, { useState, useEffect } from 'react';
import Outstaffing from '../Outstaffing/Outstaffing';
import Description from '../Description/Description';
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';
const tabsList = [
{
name: 'Frontend',
img: front,
text: '# Популярный стек',
header: 'Фронтенд',
},
{
name: 'Backend',
img: back,
text: '# Популярный стек',
header: 'Бэкенд',
},
{
name: 'Design',
img: design,
text: '# Популярный стек',
header: 'Дизайн',
},
];
const Home = ({ getCandidate }) => {
const [tabs, setTabs] = useState([]);
const [tags, setTags] = useState([]);
const [profiles, setProfiles] = useState([]);
const [selectedTab, setSelectedTab] = useState('');
const [countArr, setCountArr] = useState(0);
const [candidatesArray, setCandidatesArray] = useState([]);
useEffect(() => {
setTabs(tabsList);
fetchProfile('https://guild.craft-group.xyz/api/profile')
.then((profileArr) => setProfiles(profileArr))
.catch((e) => console.log(e));
}, []);
useEffect(() => {
if (profiles.length) {
setCandidatesArray(
profiles.map((profile) => {
let skillsName = '';
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,
skillsName: skillsName,
img: img,
};
})
);
}
}, [profiles]);
useEffect(() => {
fetchSkills('https://guild.craft-group.xyz/api/skills/skills-on-main-page').then((skills) => {
const keys = Object.keys(skills);
const values = Object.values(skills);
const tempTags = values.map((value, index) =>
value.map((val) => {
return { id: val.id, value: val.tags, name: keys[index] };
})
);
setTags(tempTags);
});
}, []);
const shorthandArray = candidatesArray.slice(countArr, 2);
const loadMore = (count) => {
setCountArr((prev) => prev + count);
};
const handleBlockClick = (name) => {
setSelectedTab(name);
};
return (
<>
<Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} tags={tags} />
<Description
candidatesListArr={
selectedTab ? candidatesArray.filter((item) => item.skillsName === selectedTab) : shorthandArray
}
getCandidate={getCandidate}
onLoadMore={loadMore}
/>
</>
);
};
export default Home;