refactoring next part

src/lib/components/refactor/ComposerCharly.svelte

@@ -1,29 +1,64 @@
 <script>
+	import { coreServices } from '$lib/core/refactor/coreServices';
+	import { queryMessages } from '$lib/data/queryMessages';
+	import { queryTodos } from '$lib/data/queryTodos';
+	import { createMessage } from '$lib/services/messages/messages';
 	export let me;
 	export let data;
 
-	function toggle() {
-		me.do.machine.send('TOGGLE');
+	function sendMessage() {
+		const randomNumber = Math.floor(Math.random() * 100) + 1;
+		const messageData = {
+			text: `test ${randomNumber}`,
+			sender: 'ComposerCharly',
+			type: 'text'
+		};
+		createMessage(messageData);
+	}
+
+	let todos;
+	queryTodos.subscribe((value) => {
+		todos = value;
+	});
+
+	let messages;
+	queryMessages.subscribe((value) => {
+		messages = value;
+	});
+
+	$: {
+		const queryMap = {
+			todos: todos,
+			messages: messages
+		};
+
+		Object.entries(queryMap).forEach(([name, data]) => {
+			if (data) {
+				coreServices.mutateStore(me.id, { [name]: data });
+			}
+		});
 	}
 </script>
 
-<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.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"
-		on:click={toggle}
-	>
-		Toggle
-	</button>
-	<div class="p-8 overflow-scroll h-1/2">
-		{#if $data.context.messages}
-			{#each $data.context.messages as message}
+<div class="flex flex-col h-screen">
+	<section class=" h-96">
+		{#if $data.store.todos}
+			{#each $data.store.todos as todo}
+				<p>{todo.text}</p>
+			{/each}
+		{/if}
+	</section>
+	<section class="flex-grow overflow-y-auto">
+		{#if $data.store.messages}
+			{#each $data.store.messages as message}
 				<p>{message.text}</p>
 			{/each}
 		{/if}
-	</div>
+	</section>
+	<button
+		class="self-center px-4 py-2 mb-4 font-bold text-white rounded hover:bg-blue-700"
+		on:click={sendMessage}
+	>
+		Send
+	</button>
 </div>

src/lib/components/refactor/ComposerWrap.svelte

@@ -3,6 +3,7 @@
 	import { assign } from 'xstate';
 	import { queryMessages } from '$lib/data/queryMessages';
 	import { get } from 'svelte/store';
+	import { coreServices } from '$lib/core/refactor/coreServices';
 
 	let composer = {
 		id: 'ComposerParent',
@@ -30,18 +31,15 @@
 				id: 'ComposerCharly',
 				component: 'ComposerCharly',
 				slot: 'aside',
-				data: {},
 				machine: {
 					initial: 'LOADING',
-					context: {
-						hello: 'start',
-						messages: []
-					},
+					// context: {
+					// 	hello: 'start',
+					// 	messages: []
+					// },
 					states: {
 						LOADING: {
-							entry: assign({
-								messages: (context, event) => get(queryMessages)
-							}),
+							entry: () => {},
 							on: {
 								TOGGLE: {
 									target: 'READY'