Adapt react-client to use the real backend API (#1545)

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/document-bar/note-info/note-info-line-updated.tsx

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { useMemo } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { NoteInfoLine } from './note-info-line'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import type { NoteInfoTimeLineProps } from './note-info-time-line'
+import { UnitalicBoldTimeFromNow } from './utils/unitalic-bold-time-from-now'
+import { UnitalicBoldTrans } from './utils/unitalic-bold-trans'
+import { UserAvatarForUsername } from '../../../common/user-avatar/user-avatar-for-username'
+
+/**
+ * Renders an info line about the last update of the current note.
+ * @param size The size in which line and user avatar should be displayed.
+ */
+export const NoteInfoLineUpdated: React.FC<NoteInfoTimeLineProps> = ({ size }) => {
+  useTranslation()
+  const noteUpdateTime = useApplicationState((state) => state.noteDetails.updatedAt)
+  const noteUpdateUser = useApplicationState((state) => state.noteDetails.updateUsername)
+
+  const userBlock = useMemo(() => {
+    if (!noteUpdateUser) {
+      return <UnitalicBoldTrans i18nKey={'common.guestUser'} />
+    }
+    return (
+      <UserAvatarForUsername
+        username={noteUpdateUser}
+        additionalClasses={'font-style-normal bold font-weight-bold'}
+        size={size ? 'lg' : undefined}
+      />
+    )
+  }, [noteUpdateUser, size])
+
+  return (
+    <NoteInfoLine icon={'pencil'} size={size}>
+      <Trans i18nKey={'editor.modal.documentInfo.edited'}>
+        {userBlock}
+        <UnitalicBoldTimeFromNow time={noteUpdateTime} />
+      </Trans>
+    </NoteInfoLine>
+  )
+}