add photo thumbnail to the top right corner

client/components/photo/photo.tsx

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

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>
     </>
   );