Skip to content

Commit

Permalink
add timeline to patient create subscription sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rost-is-love
Rost-is-love committed Jun 28, 2023
1 parent bd85299 commit 43f78f9
Show file tree
Hide file tree
Showing 9 changed files with 1,827 additions and 1,837 deletions.
2 changes: 1 addition & 1 deletion examples/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
"react-hooks"
],
"rules": {
"react/no-unescaped-entities": "off",
"indent": "off",
"@typescript-eslint/indent": ["warn", 2],
"react/prop-types": 0,
"import/order": [
"warn",
Expand Down
6 changes: 3 additions & 3 deletions examples/aidbox-subscription/backend/endpoints.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { sqsClient } from './sqs.js'
const handleCreatePatient = async (data: string) => {
const patient = JSON.parse(data).resource
handleSocket('subs_notification_patient', patient.id)
console.log(patient.id)
const event = 'create-patient'
await sqsClient.sendMessage({
DelaySeconds: 0,
Expand Down Expand Up @@ -90,8 +91,8 @@ const handleCreateDiagnosticReport = async (data: string) => {
}

const handleUpdateAppointment = async (data: string) => {
handleSocket('subs_notification_appointment')
const appointment = JSON.parse(data).resource
handleSocket('subs_notification_appointment', appointment.id)
const event = 'update-appointment'
await sqsClient.sendMessage({
DelaySeconds: 0,
Expand All @@ -104,7 +105,7 @@ const handleUpdateAppointment = async (data: string) => {
}
}
})
handleSocket('push_appointment')
handleSocket('push_appointment', appointment.id)
aidboxClient.sendLog({
type: 'sqs',
message: { event, id: appointment.id }
Expand All @@ -126,7 +127,6 @@ export const handleEndpoints = async (
data += chunk
})
const metrics = await register.metrics()
// io.emit('patient_created', ';;;')

switch (req.url) {
case '/':
Expand Down
19 changes: 7 additions & 12 deletions examples/aidbox-subscription/backend/workers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ const patientCreateWorker = async (patientId: string) => {
status: 'received',
intent: 'order',
for: {
resourceType: 'Patient',
id: patientId
reference: `Patient/${patientId}`
}
})
handleSocket('create_task_patient', patientId)
Expand All @@ -32,8 +31,7 @@ const observationCreateWorker = async (observationId: string) => {
status: 'received',
intent: 'order',
for: {
resourceType: 'Observation',
id: observation.id
reference: `Observation/${observation.id}`
}
})
}
Expand All @@ -52,8 +50,7 @@ const encounterCreateWorker = async (encounterId: string) => {
status: 'received',
intent: 'order',
for: {
resourceType: 'Encounter',
id: encounter.id
reference: `Encounter/${encounter.id}`
}
})
}
Expand All @@ -75,8 +72,7 @@ const diagnosticReportCreateWorker = async (diagnosticReportId: string) => {
status: 'received',
intent: 'order',
for: {
resourceType: 'DiagnosticReport',
id: diagnosticReport.id
reference: `DiagnosticReport/${diagnosticReport.id}`
}
})
}
Expand All @@ -86,7 +82,7 @@ const diagnosticReportCreateWorker = async (diagnosticReportId: string) => {
}

const appointmentUpdateWorker = async (appointmentId: string) => {
handleSocket('pull_appointment')
handleSocket('pull_appointment', appointmentId)
try {
const appointment = await aidboxClient.getResource(
'Appointment',
Expand All @@ -99,12 +95,11 @@ const appointmentUpdateWorker = async (appointmentId: string) => {
status: 'received',
intent: 'order',
for: {
resourceType: 'Appointment',
id: appointment.id
reference: `Appointment/${appointment.id}`
}
})

handleSocket('create_task_appointment')
handleSocket('create_task_appointment', appointment.id)
}
} catch (error) {
console.error(error)
Expand Down
31 changes: 25 additions & 6 deletions examples/aidbox-subscription/frontend/app.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Container, Text, Grid } from '@nextui-org/react'
import { Container, Text, Grid, Link } from '@nextui-org/react'
import { io } from 'socket.io-client'

import { CreateSample } from './create-sample.js'
Expand All @@ -22,12 +22,31 @@ export function App () {
css={{ 'text-align': 'center' }}
>Subscription sample
</Text>
<Text css={{ 'text-align': 'center' }}>
Here you can see how Aidbox subscriptions work in conjunction with queues.
<Text
css={{ 'text-align': 'center', 'margin': 0 }}
size='$xl'
>
Explore the integration of&nbsp;
<Link
href='https://docs.aidbox.app/api-1/reactive-api-and-subscriptions/subscriptions-1'
target='_blank'
>
Aidbox subscriptions&nbsp;
</Link>
and queues.
</Text>
<Text css={{ 'text-align': 'center' }}>
We've created some subscriptions on our backend. Let's try to interact with two of them.
Subscription on appointment updates and on patient create.
<Text
css={{ 'text-align': 'center', 'mt': 5 }}
size='$xl'
>
We've created some subscriptions on&nbsp;
<Link
href='https://github.com/Aidbox/aidbox-sdk-js/blob/8ea42b1c0bdf41d61257bdb3a0452e7dbcc15eb6/examples/aidbox-subscription/backend/subscriptions.ts#L6'
target='_blank'
>
our backend
</Link>.
Let's try to interact with two of them.
</Text>
<Grid.Container
gap={2}
Expand Down
168 changes: 121 additions & 47 deletions examples/aidbox-subscription/frontend/create-sample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Button, Card, Grid, Progress, Text } from '@nextui-org/react'
import { Button, Card, Container, Grid, Link, Progress, Text } from '@nextui-org/react'
import { Timeline } from 'antd'
import { useState } from 'react'
import { Plus, TickSquare } from 'react-iconly'

