wired dummy messaging to use svelte stores.

src/lib/components/Messages.svelte

@@ -1,51 +1,48 @@
-<!-- components/Chat.svelte -->
 <script>
-	import { dummyMessages } from '$lib/data/dummyMessages.js';
+	import { writable } from 'svelte/store';
 
-	let messages = [];
+	// Dummy messages
+	const messagesList = [
+		"Believe you can, and you're halfway there.",
+		'The only way to do great work is to love what you do.',
+		'Success is not final, failure is not fatal: It is the courage to continue that counts.',
+		'The best way to predict the future is to create it.',
+		"Your time is limited, don't waste it living someone else's life.",
+		'Every moment is a fresh beginning.',
+		"Don't watch the clock; do what it does. Keep going.",
+		'Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.',
+		'You are never too old to set another goal or to dream a new dream.',
+		'The future belongs to those who believe in the beauty of their dreams.'
+	];
 
-	const addRandomMessage = () => {
+	// Reactive store to store chat messages
-		const randomMessage = generateRandomMessage();
+	const messages = writable([]);
-		messages = [randomMessage, ...messages];
-		saveMessagesToLocalStorage(messages);
-	};
 
-	const generateRandomMessage = () => {
+	function addRandomMessage() {
-		const randomIndex = Math.floor(Math.random() * dummyMessages.length);
+		const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
-		const randomMessage = dummyMessages[randomIndex];
+		const currentDate = new Date().toLocaleString();
-		const timestamp = new Date().toLocaleString(); // Get the current date and time
+		messages.update((oldMessages) => [
-		return { ...randomMessage, timestamp };
+			...oldMessages,
-	};
+			{ text: randomMessage, timestamp: currentDate }
-
+		]);
-	const loadMessages = () => {
-		if (typeof window !== 'undefined') {
-			const storedMessages = localStorage.getItem('chat_messages');
-			messages = storedMessages ? JSON.parse(storedMessages) : [];
 	}
-	};
+	// Function to clear all messages
-
+	function clearMessages() {
-	const saveMessagesToLocalStorage = (messages) => {
+		messages.set([]);
-		if (typeof window !== 'undefined') {
-			localStorage.setItem('chat_messages', JSON.stringify(messages));
 	}
-	};
-
-	const clearMessages = () => {
-		messages = [];
-		saveMessagesToLocalStorage(messages);
-	};
-
-	// Load messages when the component mounts
-	loadMessages();
 </script>
 
-<main class="p-4 flex flex-col-reverse overflow-y-auto pb-16">
+<!-- HTML content -->
-	{#each messages as message}
+<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
-		<div class="bg-white p-3 rounded-lg shadow-lg mb-4">
+	<div class="flex flex-col space-y-4">
+		<!-- Your messages, displayed in chronological order -->
+		{#each $messages as message}
+			<div class="bg-white p-3 rounded-lg shadow-lg">
 				<p class="text-gray-800">{message.text}</p>
 				<small class="text-gray-600 text-sm">{message.timestamp}</small>
 			</div>
 		{/each}
+	</div>
 </main>
 
 <footer class="fixed bottom-0 left-0 right-0 bg-white p-4 flex justify-end">
@@ -62,10 +59,3 @@
 		Send Random Message
 	</button>
 </footer>
-
-<style>
-	main {
-		/* Set the minimum height of the main container to prevent the footer from overlapping the messages */
-		min-height: calc(100vh - 70px); /* Account for the fixed footer height */
-	}
-</style>

src/lib/data/dummyMessages.js

@@ -1,12 +0,0 @@
-export const dummyMessages = [
-    { text: "Believe you can, and you're halfway there.", timestamp: '2023-07-21 12:34:56' },
-    { text: "The only way to do great work is to love what you do.", timestamp: '2023-07-21 12:36:22' },
-    { text: "Success is not final, failure is not fatal: It is the courage to continue that counts.", timestamp: '2023-07-21 12:40:10' },
-    { text: "The best way to predict the future is to create it.", timestamp: '2023-07-21 12:45:34' },
-    { text: "Your time is limited, don't waste it living someone else's life.", timestamp: '2023-07-21 13:01:05' },
-    { text: "Every moment is a fresh beginning.", timestamp: '2023-07-21 13:10:22' },
-    { text: "Don't watch the clock; do what it does. Keep going.", timestamp: '2023-07-21 13:25:45' },
-    { text: "Believe in yourself and all that you are. Know that there is something inside you that is greater than any obstacle.", timestamp: '2023-07-21 13:40:15' },
-    { text: "You are never too old to set another goal or to dream a new dream.", timestamp: '2023-07-21 14:05:07' },
-    { text: "The future belongs to those who believe in the beauty of their dreams.", timestamp: '2023-07-21 14:20:59' },
-  ];

src/lib/services/messages.js

@@ -0,0 +1,11 @@
+// src/lib/messaging.js
+import { messagesStore } from '$lib/data//stores';
+
+export function addMessage(message) {
+  const timestamp = new Date().toLocaleString();
+  messagesStore.update((messages) => [{ text: message, timestamp }, ...messages]);
+}
+
+export function clearMessages() {
+  messagesStore.set([]);
+}

src/routes/log/write/+page.svelte

@@ -0,0 +1,34 @@
+<!-- src/routes/write.svelte -->
+<script>
+	import { addMessage } from '$lib/services/messages';
+	import { messagesStore } from '$lib/data/stores';
+
+	let newMessage = '';
+
+	const handleSubmit = () => {
+		addMessage(newMessage);
+		newMessage = ''; // Reset the input field
+	};
+
+	// Subscribe to the messagesStore to reactively refresh messages
+	$: messages = $messagesStore;
+</script>
+
+<main class="p-4">
+	<input
+		type="text"
+		bind:value={newMessage}
+		placeholder="Type your message..."
+		class="p-2 border rounded"
+	/>
+	<button
+		class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded mt-2"
+		on:click={handleSubmit}
+	>
+		Send Message
+	</button>
+</main>
+
+<style>
+	/* Add any additional styles as needed */
+</style>