commit
2aae7e034c
@ -7,8 +7,9 @@ import { LEVELS, SKILLS } from '../constants/constants';
|
||||
import { selectProfiles, selectFilteredCandidates, selectItems } from '../../redux/outstaffingSlice';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { fetchProfile } from '../../server/server';
|
||||
import { Loader } from '../Loader/Loader';
|
||||
|
||||
const Description = ({ onLoadMore }) => {
|
||||
const Description = ({ onLoadMore, isLoadingMore }) => {
|
||||
const candidatesListArr = useSelector(selectProfiles);
|
||||
const itemsArr = useSelector(selectItems);
|
||||
const filteredListArr = useSelector(selectFilteredCandidates);
|
||||
@ -65,7 +66,10 @@ const Description = ({ onLoadMore }) => {
|
||||
<div className="col-12">
|
||||
<div className={style.description__footer}>
|
||||
<div className={style.description__footer__btn}>
|
||||
<button onClick={() => onLoadMore(2)}>Загрузить еще</button>
|
||||
<button onClick={() => onLoadMore(2)}>
|
||||
{
|
||||
isLoadingMore ? <Loader width={40} height={40} /> : 'Загрузить еще'
|
||||
} </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -6,14 +6,17 @@ import { fetchProfile, fetchSkills } from '../../server/server';
|
||||
import { profiles, tags } from '../../redux/outstaffingSlice';
|
||||
|
||||
const Home = () => {
|
||||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||||
const [index, setIndex] = useState(4);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index).then((profileArr) =>
|
||||
dispatch(profiles(profileArr))
|
||||
);
|
||||
setIsLoadingMore(true);
|
||||
fetchProfile(`${process.env.REACT_APP_API_URL}/api/profile?limit=`, index).then((profileArr) => {
|
||||
dispatch(profiles(profileArr));
|
||||
setIsLoadingMore(false);
|
||||
});
|
||||
|
||||
fetchSkills(`${process.env.REACT_APP_API_URL}/api/skills/skills-on-main-page`).then((skills) => {
|
||||
const keys = Object.keys(skills);
|
||||
@ -35,7 +38,7 @@ const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<Outstaffing />
|
||||
<Description onLoadMore={loadMore} />
|
||||
<Description onLoadMore={loadMore} isLoadingMore={isLoadingMore} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -1,14 +1,14 @@
|
||||
import SVGLoader from "react-loader-spinner";
|
||||
import './loader.css'
|
||||
|
||||
export const Loader = () => {
|
||||
export const Loader = ({ width=50, height=50 }) => {
|
||||
return (
|
||||
<div className='loader'>
|
||||
<SVGLoader
|
||||
type="Circles"
|
||||
color="#fff"
|
||||
height={50}
|
||||
width={50}
|
||||
height={height}
|
||||
width={width}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -1,14 +1,19 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { Loader } from '../Loader/Loader';
|
||||
import { auth } from '../../redux/outstaffingSlice';
|
||||
|
||||
import './logoutButton.css'
|
||||
|
||||
export const LogoutButton = () => {
|
||||
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div className='logout-button' onClick={()=>{localStorage.clear(); dispatch(auth(false));}}>
|
||||
<button>Выйти</button>
|
||||
<div className='logout-button'>
|
||||
<button onClick={()=>{setIsLoggingOut(true); localStorage.clear(); dispatch(auth(false)); setIsLoggingOut(false); }}>
|
||||
{
|
||||
isLoggingOut ? <Loader /> : 'Выйти'
|
||||
} </button>
|
||||
</div>
|
||||
)
|
||||
}
|
@ -1,28 +1,29 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import Select from 'react-select';
|
||||
import { Loader } from '../Loader/Loader';
|
||||
import style from './TagSelect.module.css';
|
||||
import { selectedItems, selectItems, selectTags, filteredCandidates, setPositionId } from '../../redux/outstaffingSlice';
|
||||
import { fetchItemsForId } from '../../server/server';
|
||||
import { selectIsLoading } from '../../redux/loaderSlice';
|
||||
|
||||
const TagSelect = () => {
|
||||
const [searchLoading, setSearchLoading] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
const isLoading = useSelector(selectIsLoading)
|
||||
|
||||
const itemsArr = useSelector(selectItems);
|
||||
|
||||
const tagsArr = useSelector(selectTags);
|
||||
|
||||
const handleSubmit = ({ dispatch }) => {
|
||||
const handleSubmit = ({ dispatch, setSearchLoading }) => {
|
||||
setSearchLoading(true)
|
||||
|
||||
dispatch(setPositionId(null));
|
||||
const filterItemsId = itemsArr.map((item) => item.id).join();
|
||||
|
||||
fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?skills=`, filterItemsId).then((el) =>
|
||||
fetchItemsForId(`${process.env.REACT_APP_API_URL}/api/profile?skills=`, filterItemsId).then((el) => {
|
||||
dispatch(filteredCandidates(el))
|
||||
);
|
||||
setSearchLoading(false)
|
||||
});
|
||||
|
||||
// dispatch(selectedItems([]));
|
||||
};
|
||||
@ -45,8 +46,8 @@ const TagSelect = () => {
|
||||
return { id: item.id, value: item.value, label: item.value };
|
||||
})}
|
||||
/>
|
||||
<button onClick={()=>handleSubmit({dispatch})} type="submit" className={style.search__submit}>
|
||||
{ isLoading ? <Loader /> : 'Поиск' }
|
||||
<button onClick={()=>handleSubmit({dispatch, setSearchLoading})} type="submit" className={style.search__submit}>
|
||||
{ searchLoading ? <Loader width={30} height={30} /> : 'Поиск' }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user