Likes cpmponent cleanup (#36)

client/components/likes/likes.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
-import { LIKES_INCREMENT_STEP, LIKES_INCREMENT_DELAY } from '../../../server/src/utils/constants';
-import { LikesDisplay } from './likesDisplay';
+import * as ClienConstants from '../../utils/constants';
 
 interface LikesProps {
   finalLikes: number;
@@ -26,15 +25,34 @@ export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
     let isIncrementing = true;
 
     const randomDelay = (min: number, max: number) => Math.random() * (max - min) + min;
-    const animationDuration = randomDelay(1000, 2000); // random duration (ms) to continue animation for
-    const pauseDuration = randomDelay(2000, 3000); // random duration (ms) to puase animation for
+    const animationDuration = randomDelay(
+      ClienConstants.ANIMATION_DURATION_LOWER,
+      ClienConstants.ANIMATION_DURATION_UPPER,
+    ); // random duration (ms) to continue animation for
+
+    const pauseDuration = randomDelay(
+      ClienConstants.PAUSE_DURATION_LOWER,
+      ClienConstants.PAUSE_DURATION_UPPER,
+    ); // random duration (ms) to puase animation for
+
+    const initPauseTimeout = (shouldPause: boolean, timeoutDuration: number) => {
+      return setTimeout(
+        () => {
+          clearInterval(incrementTimeoutId);
+          isIncrementing = shouldPause;
+          setIsAnimating(shouldPause);
+          incrementLikes(); // call again to switch between animation and pause
+        },
+        timeoutDuration, // continues animation or puase for a random duration
+      );
+    };
 
     const incrementLikes = () => {
       if (isIncrementing) {
         setIsAnimating(true);
         incrementTimeoutId = setInterval(() => {
           setAnimatedLikes((prevLikes) => {
-            const newLikes = prevLikes + LIKES_INCREMENT_STEP;
+            const newLikes = prevLikes + ClienConstants.LIKES_INCREMENT_STEP;
             if (newLikes >= finalLikes) {
               clearInterval(incrementTimeoutId);
               setIsAnimating(false); // stop animation when finalLikes is reached (heart stops pulsing)
@@ -43,28 +61,11 @@ export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
               return newLikes;
             }
           });
-        }, LIKES_INCREMENT_DELAY); // increase displayed likes by LIKES_INCREMENT_STEP every 15 ms
+        }, ClienConstants.LIKES_INCREMENT_DELAY); // increase displayed likes by LIKES_INCREMENT_STEP every 15 ms
 
-        pauseTimeoutId = setTimeout(
-          () => {
-            clearInterval(incrementTimeoutId);
-            isIncrementing = false;
-            setIsAnimating(false);
-            incrementLikes(); // call again to pause animation
-          },
-          animationDuration, // continues animation for a random duration
-        );
+        pauseTimeoutId = initPauseTimeout(false, animationDuration); // pause after animationDuration
       } else {
-        // Pause for a random duration
-        pauseTimeoutId = setTimeout(
-          () => {
-            clearInterval(incrementTimeoutId);
-            isIncrementing = true;
-            setIsAnimating(true);
-            incrementLikes(); // call again to continue animation
-          },
-          pauseDuration, // pauses animation for a random duration
-        );
+        pauseTimeoutId = initPauseTimeout(true, pauseDuration); // resume animation after pauseDuration
       }
     };
 
@@ -73,7 +74,7 @@ export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
     const startAnimation = setTimeout(() => {
       setIsAnimating(true);
       incrementLikes();
-    }, 4000);
+    }, ClienConstants.LIKES_ANIMATION_DELAY);
 
     return () => {
       clearInterval(incrementTimeoutId);
@@ -82,5 +83,12 @@ export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
     };
   }, [finalLikes]); // reset when finalLikes is updated
 
-  return <LikesDisplay animatedLikes={animatedLikes} isAnimating={isAnimating} />;
+  return (
+    <div className="w-full h-16 flex items-center justify-center">
+      <div className="flex items-center mt-8 relative -translate-x-32">
+        <h2 className={`font-bold ${isAnimating ? 'animate-pulse' : ''}`}>❤️</h2>
+        <h2 className="font-bold ml-2 w-20 text-left">{animatedLikes}</h2>
+      </div>
+    </div>
+  );
 };

client/pages/index.tsx

@@ -11,7 +11,6 @@ const Home = () => {
 
   // state to determine if we're displaying stuff (true) or not (false)
   const [display, setDisplay] = useState<ResponseData | void>();
-  const [finalLikes, setFinalLikes] = useState<number>(0);
 
   // state variables to indicate completed animations
   const [likesComplete, setLikesComplete] = useState<boolean>(false);
@@ -41,9 +40,6 @@ const Home = () => {
         }, 2000);
       } else {
         setDisplay(data);
-        if (data.likes !== undefined) {
-          setFinalLikes(data.likes);
-        }
       }
     };
 
@@ -119,7 +115,7 @@ const Home = () => {
       <div className="w-screen h-screen flex flex-col justify-between items-center">
         {display ? (
           <>
-            <Likes finalLikes={finalLikes} onComplete={onLikesComplete}></Likes>
+            <Likes finalLikes={display.likes} onComplete={onLikesComplete}></Likes>
             <CommentFeed comments={display.comments} onComplete={onCommentsComplete}></CommentFeed>
           </>
         ) : (

client/styles/globals.css

@@ -91,3 +91,17 @@ body {
     opacity: 1;
   }
 }
+
+@keyframes pulse {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+.animate-pulse {
+  animation: pulse 0.3s infinite;
+}

client/utils/constants.ts

@@ -0,0 +1,7 @@
+export const LIKES_INCREMENT_STEP = 8; // # of increment when displayed likes is less than finalLikes
+export const LIKES_INCREMENT_DELAY = 15; // displayed likes increases by LIKES_INCREMENT_STEP every LIKES_INCREMENT_DELAY millisecs
+export const LIKES_ANIMATION_DELAY = 4000; // delay in millisec the likes animation to wait for comments to start rolling
+export const ANIMATION_DURATION_LOWER = 1000; // lower limit for animation runtime
+export const ANIMATION_DURATION_UPPER = 2000; // upper limit for animation runtime
+export const PAUSE_DURATION_LOWER = 2000; // lower limit for pause duration
+export const PAUSE_DURATION_UPPER = 3000; // upper limit for pause duration

server/src/utils/constants.ts

@@ -1,4 +1,2 @@
 export const WORDS_PER_MS = 200 / 60000; // 200 words per minute to milliseconds
 export const MIN_DISPLAY_TIME = 2000; // Minimum display time of 2 seconds
-export const LIKES_INCREMENT_STEP = 8; // # of increment when displayed likes is less than finalLikes
-export const LIKES_INCREMENT_DELAY = 15; // displayed likes increases by LIKES_INCREMENT_STEP every LIKES_INCREMENT_DELAY millisecs