fixed code

src/App.js

@@ -12,6 +12,11 @@ const ReportPage = lazy(() => import('./pages/ReportFormPage.js'));
 
 const App = () => {
   const [isAuth, setIsAuth] = useState(true);
+  const [candidates, setCandidates] = useState([]);
+
+  const getCandidate = (candidateArr) => {
+    setCandidates(candidateArr);
+  };
 
   return (
     <Router>
@@ -19,10 +24,10 @@ const App = () => {
         {isAuth ? (
           <Switch>
             <Route path="/" exact>
-              <HomePage />
+              <HomePage getCandidate={getCandidate} />
             </Route>
             <Route path="/candidate/:id">
-              <CandidatePage />
+              <CandidatePage candidatesArr={candidates} />
             </Route>
             <Route path="/calendar">
               <CalendarPage />

src/components/Candidate/Candidate.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
 import style from './Candidate.module.css';
-import { candidatesList } from '../Home/Home';
 import arrow from '../../images/right-arrow.png';
 import rectangle from '../../images/rectangle_secondPage.png';
 import Sidebar from '../Sidebar/Sidebar';
@@ -12,23 +11,23 @@ import SectionFour from './sections/SectionFour';
 import SectionFive from './sections/SectionFive';
 import SectionSkills from './sections/SectionSkills';
 
-const Candidate = () => {
+const Candidate = ({ candidatesArr }) => {
   const history = useHistory();
 
   const { id: candidateId } = useParams();
 
-  const currentCandidate = candidatesList.find((el) => el.id === Number(candidateId));
+  const currentCandidate = candidatesArr.find((el) => Number(el.id) === Number(candidateId));
 
-  const { name, img, header } = currentCandidate;
+  const { name, skillsName, img } = currentCandidate;
 
   let classes;
 
-  if (name === 'Backend') {
+  if (skillsName === 'Backend') {
     classes = style.back;
     console.log(classes);
-  } else if (name === 'Design') {
+  } else if (skillsName === 'Design') {
     classes = style.des;
-  } else if (name === 'Frontend') {
+  } else if (skillsName === 'Frontend') {
     classes = style.front;
   }
 
@@ -58,7 +57,7 @@ const Candidate = () => {
               </div>
 
               <div className={style.icon}>
-                <h3>{header}</h3>
+                <h3>{skillsName}</h3>
                 <img className={classes} src={img} alt="" />
               </div>
             </div>
@@ -72,7 +71,7 @@ const Candidate = () => {
 
             <div className="col-12 col-xl-8">
               <div className={style.candidate__main__description}>
-                <h2>{name} разработчик, Middle</h2>
+                <h2>{name}</h2>
                 <img src={rectangle} alt="" />
                 <p># Описание опыта</p>
                 <SectionOne />

src/components/Description/Description.js

@@ -6,7 +6,7 @@ import arrowLeft from '../../images/arrow_left.png';
 import arrowRight from '../../images/arrow_right.png';
 import { Link } from 'react-router-dom';
 
-const Description = ({ candidatesListArr }) => {
+const Description = ({ candidatesListArr, getCandidate, onLoadMore }) => {
   return (
     <section className={style.description}>
       <div className="container">
@@ -17,7 +17,9 @@ const Description = ({ candidatesListArr }) => {
                 <img className={style.description__img} src={dog} alt="" />
               </div>
               <div className="col-12 col-xl-6">
-                <h3 className={style.description__title}>{el.name} разработчик, Middle</h3>
+                <h3 className={style.description__title}>
+                  {el.name} - {el.skillsName}
+                </h3>
                 <p className={style.description__text}>
                   - 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.
                 </p>
@@ -25,13 +27,17 @@ const Description = ({ candidatesListArr }) => {
                 <p className={style.description__text}>- 3 года преподаю в IOS-школе Сбера</p>
               </div>
               <div className="col-12 col-xl-4">
-                <Link to={`/candidate/${el.id}`}>
+                <Link to={`/candidate/${el.id}`} onClick={() => getCandidate(candidatesListArr)}>
                   <button className={style.description__button}>Подробное резюме</button>
                 </Link>
               </div>
               <div className="col-xl-2"></div>
               <div className="col-12 col-xl-6">
-                <span className={style.description__sp}> {el.tags}</span>
+                {el.skills.map((e) => (
+                  <span key={e.id} className={style.description__sp}>
+                    {e.skill.name}
+                  </span>
+                ))}
                 <img className={style.description__rectangle} src={rectangle} alt="" />
               </div>
               <div className="col-xl-4"></div>
@@ -43,7 +49,7 @@ const Description = ({ candidatesListArr }) => {
           <div className="col-12">
             <div className={style.description__footer}>
               <div className={style.description__footer__btn}>
-                <button>Загрузить еще</button>
+                <button onClick={() => onLoadMore(3)}>Загрузить еще</button>
               </div>
               <div className={style.description__footer__box}>
                 <div className={style.arrow__left}>

src/components/Description/Description.module.css

@@ -137,7 +137,7 @@
 }
 
 .description__sp {
-  display: block;
+  /* display: block; */
   font-family: 'GT Eesti Pro Display';
   font-size: 1.7em;
   font-weight: 400;
@@ -146,6 +146,7 @@
   text-align: left;
   line-height: 36px;
   margin-top: 20px;
+  margin-left: 10px;
 }
 
 @media (max-width: 575.98px) {

src/components/Home/Home.js

@@ -4,32 +4,7 @@ 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 } from '../../server/server';
+import { fetchProfile, fetchSkills } from '../../server/server';
-
-export const candidatesList = [
-  {
-    id: 1,
-    name: 'Frontend',
-    header: 'Фронтенд',
-    img: front,
-    tags: 'JavaScript · Html · Css · Vue.js · ReactJS · Angular · MobX',
-  },
-
-  {
-    id: 2,
-    name: 'Backend',
-    header: 'Бэкенд',
-    img: back,
-    tags: 'Node.js · Express · Php · Ruby on Rails · Python · Wordpress · Java',
-  },
-  {
-    id: 3,
-    name: 'Design',
-    header: 'Дизайн',
-    img: design,
-    tags: 'Figma · Avocode · PhotoShop · Xara · Pinegrow · Macaw · KompoZer',
-  },
-];
 
 const tabsList = [
   {
@@ -52,43 +27,73 @@ const tabsList = [
   },
 ];
 
-const Home = () => {
+const Home = ({ getCandidate }) => {
   const [tabs, setTabs] = useState([]);
-  const [candidates, setCandidates] = useState([]);
   const [tags, setTags] = useState([]);
-
+  const [profiles, setProfiles] = useState([]);
   const [selectedTab, setSelectedTab] = useState('');
-
+  const [countArr, setCountArr] = useState(0);
-  // useEffect(() => {
+  const [candidatesArray, setCandidatesArray] = useState([]);
-  //   setTabs(tabsList);
-  //   setCandidates(candidatesList);
-
-  //   fetchProfile('https://guild.craft-group.xyz/api/profile')
-  //     .then((profileArr) => setProfiles(profileArr))
-  //     .catch((e) => console.log(e));
-  // }, []);
 
   useEffect(() => {
     setTabs(tabsList);
-    setCandidates(candidatesList);
 
-    fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page')
+    fetchProfile('https://guild.craft-group.xyz/api/profile')
-      .then((response) => response.json())
+      .then((profileArr) => setProfiles(profileArr))
-      .then((res) => {
+      .catch((e) => console.log(e));
-        const keys = Object.keys(res);
-
-        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);
-      });
   }, []);
 
+  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);
   };
@@ -97,7 +102,11 @@ const Home = () => {
     <>
       <Outstaffing onhandleTabBar={(name) => handleBlockClick(name)} selected={selectedTab} tabs={tabs} tags={tags} />
       <Description
-        candidatesListArr={selectedTab ? candidates.filter((item) => item.name === selectedTab) : candidates}
+        candidatesListArr={
+          selectedTab ? candidatesArray.filter((item) => item.skillsName === selectedTab) : shorthandArray
+        }
+        getCandidate={getCandidate}
+        onLoadMore={loadMore}
       />
     </>
   );

src/components/InputsComponent/InputsComponent.js

@@ -4,12 +4,12 @@ import style from './InputsComponent.module.css';
 const InputsComponent = ({ inputsArr, deleteInput, remove }) =>
   inputsArr.map((input) => (
     <form id={input} key={input} className={style.reportForm__form}>
-      <span>{input}.</span>
+      {/* <span>{input}.</span> */}
       <div className={style.input__text}>
         <input name="text" type="text" />
       </div>
       <div className={style.input__number}>
-        <input name="number" type="number" />
+        <input name="number" type="number" min="1" />
       </div>
       <img onClick={() => deleteInput(input)} src={remove} alt="" />
     </form>

src/components/ReportForm/ReportForm.js

@@ -17,7 +17,9 @@ const ReportForm = () => {
   };
 
   const deleteInput = (id) => {
-    setInputs((prev) => prev.filter((el) => el !== id));
+    if (id !== 1) {
+      setInputs((prev) => prev.filter((el) => el !== id));
+    }
   };
 
   return (

src/pages/CandidatePage.js

@@ -2,6 +2,6 @@ import React from 'react';
 
 import Candidate from '../components/Candidate/Candidate';
 
-const CandidatePage = () => <Candidate />;
+const CandidatePage = ({ candidatesArr }) => <Candidate candidatesArr={candidatesArr} />;
 
 export default CandidatePage;

src/pages/HomePage.js

@@ -2,6 +2,6 @@ import React from 'react';
 
 import Home from '../components/Home/Home';
 
-const HomePage = () => <Home />;
+const HomePage = ({ getCandidate }) => <Home getCandidate={getCandidate} />;
 
 export default HomePage;

src/server/server.js

@@ -4,3 +4,10 @@ export const fetchProfile = async (link, index = '') => {
 
   return data;
 };
+
+export const fetchSkills = async (link) => {
+  const response = await fetch(link);
+  let data = await response.json();
+
+  return data;
+};