🍊

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(
+ReactDOM.render(<App />, document.getElementById('root'))
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  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,7 +43,6 @@ export const Session = (props: Props) => {
 
   return (
     <Content>
-      <div className="site-page-header-ghost-wrapper">
       <PageHeader
         ghost={false}
         onBack={() => history.goBack()}
@@ -59,15 +58,20 @@ export const Session = (props: Props) => {
             Capture
           </Button>,
           <Popconfirm
+            key="retry"
             title="Re-capture set?"
             onConfirm={handleRestartSession}
           >
-              <Button key="retry" type="default" disabled={!active}>
+            <Button type="default" disabled={!active}>
               Retry Capture
             </Button>
           </Popconfirm>,
-            <Popconfirm title="Delete all photos?" onConfirm={handleNuke}>
+          <Popconfirm
-              <Button key="nuke" danger disabled={!active}>
+            key="nuke"
+            title="Delete all photos?"
+            onConfirm={handleNuke}
+          >
+            <Button danger disabled={!active}>
               Nuke Session
             </Button>
           </Popconfirm>,
@@ -82,8 +86,7 @@ export const Session = (props: Props) => {
           </Button>,
         ]}
       ></PageHeader>
-      </div>
+      <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)
+      const { photos } = await getClient(clientId)
-      if (previewPics) setPics(previewPics)
+      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>
   )
 }