added SEND_TO_ACTOR functionality

K3TH3R · Jul 6, 2021 · e98a76e · e98a76e
1 parent c802e59
commit e98a76e
Show file tree

Hide file tree

Showing 25 changed files with 3,228 additions and 91 deletions.
diff --git a/index.html b/index.html
@@ -1,17 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="h-full">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="apple-touch-icon" href="/pwa-192x192.png" />
-    <link rel="mask-icon" href="/favicon.svg" color="#374151" />
-    <meta name="msapplication-TileColor" content="#374151" />
-    <meta name="theme-color" content="#374151" />
+    <link rel="icon" href="/favicon.ico" />
     <title>XState Choreography</title>
   </head>
-  <body class="bg-gray-900">
-    <div id="app"></div>
+  <body class="bg-gray-900 h-full">
+    <div id="app" class="h-full"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/icons/icon-128x128.png b/public/icons/icon-128x128.png
diff --git a/public/icons/icon-144x144.png b/public/icons/icon-144x144.png
diff --git a/public/icons/icon-152x152.png b/public/icons/icon-152x152.png
diff --git a/public/icons/icon-192x192.png b/public/icons/icon-192x192.png
diff --git a/public/icons/icon-384x384.png b/public/icons/icon-384x384.png
diff --git a/public/icons/icon-512x512.png b/public/icons/icon-512x512.png
diff --git a/public/icons/icon-72x72.png b/public/icons/icon-72x72.png
diff --git a/public/icons/icon-96x96.png b/public/icons/icon-96x96.png
diff --git a/src/App.vue b/src/App.vue
@@ -1,13 +1,15 @@
 <template>
-  <div>
+  <div class="h-full">
     <div class="flex justify-between items-center bg-gray-800 py-4 px-8">
       <div class="flex justify-center items-center">
         <img class="h-8 w-auto pr-4" :src="XStateLogo" alt="Workflow" />
         <h2 class="text-lg text-gray-50">Choreography</h2>
       </div>
       <BrowserStatus />
     </div>
-    <router-view></router-view>
+    <div class="h-full w-full flex justify-center items-center">
+      <Display />
+    </div>
     <Notifications />
   </div>
 </template>
@@ -24,11 +26,13 @@ import {
 } from './machines/choreographer.machine'
 import BrowserStatus from './components/browserStatus.vue'
 import Notifications from './components/notifications.vue'
