fixed code

2021-06-29 17:58:15 +03:00 · 2021-06-29 17:58:15 +03:00 · 800dc0f48c
commit 800dc0f48c
parent 8e607ee21f
10 changed files with 106 additions and 77 deletions
--- a/src/App.js
+++ b/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 />
--- a/src/components/Candidate/Candidate.js
+++ b/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 />
--- a/src/components/Description/Description.js
+++ b/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}>
--- a/src/components/Description/Description.module.css
+++ b/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) {
--- a/src/components/Home/Home.js
+++ b/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';
-
-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',
-  },
-];
+import { fetchProfile, fetchSkills } from '../../server/server';

 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('');
-
-  // useEffect(() => {
-  //   setTabs(tabsList);
-  //   setCandidates(candidatesList);
-
-  //   fetchProfile('https://guild.craft-group.xyz/api/profile')
-  //     .then((profileArr) => setProfiles(profileArr))
-  //     .catch((e) => console.log(e));
-  // }, []);
+  const [countArr, setCountArr] = useState(0);
+  const [candidatesArray, setCandidatesArray] = useState([]);

  useEffect(() => {
    setTabs(tabsList);
-    setCandidates(candidatesList);

-    fetch('https://guild.craft-group.xyz/api/skills/skills-on-main-page')
-      .then((response) => response.json())
-      .then((res) => {
-        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);
-      });
+    fetchProfile('https://guild.craft-group.xyz/api/profile')
+      .then((profileArr) => setProfiles(profileArr))
+      .catch((e) => console.log(e));
  }, []);

+  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}
      />
    </>
  );
--- a/src/components/InputsComponent/InputsComponent.js
+++ b/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>
--- a/src/components/ReportForm/ReportForm.js
+++ b/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 (
--- a/src/pages/CandidatePage.js
+++ b/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;
--- a/src/pages/HomePage.js
+++ b/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;
--- a/src/server/server.js
+++ b/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;
+};