🚀

client/src/pages/SessionPictures.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Card, Modal, Spin } from 'antd'
+import { Button, Card, message, Modal, PageHeader, Spin } from 'antd'
 import { getSession } from '../api'
 import settings from '../settings'
 
@@ -10,10 +10,20 @@ type Props = {
 export const SessionPictures = ({ clientId }: Props) => {
   const [urls, setUrls] = useState<string[] | null>(null)
   const [activeUrl, setActiveUrl] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const handleSync = async () => {
+    message.info('Syncing photos...')
+    const { photos } = await getSession(clientId)
+    if (photos.length) setUrls(photos)
+  }
 
   useEffect(() => {
     const get = async () => {
-      if (urls) return
+      if (urls && urls.length >= 89 * 2) {
+        setLoading(false)
+        return
+      }
 
       const { photos } = await getSession(clientId)
       if (photos.length) setUrls(photos)
@@ -46,27 +56,28 @@ export const SessionPictures = ({ clientId }: Props) => {
           alt="large image"
         ></img>
       </Modal>
-      <div>
-        <h3>Session Pictures</h3>
-        <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
-                    onClick={() => setActiveUrl(src)}
-                    key={src}
-                    id={src}
-                    src={`${host}/output/${clientId}/${src}`}
-                    alt="lol"
-                  />
-                </Card>
-              ))
-          ) : (
-            <Spin />
-          )}
-        </div>
+      <PageHeader
+        title="Session Pictures"
+        subTitle={`${urls.length}/${89 * 2} loaded`}
+      ></PageHeader>
+      <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
+                  onClick={() => setActiveUrl(src)}
+                  key={src}
+                  id={src}
+                  src={`${host}/output/${clientId}/${src}`}
+                  alt="lol"
+                />
+              </Card>
+            ))
+        ) : (
+          <Spin />
+        )}
       </div>
     </>
   )