🧼

client/README.md

@@ -11,22 +11,21 @@ type Client = {
   name: string
   email: string
   phone: number
-  active_session: boolean
+  photos: string[]
 }
 ```
 
 post /api/clients -> create new client
-get /api/clients -> get client list
 get /api/clients/:id -> get client
 
-```ts
-type Session = string[] | null
-```
-
 post /api/clients/:id/session -> begin capture
-get /api/clients/:id/session -> get active sesion (list of preview photo locations)
 delete /api/clients/:id/session -> delete all current photos (for new capture)
 
+### Note Needed
+
+get /api/clients -> get client list
+get /api/clients/:id/session -> get active sesion (list of preview photo locations)
+
 ## Create Session
 
 Information gathering

client/src/api/index.ts

@@ -1,6 +1,6 @@
 import { Client } from '../types'
 import axios from 'axios'
-import { client, clients, session } from '../data'
+import { client, clients } from '../data'
 import settings from '../settings'
 
 const apiUrl = '/api'
@@ -20,19 +20,10 @@ export const getClient = async (id: string): Promise<Client> => {
   return res.data
 }
 export const startSession = async (clientId: string) => {
-  //
   const res = await axios.post(`${apiUrl}/clients/${clientId}/session`)
   return res.data // session data
 }
 
-export const getSession = async (
-  clientId: string,
-): Promise<null | string[]> => {
-  if (settings.env === 'jank') return session
-  const res = await axios.get(`${apiUrl}/clients/${clientId}/session`)
-  return res.data as null | string[]
-}
-
 export const killSession = async (clientId: string) => {
   await axios.delete(`${apiUrl}/clients/${clientId}/session`)
 }

client/src/data/index.ts

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

client/src/index.tsx

@@ -1,17 +1,18 @@
-import React from 'react';
+import React from 'react'
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
-import './index.css';
+import './index.css'
-import App from './App';
+import 'antd/dist/antd.css'
-import reportWebVitals from './reportWebVitals';
+import App from './App'
+import reportWebVitals from './reportWebVitals'
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
-);
+)
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()

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)
+      const { photos } = await getClient(clientId)
-      if (activeSession) setActive(true)
+      if (photos.length) setActive(true)
+      else message.info("Click 'Capture' to take a photo set!")
     }
 
     get()
   })
 
   return (
-    <div>
+    <Content>
-      <h1>Session for {clientId}</h1>
+      <div className="site-page-header-ghost-wrapper">
-      <button onClick={handleStartSession}>Capture</button>
+        <PageHeader
-      <div className="controls">
+          ghost={false}
-        <Button disabled={!active} onClick={handleRestartSession}>
+          onBack={() => history.goBack()}
-          Retry Capture
+          title={`Session for ${clientId}`}
-        </Button>
+          subTitle={`session has ${active ? 'started' : 'not started'}`}
-        <Button disabled={!active} onClick={handleNuke}>
+          extra={[
-          Nuke Session
+            <Button
-        </Button>
+              key="startsession"
-        <Button onClick={handleExit}>Exit Session</Button>
+              disabled={active}
-        {active && <SessionPictures clientId={clientId} />}
+              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>
   )
 }

client/src/types/index.ts

@@ -1,10 +1,10 @@
 export type Client = {
-  name: string;
+  name: string
-  email: string;
+  email: string
-  phone: number;
+  phone: number
-  activeSession?: boolean
+  photos: string[]
-};
+}
 
 export type Session = {
-  timestamp: number;
+  timestamp: number
-};
+}