From e48e55d9d6f2c1dcf45d94a01d661de1129a0c8a Mon Sep 17 00:00:00 2001
From: ITurres <emanueliturres.co@gmail.com>
Date: Mon, 4 Mar 2024 23:03:36 -0300
Subject: [PATCH 1/3] Feat: Update 'LikeButton' to show loading state

Now the Like button will have its loading state and spinner.
This loading spinner will be shown in two situations, at first render, i.e
when the likes are being fetch, and when the user likes a project, i.e if
the user likes it, it will render the spinner until the request its finish and
showing the updated number of likes or an error message if the request fails.

This will certaintly enhance the user experience.
---
 src/components/UI/LikeButton.tsx | 54 ++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/src/components/UI/LikeButton.tsx b/src/components/UI/LikeButton.tsx
index d53744b..8eea8f3 100644
--- a/src/components/UI/LikeButton.tsx
+++ b/src/components/UI/LikeButton.tsx
@@ -6,12 +6,12 @@ import React, {
 } from 'react';
 
 import { SlLike } from 'react-icons/sl';
+import { VscLoading } from 'react-icons/vsc';
 
 import '../../styles/UI/LikeButton.scss';
 
 import involvement from '../../services/involvementAPI/involvementAPI.ts';
 
-/* eslint-disable no-undef */
 interface LikeButtonProps {
   itemId: string;
 }
@@ -20,6 +20,8 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId }) => {
   const [wasLiked, setWasLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(0);
   const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const maximumLoadingTime = 5000;
 
   const likeBtn = useRef<HTMLButtonElement>(null);
 
@@ -35,6 +37,15 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId }) => {
     }
   }, [wasLiked, styleButton]);
 
+  // ! terminate the loading state after a certain time.
+  // ? this is to prevent the loading state from being stuck.
+  // * and show the user the like button again.
+  const setLoadingToFalse = useCallback(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, maximumLoadingTime);
+  }, []);
+
   interface Like {
     // * disable camelcase since 'item_id' is the name of the property in the API response.
     // eslint-disable-next-line camelcase
@@ -45,12 +56,21 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId }) => {
   const updateLikeCount = useCallback(async () => {
     const likes: Like[] = (await involvement.getLikes()) as Like[];
 
+    if (likes.length === 0) {
+      setError(true);
+      // ? at this point the loading spinner is still showing.
+      // * so terminate the loading state, to show the error message.
+      setLoadingToFalse();
+      return;
+    }
+
     const likedProject = likes.find((like) => like.item_id === itemId);
 
     if (likedProject) {
       setLikeCount(likedProject.likes);
+      setLoadingToFalse();
     }
-  }, [itemId]);
+  }, [itemId, setLoadingToFalse]);
 
   useEffect(() => {
     updateLikeCount();
@@ -64,26 +84,54 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId }) => {
       setLikeCount((count) => count + 1);
     }
 
+    if (error) {
+      // ? at this point, there was an error already, so user will attempt to like again.
+      // * so trigger the loading state again.
+      setLoading(true);
+      // * after some time, terminate the loading state, to show like button again.
+      setLoadingToFalse();
+      return;
+    }
+
     const likePosted = await involvement.postLike(itemId);
 
     if (likePosted === 'error') {
       setError(true);
+      return;
     }
 
+    setLoading(false);
     // * after posting a like, update the like count.
     updateLikeCount();
   };
 
+  if (loading) {
+    return (
+      <button
+        type="button"
+        className="like-button text-hue-rotate"
+        ref={likeBtn}
+        onClick={handleLikeSubmit}
+        aria-label="loading"
+      >
+        <VscLoading size={20} className="like-icon loading-icon" />
+      </button>
+    );
+  }
+
   return (
     <button
       type="button"
       className="like-button text-hue-rotate"
       ref={likeBtn}
       onClick={handleLikeSubmit}
+      aria-label={error ? 'error' : 'like this project'}
     >
       <SlLike size={20} className="like-icon" />
 
-      {likeCount > 0 && (
+      {/* ? when the API likes ary comes empty, likeCount will be 0 */}
+      {/* * so show the error message that was set at the likes.length conditional */}
+      {(likeCount > 0 || error) && (
         <span className="like-button__text">
           &nbsp;
           {!error ? likeCount : 'Error'}

From 2df9c93a25c166f9c41c914447a938e13250d2c4 Mon Sep 17 00:00:00 2001
From: ITurres <emanueliturres.co@gmail.com>
Date: Mon, 4 Mar 2024 23:21:46 -0300
Subject: [PATCH 2/3] Styles: Add new animated class and file
 'loading-icon.scss'

---
 src/styles/animations/loading-icon.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/styles/animations/loading-icon.scss

diff --git a/src/styles/animations/loading-icon.scss b/src/styles/animations/loading-icon.scss
new file mode 100644
index 0000000..c120ca0
--- /dev/null
+++ b/src/styles/animations/loading-icon.scss
@@ -0,0 +1,16 @@
+.loading-icon {
+  animation: spin 1s linear infinite;
+  -webkit-animation: spin 1s linear infinite; // * Safari and Chrome.
+  -moz-animation: spin 1s linear infinite; // * Firefox.
+  -o-animation: spin 1s linear infinite; // * Opera.
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

From c93c0717b7e01192e52f18f9a53888b8ef90f222 Mon Sep 17 00:00:00 2001
From: ITurres <emanueliturres.co@gmail.com>
Date: Mon, 4 Mar 2024 23:23:35 -0300
Subject: [PATCH 3/3] Feat: Import 'loading-icon.scss' into 'LikeButton.tsx'

---
 src/components/UI/LikeButton.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/UI/LikeButton.tsx b/src/components/UI/LikeButton.tsx
index 8eea8f3..701368a 100644
--- a/src/components/UI/LikeButton.tsx
+++ b/src/components/UI/LikeButton.tsx
@@ -9,6 +9,7 @@ import { SlLike } from 'react-icons/sl';
 import { VscLoading } from 'react-icons/vsc';
 
 import '../../styles/UI/LikeButton.scss';
+import '../../styles/animations/loading-icon.scss';
 
 import involvement from '../../services/involvementAPI/involvementAPI.ts';
 
@@ -68,6 +69,8 @@ const LikeButton: React.FC<LikeButtonProps> = ({ itemId }) => {
 
     if (likedProject) {
       setLikeCount(likedProject.likes);
+      // ? at this point the loading spinner is still showing because of the initial API request.
+      // * so terminate the loading state, to show the like button with the like count.
       setLoadingToFalse();
     }
   }, [itemId, setLoadingToFalse]);