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

add async requests

Browse Source
This commit is contained in:
Hope87 2021-06-15 17:08:06 +03:00
parent b277082497
commit 1fac7bf50e
4 changed files with 41 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}
/>

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

@ -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}

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

@ -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>

8
src/components/Select/TagSelect.js
View File

@ -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">
Поиск