From 800dc0f48cc67b1028240e6072d9072beb88816f Mon Sep 17 00:00:00 2001 From: Hope87 Date: Tue, 29 Jun 2021 17:58:15 +0300 Subject: [PATCH] fixed code --- src/App.js | 9 +- src/components/Candidate/Candidate.js | 17 ++- src/components/Description/Description.js | 16 ++- .../Description/Description.module.css | 3 +- src/components/Home/Home.js | 119 ++++++++++-------- .../InputsComponent/InputsComponent.js | 4 +- src/components/ReportForm/ReportForm.js | 4 +- src/pages/CandidatePage.js | 2 +- src/pages/HomePage.js | 2 +- src/server/server.js | 7 ++ 10 files changed, 106 insertions(+), 77 deletions(-) diff --git a/src/App.js b/src/App.js index 1e601e64..6e92da47 100644 --- 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 ( @@ -19,10 +24,10 @@ const App = () => { {isAuth ? ( - + - + diff --git a/src/components/Candidate/Candidate.js b/src/components/Candidate/Candidate.js index 55fa8146..9e7b297b 100644 --- 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 = () => {
-

{header}

+

{skillsName}

@@ -72,7 +71,7 @@ const Candidate = () => {
-

{name} разработчик, Middle

+

{name}

# Описание опыта

diff --git a/src/components/Description/Description.js b/src/components/Description/Description.js index 8fa5fe6f..c2000125 100644 --- 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 (
@@ -17,7 +17,9 @@ const Description = ({ candidatesListArr }) => {
-

{el.name} разработчик, Middle

+

+ {el.name} - {el.skillsName} +

- 10 лет пишу приложения под IOS, отлично владею Objective-C и Swift.

@@ -25,13 +27,17 @@ const Description = ({ candidatesListArr }) => {

- 3 года преподаю в IOS-школе Сбера

- + getCandidate(candidatesListArr)}>
- {el.tags} + {el.skills.map((e) => ( + + {e.skill.name} + + ))}
@@ -43,7 +49,7 @@ const Description = ({ candidatesListArr }) => {
- +
diff --git a/src/components/Description/Description.module.css b/src/components/Description/Description.module.css index f7c2bffb..b50e672a 100644 --- 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) { diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js index 992d4e14..0ca542bd 100644 --- 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 = () => { <> handleBlockClick(name)} selected={selectedTab} tabs={tabs} tags={tags} /> item.name === selectedTab) : candidates} + candidatesListArr={ + selectedTab ? candidatesArray.filter((item) => item.skillsName === selectedTab) : shorthandArray + } + getCandidate={getCandidate} + onLoadMore={loadMore} /> ); diff --git a/src/components/InputsComponent/InputsComponent.js b/src/components/InputsComponent/InputsComponent.js index 17dc7526..fad4993a 100644 --- 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) => (
- {input}. + {/* {input}. */}
- +
deleteInput(input)} src={remove} alt="" />
diff --git a/src/components/ReportForm/ReportForm.js b/src/components/ReportForm/ReportForm.js index e6209a82..fda03ab5 100644 --- 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 ( diff --git a/src/pages/CandidatePage.js b/src/pages/CandidatePage.js index 7348bf82..0c36df02 100644 --- 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 = () => ; +const CandidatePage = ({ candidatesArr }) => ; export default CandidatePage; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 66bfc266..7919c26c 100644 --- 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 = () => ; +const HomePage = ({ getCandidate }) => ; export default HomePage; diff --git a/src/server/server.js b/src/server/server.js index cc4b9d10..b3968a4f 100644 --- 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; +};