fixed description css

src/components/Candidate/Candidate.module.css

@@ -222,7 +222,6 @@
   margin-top: 60px;
   border-radius: 10px;
   margin-bottom: 60px;
-  flex-wrap: wrap;
 }
 
 @media (max-width: 575.98px) {
@@ -241,7 +240,14 @@
   text-align: left;
 }
 
-.SectionSkills > p {
+.SectionSkills > ul {
+  list-style: none;
+  display: flex;
+  padding-left: 0;
+  flex-wrap: wrap;
+}
+
+.SectionSkills > ul > li {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.8em;
   font-weight: 100;

src/components/Candidate/SectionSkills.js

@@ -5,7 +5,7 @@ const SectionSkills = ({ skillsArr }) => {
   return (
     <div className={style.SectionSkills}>
       <h3>Навыки:</h3>
-      {skillsArr && skillsArr.map((skills) => <p key={skills.id}>{skills.skill.name}</p>)}
+      <ul>{skillsArr && skillsArr.map((skills) => <li key={skills.id}>{skills.skill.name}</li>)}</ul>
     </div>
   );
 };

src/components/Description/Description.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import style from './Description.module.css';
 import male from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
@@ -6,14 +6,16 @@ import { Link } from 'react-router-dom';
 import { LEVELS, SKILLS } from '../constants/constants';
 import { selectProfiles, selectFilteredCandidates } from '../../redux/outstaffingSlice';
 import { useSelector } from 'react-redux';
+import { fetchProfile } from '../../server/server';
 
 const Description = ({ onLoadMore }) => {
   const candidatesListArr = useSelector(selectProfiles);
   const filteredListArr = useSelector(selectFilteredCandidates);
+  const [allCandidates, getAllCandidates] = useState([]);
 
-  // function createMarkup(text) {
+  useEffect(() => {
-  //   return { __html: text.split('</p>').slice(0, 3).join('') };
+    fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', 1000).then((p) => getAllCandidates(p));
-  // }
+  }, []);
 
   return (
     <section className={style.description}>
@@ -43,13 +45,13 @@ const Description = ({ onLoadMore }) => {
                   </div>
                   <div className="col-xl-2"></div>
                   <div className="col-12 col-xl-6">
-                    <div className={style.description__spBox}>
+                    <ul className={style.description__list}>
                       {el.skillValues.map((e) => (
-                        <span key={e.id} className={style.description__sp}>
+                        <li key={e.id} className={style.description__list__item}>
                           {e.skill.name}
-                        </span>
+                        </li>
                       ))}
-                    </div>
+                    </ul>
                     <img className={style.description__rectangle} src={rectangle} alt="" />
                   </div>
                   <div className="col-xl-4"></div>
@@ -78,13 +80,13 @@ const Description = ({ onLoadMore }) => {
                   </div>
                   <div className="col-xl-2"></div>
                   <div className="col-12 col-xl-6">
-                    <div className={style.description__spBox}>
+                    <ul className={style.description__list}>
                       {el.skillValues.map((e) => (
-                        <span key={e.id} className={style.description__sp}>
+                        <li key={e.id} className={style.description__list__item}>
                           {e.skill.name}
-                        </span>
+                        </li>
                       ))}
-                    </div>
+                    </ul>
                     <img className={style.description__rectangle} src={rectangle} alt="" />
                   </div>
                   <div className="col-xl-4"></div>
@@ -96,7 +98,9 @@ const Description = ({ onLoadMore }) => {
           <div className="col-12">
             <div className={style.description__footer}>
               <div className={style.description__footer__btn}>
+                {candidatesListArr.length !== allCandidates.length && filteredListArr.length === 0 ? (
                   <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
+                ) : null}
               </div>
             </div>
           </div>

src/components/Description/Description.module.css

@@ -85,10 +85,6 @@
   word-wrap: break-word;
 }
 
-/* .description__text > p:first-child {
-  font-size: 1.8em;
-} */
-
 .description__textSecondary {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.7em;
@@ -152,11 +148,14 @@
   }
 }
 
-.description__spBox {
+.description__list {
   padding: 5px;
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.description__sp {
+.description__list__item {
   font-family: 'GT Eesti Pro Display';
   font-size: 1.7em;
   font-weight: 400;
@@ -164,13 +163,12 @@
   letter-spacing: normal;
   text-align: left;
   line-height: 36px;
-  margin-top: 20px;
   margin-left: 10px;
   word-wrap: break-word;
 }
 
 @media (max-width: 575.98px) {
-  .description__sp {
+  .description__list__item {
     font-size: 1.5em;
     text-align: center;
     margin-bottom: 120px;

src/components/Form/Form.js

@@ -24,7 +24,6 @@ const Form = () => {
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    console.log('submitData', data);
 
     const formData = new FormData();
     formData.append('email', data.email);
@@ -38,8 +37,6 @@ const Form = () => {
     history.goBack();
   };
 
-  console.log('data', data);
-
   return (
     <div className="container">
       <div className="row">

src/components/Form/Form.module.css

@@ -15,7 +15,6 @@
   line-height: 16.81px;
   text-align: left;
   margin-bottom: 20px;
-  margin-left: 45px;
 }
 
 .form > input {

src/components/Home/Home.js

@@ -11,9 +11,9 @@ const Home = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', index)
+    fetchProfile('https://guild.craft-group.xyz/api/profile?limit=', index).then((profileArr) =>
-      .then((profileArr) => dispatch(profiles(profileArr)))
+      dispatch(profiles(profileArr))
-      .catch((e) => console.log(e));
+    );
 
     fetchSkills('https://guild.craft-group.xyz/api/skills/skills-on-main-page').then((skills) => {
       const keys = Object.keys(skills);

src/server/server.js

@@ -1,25 +1,32 @@
 export const fetchProfile = async (link, index) => {
+  try {
     const response = await fetch(`${link}${index}`);
     let data = await response.json();
 
     return data;
+  } catch (error) {}
 };
 
 export const fetchSkills = async (link) => {
+  try {
     const response = await fetch(link);
     let data = await response.json();
 
     return data;
+  } catch (error) {}
 };
 
 export const fetchItemsForId = async (link, id) => {
+  try {
     const response = await fetch(`${link}${id}`);
     let data = await response.json();
 
     return data;
+  } catch (error) {}
 };
 
 export const fetchForm = async (link, info) => {
+  try {
     const response = await fetch(link, {
       method: 'POST',
       headers: {
@@ -29,4 +36,5 @@ export const fetchForm = async (link, info) => {
     });
 
     return response;
+  } catch (error) {}
 };