⚡

client/src/App.css

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+.error {
+  color: red;
+}

client/src/pages/Dashboard.tsx

@@ -6,6 +6,7 @@ import settings from '../settings'
 
 export const Dashboard = () => {
   const history = useHistory()
+  const [error, setError] = useState<string | null>(null)
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [phone, setPhone] = useState('')
@@ -20,6 +21,12 @@ export const Dashboard = () => {
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault()
 
+    if (phone.length < 10) {
+      // helpful message
+      setError('Phone number needs to be a length of at least 10')
+      return
+    }
+
     if (settings.env === 'jank') {
       history.push(`/sessions/${phone}`)
       return
@@ -63,8 +70,8 @@ export const Dashboard = () => {
         <button type="button" onClick={handleReset}>
           Reset
         </button>
+        {error && <p className="error">{error}</p>}
       </form>
-      <div>TODO: List of past sessions for review?</div>
     </div>
   )
 }

client/src/pages/Session.tsx

@@ -1,14 +1,25 @@
 import React, { useEffect, useState } from 'react'
 import { RouteComponentProps, useHistory } from 'react-router-dom'
-import { getClient, killSession } from '../api'
+import { getClient, killSession, restartSession } from '../api'
 import { SessionPictures } from './SessionPictures'
+import { Button } from 'antd'
 
 type Props = RouteComponentProps<{ clientId: string }>
 
 export const Session = (props: Props) => {
   const history = useHistory()
   const { clientId } = props.match.params
-  const [submitted, setSubmitted] = useState(false)
+  const [active, setActive] = useState(false)
+
+  const handleStartSession = async () => {
+    setActive(true)
+  }
+
+  const handleRestartSession = async () => {
+    setActive(false)
+    await restartSession(clientId)
+    setActive(true)
+  }
 
   const handleExit = async () => {
     history.push('/')
@@ -22,7 +33,7 @@ export const Session = (props: Props) => {
   useEffect(() => {
     const get = async () => {
       const { activeSession } = await getClient(clientId)
-      if (activeSession) setSubmitted(true)
+      if (activeSession) setActive(true)
     }
 
     get()
@@ -31,11 +42,16 @@ export const Session = (props: Props) => {
   return (
     <div>
       <h1>Session for {clientId}</h1>
-      <button>Capture</button>
-      {submitted && <SessionPictures clientId={clientId} />}
+      <button onClick={handleStartSession}>Capture</button>
       <div className="controls">
-        <button onClick={handleNuke}>Nuke Session</button>
-        <button onClick={handleExit}>Exit Session</button>
+        <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} />}
       </div>
     </div>
   )

client/src/settings.ts

@@ -1,3 +1,3 @@
 export default {
-  env: 'prod',
+  env: 'jank',
 }