From 9215cb448e6e25c491167b82b3190fdf87c82ce0 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 14 Feb 2023 14:07:31 -0600
Subject: [PATCH 1/2] Feat: added send-message websockets

---
 src/lib/assets/icons/channel/IconChatDrawer.svelte | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 src/lib/assets/icons/channel/IconChatDrawer.svelte

diff --git a/src/lib/assets/icons/channel/IconChatDrawer.svelte b/src/lib/assets/icons/channel/IconChatDrawer.svelte
new file mode 100644
index 00000000..bd795451
--- /dev/null
+++ b/src/lib/assets/icons/channel/IconChatDrawer.svelte
@@ -0,0 +1,12 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6">
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
+</svg>

From 7ca353c6aee17d4b06671c2a9eeddb962e6213c4 Mon Sep 17 00:00:00 2001
From: Gagan Suie <gagan.suie@codecrow.io>
Date: Tue, 14 Feb 2023 14:08:00 -0600
Subject: [PATCH 2/2] Feat: added send-message websockets

---
 .../Browse/CreateChannelDrawer.svelte         |  4 +--
 .../components/Channel/Chat/ChatDrawer.svelte | 33 +++++++++++++----
 .../components/Channel/Chat/ChatInput.svelte  | 16 +++++++--
 src/routes/+layout.svelte                     |  1 -
 .../channel/[channelId]/+page.server.ts       | 35 +++++++++++++++++--
 src/routes/channel/[channelId]/+page.svelte   | 21 ++++++-----
 6 files changed, 85 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/Browse/CreateChannelDrawer.svelte b/src/lib/components/Browse/CreateChannelDrawer.svelte
index 537bbc4f..89be5625 100644
--- a/src/lib/components/Browse/CreateChannelDrawer.svelte
+++ b/src/lib/components/Browse/CreateChannelDrawer.svelte
@@ -161,12 +161,12 @@
 								{/if}
 							</span>
 						</div>
-						<div class="flex flex-row mt-5 ">
+						<!-- <div class="flex flex-row mt-5 ">
 							<input
 								bind:checked={newChannel.isPrivate}
 								type="checkbox"
 								class="checkbox checkbox-primary mr-3" /> Private
-						</div>
+						</div> -->
 					</div>
 
 					<div class="flex flex-row gap-2 mt-auto md:mb-4 p-3">
diff --git a/src/lib/components/Channel/Chat/ChatDrawer.svelte b/src/lib/components/Channel/Chat/ChatDrawer.svelte
index 5ad79deb..d8210562 100644
--- a/src/lib/components/Channel/Chat/ChatDrawer.svelte
+++ b/src/lib/components/Channel/Chat/ChatDrawer.svelte
@@ -1,18 +1,39 @@
 <script lang="ts">
 	import ChatInput from '$lib/components/Channel/Chat/ChatInput.svelte'
 	import ChatMessage from '$lib/components/Channel/Chat/ChatMessage.svelte'
+	import { channelMessage } from '$lib/stores/websocketStore'
 
 	export let showDrawer: boolean,
 		channel: any = undefined,
-		chatHistory: any = []
+		chatHistory: any = [],
+		userId: string = ''
+
+	$: chatHistory = chatHistory
+
+	channelMessage.subscribe((value) => {
+		if (!value) return
+		try {
+			const parsedData = JSON.parse(value.data)
+			console.log('parsedData', parsedData)
+			if (parsedData.eventName === `channel-message-${channel._id}`) {
+				var msg = parsedData.data
+				if (msg.user._id === channel.user) msg.role = 'Host'
+				else if (channel.mods?.includes(msg.user._id)) msg.role = 'Mod'
+				else if (msg.user._id === userId) msg.role = 'You'
+				else msg.role = 'Rando'
+				chatHistory.push(parsedData.data)
+			}
+		} catch (err) {
+			console.log(err)
+		}
+	})
 </script>
 
-<div class="drawer drawer-end absolute w-full z-20 top-0 right-0">
-	<input id="create-channel-drawer" type="checkbox" class="drawer-toggle" />
-	<div class="drawer-side">
+<div class="drawer drawer-end w-fit z-20 top-0 right-0">
+	<input id="chat-drawer" type="checkbox" class="drawer-toggle" />
+	<div class="drawer-side justify-end">
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click={() => (showDrawer = false)} class="drawer-overlay" />
-		<div class="bg-base-200 flex flex-col">
+		<div class="bg-base-100 flex flex-col ">
 			<p class="p-3 text-xl mb-5 pb-2 border-purple-500 font-semibold border-b-2">
 				{channel.title || 'Chat'}
 			</p>
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
index 1fd2c48b..35e78740 100644
--- a/src/lib/components/Channel/Chat/ChatInput.svelte
+++ b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -4,9 +4,16 @@
 	// import IconChatGif from '$lib/assets/icons/chat/IconChatGif.svelte'
 	// import IconChatCode from '$lib/assets/icons/chat/IconChatCode.svelte'
 	import IconChatSendMessage from '$lib/assets/icons/chat/IconChatSendMessage.svelte'
