Merge pull request #555 from da7a90-backup/infinitescroll

Fix: avatar and banner upload fixes along with infinite scroll fix in…
CodeCrowCorp · Jun 25, 2023 · fcfd13f · fcfd13f
2 parents 2aaa0b1 + 8273c7d
commit fcfd13f
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 19 deletions.
diff --git a/src/lib/components/Channel/Chat/DrawerChat.svelte b/src/lib/components/Channel/Chat/DrawerChat.svelte
@@ -14,22 +14,26 @@
 		showEditChannelDrawer: boolean = false
 	let chatHistory: any[] = [],
 		chatDrawerElement: HTMLElement
+	let cursor = "";
 
 	channel_message.subscribe((value) => {
 		if (!value) return
 		var parsedMsg = JSON.parse(value)
 		if (parsedMsg.eventName === `channel-message-${channel?._id}`) {
 			if (parsedMsg.isMessageHistory) {
-				chatHistory = []
+				cursor = parsedMsg.cursor
+				//chatHistory = []
 				// if (Array.isArray(parsedMsg.data)) {
-				parsedMsg.data.forEach((message: any) => {
+				let messages = parsedMsg.data.map((message: any) => {
 					message.role = setRole({
 						userId: message.user.userId,
 						channel,
 						currentUserId: $page.data.user?.userId
 					})
-					chatHistory.push(message)
+					return message;
 				})
+
+				chatHistory = [...chatHistory, ...messages]
 				// } else {
 				// 	parsedMsg = setRole(JSON.parse(parsedMsg.data))
 				// 	chatHistory.push(parsedMsg)
@@ -80,7 +84,8 @@
 			emitChatHistoryToChannel({
 				channelSocket: channel.socket,
 				channelId: channel._id,
-				skip: 100
+				skip: 100,
+				cursor: cursor || "none"
 			})
 		}
 	}

diff --git a/src/lib/components/Channel/Stream/DropdownViewers.svelte b/src/lib/components/Channel/Stream/DropdownViewers.svelte
@@ -40,6 +40,10 @@
 			viewers = viewers.concat(parsedMsg.users)
 			cursor = parsedMsg.cursor
 		}
+
+		if(parsedMsg.eventName === `channel-subscribe-${channel?.id}`){
+			emitGetConnectedUsers({channelSocket: channel.socket, cursor})
+		}
 	})
 </script>
 

diff --git a/src/lib/websocket.ts b/src/lib/websocket.ts
@@ -97,19 +97,33 @@ const emitDeleteAllMessagesToChannel = ({
 const emitChatHistoryToChannel = ({
 	channelSocket,
 	channelId,
-	skip
+	skip,
+	cursor
 }: {
 	channelSocket: WebSocket
 	channelId: string
 	skip: number
+	cursor?: string
 }) => {
-	channelSocket.send(
-		JSON.stringify({
-			eventName: `channel-message-history`,
-			channel: channelId,
-			skip
-		})
-	)
+	if(!cursor){
+		channelSocket.send(
+			JSON.stringify({
+				eventName: `channel-message-history`,
+				channel: channelId,
+				skip
+			})
+		)
+	} else {
+		channelSocket.send(
+			JSON.stringify({
+				eventName: `channel-message-history`,
+				channel: channelId,
+				skip,
+				cursor
+			})
+		)
+	}
+
 }
 
 const emitReactToMessage = ({

diff --git a/src/routes/profile/[username]/+page.server.ts b/src/routes/profile/[username]/+page.server.ts
@@ -35,10 +35,15 @@ export const actions = {
 		addPropertyIfDefined(data, 'website', newUser)
 		addPropertyIfDefined(data, 'category', newUser)
 		addPropertyIfDefined(data, 'bio', newUser)
-		addPropertyIfDefined(data, 'avatar', newUser)
-		addPropertyIfDefined(data, 'banner', newUser)
 
-		if (data.get('avatar') !== null) {
+
+		const avatar =  data.get('avatar') as File
+
+		const banner =  data.get('banner') as File
+
+
+
+		if (data.get('avatar') !== null && avatar.size > 0) {
 			const urlLocation = await putImage(
 				`users/current/avatar?bucketName=avatars&originalName=${locals.user.userId}-avatar`,
 				data.get('avatar'),
@@ -50,7 +55,7 @@ export const actions = {
 			console.log(urlLocation)
 		}
 
-		if (data.get('banner') !== null) {
+		if (data.get('banner') !== null && banner.size > 0) {
 			const urlLocation = await putImage(
 				`users/current/banner?bucketName=banners&originalName=${locals.user.userId}-banner`,
 				data.get('banner'),

diff --git a/src/routes/profile/[username]/+page.svelte b/src/routes/profile/[username]/+page.svelte
@@ -9,6 +9,7 @@
 	export let data: PageData
 
 	let showDrawer = false
+	let banner =  data.profile?.banner || 'https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2710&amp;q=80';
 </script>
 
 {#if !data.profile}
@@ -17,9 +18,7 @@
 	<div class="relative block h-[31rem]">
 		<div
 			class="absolute top-0 w-full h-full bg-center bg-cover"
-			style="background-image: url('{data.profile?.banner
-				? data.profile.banner
-				: 'https://images.unsplash.com/photo-1499336315816-097655dcfbda?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=2710&amp;q=80'});">
+			style="background-image: url({banner});">
 			<span id="blackOverlay" class="w-full h-full absolute opacity-50 bg-black" />
 		</div>
 	</div>