dank swag pop and lolz

client/src/pages/Session.tsx

@@ -23,16 +23,17 @@ export const Session = (props: Props) => {
   const [active, setActive] = useState(false)
 
   const handleStartSession = async () => {
-    await startSession(clientId)
     message.loading('Photo sequence starting! Stand by...')
+    await startSession(clientId)
     setActive(true)
   }
 
   const handleRestartSession = async () => {
     setActive(false)
-    message.loading('Removing all photos...')
+    message.loading(
+      'Deleting photos & restarting capture sequence! Stand by...',
+    )
     await restartSession(clientId)
-    message.loading('Restarting capture sequence! Stand by...')
     setActive(true)
   }
 
@@ -42,6 +43,7 @@ export const Session = (props: Props) => {
 
   const handleNuke = async () => {
     await killSession(clientId)
+    message.success('Photos Deleted! Going back to dashboard')
     history.push('/')
   }
 

client/src/pages/SessionPictures.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { Card, Spin } from 'antd'
+import { Card, Modal, Spin } from 'antd'
 import { getSession } from '../api'
-import { client } from '../data'
 import settings from '../settings'
-import { url } from 'inspector'
 
 type Props = {
   clientId: string
@@ -11,6 +9,7 @@ type Props = {
 
 export const SessionPictures = ({ clientId }: Props) => {
   const [urls, setUrls] = useState<string[] | null>(null)
+  const [activeUrl, setActiveUrl] = useState<string | null>(null)
 
   useEffect(() => {
     const get = async () => {
@@ -20,36 +19,55 @@ export const SessionPictures = ({ clientId }: Props) => {
       if (photos.length) setUrls(photos)
     }
 
-    const interval = setInterval(get, 5000)
+    const interval = setInterval(get, 250)
 
     return () => clearInterval(interval)
   }, [clientId, urls])
 
+  const closeModal = () => setActiveUrl(null)
+
   const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''
 
   if (!urls?.length) return null
 
   return (
-    <div>
+    <>
-      <h3>Session Pictures</h3>
+      <Modal
-      <div className="photo-wall">
+        visible={!!activeUrl}
-        {urls ? (
+        onOk={closeModal}
-          urls
+        cancelText={null}
-            .sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0]))
+        onCancel={closeModal}
-            .map((src) => (
+        width="50%"
-              <Card className="photo" title={src.split('_')[0]}>
+      >
-                <img
+        <img
-                  key={src}
+          width="100%"
-                  id={src}
+          onClick={closeModal}
-                  src={`${host}/output/${clientId}/${src}`}
+          src={`${host}/output/${clientId}/${activeUrl}`}
-                  alt="lol"
+          alt="large image"
-                />
+        ></img>
-              </Card>
+      </Modal>
-            ))
+      <div>
-        ) : (
+        <h3>Session Pictures</h3>
-          <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
+                    onClick={() => setActiveUrl(src)}
+                    key={src}
+                    id={src}
+                    src={`${host}/output/${clientId}/${src}`}
+                    alt="lol"
+                  />
+                </Card>
+              ))
+          ) : (
+            <Spin />
+          )}
+        </div>
       </div>
-    </div>
+    </>
   )
 }