⚡

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>
   )