Fixed Errorbonary

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

View File

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

View File

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