add async requests

src/components/Home/Home.js

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

src/components/Outstaffing/Outstaffing.js

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

src/components/Outstaffing/OutstaffingBlock.js

@@ -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') {
+  dataTags.forEach((el) => {
+    if (el.name === 'skills_back') {
       classes = style.back;
-  } else if (name === 'Design') {
+    } else if (el.name === 'skills_design') {
       classes = style.des;
-  } else if (name === 'Frontend') {
+    } 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>

src/components/Select/TagSelect.js

@@ -18,10 +18,8 @@ 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">