From 8d497bcfc5c84869418f965f182a9386bab9230c Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Fri, 24 Mar 2023 15:31:05 +0100
Subject: [PATCH] feat(frontend): show own user in UsersOnlineSidebarMenu

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 .../own-user-line.tsx                         | 24 +++++++++++++++++++
 .../users-online-sidebar-menu.tsx             | 22 ++++++++---------
 2 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx

diff --git a/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx
new file mode 100644
index 000000000..ccae46147
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/own-user-line.tsx
@@ -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>
+  )
+}
diff --git a/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
index 2a54a4f3f..48663bcfb 100644
--- a/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
+++ b/frontend/src/components/editor-page/sidebar/users-online-sidebar-menu/users-online-sidebar-menu.tsx
@@ -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>
   )
 }