💅

2021-03-10 19:17:23 -07:00
parent 15023b0e24
commit c29a64b1cc
24 changed files with 220 additions and 155 deletions
@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react'
+import { Card, message, Modal, PageHeader, Spin } from 'antd'
+import { getSession } from '../api'
+
+type Props = {
+  clientId: string
+}
+
+export const SessionPictures = ({ clientId }: Props) => {
+  const [urls, setUrls] = useState<string[] | null>(null)
+  const [activeUrl, setActiveUrl] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const get = async () => {
+      if (urls && urls.length >= 89 * 1) {
+        return
+      }
+
+      const { photos } = await getSession(clientId)
+      if (photos.length) setUrls(photos)
+    }
+
+    const interval = setInterval(get, 250)
+
+    return () => clearInterval(interval)
+  }, [clientId, urls])
+
+  const closeModal = () => setActiveUrl(null)
+
+  const host =
+    process.env.NODE_ENV === 'development' ? 'http://192.168.1.107:5000' : ''
+
+  if (!urls?.length) return null
+
+  return (
+    <>
+      <Modal
+        visible={!!activeUrl}
+        onOk={closeModal}
+        cancelText={null}
+        onCancel={closeModal}
+        width="50%"
+      >
+        <img
+          width="100%"
+          onClick={closeModal}
+          src={`${host}/output/${clientId}/${activeUrl}`}
+          alt="large modal"
+        ></img>
+      </Modal>
+      <PageHeader
+        title="Session Pictures"
+        subTitle={`${urls.length}/${89 * 1} loaded`}
+      >
+        <div className="loading-bar-container">
+          <div className="loading-bar"></div>
+        </div>
+      </PageHeader>
+      <div className="photo-wall">
+        {urls ? (
+          urls
+            .sort((a, b) => a.split('_')[0].localeCompare(b.split('_')[0]))
+            .map((src) => (
+              <Card key={src} className="photo" title={src.split('_')[0]}>
+                <img
+                  onClick={() => setActiveUrl(src)}
+                  src={`${host}/output/${clientId}/${src}`}
+                  alt="lol"
+                />
+              </Card>
+            ))
+        ) : (
+          <Spin />
+        )}
+      </div>
+    </>
+  )
+}