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

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

@ -1,133 +1,105 @@
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 = useSelector(selectProfiles); const candidatesListArr = [];
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 className="col-2">
{el.photo && (
<img
className="description__img"
src={urlForLocal(el.photo)}
alt=""
/>
)}
</div> </div>
<div className='col-12 col-xl-6'> <div className="col-12 col-xl-6">
<h3 className='description__title'> <h3 className="description__title">
<Link to={`/candidate/${el.id}`}> <Link to={`/candidate/${el.id}`}>
{' '} {" "}
{el.specification} {SKILLS[el.position_id]},{' '} {el.specification} {SKILLS[el.position_id]},{" "}
{LEVELS[el.level]}{' '} {LEVELS[el.level]}{" "}
</Link> </Link>
</h3> </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> </div>
) : ( ) : (
<p className='description__text-secondary'> <p className="description__text-secondary">
Описание отсутствует... Описание отсутствует...
</p> </p>
)} )}
</div> </div>
<div className='col-12 col-xl-4'> <div className="col-12 col-xl-4">
<Link to={`/candidate/${el.id}`}> <Link to={`/candidate/${el.id}`}>
<button className='description__button'> <button className="description__button">
Подробное резюме Подробное резюме
</button> </button>
</Link> </Link>
</div> </div>
<div className='col-xl-2'></div> <div className="col-xl-2"></div>
<div className='col-12 col-xl-6'> <div className="col-12 col-xl-6">
<ul className='description__list'> <ul className="description__list">
{Array.isArray(el?.skillValues) && el.skillValues?.map((e) => ( {Array.isArray(el?.skillValues) &&
<li key={e.id} className='description__list-item'> el.skillValues?.map((e) => (
<li key={e.id} className="description__list-item">
{e.skill.name} {e.skill.name}
</li> </li>
))} ))}
</ul> </ul>
<img <img
className='description__rectangle' className="description__rectangle"
src={rectangle} src={rectangle}
alt='' alt=""
/> />
</div> </div>
<div className='col-xl-4'></div> <div className="col-xl-4"></div>
</div> </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'> <div className="description__empty">
Описание отсутствует... <img src={cursorImg}></img>
<p>
В данный момент<span> нет свободных </span> специалистов в
данной категории
</p> </p>
</div>
)} )}
</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> </ErrorBoundary>
</div> </div>
<div className='row'> <div className="row">
<div className='col-12'> <div className="col-12">
<div className='description__footer'> <div className="description__footer">
<div className='description__footer-btn'> <div className="description__footer-btn">
{candidatesListArr && ( {candidatesListArr && (
<button onClick={() => onLoadMore(2)}>Загрузить еще</button> <button onClick={() => onLoadMore(2)}>Загрузить еще</button>
)} )}
@ -137,7 +109,7 @@ const Description = ({onLoadMore, isLoadingMore}) => {
</div> </div>
</div> </div>
</section> </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;