From 481cc8cf68e5f8495038e6f9fb2e56d5bc509a15 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Fri, 4 Aug 2023 14:11:55 +0200
Subject: [PATCH] added loading and passing of svelte state stores to the
 machine context

---
 .../components/refactor/ComposerCharly.svelte | 21 ++++++++-----------
 .../components/refactor/ComposerWrap.svelte   | 10 ++++-----
 src/lib/core/refactor/coreServices.ts         | 16 +++++++-------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/refactor/ComposerCharly.svelte b/src/lib/components/refactor/ComposerCharly.svelte
index 6739bca..ae0b6de 100644
--- a/src/lib/components/refactor/ComposerCharly.svelte
+++ b/src/lib/components/refactor/ComposerCharly.svelte
@@ -1,23 +1,17 @@
 <script>
-	import { onMount } from 'svelte';
-	import { coreServices } from '$lib/core/refactor/coreServices';
-
 	export let me;
 	export let data;
 
-	onMount(() => {
-		// coreServices.mutateData('ComposerCharly', { hello: ' this is on mount ' });
-	});
 	function toggle() {
 		me.do.machine.send('TOGGLE');
 	}
 </script>
 
-<div class="border-2 border-green-500">
+<div class="w-full h-full border-2 border-green-500">
 	<p>My ID is: {me.id}</p>
 	my state is {$data.state}
 	<h1 class="h1">I am charly</h1>
-	my data.context prop: {JSON.stringify($data.context)}
+	my data.context.hello prop: {JSON.stringify($data.context.hello)}
 	<br />
 	<button
 		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
@@ -25,8 +19,11 @@
 	>
 		Toggle
 	</button>
-
-	<!-- {#each $data.context.messages as message (message.timestamp)}
-		<p>{message.text}</p>
-	{/each} -->
+	<div class="p-8 overflow-scroll h-1/2">
+		{#if $data.context.messages}
+			{#each $data.context.messages as message}
+				<p>{message.text}</p>
+			{/each}
+		{/if}
+	</div>
 </div>
diff --git a/src/lib/components/refactor/ComposerWrap.svelte b/src/lib/components/refactor/ComposerWrap.svelte
index 7ddcd06..7acf2d0 100644
--- a/src/lib/components/refactor/ComposerWrap.svelte
+++ b/src/lib/components/refactor/ComposerWrap.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Composer from '$lib/core/refactor/Composer.svelte';
 	import { assign } from 'xstate';
-	import { coreServices } from '$lib/core/refactor/coreServices';
 	import { queryMessages } from '$lib/data/queryMessages';
+	import { get } from 'svelte/store';
 
 	let composer = {
 		id: 'ComposerParent',
@@ -39,12 +39,12 @@
 					},
 					states: {
 						LOADING: {
+							entry: assign({
+								messages: (context, event) => get(queryMessages)
+							}),
 							on: {
 								TOGGLE: {
-									target: 'READY',
-									actions: assign({
-										hello: (context, event) => 'this was updated from loading'
-									})
+									target: 'READY'
 								}
 							}
 						},
diff --git a/src/lib/core/refactor/coreServices.ts b/src/lib/core/refactor/coreServices.ts
index 9f44144..d511078 100644
--- a/src/lib/core/refactor/coreServices.ts
+++ b/src/lib/core/refactor/coreServices.ts
@@ -2,14 +2,14 @@
 import { getComposerStore } from './composerStores';
 
 export const coreServices = {
-    mutateData: (storeID: string, value: any) => {
-        const store = getComposerStore(storeID);
-        console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
-        store.update(storeData => {
-            storeData.context = value;
-            return storeData;
-        });
-    },
+    // mutateData: (storeID: string, value: any) => {
+    //     const store = getComposerStore(storeID);
+    //     console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
+    //     store.update(storeData => {
+    //         storeData.context = value;
+    //         return storeData;
+    //     });
+    // },
     subscribeData: (storeID: string) => {
         const store = getComposerStore(storeID);
         return store;