modifying main page to prevent taking photo on timer, and instead tak…

…ing another photo once likes and comment animations are complete.

adding an onComplete function prop to likes and commentFeed component

client/components/comments/commentFeed.tsx

@@ -1,18 +1,26 @@
 // src/components/CommentFeed.tsx
-import React, { useState, useEffect, use } from 'react';
+import React, { useState, useEffect } from 'react';
 import Comment from '@/components/comments/comment';
 import { motion, AnimatePresence } from 'framer-motion';
 import { CommentType } from '../../../shared/types';
 
 interface CommentFeedProps {
   comments: CommentType[];
+  onComplete: () => void;
 }
 
-const CommentFeed: React.FC<CommentFeedProps> = ({ comments }) => {
+const CommentFeed: React.FC<CommentFeedProps> = ({ comments, onComplete }) => {
   const [displayedComments, setDisplayedComments] = useState<CommentType[]>([]);
   const [commentsIndex, setCommentsIndex] = useState(0);
 
   useEffect(() => {
+    // TODO: remove setTimeout and call this in the right place after all comments have been previewed and faded off the screen
+    // idea: check the comments index
+    setTimeout(() => {
+      console.log('Comments animations complete');
+      onComplete();
+    }, 15_000);
+
     const interval = setInterval(() => {
       setCommentsIndex((prevCommentsIndex) => {
         return prevCommentsIndex + 1;

client/components/likes/likes.tsx

@@ -4,12 +4,22 @@ import { LikesDisplay } from './likesDisplay';
 
 interface LikesProps {
   finalLikes: number;
+  onComplete: () => void;
 }
 
-export const Likes = ({ finalLikes }: LikesProps) => {
+export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
   const [animatedLikes, setAnimatedLikes] = useState<number>(0);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
 
+  useEffect(() => {
+    // TODO: remove setTimeout and call this in the right place after countdown has completed
+    // idea: probably add this when the animated likes has reached final likes
+    setTimeout(() => {
+      console.log('Likes animations complete');
+      onComplete();
+    }, 8_000);
+  }, []);
+
   useEffect(() => {
     let incrementTimeoutId: ReturnType<typeof setTimeout>;
     let pauseTimeoutId: ReturnType<typeof setTimeout>;

client/pages/index.tsx

@@ -9,9 +9,39 @@ const Home = () => {
   const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null); // test timer
 
   // state to determine if we're displaying stuff (true) or not (false)
-  const [display, setDisplay] = useState<ResponseData | undefined>();
+  const [display, setDisplay] = useState<ResponseData | void>();
   const [finalLikes, setFinalLikes] = useState<number>(0);
 
+  // state variables to indicate completed animations
+  const [likesComplete, setLikesComplete] = useState<boolean>(false);
+  const [commentsComplete, setCommentsComplete] = useState<boolean>(false);
+
+  const takePhoto = () => {
+    console.log('Taking a photo...');
+    socket.emit('take_photo');
+  };
+
+  const donePhoto = () => {
+    console.log('Completed displaying all comments and likes');
+    console.log('Clearing display');
+    setDisplay();
+
+    setTimeout(() => {
+      console.log('5s passed taking a new photo');
+      takePhoto();
+      // TODO: declare this as a const, e.g., WAIT_TIME or better name
+      // time we want to wait/stall after the last photo is taken
+    }, 5000);
+  };
+
+  const onLikesComplete = () => {
+    setLikesComplete(true);
+  };
+
+  const onCommentsComplete = () => {
+    setCommentsComplete(true);
+  };
+
   useEffect(() => {
     console.log('Connecting Socket');
 
@@ -30,24 +60,8 @@ const Home = () => {
     socket.on('connect', onConnect);
     socket.on('api_response', onApiResonse);
 
-    const takePhoto = () => {
-      console.log('Taking a photo...');
-      socket.emit('take_photo');
-    };
-
-    const donePhoto = () => {
-      console.log('Completed displaying all comments and likes');
-      // setDisplayState(false);
-    };
-
-    // set timer -> used for testing (comments/likes process should take two mins)
-    intervalRef.current = setInterval(
-      () => {
-        takePhoto();
-        setTimeout(donePhoto, 2 * 1 * 1000);
-      },
-      1 * 20 * 1000,
-    );
+    // take the first photo
+    takePhoto();
 
     return () => {
       console.log('Unmounting Component');
@@ -64,16 +78,27 @@ const Home = () => {
 
   useEffect(() => {
     // runs every time displayState changes
-    console.log('display changed', display);
+    // console.log('display changed', display);
   }, [display]);
 
+  useEffect(() => {
+    if (likesComplete && commentsComplete) {
+      console.log('Likes and comments animation completed');
+      setLikesComplete(false);
+      setCommentsComplete(false);
+
+      donePhoto();
+    }
+    // fire useEffect when either state vars change
+  }, [likesComplete, commentsComplete]);
+
   return (
     <>
       <div className="w-screen h-screen flex flex-col justify-between items-center bg-cover bg-center h-screen">
         {display ? (
           <>
-            <Likes finalLikes={finalLikes}></Likes>
-            <CommentFeed comments={display.comments}></CommentFeed>
+            <Likes finalLikes={finalLikes} onComplete={onLikesComplete}></Likes>
+            <CommentFeed comments={display.comments} onComplete={onCommentsComplete}></CommentFeed>
           </>
         ) : (
           <></>