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

feat(frontend): show own user in UsersOnlineSidebarMenu

Browse source 
Signed-off-by: Philip Molares <philip.molares@udo.edu>
This commit is contained in:
Philip Molares 2023-03-24 15:31:05 +01:00
parent 61032cb745
commit 8d497bcfc5
2 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx Normal file
View file

@ -0,0 +1,24 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { useApplicationState } from '../../../../hooks/common/use-application-state'
import { SidebarButton } from '../sidebar-button/sidebar-button'
import { UserLine } from '../user-line/user-line'
import React from 'react'
/**
* Renders the users own {@link UserLine userline}.
*/
export const OwnUserLine: React.FC = () => {
const ownUsername = useApplicationState((state) => state.user?.username ?? null)
const ownDisplayname = useApplicationState((state) => state.realtimeStatus.ownUser.displayName)
const ownStyleIndex = useApplicationState((state) => state.realtimeStatus.ownUser.styleIndex)
return (
<SidebarButton>
<UserLine displayName={ownDisplayname} username={ownUsername} color={ownStyleIndex} active={true} />
</SidebarButton>
)
}

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

@ -1,5 +1,5 @@
/*
* SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
@ -10,6 +10,7 @@ import type { SpecificSidebarMenuProps } from '../types'
import { DocumentSidebarMenuSelection } from '../types'
import { UserLine } from '../user-line/user-line'
import styles from './online-counter.module.scss'
import { OwnUserLine } from './own-user-line'
import React, { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'
import { ArrowLeft as IconArrowLeft } from 'react-bootstrap-icons'
import { People as IconPeople } from 'react-bootstrap-icons'
@ -35,7 +36,7 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
useTranslation()
useEffect(() => {
buttonRef.current?.style.setProperty('--users-online', `"${realtimeUsers.length}"`)
buttonRef.current?.style.setProperty('--users-online', `"${realtimeUsers.length + 1}"`)
}, [realtimeUsers])
const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
@ -44,17 +45,11 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
const onlineUserElements = useMemo(() => {
if (realtimeUsers.length === 0) {
return (
<SidebarButton>
<span className={'ms-3'}>
<Trans i18nKey={'editor.onlineStatus.noUsers'}></Trans>
</span>
</SidebarButton>
)
return null
} else {
return realtimeUsers.map((realtimeUser) => {
return realtimeUsers.map((realtimeUser, index) => {
return (
<SidebarButton key={realtimeUser.styleIndex}>
<SidebarButton key={index}>
<UserLine
displayName={realtimeUser.displayName}
username={realtimeUser.username}
@ -77,7 +72,10 @@ export const UsersOnlineSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
className={`${styles['online-entry']} ${className ?? ''}`}>
<Trans i18nKey={'editor.onlineStatus.online'} />
</SidebarButton>
<SidebarMenu expand={expand}>{onlineUserElements}</SidebarMenu>
<SidebarMenu expand={expand}>
<OwnUserLine />
{onlineUserElements}
</SidebarMenu>
</Fragment>
)
}