feat: added the basic reactive user display names

codewith-luke · Nov 6, 2023 · 01d3fe6 · 01d3fe6
1 parent 2bd1014
commit 01d3fe6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 27 deletions.
diff --git a/apps/client/src/lib/components/ChatArea.svelte b/apps/client/src/lib/components/ChatArea.svelte
@@ -1,33 +1,44 @@
 <script lang="ts">
     import {tick} from 'svelte';
-    import type {IMessage} from "$lib/components/Message.svelte";
+    import {Key} from "w3c-keys";
+
     import FileUploadInput from "./FileUploadInput.svelte";
     import EmoteActions from "./EmoteActions.svelte";
     import Message from "./Message.svelte";
-    import {Key} from "w3c-keys";
     import {getUserStore} from "$lib/store";
 
     const user = getUserStore();
+
     let messageInputEl: HTMLInputElement;
     let formEl: HTMLFormElement;
     let chatArea: HTMLElement;
+    let users = new Map();
 
-    let messageFeed = new Array(5).fill({
-        userId: 21,
-        displayName: "Ricardo Cooper",
-        message: "Lorem ipsum dolor sit amet, consectetur adis",
-        timestamp: Date.now(),
-        profileImage: "https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
-    }) as IMessage[];
-
-    messageFeed.push({
-        userId: 1,
-        displayName: "dasdas",
-        message: "Lorem ipsum dolor sit amet, consectetur adis",
-        timestamp: Date.now(),
-        profileImage: 'https://randomuser.me/api/portraits/men/76.jpg',
+    user.subscribe((updatedUser) => {
+        users.set(updatedUser.id, updatedUser);
+        users = users;
     });
 
+    let messageFeed = (function getMessages() {
+        users.set(21, {id: 21, displayName: "John Doe"})
+
+        let messages = new Array(5).fill({
+            userId: 21,
+            message: "Lorem ipsum dolor sit amet, consectetur adis",
+            timestamp: Date.now(),
+            profileImage: "https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80",
+        });
+
+        messages.push({
+            userId: 1,
+            message: "Lorem ipsum dolor sit amet, consectetur adis",
+            timestamp: Date.now(),
+            profileImage: 'https://randomuser.me/api/portraits/men/76.jpg',
+        });
+
+        return messages;
+    })();
+
     function handleKeydown(event: KeyboardEvent) {
         if (event.key === Key.Space) {
             messageInputEl.focus();
@@ -40,7 +51,6 @@
 
         messageFeed = [...messageFeed, {
             userId: $user.id,
-            displayName: $user.displayName,
             profileImage: 'https://randomuser.me/api/portraits/men/76.jpg',
             message,
             timestamp: Date.now(),
@@ -56,20 +66,22 @@
 
 <svelte:window on:keydown={handleKeydown}/>
 <div class="h-full flex flex-col">
+    Username: {users.get(1)?.displayName}
     <div class="overflow-hidden flex-grow">
         <section bind:this={chatArea} class="overflow-y-auto h-full space-y-4 p-4">
             {#if messageFeed.length > 0 && $user?.id}
                 {#each messageFeed as message}
-                    <Message message="{message}" userId="{$user.id}"/>
+                    <Message message="{message}" userId="{$user.id}"
+                             displayName={users.get(message.userId)?.displayName || "Default"}/>
                 {/each}
             {/if}
         </section>
     </div>
 
-    <div class="flex justify-center items-center my-6 mx-8 gap-x-4 text-surface-300">
+    <div class="flex justify-between items-center my-6 mx-8 gap-x-4 text-surface-300">
         <FileUploadInput/>
 
-        <form bind:this={formEl} on:submit|preventDefault={handleMessageSend}>
+        <form class="flex-grow" bind:this={formEl} on:submit|preventDefault={handleMessageSend}>
             <label class="flex flex-1 label">
                 <input class="input p-2" type="text" name="message" placeholder="Input" bind:this={messageInputEl}/>
             </label>

diff --git a/apps/client/src/lib/components/Message.svelte b/apps/client/src/lib/components/Message.svelte
@@ -1,7 +1,6 @@
 <script context="module" lang="ts">
     export type IMessage = {
         userId: number;
-        displayName: string;
         message: string;
         profileImage: string;
         timestamp: number;
@@ -12,10 +11,10 @@
     import {Avatar} from "@skeletonlabs/skeleton";
 
     export let userId: number = 0;
+    export let displayName: string = '';
 
     export let message: IMessage = {
         userId: -1,
-        displayName: '',
         message: '',
         timestamp: 0,
         profileImage: ''
@@ -28,7 +27,7 @@
     <div class="card p-4 variant-soft rounded-tl-none space-y-2">
         <header class="flex justify-between items-center">
             <p class="font-bold {userId === message.userId ? 'text-amber-400' : 'text-white'}">
-                {message.displayName}</p>
+                {displayName}</p>
             <small class="opacity-50">{new Date(message.timestamp).toLocaleDateString('en-GB')}</small>
         </header>
         <p>{message.message}</p>

diff --git a/apps/client/src/lib/store.ts b/apps/client/src/lib/store.ts
@@ -6,10 +6,6 @@ export type UserStore = Writable<User>;
 
 const userStore = writable({});
 
-userStore.subscribe((user) => {
-    console.log(user);
-});
-
 export function getUserStore() {
     return setContext('user', userStore) as UserStore;
 }