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

form page footer fix and candidates empty list message

Browse Source
This commit is contained in:
kurpfish 2021-08-23 17:36:28 +03:00
parent 7891dccb59
commit 1a19ae5160
3 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import { Loader } from '../Loader/Loader';
import { getRole } from '../../redux/roleSlice'; import { getRole } from '../../redux/roleSlice';
const Description = ({ onLoadMore, isLoadingMore }) => { const Description = ({ onLoadMore, isLoadingMore }) => {
const [isLoaded, setIsLoaded] = useState(false);
const history = useHistory(); const history = useHistory();
const role = useSelector(getRole) const role = useSelector(getRole)
const candidatesListArr = useSelector(selectProfiles); const candidatesListArr = useSelector(selectProfiles);
@ -19,7 +20,10 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
const [allCandidates, getAllCandidates] = useState([]); const [allCandidates, getAllCandidates] = useState([]);
useEffect(() => { useEffect(() => {
fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role }).then((p) => getAllCandidates(p)); fetchProfile({ link: `${process.env.REACT_APP_API_URL}/api/profile?limit=`, index: 1000, history, role }).then((p) => {
getAllCandidates(p);
setIsLoaded(true);
});
}, []); }, []);
if(!filteredListArr) { if(!filteredListArr) {
@ -28,7 +32,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
<div className="container"> <div className="container">
<div className={style.description__wrapper}> <div className={style.description__wrapper}>
{ {
candidatesListArr.map((el) => ( candidatesListArr.length > 0 ? candidatesListArr.map((el) => (
<div className="row" key={el.id}> <div className="row" key={el.id}>
<div className="col-2"> <div className="col-2">
<img className={style.description__img} src={el.photo} alt="" /> <img className={style.description__img} src={el.photo} alt="" />
@ -62,7 +66,9 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
</div> </div>
<div className="col-xl-4"></div> <div className="col-xl-4"></div>
</div> </div>
))} )) : <div className={style.description__empty}>{
isLoaded ? 'В данный момент в категории нет свободных специалистов' : 'Загрузка...'
}</div>}
</div> </div>
<div className="row"> <div className="row">
@ -87,7 +93,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
<section className={style.description}> <section className={style.description}>
<div className="container"> <div className="container">
<div className={style.description__wrapper}> <div className={style.description__wrapper}>
{filteredListArr {filteredListArr && filteredListArr.length > 0
? filteredListArr.map((el) => ( ? filteredListArr.map((el) => (
<div className="row" key={el.id}> <div className="row" key={el.id}>
<div className="col-2"> <div className="col-2">
@ -123,7 +129,7 @@ const Description = ({ onLoadMore, isLoadingMore }) => {
<div className="col-xl-4"></div> <div className="col-xl-4"></div>
</div> </div>
)) ))
: filteredListArr.length && filteredListArr.length === 0 && <></> } : <div className={style.description__empty}>В данный момент в категории нет свободных специалистов</div> }
</div> </div>
<div className="row"> <div className="row">

10
src/components/Description/Description.module.css
View File

@ -3,6 +3,16 @@
margin-bottom: 120px; margin-bottom: 120px;
} }
.description__empty {
font-family: 'GT Eesti Pro Display';
font-size: 2.4em;
font-weight: 500;
font-style: normal;
letter-spacing: normal;
line-height: normal;
text-align: center;
}
.description__wrapper { .description__wrapper {
border: 1px solid #efefef; border: 1px solid #efefef;
background-color: #fdfdfd; background-color: #fdfdfd;

2
src/pages/formPage.scss
View File

@ -127,7 +127,7 @@
} }
.form-page footer { .form-page footer {
margin-top: 2.5rem !important; margin-top: 6rem !important;
} }
@media (max-width: 991px) { @media (max-width: 991px) {