diff --git a/src/features/ProfileCard/hooks.tsx b/src/features/ProfileCard/hooks.tsx index f91e25ab..687dd88d 100644 --- a/src/features/ProfileCard/hooks.tsx +++ b/src/features/ProfileCard/hooks.tsx @@ -1,8 +1,9 @@ import type { BaseSyntheticEvent } from 'react' import { useCallback } from 'react' -import findIndex from 'lodash/findIndex' +import find from 'lodash/find' +import { FavoritesActions } from 'requests' import { handleImageError, getProfileLogo } from 'helpers' import { useSportNameParam, usePageId } from 'hooks' @@ -16,11 +17,11 @@ export const useProfileCard = ({ profileType }: ProfileCardProps) => { const profileId = usePageId() const { sportType } = useSportNameParam() - const isFavorite = findIndex(userFavorites, { + const isFavorite = Boolean(find(userFavorites, { id: profileId, sport: sportType, type: profileType, - }) !== -1 + })) const logo = getProfileLogo({ id: profileId, @@ -28,14 +29,18 @@ export const useProfileCard = ({ profileType }: ProfileCardProps) => { sportType, }) - const addToFavorites = useCallback(() => { + const toggleFavorites = useCallback(() => { + const action = isFavorite + ? FavoritesActions.REMOVE + : FavoritesActions.ADD addRemoveFavorite({ - action: 1, + action, id: profileId, sport: sportType, type: profileType, }) }, [ + isFavorite, addRemoveFavorite, profileId, profileType, @@ -49,9 +54,9 @@ export const useProfileCard = ({ profileType }: ProfileCardProps) => { }), [profileType, sportType]) return { - addToFavorites, isFavorite, logo, onError, + toggleFavorites, } } diff --git a/src/features/ProfileCard/index.tsx b/src/features/ProfileCard/index.tsx index 26a2937a..175d4044 100644 --- a/src/features/ProfileCard/index.tsx +++ b/src/features/ProfileCard/index.tsx @@ -27,10 +27,10 @@ export const ProfileCard = (props: ProfileCardProps) => { } = props const { - addToFavorites, isFavorite, logo, onError, + toggleFavorites, } = useProfileCard(props) return ( @@ -45,12 +45,12 @@ export const ProfileCard = (props: ProfileCardProps) => { {name} {isFavorite ? ( - + ) : ( - + diff --git a/src/features/ProfileCard/styled.tsx b/src/features/ProfileCard/styled.tsx index d08205a9..12be63d7 100644 --- a/src/features/ProfileCard/styled.tsx +++ b/src/features/ProfileCard/styled.tsx @@ -43,7 +43,7 @@ export const AddToFavButton = styled.button` background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.1) 0.01%, + rgba(255, 255, 255, 0.1) 0.01%, rgba(0, 0, 0, 0.1) 99.99% ), #0033CC; @@ -63,7 +63,6 @@ export const InFavorites = styled(AddToFavButton)` color: #EACB6F; border: 1px solid currentColor; background-color: transparent; - cursor: default; ` export const InfoItems = styled.div` diff --git a/src/features/UserFavorites/index.tsx b/src/features/UserFavorites/index.tsx index 07fdfe5f..77054480 100644 --- a/src/features/UserFavorites/index.tsx +++ b/src/features/UserFavorites/index.tsx @@ -2,12 +2,13 @@ import React from 'react' import map from 'lodash/map' +import { FavoritesActions } from 'requests' import { handleImageError } from 'helpers' import { Modal } from 'features/Modal' import { TooltipBlock } from './TooltipBlock' - +import { useUserFavoritesStore } from './store' import { StyledLink, UserSportFavItemLogoWrapper, @@ -20,7 +21,6 @@ import { FavoriteModal, Text, } from './styled' -import { useUserFavoritesStore } from './store' export const UserFavorites = () => { const { @@ -39,7 +39,7 @@ export const UserFavorites = () => { addRemoveFavorite({ - action: 2, + action: FavoritesActions.REMOVE, id: item.id, sport: item.sport, type: item.type, diff --git a/src/requests/modifyUserSportFavs.tsx b/src/requests/modifyUserSportFavs.tsx index dc50c150..a9a24cc4 100644 --- a/src/requests/modifyUserSportFavs.tsx +++ b/src/requests/modifyUserSportFavs.tsx @@ -15,8 +15,18 @@ enum FavoriteStatusTypes { FAILURE = 2, } +export enum FavoritesActions { + ADD = 1, + REMOVE = 2, +} + +type Response = { + _p_data: UserFavorites, + _p_status: FavoriteStatusTypes, +} + type Args = { - action: number, + action: FavoritesActions, id: number, sport: SportTypes, type: ProfileTypes, @@ -28,7 +38,7 @@ export const modifyUserFavorites = async ({ id, sport, type, -}: Args): Promise => { +}: Args) => { const config = { body: { params: { @@ -41,7 +51,7 @@ export const modifyUserFavorites = async ({ }, } - const { _p_data, _p_status } = await callApi({ + const { _p_data, _p_status }: Response = await callApi({ config, url: DATA_URL, })