🥳

client/README.md

@@ -2,6 +2,31 @@
 
 # Requirements (pages)
 
+# Routes
+
+Client Datatype
+
+```ts
+type Client = {
+  name: string
+  email: string
+  phone: number
+  active_session: boolean
+}
+```
+
+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)
+
 ## Create Session
 
 Information gathering

client/src/App.tsx

@@ -10,10 +10,8 @@ function App() {
     <BrowserRouter>
       <div className="App">
         <Switch>
-          <Route path="/" component={Dashboard} />
           <Route path="/sessions/:clientId" component={Session} />
-          <p>landing page</p>
-          <p>session</p>
+          <Route exact path="/" component={Dashboard} />
         </Switch>
       </div>
     </BrowserRouter>

client/src/api/index.ts

@@ -1,33 +1,44 @@
-import settings from '../settings'
 import { Client } from '../types'
 import axios from 'axios'
+import { client, clients, session } from '../data'
 
-const { apiUrl } = settings
+const apiUrl = '/api'
 
 export const createClient = async (body: Client) => {
   await axios.post(`${apiUrl}/clients`, body)
 }
 
 export const getClients = async (): Promise<Client[]> => {
+  return clients
   const res = await axios.post<Client[]>(`${apiUrl}/clients`)
-  return res.data as Client[]
+  return res.data
 }
-
-export const beginCapture = async (clientId: string) => {
+export const getClient = async (id: string): Promise<Client> => {
+  return client
+  const res = await axios.post<Client>(`${apiUrl}/client/${id}`)
+  return res.data
+}
+export const startSession = async (clientId: string) => {
+  //
   const res = await axios.post(`${apiUrl}/clients/${clientId}/session`)
-  return res.data as string // capture id
+  return res.data // session data
 }
 
-export const getCapture = async (
+export const getSession = async (
   clientId: string,
 ): Promise<null | string[]> => {
+  return session
   const res = await axios.get(`${apiUrl}/clients/${clientId}/session`)
   return res.data as null | string[]
 }
 
-export const retryCapture = async (clientId: string) => {
+export const killSession = async (clientId: string) => {
   await axios.delete(`${apiUrl}/clients/${clientId}/session`)
-  await axios.post(`${apiUrl}/clients/${clientId}/session`)
+}
+
+export const restartSession = async (clientId: string) => {
+  await killSession(clientId)
+  await startSession(clientId)
 }
 
 export const cleanup = () => {

client/src/data/index.ts

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

client/src/index.css

@@ -11,3 +11,19 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+form {
+  display: flex;
+  max-width: 500px;
+  margin: auto;
+  flex-direction: column;
+}
+
+form label {
+  width: 100%; 
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin: auto;
+}
+

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('/')
+  }
+
+  const handleNuke = async () => {
+    await killSession(clientId)
+    history.push('/')
+  }
+
+  useEffect(() => {
+    const get = async () => {
+      const { activeSession } = await getClient(clientId)
+      if (activeSession) setSubmitted(true)
+    }
+
+    get()
+  })
 
-  return <div>Session {clientId}</div>
+  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>
+  )
+}

client/src/settings.ts

@@ -1,4 +1,4 @@
 export default {
-  apiUrl: "http://localhost/api",
+  env: 'jank',
   port: 4442,
-};
+}

client/src/types/index.ts

@@ -2,6 +2,7 @@ export type Client = {
   name: string;
   email: string;
   phone: number;
+  activeSession?: boolean
 };
 
 export type Session = {