github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-12-22 20:21:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: submit own style index on realtime user state set

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-25 11:08:29 +01:00
parent b538c2c2a3
commit 24b7514e25
8 changed files with 157 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

194
backend/src/realtime/realtime-note/realtime-user-status-adapter.spec.ts
View file

@ -77,28 +77,34 @@ describe('realtime user status adapter', () => {
const expectedMessage1: Message<MessageType.REALTIME_USER_STATE_SET> = {
type: MessageType.REALTIME_USER_STATE_SET,
payload: [
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 1,
username: username2,
displayName: username2,
payload: {
ownUser: {
styleIndex: 0,
displayName: username1,
},
{
active: true,
cursor: {
from: 0,
to: 0,
users: [
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 1,
username: username2,
displayName: username2,
},
styleIndex: 2,
username: username3,
displayName: username3,
},
],
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 2,
username: username3,
displayName: username3,
},
],
},
};
expect(sendMessage1Spy).toHaveBeenNthCalledWith(1, expectedMessage1);
expect(sendMessage2Spy).toHaveBeenCalledTimes(0);
@ -125,54 +131,66 @@ describe('realtime user status adapter', () => {
const expectedMessage2: Message<MessageType.REALTIME_USER_STATE_SET> = {
type: MessageType.REALTIME_USER_STATE_SET,
payload: [
{
active: true,
cursor: {
from: newFrom,
to: newTo,
},
styleIndex: 0,
username: username1,
displayName: username1,
payload: {
ownUser: {
styleIndex: 1,
displayName: username2,
},
{
active: true,
cursor: {
from: 0,
to: 0,
users: [
{
active: true,
cursor: {
from: newFrom,
to: newTo,
},
styleIndex: 0,
username: username1,
displayName: username1,
},
styleIndex: 2,
username: username3,
displayName: username3,
},
],
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 2,
username: username3,
displayName: username3,
},
],
},
};
const expectedMessage3: Message<MessageType.REALTIME_USER_STATE_SET> = {
type: MessageType.REALTIME_USER_STATE_SET,
payload: [
{
active: true,
cursor: {
from: newFrom,
to: newTo,
},
styleIndex: 0,
username: username1,
displayName: username1,
payload: {
ownUser: {
styleIndex: 2,
displayName: username3,
},
{
active: true,
cursor: {
from: 0,
to: 0,
users: [
{
active: true,
cursor: {
from: newFrom,
to: newTo,
},
styleIndex: 0,
username: username1,
displayName: username1,
},
styleIndex: 1,
username: username2,
displayName: username2,
},
],
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 1,
username: username2,
displayName: username2,
},
],
},
};
expect(sendMessage1Spy).toHaveBeenCalledTimes(0);
@ -191,34 +209,46 @@ describe('realtime user status adapter', () => {
const expectedMessage1: Message<MessageType.REALTIME_USER_STATE_SET> = {
type: MessageType.REALTIME_USER_STATE_SET,
payload: [
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 2,
username: username3,
displayName: username3,
payload: {
ownUser: {
styleIndex: 0,
displayName: username1,
},
],
users: [
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 2,
username: username3,
displayName: username3,
},
],
},
};
const expectedMessage3: Message<MessageType.REALTIME_USER_STATE_SET> = {
type: MessageType.REALTIME_USER_STATE_SET,
payload: [
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 0,
username: username1,
displayName: username1,
payload: {
ownUser: {
styleIndex: 2,
displayName: username3,
},
],
users: [
{
active: true,
cursor: {
from: 0,
to: 0,
},
styleIndex: 0,
username: username1,
displayName: username1,
},
],
},
};
expect(sendMessage1Spy).toHaveBeenNthCalledWith(1, expectedMessage1);

12
backend/src/realtime/realtime-note/realtime-user-status-adapter.ts
View file

@ -94,13 +94,21 @@ export class RealtimeUserStatusAdapter {
}
private sendCompleteStateToClient(client: RealtimeConnection): void {
const payload = this.collectAllConnectionsExcept(client).map(
const realtimeUsers = this.collectAllConnectionsExcept(client).map(
(client) => client.getRealtimeUserStateAdapter().realtimeUser,
);
client.getTransporter().sendMessage({
type: MessageType.REALTIME_USER_STATE_SET,
payload,
payload: {
users: realtimeUsers,
ownUser: {
displayName:
client.getRealtimeUserStateAdapter().realtimeUser.displayName,
styleIndex:
client.getRealtimeUserStateAdapter().realtimeUser.styleIndex,
},
},
});
}

8
commons/src/message-transporters/message.ts
View file

@ -22,7 +22,13 @@ export enum MessageType {
export interface MessagePayloads {
[MessageType.NOTE_CONTENT_STATE_REQUEST]: number[]
[MessageType.NOTE_CONTENT_UPDATE]: number[]
[MessageType.REALTIME_USER_STATE_SET]: RealtimeUser[]
[MessageType.REALTIME_USER_STATE_SET]: {
users: RealtimeUser[]
ownUser: {
displayName: string
styleIndex: number
}
}
[MessageType.REALTIME_USER_SINGLE_UPDATE]: RemoteCursor
}

2
frontend/src/components/editor-page/editor-pane/codemirror-extensions/remote-cursors/receive-remote-cursor-view-plugin.ts
View file

@ -20,7 +20,7 @@ export class ReceiveRemoteCursorViewPlugin implements PluginValue {
this.listener = messageTransporter.on(
MessageType.REALTIME_USER_STATE_SET,
({ payload }) => {
const cursors: RemoteCursor[] = payload.map((user) => ({
const cursors: RemoteCursor[] = payload.users.map((user) => ({
from: user.cursor.from,
to: user.cursor.to,
displayName: user.displayName,

7
frontend/src/components/editor-page/editor-pane/hooks/yjs/use-receive-realtime-users.ts
View file

@ -21,7 +21,12 @@ export const useReceiveRealtimeUsers = (messageTransporter: MessageTransporter):
useEffect(() => {
const listener = messageTransporter.on(
MessageType.REALTIME_USER_STATE_SET,
(payload) => setRealtimeUsers(payload.payload),
(message) =>
setRealtimeUsers(
message.payload.users,
message.payload.ownUser.styleIndex,
message.payload.ownUser.displayName
),
{ objectify: true }
) as Listener

8
frontend/src/redux/realtime/methods.ts
View file

@ -11,10 +11,14 @@ import type { RealtimeUser } from '@hedgedoc/commons'
/**
* Dispatches an event to add a user
*/
export const setRealtimeUsers = (users: RealtimeUser[]): void => {
export const setRealtimeUsers = (users: RealtimeUser[], ownStyleIndex: number, ownDisplayName: string): void => {
const action: SetRealtimeUsersAction = {
type: RealtimeStatusActionType.SET_REALTIME_USERS,
users
users,
ownUser: {
styleIndex: ownStyleIndex,
displayName: ownDisplayName
}
}
store.dispatch(action)
}

9
frontend/src/redux/realtime/reducers.ts
View file

@ -10,7 +10,11 @@ import type { Reducer } from 'redux'
const initialState: RealtimeStatus = {
isSynced: false,
isConnected: false,
onlineUsers: []
onlineUsers: [],
ownUser: {
displayName: '',
styleIndex: 0
}
}
/**
@ -28,7 +32,8 @@ export const RealtimeStatusReducer: Reducer<RealtimeStatus, RealtimeStatusAction
case RealtimeStatusActionType.SET_REALTIME_USERS:
return {
...state,
onlineUsers: action.users
onlineUsers: action.users,
ownUser: action.ownUser
}
case RealtimeStatusActionType.SET_REALTIME_CONNECTION_STATUS:
return {

8
frontend/src/redux/realtime/types.ts
View file

@ -16,6 +16,10 @@ export enum RealtimeStatusActionType {
export interface SetRealtimeUsersAction extends Action<RealtimeStatusActionType> {
type: RealtimeStatusActionType.SET_REALTIME_USERS
users: RealtimeUser[]
ownUser: {
styleIndex: number
displayName: string
}
}
export interface SetRealtimeConnectionStatusAction extends Action<RealtimeStatusActionType> {
@ -36,6 +40,10 @@ export interface RealtimeStatus {
onlineUsers: RealtimeUser[]
isConnected: boolean
isSynced: boolean
ownUser: {
displayName: string
styleIndex: number
}
}
export type RealtimeStatusActions =