98 lines
2.3 KiB
JavaScript
Raw Normal View History

2021-06-07 17:48:07 +03:00
import React, { useState, useEffect } from 'react';
2021-06-01 15:25:01 +03:00
import Outstaffing from '../Outstaffing/Outstaffing';
import Description from '../Description/Description';
2021-06-02 18:25:25 +03:00
import front from '../../images/front_end.png';
import back from '../../images/back_end.png';
import design from '../../images/design.png';
2021-05-28 16:21:28 +03:00
export const candidatesList = [
2021-06-02 18:25:25 +03:00
{
id: 1,
name: 'Frontend',
2021-06-09 13:12:01 +03:00
header: 'Фронтенд',
2021-06-02 18:25:25 +03:00
img: front,
tags: 'JavaScript · Html · Css · Vue.js · ReactJS · Angular · MobX',
},
{
id: 2,
name: 'Backend',
2021-06-09 13:12:01 +03:00
header: 'Бэкенд',
2021-06-02 18:25:25 +03:00
img: back,
tags: 'Node.js · Express · Php · Ruby on Rails · Python · Wordpress · Java',
},
{
id: 3,
name: 'Design',
2021-06-09 13:12:01 +03:00
header: 'Дизайн',
2021-06-02 18:25:25 +03:00
img: design,
tags: 'Figma · Avocode · PhotoShop · Xara · Pinegrow · Macaw · KompoZer',
},
2021-05-28 16:21:28 +03:00
];
2021-05-26 13:35:57 +03:00
2021-06-07 17:48:07 +03:00
const tabsList = [
{
name: 'Frontend',
img: front,
text: '# Популярный стек',
header: 'Фронтенд',
},
{
name: 'Backend',
img: back,
text: '# Популярный стек',
header: 'Бэкенд',
},
{
name: 'Design',
img: design,
text: '# Популярный стек',
header: 'Дизайн',
},
];
2021-06-23 13:17:59 +03:00
const Home = () => {
2021-06-03 17:15:22 +03:00
const [tabs, setTabs] = useState([]);
2021-06-07 17:48:07 +03:00
const [candidates, setCandidates] = useState([]);
2021-06-15 17:08:06 +03:00
const [tags, setTags] = useState([]);
2021-06-03 17:15:22 +03:00
2021-06-07 17:48:07 +03:00
const [selectedTab, setSelectedTab] = useState('');
2021-06-03 17:15:22 +03:00
2021-06-07 17:48:07 +03:00
useEffect(() => {
setTabs(tabsList);
setCandidates(candidatesList);
2021-06-14 17:47:37 +03:00
fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page')
2021-06-15 17:08:06 +03:00
.then((response) => response.json())
.then((res) => {
2021-06-22 18:00:52 +03:00
console.log('RES', res);
2021-06-15 17:08:06 +03:00
const keys = Object.keys(res);
2021-06-22 18:00:52 +03:00
2021-06-15 17:08:06 +03:00
const values = Object.values(res);
const tempTags = values.map((item, index) =>
item.map((tag) => {
return { id: tag.id, value: tag.tags, name: keys[index] };
})
);
setTags(tempTags);
});
2021-06-07 17:48:07 +03:00
}, []);
2021-06-03 17:15:22 +03:00
2021-06-07 17:48:07 +03:00
const handleBlockClick = (name) => {
setSelectedTab(name);
2021-06-03 17:15:22 +03:00
};
2021-06-07 17:48:07 +03:00
2021-05-26 13:35:57 +03:00
return (
2021-05-26 15:59:00 +03:00
<>
2021-06-15 17:08:06 +03:00
<Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} tags={tags} />
2021-06-07 17:48:07 +03:00
<Description
candidatesListArr={selectedTab ? candidates.filter((item) => item.name === selectedTab) : candidates}
/>
2021-05-26 15:59:00 +03:00
</>
2021-05-26 13:35:57 +03:00
);
};
export default Home;