🛠 Update bookmark button style

jgudo · Mar 21, 2021 · 26b598e · 26b598e · vercel · Mar 21, 2021
1 parent 4b3f0cc
commit 26b598e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 9 deletions.
diff --git a/frontend/.eslintcache b/frontend/.eslintcache
diff --git a/frontend/src/components/main/BookmarkButton/index.tsx b/frontend/src/components/main/BookmarkButton/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
+import { useDidMount } from '~/hooks';
 import { bookmarkPost } from '~/services/api';
 
 interface IProps {
@@ -10,6 +11,8 @@ interface IProps {
 
 const BookmarkButton: React.FC<IProps> = (props) => {
     const [isBookmarked, setIsBookmarked] = useState(props.initBookmarkState || false);
+    const [isLoading, setLoading] = useState(false);
+    const didMount = useDidMount(true);
 
     useEffect(() => {
         setIsBookmarked(props.initBookmarkState);
@@ -18,8 +21,13 @@ const BookmarkButton: React.FC<IProps> = (props) => {
     const dispatchBookmark = async () => {
         try {
             // state = TRUE | FALSE
+            setLoading(true);
             const { state } = await bookmarkPost(props.postID);
-            setIsBookmarked(state);
+
+            if (didMount) {
+                setIsBookmarked(state);
+                setLoading(false);
+            }
 
             if (state) {
                 toast.dark('Post successfully bookmarked.', {
@@ -33,13 +41,14 @@ const BookmarkButton: React.FC<IProps> = (props) => {
                 });
             }
         } catch (e) {
+            didMount && setLoading(false);
             console.log(e);
         }
     }
 
     return (
         <div>
-            { props.children({ dispatchBookmark, isBookmarked })}
+            { props.children({ dispatchBookmark, isBookmarked, isLoading })}
         </div>
     );
 };

diff --git a/frontend/src/components/main/Options/PostOptions.tsx b/frontend/src/components/main/Options/PostOptions.tsx
@@ -83,17 +83,17 @@ const PostOptions: React.FC<IProps> = (props) => {
                         </>
                     ) : (
                         <BookmarkButton postID={props.post.id} initBookmarkState={props.post.isBookmarked}>
-                            {({ dispatchBookmark, isBookmarked }) => (
+                            {({ dispatchBookmark, isBookmarked, isLoading }) => (
                                 <h4
-                                    className="p-4 flex items-center cursor-pointer dark:text-white"
+                                    className="group p-4 flex items-center cursor-pointer dark:text-white hover:bg-indigo-500 hover:text-white"
                                     onClick={dispatchBookmark}
                                 >
                                     {isBookmarked ? (
-                                        <StarFilled className="text-red-600 text-2xl p-2 flex justify-center items-center rounded-full hover:bg-red-100" />
+                                        <StarFilled className="text-red-600 group-hover:text-white text-2xl p-2 flex justify-center items-center rounded-full" />
                                     ) : (
-                                        <StarOutlined className="text-red-600 text-2xl p-2 flex justify-center items-center rounded-full hover:bg-red-100" />
+                                        <StarOutlined className="text-red-600 group-hover:text-white text-2xl p-2 flex justify-center items-center rounded-full" />
                                     )}
-                                    <span>{isBookmarked ? 'Unbookmark Post' : 'Bookmark Post'} </span>
+                                    <span className={`${isLoading && 'opacity-50'}`}>{isBookmarked ? 'Unbookmark Post' : 'Bookmark Post'} </span>
                                 </h4>
                             )}
                         </BookmarkButton>

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -79,7 +79,7 @@ module.exports = {
     display: ['responsive'],
     padding: ['important', 'responsive'],
     borderRadius: ['important', 'responsive'],
-    textColor: ['important', 'hover', 'dark'],
+    textColor: ['important', 'group-hover', 'hover', 'dark'],
     borderColor: ['important', 'focus', 'hover', 'dark'],
     outlineOffset: ['hover'],
     boxShadow: ['responsive', 'dark'],