(BUG) singleRoom fails to render specified room about vue-advanced-chat HOT 12 CLOSED

@mryellow Issue may be fixed by this commit 1509e5e
Could you confirm that it solves the issue?

from vue-advanced-chat.

When Room.computed.room is executed on initial loading the roomId is an empty string as room has not yet been defined.

https://github.com/antoine92190/vue-advanced-chat/blob/c6ce2a905dc9e2f8be800e309d33a4759e8d2824/src/ChatWindow/Room.vue#L384-L386

https://github.com/antoine92190/vue-advanced-chat/blob/c6ce2a905dc9e2f8be800e309d33a4759e8d2824/src/ChatWindow/ChatWindow.vue#L26

from vue-advanced-chat.

@mryellow Unfortunately I cannot reproduce, it works fine on my side.
Could you share the code your are using so I can reproduce the issue?

from vue-advanced-chat.

Adding immediate: true to ChatWindow.watch.roomId looks to be part of the solution, that way fetchRoom is called during initialisation.

I can bypass some of the type issues by making roomId strings and passing :room-id="'1'" to chat-window.

<import>
./node_modules/vue-advanced-chat/dist/vue-advanced-chat.css
</import>

<component>
/**
* Component to display chat interface and communicate with backend
*
* @example Display a chat box
* <chat :room="someValue" :user="someValue">
*/
module.exports = {
	props: {
		room: {type: String, default: ''},
		user: {type: String, default: ''},
	},
	data() {
		return {
			theme: 'light',
			styles: { container: { borderRadius: '4px' } },
			messages: [
				{
					_id: 7890,
					content: 'message 1',
					sender_id: 1234,
					username: 'John Doe',
					date: '27 May',
					timestamp: '10:20',
					seen: true,
					disable_actions: false,
					disable_reactions: false,
					file: null,
					reactions: {
						wink: [
							1234, // USER_ID
							4321
						],
						laughing: [
							1234
						]
					}
				}
			],
		};
	},
	computed: {
		rooms() {
			return [
				{
					roomId: '1',
					roomName: 'Room 1',
					lastMessage: {
						content: 'Last message received',
						sender_id: 1234,
						username: 'John Doe',
						timestamp: '10:20',
						date: 123242424,
						seen: false,
						new: true
					},
					users: [
						{
							_id: 1234,
							username: 'John Doe',
							status: {
								state: 'online',
								last_changed: 'today, 14:30'
							}
						},
						{
							_id: 4321,
							username: 'John Snow',
							status: {
								state: 'offline',
								last_changed: '14 July, 20:00'
							}
						}
					],
					typingUsers: [ 4321 ]
				}
			];
		}
	},
	created() {
		this.$debugging = true;
		// TODO: Re-implement or attach from outside?
		//if (this.$props.loader) this.$loader.start();
	},
	mounted() {
		this.build();
	},
	methods: {
		build() {
			this.$debug('Build!');
		},
	},
};
</component>

<template>
	<div>
		<chat-window
			:theme="theme"
			:styles="styles"
			:current-user-id="user"
			:rooms="rooms"
			:messages="messages"
			:room-id="'1'"
			:single-room="true"
			:show-files="false"
			:show-reaction-emojis="false"
		/>
	</div>
</template>

from vue-advanced-chat.

@mryellow I can add immediate: true to ChatWindow.watch.roomId, indeed it seems to work that way. Why do you say it's only part of the solution?

I don't see the roomId type as an issue, roomId: '1' should not be considered the same as roomId: 1.
So you can either do :roomId="'1'" as you said, or roomId="1", or pass the id as a variable with the correct type.

Let me know if adding immediate: true would be enough to solve your issue.

from vue-advanced-chat.

Actually, there was indeed a type issue with roomId. Just fixed it: b44eae1

from vue-advanced-chat.

Just added the immediate: true to roomId watcher: 3f3c87b

from vue-advanced-chat.

Why do you say it's only part of the solution?

Just wasn't completely isolated and understood. Didn't see a singleRoom chat rendering with my tweaks.

Will be away for an hour or 3 and then will dig deeper.

Another solution to the immediate: true which crossed my mind is running fetchRoom from within mounted hook.

from vue-advanced-chat.

Got it, didn't see any side effect from using immediate: true, and it solved the issue on my side.
Let me know if you find anything else. Thanks for the help!

from vue-advanced-chat.

Didn't find anything definitive, just adding notes.

Not seeing roomId being selected and :single-room="true" still results in blank page. Strangely :show-rooms-list="false" shows the rooms list regardless.

Looking for differences in the flow:

With chat-container roomId watcher being immediate: true, fetchRoom (the method) is fired and room is set as it should be.

Alternative when clicking on the room via rooms-list:

openRoom is fired, which sets selectedRoomId and triggers a fetchRoom event. A watcher on room also sets selectedRoomId however this path is not reached on initial load so selectedRoomId is never set.

Perhaps this rooms-list watcher too could be immediate so that selectedRoomId is defined on initialisation:

    room: {
      immediate: true,
      handler: function handler(val) {
        if (val) this.selectedRoomId = val.roomId;
      }
    }

This makes initial loading fire in the same order as clicking the rooms list, however still doesn't actually "enter" that room.

from vue-advanced-chat.

I'm closing this issue as this is probably fixed in the commit mentioned above.
Feel free to reopen otherwise.

from vue-advanced-chat.

Yeah sorry I saw your reply and then got busy.

Haven't tested but looks like you're on the right track with it.

from vue-advanced-chat.