diff --git a/client/src/App.css b/client/src/App.css index d068295..6a0c5d8 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -40,3 +40,17 @@ .error { color: red; } + +.photo-wall { + display: flex; + flex-wrap: wrap; + margin: 2rem; +} + +.ant-card { + margin: 1rem; +} + +.ant-card img { + max-width: 250px; +} diff --git a/client/src/api/index.ts b/client/src/api/index.ts index fb4c1bd..7d1ad0d 100644 --- a/client/src/api/index.ts +++ b/client/src/api/index.ts @@ -1,31 +1,35 @@ import { Client } from '../types' import axios from 'axios' -import { client, clients } from '../data' import settings from '../settings' -const apiUrl = '/api' - -export const createClient = async (body: Omit) => { - await axios.post(`${apiUrl}/clients`, body) +if (settings.env === 'jank') { + const host = 'http://192.168.1.107:5000' + axios.defaults.baseURL = host } -export const getClients = async (): Promise => { - if (settings.env === 'jank') return clients - const res = await axios.post(`${apiUrl}/clients`) - return res.data +export const createClient = async (body: Omit) => { + const res = await axios.post<{ client_id: string }>(`/api/clients`, body) + return res.data.client_id } + export const getClient = async (id: string): Promise => { - if (settings.env === 'jank') return client - const res = await axios.post(`${apiUrl}/client/${id}`) + const res = await axios.get(`/api/clients/${id}`) return res.data } export const startSession = async (clientId: string) => { - const res = await axios.post(`${apiUrl}/clients/${clientId}`) + const res = await axios.post(`/api/clients/${clientId}/session`) + return res.data // session data +} + +export const getSession = async (clientId: string) => { + const res = await axios.get<{ photos: string[] }>( + `/api/clients/${clientId}/session`, + ) return res.data // session data } export const killSession = async (clientId: string) => { - await axios.delete(`${apiUrl}/clients/${clientId}`) + await axios.delete(`/api/clients/${clientId}/session`) } export const restartSession = async (clientId: string) => { @@ -33,6 +37,13 @@ export const restartSession = async (clientId: string) => { await startSession(clientId) } +// Someday + +export const getClients = async (): Promise => { + const res = await axios.get(`/api/clients`) + return res.data +} + export const cleanup = () => { // send } diff --git a/client/src/data/index.ts b/client/src/data/index.ts index 2cbccc5..3064c0d 100644 --- a/client/src/data/index.ts +++ b/client/src/data/index.ts @@ -5,18 +5,17 @@ export const clients: Client[] = [ name: 'Elijah', email: 'elijah@elijah.com', phone: 4039876543, - photos: [], + has_photos: false, }, { name: 'Tanner', email: 'tanner@tanner.com', phone: 4031234567, - photos: [ - '/images/1.jpg', - '/images/2.jpg', - '/images/3.jpg', - '/images/4.jpg', - ], + has_photos: true, }, ] export const client: Client = clients[0] + +export const session: { photos: string[] } = { + photos: ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg'], +} diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx index adceed6..10add71 100644 --- a/client/src/pages/Dashboard.tsx +++ b/client/src/pages/Dashboard.tsx @@ -4,7 +4,6 @@ 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() @@ -30,13 +29,13 @@ export const Dashboard = () => { return } - if (settings.env === 'jank') { - history.push(`/sessions/${phone}`) - return - } + const client_id = await createClient({ + name, + email, + phone: parseInt(phone), + }) - await createClient({ name, email, phone: parseInt(phone) }) - history.push(`/sessions/${phone}`) + history.push(`/sessions/${client_id}`) } return ( diff --git a/client/src/pages/Session.tsx b/client/src/pages/Session.tsx index c30f84e..4d73cce 100644 --- a/client/src/pages/Session.tsx +++ b/client/src/pages/Session.tsx @@ -1,24 +1,38 @@ import React, { useEffect, useState } from 'react' import { RouteComponentProps, useHistory } from 'react-router-dom' -import { getClient, killSession, restartSession } from '../api' +import { getClient, killSession, restartSession, startSession } from '../api' import { SessionPictures } from './SessionPictures' -import { Button, Divider, message, PageHeader, Popconfirm, Row } from 'antd' +import { + Button, + Divider, + message, + PageHeader, + Popconfirm, + Row, + Tag, +} from 'antd' import { Content } from 'antd/lib/layout/layout' +import { Client } from '../types' type Props = RouteComponentProps<{ clientId: string }> export const Session = (props: Props) => { const history = useHistory() const { clientId } = props.match.params + const [client, setClient] = useState(null) const [active, setActive] = useState(false) const handleStartSession = async () => { + await startSession(clientId) + message.loading('Photo sequence starting! Stand by...') setActive(true) } const handleRestartSession = async () => { setActive(false) + message.loading('Removing all photos...') await restartSession(clientId) + message.loading('Restarting capture sequence! Stand by...') setActive(true) } @@ -33,13 +47,13 @@ export const Session = (props: Props) => { useEffect(() => { const get = async () => { - const { photos } = await getClient(clientId) - if (photos.length) setActive(true) - else message.info("Click 'Capture' to take a photo set!") + const client = await getClient(clientId) + setClient(client) + if (client.has_photos) setActive(true) } get() - }) + }, [clientId]) return ( @@ -47,6 +61,7 @@ export const Session = (props: Props) => { ghost={false} onBack={() => history.goBack()} title={`Session for ${clientId}`} + tags={active ? Active : Inactive} subTitle={`session has ${active ? 'started' : 'not started'}`} extra={[