🧼

client/src/pages/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { Content } from 'antd/lib/layout/layout'
 import React, { FormEvent } from 'react'
 import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
@@ -37,7 +38,7 @@ export const Dashboard = () => {
   }
 
   return (
-    <div>
+    <Content>
       <h1>Dashboard</h1>
       <form onSubmit={handleSubmit}>
         <label htmlFor="name">
@@ -72,6 +73,6 @@ export const Dashboard = () => {
         </button>
         {error && <p className="error">{error}</p>}
       </form>
-    </div>
+    </Content>
   )
 }

client/src/pages/Session.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { RouteComponentProps, useHistory } from 'react-router-dom'
 import { getClient, killSession, restartSession } from '../api'
 import { SessionPictures } from './SessionPictures'
-import { Button } from 'antd'
+import { Button, message, PageHeader, Popconfirm, Row } from 'antd'
+import { Content } from 'antd/lib/layout/layout'
 
 type Props = RouteComponentProps<{ clientId: string }>
 
@@ -32,27 +33,60 @@ export const Session = (props: Props) => {
 
   useEffect(() => {
     const get = async () => {
-      const { activeSession } = await getClient(clientId)
-      if (activeSession) setActive(true)
+      const { photos } = await getClient(clientId)
+      if (photos.length) setActive(true)
+      else message.info("Click 'Capture' to take a photo set!")
     }
 
     get()
   })
 
   return (
-    <div>
-      <h1>Session for {clientId}</h1>
-      <button onClick={handleStartSession}>Capture</button>
-      <div className="controls">
-        <Button disabled={!active} onClick={handleRestartSession}>
-          Retry Capture
-        </Button>
-        <Button disabled={!active} onClick={handleNuke}>
-          Nuke Session
-        </Button>
-        <Button onClick={handleExit}>Exit Session</Button>
-        {active && <SessionPictures clientId={clientId} />}
+    <Content>
+      <div className="site-page-header-ghost-wrapper">
+        <PageHeader
+          ghost={false}
+          onBack={() => history.goBack()}
+          title={`Session for ${clientId}`}
+          subTitle={`session has ${active ? 'started' : 'not started'}`}
+          extra={[
+            <Button
+              key="startsession"
+              disabled={active}
+              type="primary"
+              onClick={handleStartSession}
+            >
+              Capture
+            </Button>,
+            <Popconfirm
+              title="Re-capture set?"
+              onConfirm={handleRestartSession}
+            >
+              <Button key="retry" type="default" disabled={!active}>
+                Retry Capture
+              </Button>
+            </Popconfirm>,
+            <Popconfirm title="Delete all photos?" onConfirm={handleNuke}>
+              <Button key="nuke" danger disabled={!active}>
+                Nuke Session
+              </Button>
+            </Popconfirm>,
+            <Button
+              key="finish"
+              ghost
+              type="primary"
+              disabled={!active}
+              onClick={handleExit}
+            >
+              Finish Session
+            </Button>,
+          ]}
+        ></PageHeader>
       </div>
-    </div>
+
+      <Row className="controls">
+        {active && <SessionPictures clientId={clientId} />}
+      </Row>
+    </Content>
   )
 }