display tooltip for follow button

src/components/Actions/AddSongToLibrary.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import { FC } from 'react';
 
 import { Tooltip } from '../Tooltip';
 import { useTranslation } from 'react-i18next';
@@ -18,8 +18,13 @@ const AddSongToLibrary: FC<{ id: string; onToggle: () => void; size?: number }>
 }) => {
   const { t } = useTranslation(['playlist']);
   const dispatch = useAppDispatch();
+  const user = useAppSelector((state) => !!state.auth.user);
 
   const handleAddToLibrary = () => {
+    if (!user) {
+      dispatch(uiActions.openLoginButton());
+      return;
+    }
     userService.saveTracks([id]).then(() => {
       message.success(t('Song added to Liked Songs'));
       onToggle();
@@ -45,8 +50,13 @@ const DeleteSongFromLibrary: FC<{ id: string; onToggle: () => void; size?: numbe
 }) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const user = useAppSelector((state) => !!state.auth.user);
 
   const handleDeleteFromLibrary = () => {
+    if (!user) {
+      dispatch(uiActions.openLoginButton());
+      return;
+    }
     userService.deleteTracks([id]).then(() => {
       message.success(t('Song removed from Liked Songs'));
       onToggle();
@@ -76,20 +86,9 @@ export const AddSongToLibraryButton = ({
   isSaved: boolean;
   onToggle: () => void;
 }) => {
-  const dispatch = useAppDispatch();
-  const user = useAppSelector((state) => !!state.auth.user);
-
-  const handleToggle = useCallback(() => {
-    if (!user) {
-      dispatch(uiActions.openLoginButton());
-      return;
-    }
-    onToggle();
-  }, [dispatch, onToggle, user]);
-
   return isSaved ? (
-    <DeleteSongFromLibrary size={size} id={id} onToggle={handleToggle} />
+    <DeleteSongFromLibrary size={size} id={id} onToggle={onToggle} />
   ) : (
-    <AddSongToLibrary size={size} id={id} onToggle={handleToggle} />
+    <AddSongToLibrary size={size} id={id} onToggle={onToggle} />
   );
 };

src/components/Actions/ArtistActions.tsx

@@ -69,6 +69,7 @@ export const ArtistActionsWrapper: FC<ArtistActionsWrapperProps> = memo((props)
         label: t('Follow'),
         icon: <FollowIcon />,
         onClick: async () => {
+          if (!handleUserValidation()) return;
           userService.followArtists([id]).then(() => {
             message.success(t('Artist followed'));
             dispatch(yourLibraryActions.fetchMyArtists());

src/i18n/es/playlist.ts

@@ -31,7 +31,7 @@ export const playlist = {
   'Removed from Your Library': 'Eliminado de Tu biblioteca',
   'Add to Your Library': 'Guardar en Tu biblioteca',
   'Saved to Your Library': 'Guardado en Tu biblioteca',
-  'Add to Liked Songs': 'Agregar a Canciones Me Gusta',
+  'Add to Liked Songs': 'Agregar a Tus me gusta',
   'Remove from Liked Songs': 'Eliminar de Canciones Me Gusta',
   'Private Playlist': 'Playlist Privada',
   Follow: 'Seguir',

src/pages/Artist/container/controls/followButton.tsx

@@ -9,6 +9,7 @@ import { yourLibraryActions } from '../../../../store/slices/yourLibrary';
 
 // Services
 import { userService } from '../../../../services/users';
+import { uiActions } from '../../../../store/slices/ui';
 
 // Redux
 
@@ -18,13 +19,20 @@ const FollowArtist: FC<{ id: string; onToggle: () => void; size?: number }> = ({
 }) => {
   const { t } = useTranslation(['artist']);
   const dispatch = useAppDispatch();
+  const user = useAppSelector(
+    (state) => !!state.auth.user,
+    (prev, next) => prev === next
+  );
 
   const handleFollow = useCallback(() => {
+    if (!user) {
+      return dispatch(uiActions.openLoginTooltip());
+    }
     userService.unfollowArtists([id]).then(() => {
       dispatch(artistActions.setFollowing({ following: true }));
       onToggle();
     });
-  }, [dispatch, id, onToggle]);
+  }, [dispatch, id, onToggle, user]);
 
   return (
     <button className='transparent-button' onClick={handleFollow}>
@@ -39,13 +47,20 @@ const UnfollowArtist: FC<{ id: string; onToggle: () => void; size?: number }> =
 }) => {
   const { t } = useTranslation(['artist']);
   const dispatch = useAppDispatch();
+  const user = useAppSelector(
+    (state) => !!state.auth.user,
+    (prev, next) => prev === next
+  );
 
   const handleUnfollow = useCallback(() => {
+    if (!user) {
+      return dispatch(uiActions.openLoginTooltip());
+    }
     userService.unfollowArtists([id]).then(() => {
       dispatch(artistActions.setFollowing({ following: false }));
       onToggle();
     });
-  }, [dispatch, id, onToggle]);
+  }, [dispatch, id, onToggle, user]);
 
   return (
     <button className='transparent-button' onClick={handleUnfollow}>