34 add photo thumbnail to the UI

client/components/likes/likes.tsx

@@ -85,7 +85,7 @@ export const Likes = ({ finalLikes, onComplete }: LikesProps) => {
 
   return (
     <div className="w-full h-16 flex items-center justify-center">
-      <div className="flex items-center mt-8 relative -translate-x-32">
+      <div className="w-full h-16 flex items-center mt-8 justify-start transform translate-x-10">
         <h2 className={`font-bold ${isAnimating ? 'animate-pulse' : ''}`}>❤️</h2>
         <h2 className="font-bold ml-2 w-20 text-left">{animatedLikes}</h2>
       </div>

client/components/photo/photo.tsx

@@ -0,0 +1,9 @@
+export const Photo = ({ img }: { img: string }) => {
+  if (!img) return null;
+
+  return (
+    <div className="fixed top-4 right-4 border border-gray-300 shadow-md">
+      <img id="image" alt="Received image" src={img} width={400} height={400}/>
+    </div>
+  );
+};

client/pages/backend.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { socket } from '../utils/socket';
 import { ResponseData } from '../../shared/types';
-import Image from 'next/image';
 
 const Backend = () => {
   const [img, setImg] = useState<string>('');
@@ -41,7 +40,7 @@ const Backend = () => {
   return (
     <>
       <div>Welcome to the backend ui!</div>
-      {img && <Image id="image" alt="Received image" src={img} width={500} height={500} />}
+      {img && <img id="image" alt="Received image" src={img} width={500} height={500}/>}
     </>
   );
 };

client/pages/index.tsx

@@ -5,6 +5,7 @@ import CommentFeed from '@/components/comments/commentFeed';
 import { ResponseData } from '../../shared/types';
 import { LoadingOverlay } from '@/components/loadingOverlay/loadingOverlay';
 import { EndingOverlay } from '@/components/endingOverlay/endingOverlay';
+import { Photo } from '@/components/photo/photo';
 
 const Home = () => {
   const intervalRef = useRef<ReturnType<typeof setTimeout> | null>(null); // test timer
@@ -17,6 +18,7 @@ const Home = () => {
   const [commentsComplete, setCommentsComplete] = useState<boolean>(false);
 
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [img, setImg] = useState<string>('');
 
   useEffect(() => {
     console.log('Connecting Socket');
@@ -43,6 +45,11 @@ const Home = () => {
       }
     };
 
+    const onSendPhoto = (data: string) => {
+      console.log('Received image data');
+      setImg(`data:image/jpeg;base64,${data}`);
+    };
+
     const onErrorMessage = (msg: string) => {
       // on error take a new photo
       console.error(msg);
@@ -51,6 +58,7 @@ const Home = () => {
 
     socket.on('connect', onConnect);
     socket.on('api_response', onApiResonse);
+    socket.on('send_photo', onSendPhoto);
     socket.on('err_msg', onErrorMessage);
 
     return () => {
@@ -59,6 +67,7 @@ const Home = () => {
       // clean up socket event listeners
       socket.off('connect', onConnect);
       socket.off('api_response', onApiResonse);
+      socket.off('send_photo', onSendPhoto);
 
       if (intervalRef.current) {
         clearInterval(intervalRef.current);
@@ -76,7 +85,7 @@ const Home = () => {
       console.log('Likes and comments animation completed');
       setLikesComplete(false);
       setCommentsComplete(false);
-
+      setImg('');
       donePhoto();
     }
     // fire useEffect when either state vars change
@@ -129,6 +138,7 @@ const Home = () => {
             )}
           </>
         )}
+        {img && !(likesComplete && commentsComplete) && <Photo img={img} />}
       </div>
     </>
   );