3Dshock/client/src/components/SessionPictures.tsx

import React, { useEffect, useState } from 'react'
import { Card, message, Modal, PageHeader, Row, Spin, Typography } 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

  const u = urls.length / 89

  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>
      <Row align="middle" justify="center">
        <Typography.Title level={3}>Session Pictures</Typography.Title>
        <Typography.Text>{urls.length}/ 89 loaded</Typography.Text>
      </Row>

      <div className="loading-bar-container">
        <div
          className="loading-bar"
          style={{
            width: `${u * 100}%`,
            background: `hsl(${Math.floor(1 * 120)}, 90%, 70%)`,
          }}
        ></div>
      </div>
      <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>
    </>
  )
}