🥳

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>