+import Display from './components/display.vue'
 
 export default defineComponent({
   components: {
     BrowserStatus,
     Notifications,
+    Display,
   },
   setup() {
     const app = useMachine(appMachine, {

diff --git a/src/components/display.vue b/src/components/display.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <h2
+      class="
+        sm:text-lg sm:leading-snug
+        font-semibold
+        tracking-wide
+        uppercase
+        text-gray-500
+        mb-3
+      "
+    >
+      Timestamp of Update:
+      <span class="text-orange-600">{{ state.context.updatedAt }}</span>
+    </h2>
+    <h1
+      class="
+        text-4xl
+        sm:text-6xl
+        lg:text-7xl
+        leading-none
+        font-extrabold
+        tracking-tight
+        text-gray-300
+        mt-10
+        mb-8
+        sm:mt-14 sm:mb-10
+      "
+    >
+      You've toggled the browser
+      <span class="text-orange-600">{{ state.context.counter }}</span> times.
+    </h1>
+    <p
+      class="
+        max-w-4xl
+        text-lg
+        sm:text-2xl
+        font-medium
+        sm:leading-10
+        space-y-6
+        mb-6
+        text-gray-300
+      "
+    >
+      {{ state.context.msg }}
+    </p>
+  </div>
+</template>
+
+<script>
+import { getActor } from '../machines/choreographer.machine'
+import { useActor } from '@xstate/vue'
+import { displayMachineId } from '../machines/display.machine'
+
+export default {
+  setup() {
+    const { state } = useActor(getActor(displayMachineId))
+    return {
+      state,
+    }
+  },
+}
+</script>
diff --git a/src/machines/App.machine.js b/src/machines/App.machine.js
@@ -12,6 +12,8 @@ import {
   registerActors,
   registerServiceWorker,
 } from './choreographer.machine'
+import { counterMachine, counterMachineId } from './counter.machine'
+import { displayMachine, displayMachineId } from './display.machine'
 import { invokeWebWorker } from '../workers/invoke-worker'
 import FetchWorker from '../workers/fetch-worker?worker'
 import { fetchServiceWorkerId } from './ServiceWorkerIds'
@@ -27,6 +29,14 @@ const actorConfig = [
     def: notificationsMachine,
     id: notificationsMachineId,
   },
+  {
+    def: counterMachine,
+    id: counterMachineId,
+  },
+  {
+    def: displayMachine,
+    id: displayMachineId,
+  },
 ]
 
 export const appMachine = createMachine(

diff --git a/src/machines/Choreographer.machine.js b/src/machines/Choreographer.machine.js
@@ -36,6 +36,9 @@ const choreographerMachineDef = createMachine(
       NOTIFY_WORKER_SUBSCRIBERS: {
         actions: ['notifyWorkerSubscribers'],
       },
+      SEND_TO_ACTOR: {
+        actions: ['sendToActor'],
+      },
     },
     states: {
       idle: {},
@@ -121,6 +124,9 @@ const choreographerMachineDef = createMachine(
           send(payload, { to: subscriber }),
         )
       }),
+      sendToActor: send((ctx, { payload, actorId }) => payload, {
+        to: (ctx, { actorId }) => ctx.actors[actorId].ref,
+      }),
     },
   },
 )

diff --git a/src/machines/browserStatus.machine.js b/src/machines/browserStatus.machine.js
@@ -1,6 +1,8 @@
 import { createMachine, assign, send } from 'xstate'
 import { choreographerMachine } from './choreographer.machine'
 import { fetchServiceWorkerId } from './ServiceWorkerIds'
+import { displayMachineId } from './display.machine'
+import { counterMachineId } from './counter.machine'
 
 /**
  * Browser Status
@@ -97,6 +99,8 @@ export const browserStatusMachine = createMachine(
               'storeUpdatedStatus',
               'sendSubscribers',
               'sendServiceWorker',
+              'sendDisplayActor',
+              'sendCounterActor',
             ],
           },
         },
@@ -128,6 +132,28 @@ export const browserStatusMachine = createMachine(
         }),
         { to: choreographerMachine },
       ),
+      sendDisplayActor: send(
+        (ctx) => ({
+          type: 'SEND_TO_ACTOR',
+          actorId: displayMachineId,
+          payload: {
+            type: 'UPDATED_BROWSER_STATUS',
+            data: { ...ctx },
+          },
+        }),
+        { to: choreographerMachine },
+      ),
+      sendCounterActor: send(
+        (ctx) => ({
+          type: 'SEND_TO_ACTOR',
+          actorId: counterMachineId,
+          payload: {
+            type: 'UPDATED_BROWSER_STATUS',
+            data: { ...ctx },
+          },
+        }),
+        { to: choreographerMachine },
+      ),
     },
   },
 )
diff --git a/src/machines/counter.machine.js b/src/machines/counter.machine.js
@@ -0,0 +1,40 @@
+import { createMachine, assign, send } from 'xstate'
+import { displayMachineId } from './display.machine'
+import { choreographerMachine } from './choreographer.machine'
+
+export const counterMachineId = 'counter'
+
+export const counterMachine = createMachine(
+  {
+    id: counterMachineId,
+    context: {
+      counter: null,
+    },
+    on: {
+      UPDATED_BROWSER_STATUS: {
+        actions: ['updatedBrowserStatus', 'sendDisplayActor'],
+      },
+    },
+  },
+  {
+    actions: {
+      updatedBrowserStatus: assign({
+        counter: (ctx) => ctx.counter + 1,
+      }),
+      sendDisplayActor: send(
+        (ctx) => ({
+          type: 'SEND_TO_ACTOR',
+          actorId: displayMachineId,
+          payload: {
+            type: 'UPDATED_COUNTER',
+            data: {
+              count: ctx.counter,
+              updatedAt: new Date(Date.now()).toISOString(),
+            },
+          },
+        }),
+        { to: choreographerMachine },
+      ),
+    },
+  },
+)
diff --git a/src/machines/display.machine.js b/src/machines/display.machine.js
@@ -0,0 +1,41 @@
+import { createMachine, assign, send } from 'xstate'
+
+export const displayMachineId = 'display'
+
+export const displayMachine = createMachine(
+  {
+    id: displayMachineId,
+    context: {
+      counter: 0,
+      updatedAt: new Date(Date.now()).toISOString(),
+      msg: null,
+    },
+    on: {
+      UPDATED_BROWSER_STATUS: {
+        actions: ['storeUpdatedBrowserStatus'],
+      },
+      UPDATED_COUNTER: {
+        actions: ['storeUpdatedCount'],
+      },
+    },
+  },
+  {
+    actions: {
+      storeUpdatedBrowserStatus: assign({
+        msg: (_ctx, { data }) => {
+          let msg = `The browser is currently online`
+
+          if (!(data.online && data.visible && data.focused)) {
+            msg = `The browser is offline or not currently focused`
+          }
+
+          return msg
+        },
+      }),
+      storeUpdatedCount: assign({
+        counter: (_, { data }) => data.count,
+        updatedAt: (_, { data }) => data.updatedAt,
+      }),
+    },
+  },
+)
diff --git a/src/main.ts b/src/main.ts
@@ -1,10 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import { inspect } from '@xstate/inspect'
-import { router } from './router'
 
-// inspect({
-//   iframe: false,
-// })
-
-createApp(App).use(router).mount('#app')
+createApp(App).mount('#app')
diff --git a/src/router.js b/src/router.js
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
diff --git a/src/views/Home.vue b/src/views/Home.vue
diff --git a/src/workers/fetch-worker.ts b/src/workers/fetch-worker.ts
@@ -11,17 +11,11 @@ const fetchWorkerMachine = createMachine(
         {
           cond: 'isOnline',
           target: 'online',
-          actions: [
-            'sendOnlineNotification',
-            () => console.log('sendOnlineNotification', Date.now()),
-          ],
+          actions: ['sendOnlineNotification'],
         },
         {
           target: 'offline',
-          actions: [
-            'sendOfflineNotification',
-            () => console.log('sendOfflineNotification', Date.now()),
-          ],
+          actions: ['sendOfflineNotification'],
         },
       ],
     },