add effector to workflow sample

examples/apps/workflow-ui/package.json

@@ -15,6 +15,8 @@
     "@nextui-org/react": "^1.0.0-beta.12",
     "aidbox-sdk": "file:aidbox-javascript-sdk-1.0.0.tgz",
     "antd": "5.6.3",
+    "effector": "^22.8.6",
+    "effector-react": "^22.5.3",
     "mermaid": "^10.2.4",
     "react": "18.2.0",
     "react-countdown": "^2.3.5",

examples/apps/workflow-ui/src/Tasks.tsx

@@ -12,6 +12,7 @@ import { Client } from 'aidbox-sdk'
 import { useContext, useEffect, useState } from 'react'
 import Countdown, { CountdownRenderProps } from 'react-countdown'
 
+import { aidboxClient } from './client'
 import { AppContext } from './context'
 import { TickIcon } from './TickIcon'
 
@@ -79,9 +80,6 @@ interface Workflow {
   };
 }
 
-const green = '#17C964'
-const gray = '#889096'
-
 interface TaskData {
   title: 'workflow-init' | 'wait' | 'send-email';
   color: typeof green | typeof gray;
@@ -362,11 +360,6 @@ export const Tasks = ({ appointmentId, config }: TasksProps) => {
   const [workflowData, setWorkflow] = useState<Workflow | null>(null)
   const [emailSent, setEmailSent] = useState<boolean>(false)
 
-  const aidboxClient = new Client(config.aidbox_url, {
-    username: config.aidbox_client,
-    password: config.aidbox_secret
-  })
-
   const getTasks = async (workflowId: string) => {
     const { data } = await aidboxClient.client.get<{
       entry: Array<{ resource: Task }>;
@@ -412,20 +405,6 @@ export const Tasks = ({ appointmentId, config }: TasksProps) => {
     }
   }, [appointmentId])
 
-  useEffect(() => {
-    socketIo.on('start_task', function (data) {
-      setTimeout(() => getTasks(data), 1000)
-    })
-
-    socketIo.on('sent_email', function () {
-      setTimeout(() => setEmailSent(true), 1700)
-    })
-
-    return () => {
-      socketIo.off()
-    }
-  }, [])
-
   return (
     workflowData && (
       <Card css={{ mb: '20px' }}>

examples/apps/workflow-ui/src/app.tsx

@@ -1,8 +1,9 @@
 import { Container, Link, Text } from '@nextui-org/react'
 import { Client } from 'aidbox-sdk'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Socket, io } from 'socket.io-client'
 
+import { aidboxClient, socketIo } from './client'
 import { AppContext } from './context'
 import { SampleDesc } from './SampleDesc'
 import { Tasks } from './Tasks'
@@ -54,27 +55,8 @@ export function App ({
   };
 }) {
   const [appointmentId, setAppointmentId] = useState<string | null>(null)
-  const [aidboxClient, setClient] = useState<Client>()
-  const [socketIo, setSocket] = useState<Socket>()
 
-  useEffect(() => {
-    const aidboxClient = new Client(config.aidbox_url, {
-      username: config.aidbox_client,
-      password: config.aidbox_secret
-    })
-
-    setClient(aidboxClient)
-
-    const socketIo = io(config.app_url, {
-      auth: {
-        token: 'json-web-token'
-      }
-    })
-
-    setSocket(socketIo)
-  }, [])
-
-  const createAppointment = async (email: string) => {
+  const createAppointment = useCallback(async (email: string) => {
     const patient = {
       ...patientData,
       telecom: [
@@ -85,20 +67,17 @@ export function App ({
       ]
     }
 
-    if (aidboxClient) {
       await aidboxClient.client.put(`/Patient/${patient.id}`, patient)
-      const data = await aidboxClient.createResource(
+      const data = await aidboxClient.createResource( // TODO: put appointment id in query params
         'Appointment',
         appointmentData
       )
 
       if (data.id) {
         setAppointmentId(data.id)
       }
-    }
-  }
-
-  if (!aidboxClient || !socketIo) return null
+  }, [])
+console.log(1)
 
   return (
     <AppContext.Provider value={{ client: aidboxClient, socketIo }}>

examples/apps/workflow-ui/src/client.ts

@@ -0,0 +1,23 @@
+import { Client } from 'aidbox-sdk'
+import { io } from 'socket.io-client'
+
+import config from './config.json'
+
+export const aidboxClient = new Client(config.aidbox_url, {
+  username: config.aidbox_client,
+  password: config.aidbox_secret
+})
+
+export const socketIo = io(config.app_url, {
+  auth: {
+    token: 'json-web-token'
+  }
+})
+
+socketIo.on('start_task', function (data) {
+  setTimeout(() => getTasks(data), 1000)
+})
+
+socketIo.on('sent_email', function () {
+  setTimeout(() => setEmailSent(true), 1700)
+})

examples/apps/workflow-ui/src/model.ts

@@ -0,0 +1,71 @@
+import { Client } from 'aidbox-sdk'
+import { createEffect, createEvent, createStore, sample } from 'effector'
+import { Socket } from 'socket.io-client'
+
+export const green = '#17C964'
+export const gray = '#889096'
+export interface Task {
+  id: string;
+  params: {
+    event?: string;
+    until?: string;
+  };
+  status:
+    | 'created'
+    | 'ready'
+    | 'requested'
+    | 'in-progress'
+    | 'done'
+    | 'waiting';
+  requester: {
+    id: string;
+    resourceType: 'AidboxWorkflow';
+  };
+  definition:
+    | 'awf.workflow/decision-task'
+    | 'awf.task/wait'
+    | 'notification/send-email';
+  'workflow-definition': 'notification/appointment-created';
+}
+
+export interface TaskData {
+  title: 'workflow-init' | 'wait' | 'send-email';
+  color: typeof green | typeof gray;
+  body: any;
+  id?: string;
+  params?: Task['params'];
+}
+
+interface Workflow {
+  params: {
+    id: string;
+  };
+  status: 'created' | 'in-progress' | 'done';
+  definition: 'notification/appointment-created';
+  id: string;
+  resourceType: 'AidboxWorkflow';
+  meta: {
+    lastUpdated: string;
+    createdAt: string;
+    versionId: string;
+  };
+}
+
+export const $tasks = createStore<TaskData[]>([])
+export const $workflow = createStore<Workflow | null>(null)
+
+export const emailSent = createEvent()
+export const $emailSent = createStore<boolean>(false).on(emailSent, () => true)
+// export const $client = createStore<Client | null>(null)
+// export const $socketIo = createStore<Socket | null>(null)
+
+const getTasksFx = createEffect<string, TaskData[]>((workflowId) => {
+  console.log(workflowId)
+  return []
+})
+
+export const getTasks = createEvent<string>()
+
+sample({ clock: getTasks, target: getTasksFx })
+
+sample({ clock: getTasksFx.doneData, target: $tasks })

examples/apps/workflow/src/index.ts

@@ -1,8 +1,8 @@
 import Fastify from 'fastify'
 import socketioServer from 'fastify-socket.io'
-import { createApp } from './app'
 import { Server } from 'socket.io'
 
+import { createApp } from './app'
 
 const fastify = Fastify({
   logger: true
@@ -16,11 +16,10 @@ declare module 'fastify' {
   }
 }
 
-fastify.get('/', async function handler(request, reply) {
+fastify.get('/', async function handler (request, reply) {
   return 'Aidbox SDK Examples backend'
 })
 
-
 const main = async () => {
   const { app, config } = await createApp(fastify)
   try {
@@ -32,6 +31,5 @@ const main = async () => {
 }
 
 if (require.main === module) {
-
   main().catch(e => console.error(e))
 }