MVP

client/src/App.css

@@ -40,3 +40,17 @@
 .error {
   color: red;
 }
+
+.photo-wall {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 2rem;
+}
+
+.ant-card {
+  margin: 1rem;
+}
+
+.ant-card img {
+  max-width: 250px;
+}

client/src/api/index.ts

@@ -1,31 +1,35 @@
 import { Client } from '../types'
 import axios from 'axios'
-import { client, clients } from '../data'
 import settings from '../settings'
 
-const apiUrl = '/api'
-
-export const createClient = async (body: Omit<Client, 'photos'>) => {
-  await axios.post(`${apiUrl}/clients`, body)
+if (settings.env === 'jank') {
+  const host = 'http://192.168.1.107:5000'
+  axios.defaults.baseURL = host
 }
 
-export const getClients = async (): Promise<Client[]> => {
-  if (settings.env === 'jank') return clients
-  const res = await axios.post<Client[]>(`${apiUrl}/clients`)
-  return res.data
+export const createClient = async (body: Omit<Client, 'has_photos'>) => {
+  const res = await axios.post<{ client_id: string }>(`/api/clients`, body)
+  return res.data.client_id
 }
+
 export const getClient = async (id: string): Promise<Client> => {
-  if (settings.env === 'jank') return client
-  const res = await axios.post<Client>(`${apiUrl}/client/${id}`)
+  const res = await axios.get<Client>(`/api/clients/${id}`)
   return res.data
 }
 export const startSession = async (clientId: string) => {
-  const res = await axios.post(`${apiUrl}/clients/${clientId}`)
+  const res = await axios.post(`/api/clients/${clientId}/session`)
+  return res.data // session data
+}
+
+export const getSession = async (clientId: string) => {
+  const res = await axios.get<{ photos: string[] }>(
+    `/api/clients/${clientId}/session`,
+  )
   return res.data // session data
 }
 
 export const killSession = async (clientId: string) => {
-  await axios.delete(`${apiUrl}/clients/${clientId}`)
+  await axios.delete(`/api/clients/${clientId}/session`)
 }
 
 export const restartSession = async (clientId: string) => {
@@ -33,6 +37,13 @@ export const restartSession = async (clientId: string) => {
   await startSession(clientId)
 }
 
+// Someday
+
+export const getClients = async (): Promise<Client[]> => {
+  const res = await axios.get<Client[]>(`/api/clients`)
+  return res.data
+}
+
 export const cleanup = () => {
   // send
 }

client/src/data/index.ts

@@ -5,18 +5,17 @@ export const clients: Client[] = [
     name: 'Elijah',
     email: 'elijah@elijah.com',
     phone: 4039876543,
-    photos: [],
+    has_photos: false,
   },
   {
     name: 'Tanner',
     email: 'tanner@tanner.com',
     phone: 4031234567,
-    photos: [
-      '/images/1.jpg',
-      '/images/2.jpg',
-      '/images/3.jpg',
-      '/images/4.jpg',
-    ],
+    has_photos: true,
   },
 ]
 export const client: Client = clients[0]
+
+export const session: { photos: string[] } = {
+  photos: ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg'],
+}

client/src/pages/Dashboard.tsx

@@ -4,7 +4,6 @@ import React, { FormEvent } from 'react'
 import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { createClient } from '../api'
-import settings from '../settings'
 
 export const Dashboard = () => {
   const history = useHistory()
@@ -30,13 +29,13 @@ export const Dashboard = () => {
       return
     }
 
-    if (settings.env === 'jank') {
-      history.push(`/sessions/${phone}`)
-      return
-    }
+    const client_id = await createClient({
+      name,
+      email,
+      phone: parseInt(phone),
+    })
 
-    await createClient({ name, email, phone: parseInt(phone) })
-    history.push(`/sessions/${phone}`)
+    history.push(`/sessions/${client_id}`)
   }
 
   return (

client/src/pages/Session.tsx

@@ -1,24 +1,38 @@
 import React, { useEffect, useState } from 'react'
 import { RouteComponentProps, useHistory } from 'react-router-dom'
-import { getClient, killSession, restartSession } from '../api'
+import { getClient, killSession, restartSession, startSession } from '../api'
 import { SessionPictures } from './SessionPictures'
-import { Button, Divider, message, PageHeader, Popconfirm, Row } from 'antd'
+import {
+  Button,
+  Divider,
+  message,
+  PageHeader,
+  Popconfirm,
+  Row,
+  Tag,
+} from 'antd'
 import { Content } from 'antd/lib/layout/layout'
+import { Client } from '../types'
 
 type Props = RouteComponentProps<{ clientId: string }>
 
 export const Session = (props: Props) => {
   const history = useHistory()
   const { clientId } = props.match.params
+  const [client, setClient] = useState<Client | null>(null)
   const [active, setActive] = useState(false)
 
   const handleStartSession = async () => {
+    await startSession(clientId)
+    message.loading('Photo sequence starting! Stand by...')
     setActive(true)
   }
 
   const handleRestartSession = async () => {
     setActive(false)
+    message.loading('Removing all photos...')
     await restartSession(clientId)
+    message.loading('Restarting capture sequence! Stand by...')
     setActive(true)
   }
 
@@ -33,13 +47,13 @@ export const Session = (props: Props) => {
 
   useEffect(() => {
     const get = async () => {
-      const { photos } = await getClient(clientId)
-      if (photos.length) setActive(true)
-      else message.info("Click 'Capture' to take a photo set!")
+      const client = await getClient(clientId)
+      setClient(client)
+      if (client.has_photos) setActive(true)
     }
 
     get()
-  })
+  }, [clientId])
 
   return (
     <Content>
@@ -47,6 +61,7 @@ export const Session = (props: Props) => {
         ghost={false}
         onBack={() => history.goBack()}
         title={`Session for ${clientId}`}
+        tags={active ? <Tag color="lime">Active</Tag> : <Tag>Inactive</Tag>}
         subTitle={`session has ${active ? 'started' : 'not started'}`}
         extra={[
           <Button
@@ -88,7 +103,7 @@ export const Session = (props: Props) => {
       ></PageHeader>
       <Divider />
       <Row className="controls">
-        {active && <SessionPictures clientId={clientId} />}
+        <SessionPictures clientId={clientId} />
       </Row>
     </Content>
   )

client/src/pages/SessionPictures.tsx

@@ -1,34 +1,55 @@
-import { Spin } from 'antd'
 import React, { useEffect, useState } from 'react'
-import { getClient } from '../api'
+import { Card, Spin } from 'antd'
+import { getSession } from '../api'
+import { client } from '../data'
+import settings from '../settings'
+import { url } from 'inspector'
 
 type Props = {
   clientId: string
 }
 
 export const SessionPictures = ({ clientId }: Props) => {
-  const [pics, setPics] = useState<string[] | null>(null)
+  const [urls, setUrls] = useState<string[] | null>(null)
 
   useEffect(() => {
     const get = async () => {
-      if (pics) return
-      const { photos } = await getClient(clientId)
-      if (photos.length) setPics(photos)
+      if (urls) return
+
+      const { photos } = await getSession(clientId)
+      if (photos.length) setUrls(photos)
     }
 
-    const interval = setInterval(get, 300)
+    const interval = setInterval(get, 5000)
 
     return () => clearInterval(interval)
-  }, [clientId, pics])
+  }, [clientId, urls])
+
+  const host = settings.env === 'jank' ? 'http://192.168.1.107:5000' : ''
+
+  if (!urls?.length) return null
 
   return (
     <div>
       <h3>Session Pictures</h3>
-      {pics ? (
-        pics.map((src) => <img id={src} src={src} alt="lol" />)
-      ) : (
-        <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
+                  key={src}
+                  id={src}
+                  src={`${host}/output/${clientId}/${src}`}
+                  alt="lol"
+                />
+              </Card>
+            ))
+        ) : (
+          <Spin />
+        )}
+      </div>
     </div>
   )
 }

client/src/types/index.ts

@@ -2,7 +2,7 @@ export type Client = {
   name: string
   email: string
   phone: number
-  photos: string[]
+  has_photos: boolean
 }
 
 export type Session = {