add async requests
This commit is contained in:
parent
b277082497
commit
1fac7bf50e
@ -36,27 +36,25 @@ const tabsList = [
|
||||
img: front,
|
||||
text: '# Популярный стек',
|
||||
header: 'Фронтенд',
|
||||
tags: ['Vue.js', 'ReactJS', 'Angular', 'JavaScript', 'Html', 'Css', 'MobX'],
|
||||
},
|
||||
{
|
||||
name: 'Backend',
|
||||
img: back,
|
||||
text: '# Популярный стек',
|
||||
header: 'Бэкенд',
|
||||
tags: ['Node.js', 'Express', 'Php', 'Ruby on Rails', 'Python', 'Wordpress', ' Java'],
|
||||
},
|
||||
{
|
||||
name: 'Design',
|
||||
img: design,
|
||||
text: '# Популярный стек',
|
||||
header: 'Дизайн',
|
||||
tags: ['Figma', 'Avocode', 'PhotoShop', 'Xara', 'Pinegrow', 'Macaw', 'KompoZer'],
|
||||
},
|
||||
];
|
||||
|
||||
const Home = () => {
|
||||
const [tabs, setTabs] = useState([]);
|
||||
const [candidates, setCandidates] = useState([]);
|
||||
const [tags, setTags] = useState([]);
|
||||
|
||||
const [selectedTab, setSelectedTab] = useState('');
|
||||
|
||||
@ -65,8 +63,21 @@ const Home = () => {
|
||||
setCandidates(candidatesList);
|
||||
|
||||
fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page')
|
||||
.then((res) => res.json())
|
||||
.then((resJson) => console.log(resJson));
|
||||
.then((response) => response.json())
|
||||
.then((res) => {
|
||||
const keys = Object.keys(res);
|
||||
const values = Object.values(res);
|
||||
|
||||
console.log(values);
|
||||
|
||||
const tempTags = values.map((item, index) =>
|
||||
item.map((tag) => {
|
||||
return { id: tag.id, value: tag.tags, name: keys[index] };
|
||||
})
|
||||
);
|
||||
|
||||
setTags(tempTags);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleBlockClick = (name) => {
|
||||
@ -75,7 +86,7 @@ const Home = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} />
|
||||
<Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} tags={tags} />
|
||||
<Description
|
||||
candidatesListArr={selectedTab ? candidates.filter((item) => item.name === selectedTab) : candidates}
|
||||
/>
|
||||
|
@ -3,16 +3,13 @@ import style from './Outstaffing.module.css';
|
||||
import OutstaffingBlock from './OutstaffingBlock';
|
||||
import TagSelect from '../Select/TagSelect';
|
||||
|
||||
const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
|
||||
const Outstaffing = ({ onhandleTabBar, selected, tabs, tags }) => {
|
||||
const [selectedItems, setSelectedItems] = useState([]);
|
||||
|
||||
const handleBlockClick = (item) => {
|
||||
if (!selectedItems.find((el) => item === el.value)) {
|
||||
setSelectedItems([...selectedItems, { value: item, label: item }]);
|
||||
}
|
||||
// else {
|
||||
// setSelectedItems(selectedItems.filter((el) => item !== el.value));
|
||||
// }
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
@ -41,6 +38,7 @@ const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={tabs.find((item) => item.name === 'Frontend')}
|
||||
dataTags={tags.flat().filter((tag) => tag.name === 'skills_front')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||||
selected={selected === 'Frontend'}
|
||||
@ -49,6 +47,7 @@ const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={tabs.find((item) => item.name === 'Backend')}
|
||||
dataTags={tags.flat().filter((tag) => tag.name === 'skills_back')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||||
selected={selected === 'Backend'}
|
||||
@ -57,6 +56,7 @@ const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
|
||||
<div className="col-12 col-xl-4">
|
||||
<OutstaffingBlock
|
||||
data={tabs.find((item) => item.name === 'Design')}
|
||||
dataTags={tags.flat().filter((tag) => tag.name === 'skills_design')}
|
||||
onClick={(item) => handleBlockClick(item)}
|
||||
onTabBarClick={(name) => onhandleTabBar(name)}
|
||||
selected={selected === 'Design'}
|
||||
@ -66,7 +66,7 @@ const Outstaffing = ({ onhandleTabBar, selected, tabs }) => {
|
||||
</div>
|
||||
</section>
|
||||
<TagSelect
|
||||
options={tabs}
|
||||
options={tags}
|
||||
selectedItems={selectedItems}
|
||||
tagSubmit={handleSubmit}
|
||||
setSelectedItems={setSelectedItems}
|
||||
|
@ -1,17 +1,20 @@
|
||||
import React from 'react';
|
||||
import style from './Outstaffing.module.css';
|
||||
|
||||
const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
|
||||
const { img, text, tags, name, header } = data;
|
||||
const OutstaffingBlock = ({ dataTags = [], data = {}, onClick, onTabBarClick, selected }) => {
|
||||
const { header, img, text, name } = data;
|
||||
|
||||
let classes;
|
||||
|
||||
if (name === 'Backend') {
|
||||
classes = style.back;
|
||||
} else if (name === 'Design') {
|
||||
classes = style.des;
|
||||
} else if (name === 'Frontend') {
|
||||
classes = style.front;
|
||||
}
|
||||
dataTags.forEach((el) => {
|
||||
if (el.name === 'skills_back') {
|
||||
classes = style.back;
|
||||
} else if (el.name === 'skills_design') {
|
||||
classes = style.des;
|
||||
} else if (el.name === 'skills_front') {
|
||||
classes = style.front;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={style.outstaffing__box}>
|
||||
@ -24,11 +27,11 @@ const OutstaffingBlock = ({ data = {}, onClick, onTabBarClick, selected }) => {
|
||||
</div>
|
||||
<div className={`${selected ? style.mobile__block : style.mobile__none}`}>
|
||||
<p className={style.outstaffing__box__text}>{text}</p>
|
||||
{tags && (
|
||||
{dataTags && (
|
||||
<ul className={style.items}>
|
||||
{tags.map((item) => (
|
||||
<li key={item} onClick={() => onClick(item)}>
|
||||
{item}
|
||||
{dataTags.map((item) => (
|
||||
<li key={item.id} onClick={() => onClick(item.value)}>
|
||||
{item.value}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
@ -18,11 +18,9 @@ const TagSelect = ({ selectedItems, tagSubmit, options, setSelectedItems }) => {
|
||||
name="tags"
|
||||
className={style.select}
|
||||
classNamePrefix={style.select}
|
||||
options={options
|
||||
.flatMap((el) => el.tags)
|
||||
.map((item) => {
|
||||
return { value: item, label: item };
|
||||
})}
|
||||
options={options.flat().map((item) => {
|
||||
return { value: item.value, label: item.value };
|
||||
})}
|
||||
/>
|
||||
<button onClick={tagSubmit} type="submit">
|
||||
Поиск
|
||||
|
Loading…
Reference in New Issue
Block a user