From 8ea9b678a4a122a47328f105453f829c813dbb3d Mon Sep 17 00:00:00 2001
From: April Hall <ari@arithefirst.com>
Date: Mon, 6 Jan 2025 20:06:57 -0500
Subject: [PATCH] feat: Create message component

---
 src/lib/components/message.svelte | 16 +++++++++++++++
 src/lib/index.ts                  |  6 ++++++
 src/lib/websocketConfig.ts        | 10 ++++++---
 src/routes/+page.svelte           | 34 ++++++++++++++-----------------
 4 files changed, 44 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/components/message.svelte

diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
new file mode 100644
index 0000000..33f0dc8
--- /dev/null
+++ b/src/lib/components/message.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { type TypeMessage } from '../'
+  const { message, imageSrc, user }: TypeMessage   = $props()
+</script>
+
+<div class="w-full hover:bg-base-200 flex py-2">
+  <div class="avatar mx-2">
+    <div class="w-12 rounded">
+      <img src={imageSrc} alt="Profile image for {user}" />
+    </div>
+  </div>
+  <div class="flex-col">
+    <p class="font-bold">{user}</p>
+    <p>{message}</p>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6..fc860ea 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1,7 @@
 // place files you want to import through the `$lib` alias in this folder.
+
+export interface TypeMessage {
+  message: string,
+  imageSrc: string,
+  user: string;
+}
\ No newline at end of file
diff --git a/src/lib/websocketConfig.ts b/src/lib/websocketConfig.ts
index 8e8176a..adeea77 100644
--- a/src/lib/websocketConfig.ts
+++ b/src/lib/websocketConfig.ts
@@ -1,5 +1,6 @@
 import { Server as SocketIOServer } from 'socket.io';
 import type { HttpServer } from 'vite';
+import { type TypeMessage } from './'
 
 let io: SocketIOServer | undefined;
 
@@ -11,17 +12,20 @@ export function startupSocketIOServer(httpServer: HttpServer | null) {
   io.on('connection', (socket) => {
     // Runs on client connect
     console.log(`[ws:kit] client connected (${socket.id})`);
-    io!.emit('message', `[ws] Hello from SvelteKit ${new Date().toLocaleString()} (${socket.id})`);
+
 
     // Runs on message receive
     socket.on('message', (msg) => {
       console.log(`[ws:kit] message from ${socket.id}: ${msg}`);
-      io!.emit('message', `[${socket.id}] ${msg}`);
+      io!.emit('message', {
+        user: socket.id,
+        message: msg,
+        imageSrc: 'https://www.arithefirst.com/images/pfp.png'
+      });
     });
 
     // Runs on client disconnect
     socket.on('disconnect', () => {
-      io!.emit('message', `client disconnected (${socket.id})`);
       console.log(`[ws:kit] client disconnected (${socket.id})`);
     });
   });
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c81c665..95fd490 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,30 +1,22 @@
 <script lang="ts">
   import { io } from 'socket.io-client';
   import { onMount } from 'svelte';
+  import Message from '../lib/components/message.svelte';
+  import { type TypeMessage } from '../lib';
 
   let socket: ReturnType<typeof io> | null = null;
-  let log: string[] = [];
+  let log: TypeMessage[] = [];
   let msg: string = '';
 
-  function logEvent(str: string) {
-    log = [...log, str];
+  function logEvent(newMsg: TypeMessage) {
+    log = [...log, newMsg];
   }
 
   function establishSocketIOConnection() {
     if (socket) return;
     socket = io();
 
-    socket.on('connect', () => {
-      console.log('[ws] connection open');
-      logEvent('[ws] connection open');
-    });
-
-    socket.on('disconnect', () => {
-      console.log('[ws] connection closed');
-      logEvent('[ws] connection closed');
-    });
-
-    socket.on('message', (data: string) => {
+    socket.on('message', (data: TypeMessage) => {
       console.log('[ws] message received', data);
       logEvent(data);
     });
@@ -52,9 +44,13 @@
     on:click={() => {
       log = [];
     }}>Clear</button>
-  <ul>
-    {#each log as event}
-      <li>{event}</li>
+  <section>
+    {#each log as message}
+      <Message
+        imageSrc={message.imageSrc}
+        user={message.user}
+        message={message.message}
+      />
     {/each}
-  </ul>
-</main>
+  </section>
+</main>
\ No newline at end of file