From 68708b65d81d6bbea11cb59be4c1b22443d01953 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Sat, 22 Jul 2023 18:11:20 +0200
Subject: [PATCH] finished correct decoupling of action with svelte stores

---
 src/lib/components/Composite.svelte    |  6 ++++++
 src/lib/components/MessageInput.svelte | 11 ++++++-----
 src/lib/components/SendMessage.svelte  |  5 ++++-
 src/lib/stores/compositeStore.ts       |  0
 src/lib/stores/contextStore.ts         | 12 ++++++++++++
 5 files changed, 28 insertions(+), 6 deletions(-)
 delete mode 100644 src/lib/stores/compositeStore.ts
 create mode 100644 src/lib/stores/contextStore.ts

diff --git a/src/lib/components/Composite.svelte b/src/lib/components/Composite.svelte
index dca2e21..ed650a4 100644
--- a/src/lib/components/Composite.svelte
+++ b/src/lib/components/Composite.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
 	import components from '$lib/components.ts';
+	import { getContextStore } from '$lib/stores/contextStore.ts';
 	export let componentsData = [];
 
+	// For each component, get or create its context store
+	componentsData.children.forEach((child) => {
+		child.store = getContextStore(child.componentName);
+	});
+
 	async function getComponent(componentName) {
 		if (components[componentName]) {
 			const module = await components[componentName]();
diff --git a/src/lib/components/MessageInput.svelte b/src/lib/components/MessageInput.svelte
index 451449f..014c4d2 100644
--- a/src/lib/components/MessageInput.svelte
+++ b/src/lib/components/MessageInput.svelte
@@ -1,15 +1,18 @@
 <script>
-	import SendMessage from './SendMessage.svelte';
-	import ClearMessages from './ClearMessages.svelte';
+	import { getContextStore } from '$lib/stores/contextStore.ts';
 
+	const store = getContextStore('MessageInput');
 	let newMessageText = '';
 
 	function handleKeyDown(event) {
 		if (event.key === 'Enter') {
-			newMessageText = ''; // Clear the input after sending the message
+			newMessageText = '';
 			event.preventDefault();
 		}
 	}
+
+	// Reactive assignment to store when newMessageText changes
+	$: store.set({ newMessageText });
 </script>
 
 <footer class="flex justify-end p-4 bg-white">
@@ -20,6 +23,4 @@
 		bind:value={newMessageText}
 		on:keydown={handleKeyDown}
 	/>
-	<SendMessage bind:newMessageText />
-	<ClearMessages />
 </footer>
diff --git a/src/lib/components/SendMessage.svelte b/src/lib/components/SendMessage.svelte
index 380d7ca..87e4bc4 100644
--- a/src/lib/components/SendMessage.svelte
+++ b/src/lib/components/SendMessage.svelte
@@ -1,6 +1,9 @@
 <script>
 	import { createMessage } from '$lib/services/messages';
-	export let newMessageText = '';
+	import { getContextStore } from '$lib/stores/contextStore.ts';
+
+	const store = getContextStore('MessageInput');
+	$: newMessageText = $store.newMessageText; // bind newMessageText from the store
 
 	function handleSend() {
 		if (newMessageText.trim() !== '') {
diff --git a/src/lib/stores/compositeStore.ts b/src/lib/stores/compositeStore.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/stores/contextStore.ts b/src/lib/stores/contextStore.ts
new file mode 100644
index 0000000..16e1565
--- /dev/null
+++ b/src/lib/stores/contextStore.ts
@@ -0,0 +1,12 @@
+// /lib/stores/contextStore.ts
+import { writable } from 'svelte/store';
+
+const createStore = () => writable({});
+
+const contextStore = {};
+export const getContextStore = (componentName) => {
+    if (!contextStore[componentName]) {
+        contextStore[componentName] = createStore();
+    }
+    return contextStore[componentName];
+}