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/profile-page/access-tokens/access-token-list-entry.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { Col, ListGroup, Row } from 'react-bootstrap'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { Trans, useTranslation } from 'react-i18next'
@@ -12,6 +12,7 @@ import { DateTime } from 'luxon'
 import { IconButton } from '../../common/icon-button/icon-button'
 import type { AccessToken } from '../../../api/tokens/types'
 import { AccessTokenDeletionModal } from './access-token-deletion-modal'
+import type { AccessTokenUpdateProps } from './profile-access-tokens'
 
 export interface AccessTokenListEntryProps {
   token: AccessToken
@@ -20,8 +21,12 @@ export interface AccessTokenListEntryProps {
 /**
  * List entry that represents an access token with the possibility to delete it.
  * @param token The access token.
+ * @param onUpdateList Callback that is fired when the deletion modal is closed to update the token list.
  */
-export const AccessTokenListEntry: React.FC<AccessTokenListEntryProps> = ({ token }) => {
+export const AccessTokenListEntry: React.FC<AccessTokenListEntryProps & AccessTokenUpdateProps> = ({
+  token,
+  onUpdateList
+}) => {
   useTranslation()
   const [showDeletionModal, setShowDeletionModal] = useState(false)
 
@@ -31,7 +36,24 @@ export const AccessTokenListEntry: React.FC<AccessTokenListEntryProps> = ({ toke
 
   const onHideDeletionModal = useCallback(() => {
     setShowDeletionModal(false)
-  }, [])
+    onUpdateList()
+  }, [onUpdateList])
+
+  const lastUsed = useMemo(() => {
+    if (!token.lastUsedAt) {
+      return <Trans i18nKey={'profile.accessTokens.neverUsed'} />
+    }
+    return (
+      <Trans
+        i18nKey='profile.accessTokens.lastUsed'
+        values={{
+          time: DateTime.fromISO(token.lastUsedAt).toRelative({
+            style: 'short'
+          })
+        }}
+      />
+    )
+  }, [token.lastUsedAt])
 
   return (
     <ListGroup.Item className='bg-dark'>
@@ -39,16 +61,7 @@ export const AccessTokenListEntry: React.FC<AccessTokenListEntryProps> = ({ toke
         <Col className='text-start' {...cypressId('access-token-label')}>
           {token.label}
         </Col>
-        <Col className='text-start text-white-50'>
-          <Trans
-            i18nKey='profile.accessTokens.lastUsed'
-            values={{
-              time: DateTime.fromISO(token.lastUsed).toRelative({
-                style: 'short'
-              })
-            }}
-          />
-        </Col>
+        <Col className='text-start text-white-50'>{lastUsed}</Col>
         <Col xs='auto'>
           <IconButton
             icon='trash-o'