🥳

client/src/pages/Dashboard.tsx

@@ -1,7 +1,9 @@
-import React from 'react'
+import { env } from 'process'
+import React, { FormEvent } from 'react'
 import { useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { createClient } from '../api'
+import settings from '../settings'
 
 export const Dashboard = () => {
   const history = useHistory()
@@ -11,12 +13,20 @@ export const Dashboard = () => {
 
   const handleReset = () => {
     //
+    setName('')
+    setEmail('')
+    setPhone('')
   }
 
-  const handleSubmit = async () => {
-    // phone number is stripped for numbers
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault()
 
-    await createClient({ name, email, phone })
+    if (settings.env === 'jank') {
+      history.push(`/sessions/${phone}`)
+      return
+    }
+
+    await createClient({ name, email, phone: parseInt(phone) })
     history.push(`/sessions/${phone}`)
   }
 
@@ -26,18 +36,34 @@ export const Dashboard = () => {
       <form onSubmit={handleSubmit}>
         <label htmlFor="name">
           Name:
-          <input type="text" name="name" />
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            name="name"
+          />
         </label>
         <label htmlFor="email">
           Email:
-          <input type="email" name="email" />
+          <input
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            type="email"
+            name="email"
+          />
         </label>
         <label htmlFor="phone">
           Phone:
-          <input type="phone" name="phone" />
+          <input
+            value={phone}
+            onChange={(e) => setPhone(e.target.value)}
+            type="tel"
+            name="phone"
+          />
         </label>
         <button type="submit">Start Session</button>
-        <button onClick={handleReset}>Reset</button>
+        <button type="button" onClick={handleReset}>
+          Reset
+        </button>
       </form>
       <div>TODO: List of past sessions for review?</div>
     </div>

client/src/pages/Session.tsx

@@ -1,15 +1,43 @@
-import React from 'react'
-import { useEffect } from 'react'
-import { RouteComponentProps } from 'react-router-dom'
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+import { RouteComponentProps, useHistory } from 'react-router-dom'
+import { getClient, killSession } from '../api'
+import { SessionPictures } from './SessionPictures'
 
 type Props = RouteComponentProps<{ clientId: string }>
 
 export const Session = (props: Props) => {
+  const history = useHistory()
   const { clientId } = props.match.params
-
   const [submitted, setSubmitted] = useState(false)
 
-  useEffect(() => {})
+  const handleExit = async () => {
+    history.push('/')
+  }
 
-  return <div>Session {clientId}</div>
+  const handleNuke = async () => {
+    await killSession(clientId)
+    history.push('/')
+  }
+
+  useEffect(() => {
+    const get = async () => {
+      const { activeSession } = await getClient(clientId)
+      if (activeSession) setSubmitted(true)
+    }
+
+    get()
+  })
+
+  return (
+    <div>
+      <h1>Session for {clientId}</h1>
+      <button>Capture</button>
+      {submitted && <SessionPictures clientId={clientId} />}
+      <div className="controls">
+        <button onClick={handleNuke}>Nuke Session</button>
+        <button onClick={handleExit}>Exit Session</button>
+      </div>
+    </div>
+  )
 }

client/src/pages/SessionPictures.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import { getSession } from '../api'
+
+type Props = {
+  clientId: string
+}
+
+export const SessionPictures = ({ clientId }: Props) => {
+  const [pics, setPics] = useState<string[] | null>(null)
+
+  useEffect(() => {
+    const get = async () => {
+      if (pics) return
+      const previewPics = await getSession(clientId)
+      if (previewPics) setPics(previewPics)
+    }
+
+    const interval = setInterval(get, 300)
+
+    return () => clearInterval(interval)
+  }, [clientId, pics])
+
+  return (
+    <div>
+      <h3>Session Pictures</h3>
+      {pics && pics.map((src) => <img id={src} src={src} />)}
+    </div>
+  )
+}