Merge pull request #559 from gagan-suie/dev

Fix: disabled chat buttons if not logged in
CodeCrowCorp · Jun 25, 2023 · e7aaf05 · e7aaf05
2 parents 2c21562 + 8ffcf9f
commit e7aaf05
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 56 deletions.
diff --git a/src/lib/components/Channel/Chat/ChatInput.svelte b/src/lib/components/Channel/Chat/ChatInput.svelte
@@ -12,15 +12,15 @@
 	export let users: any
 	let selectedCommand = 0
 	let selectedUser = 0
-	let inputBox:any = null
+	let inputBox: any = null
 
 	$: chatMessage = ''
 	$: isChannelSocketConnected =
 		$channel_connection === `open-${channel._id}` && $page.data.user?.userId
 	$: isHost = channel.user === $page.data.user?.userId
 
-	function insert(str:string, index:number, value:string) {
-		return str.substr(0, index) + value + str.substr(index);
+	function insert(str: string, index: number, value: string) {
+		return str.substr(0, index) + value + str.substr(index)
 	}
 
 	const sendMessage = () => {
@@ -90,21 +90,19 @@
 	}
 
 	const makeCodeSnippet = () => {
-		if(!chatMessage){
-			chatMessage = "``"
-			
+		if (!chatMessage) {
+			chatMessage = '``'
+
 			inputBox.focus()
 			setTimeout(() => {
 				const pos = chatMessage.length - 1
 				inputBox.setSelectionRange(pos, pos)
 			}, 100)
-			
-		}
-		else {
+		} else {
 			const s = inputBox.selectionStart,
-			e = inputBox.selectionEnd;
-			chatMessage = insert(chatMessage, s, "`")
-			chatMessage = insert(chatMessage, e+1, "`")
+				e = inputBox.selectionEnd
+			chatMessage = insert(chatMessage, s, '`')
+			chatMessage = insert(chatMessage, e + 1, '`')
 		}
 	}
 
@@ -202,18 +200,19 @@
 		data-tip="AI"
 		on:click={() => {
 			if (isHost) toggleAIChat()
-		}}>
+		}}
+		disabled={!isChannelSocketConnected}>
 		<IconChatAI />
 		<span class="sr-only">Enable AI</span>
 	</button>
-	<EmojiPicker onSelect={onEmojiSelect} />
-	<GifPicker onSelect={onGifSelect} />
+	<EmojiPicker onSelect={onEmojiSelect} {isChannelSocketConnected} />
+	<GifPicker onSelect={onGifSelect} {isChannelSocketConnected} />
 	<button
 		type="button"
 		class="btn btn-neutral text-white border-none tooltip font-normal normal-case"
 		data-tip="Code snippet"
 		on:click={makeCodeSnippet}
-	>
+		disabled={!isChannelSocketConnected}>
 		<IconChatCode />
 		<span class="sr-only">Add code snippet</span>
 	</button>

diff --git a/src/lib/components/Channel/Chat/EmojiPicker.svelte b/src/lib/components/Channel/Chat/EmojiPicker.svelte
@@ -3,7 +3,7 @@
 	import FloatingMenu from './FloatingMenu.svelte'
 	import IconChatEmoji from '$lib/assets/icons/chat/IconChatEmoji.svelte'
 
-	export let onSelect: any
+	export let onSelect: any, isChannelSocketConnected: any
 
 	let container: any
 	let btn: any
@@ -30,6 +30,6 @@
 	})
 </script>
 
-<FloatingMenu id="emoji-picker" icon={IconChatEmoji} label="Emoji">
+<FloatingMenu id="emoji-picker" icon={IconChatEmoji} label="Emoji" {isChannelSocketConnected}>
 	<div bind:this={container} />
 </FloatingMenu>
diff --git a/src/lib/components/Channel/Chat/FloatingMenu.svelte b/src/lib/components/Channel/Chat/FloatingMenu.svelte
@@ -1,57 +1,55 @@
 <script lang="ts">
-	import { clickOutside } from '../../../utils.js';
-    export let id:string = "float-menu"
-	export let icon:any = null
-	export let label:string = ""
-    
+	import { clickOutside } from '../../../utils.js'
+	export let id: string = 'float-menu'
+	export let icon: any = null
+	export let label: string = '',
+		isChannelSocketConnected: any
+
 	let btn: any
 	let isFocused = false
 
