add tooltips

packages/app/src/components/BookmarkButtons.tsx

@@ -1,12 +1,13 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 
-import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
+
+import { useIsGuestUser } from '~/stores/context';
 
 import { IUser } from '../interfaces/user';
 
 import UserPictureList from './User/UserPictureList';
-import { useIsGuestUser } from '~/stores/context';
 
 interface Props {
   bookmarkCount?: number
@@ -37,6 +38,17 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
     }
   };
 
+  const tooltipMessage = useCallback(() => {
+    if (isGuestUser) {
+      return 'Not available for guest';
+    }
+
+    if (isBookmarked) {
+      return 'cancel_bookmark';
+    }
+    return 'bookmark';
+  }, [isGuestUser, isBookmarked]);
+
   return (
     <div className="btn-group" role="group" aria-label="Bookmark buttons">
       <button
@@ -49,11 +61,9 @@ const BookmarkButtons: FC<Props> = (props: Props) => {
         <i className={`fa ${isBookmarked ? 'fa-bookmark' : 'fa-bookmark-o'}`}></i>
       </button>
 
-      {isGuestUser && (
-        <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
-          {t('Not available for guest')}
-        </UncontrolledTooltip>
-      )}
+      <UncontrolledTooltip placement="top" target="bookmark-button" fade={false}>
+        {t(tooltipMessage())}
+      </UncontrolledTooltip>
 
       { !hideTotalNumber && (
         <>

packages/app/src/components/LikeButtons.tsx

@@ -1,13 +1,15 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 
-import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 import { useTranslation } from 'react-i18next';
-import UserPictureList from './User/UserPictureList';
-import { withUnstatedContainers } from './UnstatedUtils';
+import { UncontrolledTooltip, Popover, PopoverBody } from 'reactstrap';
 
 import AppContainer from '~/client/services/AppContainer';
+
 import { IUser } from '../interfaces/user';
 
+import { withUnstatedContainers } from './UnstatedUtils';
+import UserPictureList from './User/UserPictureList';
+
 type LikeButtonsProps = {
 
   hideTotalNumber?: boolean,
@@ -32,6 +34,17 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
     hideTotalNumber, isGuestUser, isLiked, sumOfLikers, onLikeClicked,
   } = props;
 
+  const tooltipMessage = useCallback(() => {
+    if (isGuestUser) {
+      return 'Not available for guest';
+    }
+
+    if (isLiked) {
+      return 'cancel_like';
+    }
+    return 'Like!';
+  }, [isGuestUser, isLiked]);
+
   return (
     <div className="btn-group" role="group" aria-label="Like buttons">
       <button
@@ -43,11 +56,10 @@ const LikeButtons: FC<LikeButtonsProps> = (props: LikeButtonsProps) => {
       >
         <i className={`fa ${isLiked ? 'fa-heart' : 'fa-heart-o'}`}></i>
       </button>
-      { isGuestUser && (
-        <UncontrolledTooltip placement="top" target="like-button" fade={false}>
-          {t('Not available for guest')}
-        </UncontrolledTooltip>
-      )}
+
+      <UncontrolledTooltip placement="top" target="like-button" fade={false}>
+        {t(tooltipMessage())}
+      </UncontrolledTooltip>
 
       { !hideTotalNumber && (
         <>

packages/app/src/components/SubscribeButton.tsx

@@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 
 import { useTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
+
 import { SubscriptionStatusType } from '~/interfaces/subscription';
 
 
@@ -20,6 +21,17 @@ const SubscribeButton: FC<Props> = (props: Props) => {
   const buttonClass = `${isSubscribing ? 'active' : ''} ${isGuestUser ? 'disabled' : ''}`;
   const iconClass = isSubscribing === false ? 'fa fa-eye-slash' : 'fa fa-eye';
 
+  const tooltipMessage = useCallback(() => {
+    if (isGuestUser) {
+      return 'Not available for guest';
+    }
+
+    if (isSubscribing) {
+      return 'cancel_subscribe';
+    }
+    return 'subscribe';
+  }, [isGuestUser, isSubscribing]);
+
   return (
     <>
       <button
@@ -31,11 +43,9 @@ const SubscribeButton: FC<Props> = (props: Props) => {
         <i className={iconClass}></i>
       </button>
 
-      {isGuestUser && (
-        <UncontrolledTooltip placement="top" target="subscribe-button" fade={false}>
-          {t('Not available for guest')}
-        </UncontrolledTooltip>
-      )}
+      <UncontrolledTooltip placement="top" target="subscribe-button" fade={false}>
+        {t(tooltipMessage())}
+      </UncontrolledTooltip>
     </>
   );