💅

client/src/pages/Session.tsx

@@ -1,16 +1,10 @@
 import React, { useEffect, useState } from 'react'
 import { RouteComponentProps, useHistory } from 'react-router-dom'
 import { getClient, killSession, restartSession, startSession } from '../api'
-import { SessionPictures } from './SessionPictures'
-import {
-  Button,
-  Divider,
-  message,
-  PageHeader,
-  Popconfirm,
-  Row,
-  Tag,
-} from 'antd'
+import { SessionPictures } from '../components/SessionPictures'
+import { StatusChip } from '../components/StatusChip'
+
+import { Button, Divider, message, Popconfirm, Row, Typography } from 'antd'
 import { Content } from 'antd/lib/layout/layout'
 import { Client } from '../types'
 
@@ -59,50 +53,61 @@ export const Session = (props: Props) => {
 
   return (
     <Content>
-      <PageHeader
-        ghost={false}
-        onBack={() => history.goBack()}
-        title={`Session for ${clientId}`}
-        tags={active ? <Tag color="lime">Active</Tag> : <Tag>Inactive</Tag>}
-        subTitle={`session has ${active ? 'started' : 'not started'}`}
-        extra={[
-          <Button
-            key="startsession"
-            disabled={active}
-            type="primary"
-            onClick={handleStartSession}
-          >
-            Capture
-          </Button>,
-          <Popconfirm
-            key="retry"
-            title="Re-capture set?"
-            onConfirm={handleRestartSession}
-          >
-            <Button type="default" disabled={!active}>
-              Retry Capture
-            </Button>
-          </Popconfirm>,
-          <Popconfirm
-            key="nuke"
-            title="Delete all photos and return to dashboard?"
-            onConfirm={handleNuke}
-          >
-            <Button danger disabled={!active}>
-              Abort Session
-            </Button>
-          </Popconfirm>,
-          <Button
-            key="finish"
-            ghost
-            type="primary"
-            disabled={!active}
-            onClick={handleExit}
-          >
-            Finish Session
-          </Button>,
-        ]}
-      ></PageHeader>
+      <Row justify="center">
+        <Typography.Title>Client: {client?.name}</Typography.Title>
+      </Row>
+
+      <Row justify="space-around" style={{ width: '60%', margin: 'auto' }}>
+        <Typography.Text>
+          <strong>email:</strong> {client?.email}
+        </Typography.Text>
+        <Typography.Text>
+          <strong>phone:</strong> {client?.phone}
+        </Typography.Text>
+      </Row>
+      <Divider />
+
+      <Row justify="center" className="session-header">
+        <Button
+          key="startsession"
+          disabled={active}
+          type="primary"
+          onClick={handleStartSession}
+        >
+          Capture
+        </Button>
+        <Popconfirm
+          disabled={!active}
+          key="retry"
+          title="Re-capture set?"
+          onConfirm={handleRestartSession}
+        >
+          <Button type="default" disabled={!active}>
+            Retry Capture
+          </Button>
+        </Popconfirm>
+        <Popconfirm
+          key="nuke"
+          disabled={!active}
+          title="Delete all photos and return to dashboard?"
+          onConfirm={handleNuke}
+        >
+          <Button danger disabled={!active}>
+            Abort Session
+          </Button>
+        </Popconfirm>
+        <Button
+          key="finish"
+          ghost
+          type="primary"
+          disabled={!active}
+          onClick={handleExit}
+        >
+          Finish Session
+        </Button>
+        <StatusChip poll={true} />
+      </Row>
+
       <Divider />
       <Row className="controls">
         {active && <SessionPictures clientId={clientId} />}