MVP

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