+	import { enhance } from '$app/forms'
+	let form: HTMLFormElement
 </script>
 
-<form class="rounded-lg bg-base-100 p-2 w-96">
+<form
+	bind:this={form}
+	class="rounded-lg bg-base-200 p-2 w-96"
+	method="POST"
+	action="?/send-message"
+	use:enhance>
 	<!-- <button
 		type="button"
 		class="inline-flex justify-center p-2 text-gray-500 rounded-lg cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
@@ -33,12 +40,17 @@
 	</button> -->
 	<div class="flex items-center py-2 rounded-lg">
 		<textarea
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					form.requestSubmit()
+					e.preventDefault()
+				}
+			}}
 			id="chat"
 			rows="1"
 			class="block mx-2 p-2.5 w-full text-sm textarea textarea-bordered textarea-secondary"
 			placeholder="Your message..." /><!--focus:h-32 -->
 		<button
-			type="submit"
 			class="inline-flex justify-center p-2 text-secondary rounded-full cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-600">
 			<IconChatSendMessage />
 			<span class="sr-only">Send message</span>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 30aba6e7..b4637f15 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -52,7 +52,6 @@
 	onMount(async () => {
 		const platformSocketId = await get(`wsinit/wsid`)
 		initPlatformSocket(platformSocketId)
-		console.log('platformSocketId', platformSocketId)
 		platformSocket?.addEventListener('open', (data) => {
 			console.log('socket connection open')
 			console.log(data)
diff --git a/src/routes/channel/[channelId]/+page.server.ts b/src/routes/channel/[channelId]/+page.server.ts
index 24dac332..19cff9a9 100644
--- a/src/routes/channel/[channelId]/+page.server.ts
+++ b/src/routes/channel/[channelId]/+page.server.ts
@@ -1,13 +1,42 @@
-import { error } from '@sveltejs/kit'
+import { error, type Actions } from '@sveltejs/kit'
 import type { PageServerLoad } from './$types'
 import { getChannel } from '$lib/stores/channelStore'
+import { emitMessageToChannel } from '$lib/websocket'
 
-export const load = (async ({ params }) => {
+export const load = (async ({ params, locals }) => {
 	const post = await getChannel({ channelId: params.channelId })
 	if (post) {
+		const userId = locals?.user?.userId || ''
 		return {
-			post
+			post,
+			userId
 		}
 	}
 	throw error(404, 'Not found')
 }) satisfies PageServerLoad
+
+export const actions = {
+	'send-message': async ({
+		params,
+		request,
+		locals
+	}: {
+		params: any
+		request: any
+		locals: any
+	}) => {
+		const { user } = locals?.user || ''
+		const data = await request.formData()
+		const chat = data.get('chat')
+		const channelId = params.channelId
+		const completeMessage = {
+			body: chat,
+			state: { timestamp: new Date().toISOString() },
+			userId: user?._id || '',
+			username: user?.username || '',
+			channelId: channelId
+		}
+		emitMessageToChannel({ channelId, message: completeMessage })
+		return { success: true }
+	}
+} satisfies Actions
diff --git a/src/routes/channel/[channelId]/+page.svelte b/src/routes/channel/[channelId]/+page.svelte
index 10f48ff5..eb4654b9 100644
--- a/src/routes/channel/[channelId]/+page.svelte
+++ b/src/routes/channel/[channelId]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import IconCreate from '$lib/assets/icons/IconCreate.svelte'
+	import IconChatDrawer from '$lib/assets/icons/channel/IconChatDrawer.svelte'
 	import ChatDrawer from '$lib/components/Channel/Chat/ChatDrawer.svelte'
 	import type { PageData } from './$types'
 	import { onDestroy, onMount } from 'svelte'
@@ -10,8 +10,8 @@
 	export let data: PageData
 
 	$: chatHistory = []
-	$: ({ post } = data)
-	let showDrawer = false
+	$: ({ post, userId } = data)
+	let showDrawer = true
 
 	onMount(async () => {
 		const channelSocketId = await get(`wsinit/channelid?channelId=${post._id}`)
@@ -40,18 +40,17 @@
 	onDestroy(() => channelSocket?.close())
 </script>
 
-<div class="flex flex-col md:flex-row gap-4 py-5 pl-5">
-	<div class="form-control">
+<div class="flex flex-col md:flex-row gap-4 justify-end">
+	<div class="form-control p-5">
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<label
-			for="create-channel-drawer"
-			class="btn w-[21rem] btn-primary gap-2 drawer-button"
-			on:click={() => (showDrawer = true)}>
-			<IconCreate />
-			Show Chat</label>
+			for="chat-drawer"
+			class="btn gap-2 drawer-button"
+			on:click={() => (showDrawer = !showDrawer)}>
+			<IconChatDrawer /></label>
 	</div>
 
 	{#if showDrawer}
-		<ChatDrawer bind:showDrawer bind:channel={post} bind:chatHistory />
+		<ChatDrawer bind:showDrawer bind:channel={post} bind:chatHistory bind:userId />
 	{/if}
 </div>