mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-06-02 07:59:56 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: reimplement realtime-communication

Browse source 
This commit refactors a lot of things that are not easy to separate.
It replaces the binary protocol of y-protocols with json.
It introduces event based message processing.
It implements our own code mirror plugins for synchronisation of content and remote cursors

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-03-22 20:21:40 +01:00
parent 67cf1432b2
commit 3a06f84af1
110 changed files with 3920 additions and 2201 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
View file

@ -31,21 +31,19 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
selectedMenuId
}) => {
const buttonRef = useRef<HTMLButtonElement>(null)
const onlineUsers = useApplicationState((state) => state.realtime.users)
const realtimeUsers = useApplicationState((state) => state.realtimeStatus.onlineUsers)
useTranslation()
useEffect(() => {
const value = `${Object.keys(onlineUsers).length}`
buttonRef.current?.style.setProperty('--users-online', `"${value}"`)
}, [onlineUsers])
buttonRef.current?.style.setProperty('--users-online', `"${realtimeUsers.length}"`)
}, [realtimeUsers])
const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
const expand = selectedMenuId === menuId
const onClickHandler = useCallback(() => onClick(menuId), [menuId, onClick])
const onlineUserElements = useMemo(() => {
const entries = Object.entries(onlineUsers)
if (entries.length === 0) {
if (realtimeUsers.length === 0) {
return (
<SidebarButton>
<span className={'ms-3'}>
@ -54,15 +52,19 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
</SidebarButton>
)
} else {
return entries.map(([clientId, onlineUser]) => {
return realtimeUsers.map((realtimeUser) => {
return (
<SidebarButton key={clientId}>
<UserLine username={onlineUser.username} color={onlineUser.color} status={onlineUser.active} />
<SidebarButton key={realtimeUser.styleIndex}>
<UserLine
username={realtimeUser.displayName}
color={realtimeUser.styleIndex}
active={realtimeUser.active}
/>
</SidebarButton>
)
})
}
}, [onlineUsers])
}, [realtimeUsers])
return (
<Fragment>