apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed Errorbonary

Browse Source
This commit is contained in:
MaxOvs19 2023-04-27 12:11:09 +03:00
parent 8553adcf08
commit 3fa9f636c1
2 changed files with 119 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

222
src/components/Description/Description.js
View File

@ -1,143 +1,115 @@
import React from 'react' import React from "react";
import {useSelector} from 'react-redux' import { useSelector } from "react-redux";
import {Link} from 'react-router-dom' import { Link } from "react-router-dom";
import ErrorBoundary from "../../hoc/ErrorBoundary"; import ErrorBoundary from "../../hoc/ErrorBoundary";
import {LEVELS, SKILLS} from '../../constants/constants' import { LEVELS, SKILLS } from "../../constants/constants";
import {selectProfiles} from '../../redux/outstaffingSlice' import { selectProfiles } from "../../redux/outstaffingSlice";
import {urlForLocal} from '../../helper' import { urlForLocal } from "../../helper";
import male from '../../images/medium_male.png' import male from "../../images/medium_male.png";
import rectangle from '../../images/rectangle_secondPage.png' import rectangle from "../../images/rectangle_secondPage.png";
import cursorImg from "../../images/cursorImg.png";
import './description.scss' import "./description.scss";
const Description = ({ onLoadMore, isLoadingMore }) => {
const Description = ({onLoadMore, isLoadingMore}) => { // const candidatesListArr = useSelector(selectProfiles);
const candidatesListArr = [];
const candidatesListArr = useSelector(selectProfiles);
return ( return (
<section className='description'> <section className="description">
<div className='container'> <div className="container">
<div className='description__wrapper'> <div className="description__wrapper">
<ErrorBoundary> <ErrorBoundary>
{candidatesListArr && Array.isArray(candidatesListArr) && candidatesListArr.length > 0 {candidatesListArr &&
? candidatesListArr.map((el) => ( Array.isArray(candidatesListArr) &&
<div className='row' key={el.id}> candidatesListArr.length > 0 ? (
<div className='col-2'> candidatesListArr.map((el) => (
{el.photo && <img className='description__img' src={urlForLocal(el.photo)} alt=''/>} <div className="row" key={el.id}>
</div> <div className="col-2">
<div className='col-12 col-xl-6'> {el.photo && (
<h3 className='description__title'> <img
<Link to={`/candidate/${el.id}`}> className="description__img"
{' '} src={urlForLocal(el.photo)}
{el.specification} {SKILLS[el.position_id]},{' '} alt=""
{LEVELS[el.level]}{' '} />
</Link> )}
</h3> </div>
<div className="col-12 col-xl-6">
<h3 className="description__title">
<Link to={`/candidate/${el.id}`}>
{" "}
{el.specification} {SKILLS[el.position_id]},{" "}
{LEVELS[el.level]}{" "}
</Link>
</h3>
{el.vc_text_short ? ( {el.vc_text_short ? (
<div className='description__text'> <div className="description__text">
{el.vc_text_short} {el.vc_text_short}
</div>
) : (
<p className='description__text-secondary'>
Описание отсутствует...
</p>
)}
</div>
<div className='col-12 col-xl-4'>
<Link to={`/candidate/${el.id}`}>
<button className='description__button'>
Подробное резюме
</button>
</Link>
</div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div> </div>
)) ) : (
: /* : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> } */ <p className="description__text-secondary">
candidatesListArr && Array.isArray(candidatesListArr) && Описание отсутствует...
candidatesListArr.map((el) => ( </p>
<div className='row' key={el.id}> )}
<div className='col-2'> </div>
<img className='description__img' src={male} alt=''/> <div className="col-12 col-xl-4">
</div> <Link to={`/candidate/${el.id}`}>
<div className='col-12 col-xl-6'> <button className="description__button">
<h3 className='description__title'> Подробное резюме
{SKILLS[el.position_id]}, {LEVELS[el.level]} </button>
</h3> </Link>
</div>
{el.vc_text_short ? ( <div className="col-xl-2"></div>
<div className='description__text'> <div className="col-12 col-xl-6">
{el.vc_text_short} <ul className="description__list">
</div> {Array.isArray(el?.skillValues) &&
) : ( el.skillValues?.map((e) => (
<p className='description__text-secondary'> <li key={e.id} className="description__list-item">
Описание отсутствует... {e.skill.name}
</p> </li>
)} ))}
</div> </ul>
<div className='col-12 col-xl-4'> <img
<Link to={`/candidate/${el.id}`}> className="description__rectangle"
<button className='description__button'> src={rectangle}
Подробное резюме alt=""
</button> />
</Link> </div>
</div> <div className="col-xl-4"></div>
<div className='col-xl-2'></div>
<div className='col-12 col-xl-6'>
<ul className='description__list'>
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => (
<li key={e.id} className='description__list-item'>
{e.skill.name}
</li>
))}
</ul>
<img
className='description__rectangle'
src={rectangle}
alt=''
/>
</div>
<div className='col-xl-4'></div>
</div>
))}
</ErrorBoundary>
</div>
<div className='row'>
<div className='col-12'>
<div className='description__footer'>
<div className='description__footer-btn'>
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)}
</div> </div>
))
) : (
<div className="description__empty">
<img src={cursorImg}></img>
<p>
В данный момент<span> нет свободных </span> специалистов в
данной категории
</p>
</div>
)}
</ErrorBoundary>
</div>
<div className="row">
<div className="col-12">
<div className="description__footer">
<div className="description__footer-btn">
{candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </div>
) </section>
);
}; };
export default Description export default Description;

33
src/components/Description/description.scss
View File

@ -3,7 +3,7 @@
margin-bottom: 120px; margin-bottom: 120px;
&__title { &__title {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 2.6em; font-size: 2.6em;
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@ -18,13 +18,24 @@
} }
&__empty { &__empty {
font-family: 'GT Eesti Pro Display'; font-family: "LabGrotesque", sans-serif;
font-size: 2.4em;
font-weight: 500;
font-style: normal; font-style: normal;
letter-spacing: normal; font-weight: 700;
line-height: normal; font-size: 16px;
line-height: 32px;
text-align: center; text-align: center;
display: flex;
align-items: center;
justify-content: center;
span {
color: #406128;
}
img {
margin-right: 30px;
}
} }
&____wrapper { &____wrapper {
@ -43,7 +54,7 @@
} }
&__text { &__text {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.6em; font-size: 1.6em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -54,7 +65,7 @@
word-wrap: break-word; word-wrap: break-word;
&-secondary { &-secondary {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.7em; font-size: 1.7em;
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@ -72,7 +83,7 @@
background-color: #73c141; background-color: #73c141;
border: none; border: none;
color: #ffffff; color: #ffffff;
font-family: 'Muller'; font-family: "Muller";
font-weight: bold; font-weight: bold;
font-size: 1.6em; font-size: 1.6em;
line-height: normal; line-height: normal;
@ -95,7 +106,7 @@
flex-wrap: wrap; flex-wrap: wrap;
&-item { &-item {
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.7em; font-size: 1.7em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@ -126,7 +137,7 @@
background-color: white; background-color: white;
margin-right: 60px; margin-right: 60px;
color: #a0a0a0; color: #a0a0a0;
font-family: 'GT Eesti Pro Display'; font-family: "GT Eesti Pro Display";
font-size: 1.8em; font-size: 1.8em;
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;