pulling out the basic messaging service.

This commit is contained in:
Samuel Andert 2023-07-21 13:47:09 +02:00
parent 5e827cd939
commit 6c691c7be3
3 changed files with 56 additions and 72 deletions

View File

@ -1,38 +1,7 @@
<script>
import { writable } from 'svelte/store';
// 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.'
];
// Reactive store to store chat messages
const messages = writable([]);
function addRandomMessage() {
const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
const currentDate = new Date().toLocaleString();
messages.update((oldMessages) => [
...oldMessages,
{ text: randomMessage, timestamp: currentDate }
]);
}
// Function to clear all messages
function clearMessages() {
messages.set([]);
}
import { messages, clearMessages, addRandomMessage } from '$lib/services/messages';
</script>
<!-- HTML content -->
<main class="p-4 flex flex-col-reverse overflow-y-auto h-[calc(100vh-70px)]">
<div class="flex flex-col space-y-4">
<!-- Your messages, displayed in chronological order -->

View File

@ -1,11 +1,60 @@
// src/lib/messaging.js
import { messagesStore } from '$lib/data//stores';
import { writable } from 'svelte/store';
export function addMessage(message) {
const timestamp = new Date().toLocaleString();
messagesStore.update((messages) => [{ text: message, timestamp }, ...messages]);
// Helper function to determine if we're running on the client side (browser) or server side.
function isClientSide() {
return typeof window !== "undefined";
}
// Safely get item from localStorage
function getFromLocalStorage(key, defaultValue) {
if (isClientSide()) {
return localStorage.getItem(key)
? JSON.parse(localStorage.getItem(key))
: defaultValue;
}
return defaultValue;
}
// Safely set item to localStorage
function setToLocalStorage(key, value) {
if (isClientSide()) {
localStorage.setItem(key, JSON.stringify(value));
}
}
// Load messages from localStorage or set an empty array if not available
const initialMessages = getFromLocalStorage('chat-messages', []);
export const messages = writable(initialMessages);
// Subscribe to messages store to watch for changes and save them to localStorage
messages.subscribe(currentMessages => {
setToLocalStorage('chat-messages', currentMessages);
});
// Dummy messages
const messagesList = [
"Hello there!",
"How are you?",
"What's your favorite color?",
"Nice weather today!",
"Have a great day!",
"I love Svelte!",
"Svelte is awesome!",
"Learning Svelte is fun!",
"Greetings from Svelte!",
"Keep coding and stay awesome!"
];
export function addRandomMessage() {
const randomMessage = messagesList[Math.floor(Math.random() * messagesList.length)];
const currentDate = new Date().toLocaleString();
messages.update(oldMessages => [
...oldMessages,
{ text: randomMessage, timestamp: currentDate }
]);
}
export function clearMessages() {
messagesStore.set([]);
messages.set([]);
}

View File

@ -1,34 +0,0 @@
<!-- 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>