diff --git a/src/components/favorite-button/favorite-button.tsx b/src/components/favorite-button/favorite-button.tsx index 2d5dfbf..5e807ae 100644 --- a/src/components/favorite-button/favorite-button.tsx +++ b/src/components/favorite-button/favorite-button.tsx @@ -1,9 +1,9 @@ import {classNames} from '../../utils/class-names/class-names.ts'; import {OfferShortInfo} from '../../types/offer.ts'; import {useActionCreators, useAppSelector} from '../../hooks/store.ts'; -import {favoritesActions, favoritesSelectors} from '../../store/slices/favorites.ts'; +import {favoritesActions} from '../../store/slices/favorites.ts'; import {useState} from 'react'; -import {AppRoute, AuthStatus, RequestStatus} from '../../const.ts'; +import {AppRoute, AuthStatus} from '../../const.ts'; import {toast} from 'react-toastify'; import {useNavigate} from 'react-router-dom'; import {userSelectors} from '../../store/slices/user.ts'; @@ -27,8 +27,8 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp } as const; const [isFavoriteCurrent, setIsFavoriteCurrent] = useState(isFavorite); + const [isDisabled, setIsDisabled] = useState(false); const {toggleFavorite} = useActionCreators(favoritesActions); - const statusToggleFavorite = useAppSelector(favoritesSelectors.statusToggleFavorite); const authStatus = useAppSelector(userSelectors.authStatus); const navigate = useNavigate(); @@ -38,12 +38,13 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp if (!isAuth) { navigate(AppRoute.Login); } - + setIsDisabled(true); toast.promise(toggleFavorite({status: Number(!isFavoriteCurrent) as 0 | 1, offerId}).unwrap(), { pending: 'Sending request', success: { render() { setIsFavoriteCurrent(!isFavoriteCurrent); + setIsDisabled(false); return 'Success'; } }, @@ -59,7 +60,7 @@ function FavoriteButton({componentType, isFavorite, offerId}: FavoriteButtonProp } type="button" onClick={onClickHandler} - disabled={statusToggleFavorite === RequestStatus.Loading} + disabled={isDisabled} > diff --git a/src/components/login-city-link/login-city-link.tsx b/src/components/login-city-link/login-city-link.tsx index 0c6942f..582fef8 100644 --- a/src/components/login-city-link/login-city-link.tsx +++ b/src/components/login-city-link/login-city-link.tsx @@ -8,7 +8,7 @@ function LoginCityLink() { return (
- + {randomCity.name}
diff --git a/src/hooks/store.ts b/src/hooks/store.ts index bb98086..38c6c54 100644 --- a/src/hooks/store.ts +++ b/src/hooks/store.ts @@ -12,6 +12,7 @@ const useAppStore: () => typeof store = useStore; const useActionCreators = (actions: Actions): BoundActions => { const dispatch = useAppDispatch(); + // eslint-disable-next-line react-hooks/exhaustive-deps return useMemo(() => bindActionCreators(actions, dispatch), []); };