MVP

client/src/pages/SessionPictures.tsx

@@ -1,34 +1,55 @@
-import { Spin } from 'antd'
 import React, { useEffect, useState } from 'react'
-import { getClient } from '../api'
+import { Card, Spin } from 'antd'
+import { getSession } from '../api'
+import { client } from '../data'
+import settings from '../settings'
+import { url } from 'inspector'
 
 type Props = {
   clientId: string
 }
 
 export const SessionPictures = ({ clientId }: Props) => {
-  const [pics, setPics] = useState<string[] | null>(null)
+  const [urls, setUrls] = useState<string[] | null>(null)
 
   useEffect(() => {
     const get = async () => {
-      if (pics) return
-      const { photos } = await getClient(clientId)
-      if (photos.length) setPics(photos)
+      if (urls) return
+
+      const { photos } = await getSession(clientId)
+      if (photos.length) setUrls(photos)
     }
 
-    const interval = setInterval(get, 300)
+    const interval = setInterval(get, 5000)
 
     return () => clearInterval(interval)
-  }, [clientId, pics])
+  }, [clientId, urls])
+
+  const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''
+
+  if (!urls?.length) return null
 
   return (
     <div>
       <h3>Session Pictures</h3>
-      {pics ? (
-        pics.map((src) => <img id={src} src={src} alt="lol" />)
-      ) : (
-        <Spin />
-      )}
+      <div className="photo-wall">
+        {urls ? (
+          urls
+            .sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0]))
+            .map((src) => (
+              <Card className="photo" title={src.split('_')[0]}>
+                <img
+                  key={src}
+                  id={src}
+                  src={`${host}/output/${clientId}/${src}`}
+                  alt="lol"
+                />
+              </Card>
+            ))
+        ) : (
+          <Spin />
+        )}
+      </div>
     </div>
   )
 }