🥳

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