Expand Down Expand Up @@ -66,83 +67,156 @@ export const CreateSample = () => {

socketIo.on('subs_notification_patient', function (data) {
if (!subsNotifications.includes(data)) {
setSubsNotifications([...subsNotifications, data])
setSubsNotifications(subsNotifications => [...subsNotifications, data])
}
})

socketIo.on('push_patient', function (data) {
console.log(data)
if (!pushedPatients.includes(data)) {
setPushedPatients([...pushedPatients, data])
setPushedPatients(pushedPatients => [...pushedPatients, data])
}
})

socketIo.on('pull_patient', function (data) {
if (!pulledPatients.includes(data)) {
setPulledPatients([...pulledPatients, data])
setPulledPatients(pulledPatients => [...pulledPatients, data])
}
})

socketIo.on('create_task_patient', function (data) {
if (!createdTasks.includes(data)) {
setCreatedTasks([...createdTasks, data])
setCreatedTasks(createdTasks => [...createdTasks, data])
}
})

console.log(pushedPatients, 'pushedPatients')
return (
<>
<Text h2>Create Patient Subscription</Text>
<Card>
<Card.Body css={{ width: 'auto' }}>
<Text css={{ 'text-align': 'center', 'margin-top': 0 }}>
Create new patients to trigger subscriptions.
</Text>
{patientsCreated
<Card.Body css={{ width: 'auto', display: 'block' }}>
<Container
css={{ width: 'auto' }}
display='flex'
wrap='wrap'
direction='column'
>
<Text css={{ 'text-align': 'center', 'margin-top': 0 }}>
Create new patients to trigger subscriptions.
</Text>
{patientsCreated
? <>
<Button
color='success'
icon={<TickSquare set='light' />}
>Patients Created
</Button>
<Grid.Container
gap={2}
direction='column'
>
<Grid>
<Text>Subscriptions triggered</Text>
<Progress
color='primary'
value={countProgressPercent(subsNotifications)}
/>
</Grid>
<Grid>
<Text>Events pushed to the queue</Text>
<Progress
color='primary'
value={countProgressPercent(pushedPatients)}
/>
</Grid>
<Grid>
<Text>Events pulled from the queue</Text>
<Progress
color='primary'
value={countProgressPercent(pulledPatients)}
/>
</Grid>
<Grid>
<Text>Task resources created</Text>
<Progress
color='primary'
value={countProgressPercent(createdTasks)}
/>
</Grid>
</Grid.Container>
</>
{<Timeline
style={{ marginTop: 30 }}
items={[
{
color: subsNotifications ? 'green' : 'gray',
children: (
<>
<p>Subscriptions triggered</p>
<Progress
color='primary'
value={countProgressPercent(subsNotifications)}
striped
/>
<Link
block
href='https://github.com/Aidbox/aidbox-sdk-js/blob/8ea42b1c0bdf41d61257bdb3a0452e7dbcc15eb6/examples/aidbox-subscription/backend/endpoints.ts#L137'
target='_blank'
>
See the code
</Link>
</>
)
},
{
color: pushedPatients ? 'green' : 'gray',
children: (
<>
<p>Event pushed to the queue</p>
<Progress
color='primary'
value={countProgressPercent(pushedPatients)}
striped
/>
<Link
block
href='http://localhost:9325/'
target='_blank'
>
Check the queue UI
</Link>
<Link
block
href='https://github.com/Aidbox/aidbox-sdk-js/blob/8ea42b1c0bdf41d61257bdb3a0452e7dbcc15eb6/examples/aidbox-subscription/backend/endpoints.ts#L11C3-L11C3'
target='_blank'
>
See the code
</Link>
</>
)
},
{
color: pulledPatients ? 'green' : 'gray',
children: (
<>
<p>Events pulled from the queue</p>
<Progress
color='primary'
value={countProgressPercent(pulledPatients)}
striped
/>
<Link
block
href='https://github.com/Aidbox/aidbox-sdk-js/blob/d34cc06c9c8764ef00820abcfca9e9cc8fb2536e/examples/aidbox-subscription/backend/periodic-jobs.ts#L12'
target='_blank'
>
See the code
</Link>
</>
)
},
{
color: createdTasks ? 'green' : 'gray',
children: (
<>
<p>Task resource created</p>
<p>In the end, we've created a Task resource as a simple example of business logic.</p>
<Progress
color='primary'
value={countProgressPercent(createdTasks)}
striped
/>
<Link
block
href='https://github.com/Aidbox/aidbox-sdk-js/blob/8ea42b1c0bdf41d61257bdb3a0452e7dbcc15eb6/examples/aidbox-subscription/backend/workers.ts#L5'
target='_blank'
>
See the code
</Link>
</>
)
},
{
color: createdTasks ? 'green' : 'gray',
dot: <TickSquare set='light' />
}
]}
/>}
</>
: <Button
onPress={createPatients}
icon={<Plus set='light' />}
>Create 10 patients
</Button>
>
Create 10 patients
</Button>
}
</Container>
</Card.Body>
</Card>
</>
Expand Down
Loading

0 comments on commit 43f78f9

Please sign in to comment.