🚀

client/src/api/index.ts

@@ -37,6 +37,8 @@ export const restartSession = async (clientId: string) => {
   await startSession(clientId)
 }
 
+// TOOD: Get status
+
 // Someday
 
 export const getClients = async (): Promise<Client[]> => {

client/src/pages/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { message } from 'antd'
+import { Button, Divider, message, PageHeader } from 'antd'
 import { Content } from 'antd/lib/layout/layout'
 import React, { FormEvent } from 'react'
 import { useState } from 'react'
@@ -40,7 +40,11 @@ export const Dashboard = () => {
 
   return (
     <Content>
-      <h1>Dashboard</h1>
+      <PageHeader
+        title="Dashboard"
+        subTitle="Enter the name, email and phone number of the subject"
+      ></PageHeader>
+      <Divider />
       <form onSubmit={handleSubmit}>
         <label htmlFor="name">
           Name:
@@ -69,10 +73,12 @@ export const Dashboard = () => {
             name="phone"
           />
         </label>
-        <button type="submit">Start Session</button>
-        <button type="button" onClick={handleReset}>
+        <Button danger onClick={handleReset}>
           Reset
-        </button>
+        </Button>
+        <Button htmlType="submit" type="primary">
+          Start Session
+        </Button>
         {error && <p className="error">{error}</p>}
       </form>
     </Content>

client/src/pages/Session.tsx

@@ -85,11 +85,11 @@ export const Session = (props: Props) => {
           </Popconfirm>,
           <Popconfirm
             key="nuke"
-            title="Delete all photos?"
+            title="Delete all photos and return to dashboard?"
             onConfirm={handleNuke}
           >
             <Button danger disabled={!active}>
-              Nuke Session
+              Abort Session
             </Button>
           </Popconfirm>,
           <Button
@@ -105,7 +105,7 @@ export const Session = (props: Props) => {
       ></PageHeader>
       <Divider />
       <Row className="controls">
-        <SessionPictures clientId={clientId} />
+        {active && <SessionPictures clientId={clientId} />}
       </Row>
     </Content>
   )

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