🍊

client/src/api/index.ts

@@ -5,7 +5,7 @@ import settings from '../settings'
 
 const apiUrl = '/api'
 
-export const createClient = async (body: Client) => {
+export const createClient = async (body: Omit<Client, 'photos'>) => {
   await axios.post(`${apiUrl}/clients`, body)
 }
 
@@ -20,12 +20,12 @@ 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`)
+  const res = await axios.post(`${apiUrl}/clients/${clientId}`)
   return res.data // session data
 }
 
 export const killSession = async (clientId: string) => {
-  await axios.delete(`${apiUrl}/clients/${clientId}/session`)
+  await axios.delete(`${apiUrl}/clients/${clientId}`)
 }
 
 export const restartSession = async (clientId: string) => {

client/src/index.tsx

@@ -5,12 +5,7 @@ import 'antd/dist/antd.css'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root'),
-)
+ReactDOM.render(<App />, document.getElementById('root'))
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

client/src/pages/Dashboard.tsx

@@ -1,3 +1,4 @@
+import { message } from 'antd'
 import { Content } from 'antd/lib/layout/layout'
 import React, { FormEvent } from 'react'
 import { useState } from 'react'
@@ -24,6 +25,7 @@ export const Dashboard = () => {
 
     if (phone.length < 10) {
       // helpful message
+      message.error('Check all fields!')
       setError('Phone number needs to be a length of at least 10')
       return
     }
@@ -44,6 +46,7 @@ export const Dashboard = () => {
         <label htmlFor="name">
           Name:
           <input
+            minLength={3}
             value={name}
             onChange={(e) => setName(e.target.value)}
             name="name"

client/src/pages/Session.tsx

@@ -2,7 +2,7 @@ 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, message, PageHeader, Popconfirm, Row } from 'antd'
+import { Button, Divider, message, PageHeader, Popconfirm, Row } from 'antd'
 import { Content } from 'antd/lib/layout/layout'
 
 type Props = RouteComponentProps<{ clientId: string }>
@@ -43,47 +43,50 @@ export const Session = (props: Props) => {
 
   return (
     <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>
-
+      <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
+            key="retry"
+            title="Re-capture set?"
+            onConfirm={handleRestartSession}
+          >
+            <Button type="default" disabled={!active}>
+              Retry Capture
+            </Button>
+          </Popconfirm>,
+          <Popconfirm
+            key="nuke"
+            title="Delete all photos?"
+            onConfirm={handleNuke}
+          >
+            <Button danger disabled={!active}>
+              Nuke Session
+            </Button>
+          </Popconfirm>,
+          <Button
+            key="finish"
+            ghost
+            type="primary"
+            disabled={!active}
+            onClick={handleExit}
+          >
+            Finish Session
+          </Button>,
+        ]}
+      ></PageHeader>
+      <Divider />
       <Row className="controls">
         {active && <SessionPictures clientId={clientId} />}
       </Row>

client/src/pages/SessionPictures.tsx

@@ -1,5 +1,6 @@
+import { Spin } from 'antd'
 import React, { useEffect, useState } from 'react'
-import { getSession } from '../api'
+import { getClient } from '../api'
 
 type Props = {
   clientId: string
@@ -11,8 +12,8 @@ export const SessionPictures = ({ clientId }: Props) => {
   useEffect(() => {
     const get = async () => {
       if (pics) return
-      const previewPics = await getSession(clientId)
-      if (previewPics) setPics(previewPics)
+      const { photos } = await getClient(clientId)
+      if (photos.length) setPics(photos)
     }
 
     const interval = setInterval(get, 300)
@@ -23,7 +24,11 @@ export const SessionPictures = ({ clientId }: Props) => {
   return (
     <div>
       <h3>Session Pictures</h3>
-      {pics && pics.map((src) => <img id={src} src={src} />)}
+      {pics ? (
+        pics.map((src) => <img id={src} src={src} alt="lol" />)
+      ) : (
+        <Spin />
+      )}
     </div>
   )
 }