server checking for 5 second

parent_app/package.json

@@ -16,7 +16,8 @@
     "react": "^18",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
-    "react-icons": "^5.3.0"
+    "react-icons": "^5.3.0",
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@types/node": "^20",

parent_app/src/app/list/page.tsx

@@ -1,72 +1,43 @@
-// app/page.tsx (or any page you'd like to use)
 'use client'
-import { useEffect, useState } from 'react';
+import useSWR from 'swr';
 import Card from '../../components/Card';
-import { convertISOToTime } from '@/utils/dateTimeConverter';
-import { convertISOToDate } from '@/utils/dateTimeConverter';
-
+import { convertISOToTime, convertISOToDate } from '@/utils/dateTimeConverter';
 
 type ImageData = {
   _id: string;
-  buffer: string; // Base64-encoded string
+  buffer: string;
   submittedAt: string;
-  weight: string; //weight --
-  face: string; // 1 if happy face, 0 if unhappy face
+  weight: string;
+  face: string;
 };
 
-
+const fetcher = (url: string) => fetch(url).then(res => res.json());
 
 const ImageGallery = () => {
-  const [images, setImages] = useState<ImageData[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchImages = async () => {
-      try {
-        const response = await fetch('/api/get-images');
-        const data = await response.json();
-        setImages(data);
-      } catch (error) {
-        console.error('Error fetching images:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchImages();
-  }, []);
+  const { data: images, error } = useSWR<ImageData[]>('/api/get-images', fetcher, {
+    refreshInterval: 5000, // Fetch data every 5 seconds
+  });
 
-  if (loading) {
-    return <p className="text-black">Loading images...</p>;
-  }
+  if (error) return <p className="text-black">Failed to load images.</p>;
+  if (!images) return <p className="text-black">Loading images...</p>;
 
   return (
     <div className='min-h-screen bg-gray-100 p-4'>
       <h1 className="text-black">Image Gallery</h1>
       <ul style={{ listStyleType: 'none', padding: 0 }}>
-        {/* {images.map((image) => (
-          <li key={image._id} style={{ marginBottom: '20px' }}>
-            <img
-              src={`data:image/png;base64,${image.buffer}`}
-              alt="Submitted"
-              style={{ width: '200px', height: '200px', objectFit: 'cover' }}
-            />
-            <p>Submitted at: {new Date(image.submittedAt).toLocaleString()}</p>
-          </li> 
-        ))} */}
         {images.map((image) => (
           <Card 
             key={image._id}
             image={image} 
             waga={image.weight} 
             godzina={convertISOToTime(image.submittedAt)} 
             data={convertISOToDate(image.submittedAt)} 
-            face={'1'} 
-            />
+            face={image.face} 
+          />
         ))}
       </ul>
     </div>
   );
 };
 
-export default ImageGallery;
+export default ImageGallery;