refactor(#329): added favorites toggle (#112)

Co-authored-by: mirlan.maksitaliev <mirlan.maksitaliev@instatsport.com>

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,
   }
 }

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>{name}</Name>
         <Bottom>
           {isFavorite ? (
-            <InFavorites as='div'>
+            <InFavorites onClick={toggleFavorites}>
               <StarIcon fill='#eacb6f' />
               <T9n t='added_to_favorites' />
             </InFavorites>
           ) : (
-            <AddToFavButton onClick={addToFavorites}>
+            <AddToFavButton onClick={toggleFavorites}>
               <StarIcon fill='#fff' />
               <T9n t='add_to_favorites' />
             </AddToFavButton>

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`

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 = () => {
           <UserSportFavItemLogoWrapper key={`${item.type}_${item.sport}_${item.id}`}>
             <UserSportFavXWrapper
               onClick={() => addRemoveFavorite({
-                action: 2,
+                action: FavoritesActions.REMOVE,
                 id: item.id,
                 sport: item.sport,
                 type: item.type,

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<UserFavorites> => {
+}: 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,
   })