-	const handleClickOutside = (event: any) =>{
-		const _id = event.target.id || 
-		event.target.parentElement.id || 
-		event.target.parentElement.parentElement.id
+	const handleClickOutside = (event: any) => {
+		const _id =
+			event.target.id ||
+			event.target.parentElement.id ||
+			event.target.parentElement.parentElement.id
 
-		if(id !== _id)
-			isFocused = false
+		if (id !== _id) isFocused = false
 	}
 
 	const forceClose = () => {
 		isFocused = false
 	}
 
-	$: btnClass = isFocused ? "btn-primary" : "btn-neutral"
-	$: dropdownClass = isFocused ? "dropdown-open" : ""
-	$: bottom = btn ? window.innerHeight - (btn.getBoundingClientRect().top) : 0
-
+	$: btnClass = isFocused ? 'btn-primary' : 'btn-neutral'
+	$: dropdownClass = isFocused ? 'dropdown-open' : ''
+	$: bottom = btn ? window.innerHeight - btn.getBoundingClientRect().top : 0
 </script>
+
 <button
 	bind:this={btn}
-	id={id}
+	{id}
 	type="button"
-	class={"btn text-white border-none tooltip font-normal normal-case " + btnClass}
+	class={'btn text-white border-none tooltip font-normal normal-case ' + btnClass}
 	data-tip={label}
 	on:click={() => {
 		isFocused = true
 	}}
->
-	<svelte:component id={id} this={icon} />
+	disabled={!isChannelSocketConnected}>
+	<svelte:component this={icon} {id} />
 	<span class="sr-only">Add emoji</span>
 </button>
-<div 
-	use:clickOutside={handleClickOutside} 
-	class={"dropdown dropdown-top " + dropdownClass}
->
+<div use:clickOutside={handleClickOutside} class={'dropdown dropdown-top ' + dropdownClass}>
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div 
-        style="bottom: {bottom}px" 
-		class={'dropdown-content menu shadow !fixed right-0 z-50 floating-menu overflow-auto'} 
-    >
+	<div
+		style="bottom: {bottom}px"
+		class={'dropdown-content menu shadow !fixed right-0 z-50 floating-menu overflow-auto'}>
 		<slot {forceClose} />
 	</div>
 </div>
+
 <style>
 	.floating-menu {
 		max-width: 100vw;
 	}
-</style>
+</style>
diff --git a/src/lib/components/Channel/Chat/GifPicker.svelte b/src/lib/components/Channel/Chat/GifPicker.svelte
@@ -6,7 +6,7 @@
 	import { get } from '../../../api.js'
 	import { page } from '$app/stores'
 
-	export let onSelect: any
+	export let onSelect: any, isChannelSocketConnected: any
 
 	let gifs: { downsized_large: string; original: string; title: string }[] = []
 	let searched: { downsized_large: string; original: string; title: string }[] = []
@@ -15,11 +15,13 @@
 
 	onMount(async () => {
 		loading = true
-		const resp = await get('giphy/trending', {
-			userId: $page.data.user?.userId,
-			token: $page.data.user?.token
-		})
-		if (resp && Array.isArray(resp)) gifs = resp
+		if (isChannelSocketConnected) {
+			const resp = await get('giphy/trending', {
+				userId: $page.data.user?.userId,
+				token: $page.data.user?.token
+			})
+			if (resp && Array.isArray(resp)) gifs = resp
+		}
 		loading = false
 	})
 
@@ -37,7 +39,12 @@
 	$: list = query ? searched : gifs
 </script>
 
-<FloatingMenu let:forceClose id="gif-picker" icon={IconChatGif} label="GIF">
+<FloatingMenu
+	let:forceClose
+	id="gif-picker"
+	icon={IconChatGif}
+	label="GIF"
+	{isChannelSocketConnected}>
 	<div class="gif-picker bg-base-300 flex flex-col rounded-md px-2">
 		<div class="m-2">
 			<input
@@ -46,12 +53,11 @@
 				class="input input-bordered input-sm w-full max-w-xs"
 				on:input={onSearch}
 				on:keydown={(e) => {
-					if(e.key === 'Enter'){
+					if (e.key === 'Enter') {
 						e.preventDefault()
 						onSearch(e)
 					}
-				}} 
-			/>
+				}} />
 		</div>
 
 		{#if loading}