refactor(frontend): switch to DTOs from @hedgedoc/commons

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/components/profile-page/access-tokens/access-token-created-modal.tsx

@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { AccessTokenWithSecret } from '../../../api/tokens/types'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { CopyableField } from '../../common/copyable/copyable-field/copyable-field'
 import type { ModalVisibilityProps } from '../../common/modals/common-modal'
@@ -11,9 +10,10 @@ import { CommonModal } from '../../common/modals/common-modal'
 import React from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans } from 'react-i18next'
+import type { ApiTokenWithSecretDto } from '@hedgedoc/commons'
 
 export interface AccessTokenCreatedModalProps extends ModalVisibilityProps {
-  tokenWithSecret?: AccessTokenWithSecret
+  tokenWithSecret?: ApiTokenWithSecretDto
 }
 
 /**

frontend/src/components/profile-page/access-tokens/access-token-creation-form/access-token-creation-form.tsx

@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { AccessTokenWithSecret } from '../../../../api/tokens/types'
 import { AccessTokenCreatedModal } from '../access-token-created-modal'
 import type { AccessTokenUpdateProps } from '../profile-access-tokens'
 import { AccessTokenCreationFormExpiryField } from './access-token-creation-form-expiry-field'
@@ -15,6 +14,7 @@ import type { ChangeEvent } from 'react'
 import React, { Fragment, useCallback, useMemo, useState } from 'react'
 import { Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import type { ApiTokenWithSecretDto } from '@hedgedoc/commons'
 
 interface NewTokenFormValues {
   label: string
@@ -38,7 +38,7 @@ export const AccessTokenCreationForm: React.FC<AccessTokenUpdateProps> = ({ onUp
   }, [expiryDates])
 
   const [formValues, setFormValues] = useState<NewTokenFormValues>(() => formValuesInitialState)
-  const [newTokenWithSecret, setNewTokenWithSecret] = useState<AccessTokenWithSecret>()
+  const [newTokenWithSecret, setNewTokenWithSecret] = useState<ApiTokenWithSecretDto>()
 
   const onHideCreatedModal = useCallback(() => {
     setFormValues(formValuesInitialState)

frontend/src/components/profile-page/access-tokens/access-token-creation-form/hooks/use-on-create-token.ts

@@ -1,40 +1,40 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { postNewAccessToken } from '../../../../../api/tokens'
-import type { AccessTokenWithSecret } from '../../../../../api/tokens/types'
+import { postNewAccessToken } from '../../../../../api/api-tokens'
 import { useUiNotifications } from '../../../../notifications/ui-notification-boundary'
 import { DateTime } from 'luxon'
 import type { FormEvent } from 'react'
 import { useCallback } from 'react'
+import type { ApiTokenWithSecretDto } from '@hedgedoc/commons'
 
 /**
  * Callback for requesting a new access token from the API and returning the response token and secret.
  *
  * @param label The label for the new access token.
- * @param expiryDate The expiry date of the new access token.
+ * @param expiryDateStr The expiry date of the new access token.
  * @param setNewTokenWithSecret Callback to set the new access token with the secret from the API.
  * @return Callback that can be called when the new access token should be requested.
  */
 export const useOnCreateToken = (
   label: string,
-  expiryDate: string,
-  setNewTokenWithSecret: (token: AccessTokenWithSecret) => void
+  expiryDateStr: string,
+  setNewTokenWithSecret: (token: ApiTokenWithSecretDto) => void
 ): ((event: FormEvent) => void) => {
   const { showErrorNotification } = useUiNotifications()
 
   return useCallback(
     (event: FormEvent) => {
       event.preventDefault()
-      const expiryInMillis = DateTime.fromFormat(expiryDate, 'yyyy-MM-dd').toMillis()
-      postNewAccessToken(label, expiryInMillis)
+      const expiryDate = DateTime.fromFormat(expiryDateStr, 'yyyy-MM-dd').toJSDate()
+      postNewAccessToken(label, expiryDate)
         .then((tokenWithSecret) => {
           setNewTokenWithSecret(tokenWithSecret)
         })
         .catch(showErrorNotification('profile.accessTokens.creationFailed'))
     },
-    [expiryDate, label, setNewTokenWithSecret, showErrorNotification]
+    [expiryDateStr, label, setNewTokenWithSecret, showErrorNotification]
   )
 }

frontend/src/components/profile-page/access-tokens/access-token-deletion-modal.tsx

@@ -1,10 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { deleteAccessToken } from '../../../api/tokens'
-import type { AccessToken } from '../../../api/tokens/types'
+import { deleteAccessToken } from '../../../api/api-tokens'
 import { cypressId } from '../../../utils/cypress-attribute'
 import type { ModalVisibilityProps } from '../../common/modals/common-modal'
 import { CommonModal } from '../../common/modals/common-modal'
@@ -12,9 +11,10 @@ import { useUiNotifications } from '../../notifications/ui-notification-boundary
 import React, { useCallback } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import type { ApiTokenDto } from '@hedgedoc/commons'
 
 export interface AccessTokenDeletionModalProps extends ModalVisibilityProps {
-  token: AccessToken
+  token: ApiTokenDto
 }
 
 /**

frontend/src/components/profile-page/access-tokens/access-token-list-entry.tsx

@@ -1,9 +1,8 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { AccessToken } from '../../../api/tokens/types'
 import { useBooleanState } from '../../../hooks/common/use-boolean-state'
 import { cypressId } from '../../../utils/cypress-attribute'
 import { IconButton } from '../../common/icon-button/icon-button'
@@ -14,9 +13,10 @@ import React, { useCallback, useMemo } from 'react'
 import { Col, ListGroup, Row } from 'react-bootstrap'
 import { Trash as IconTrash } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
+import type { ApiTokenDto } from '@hedgedoc/commons'
 
 export interface AccessTokenListEntryProps {
-  token: AccessToken
+  token: ApiTokenDto
 }
 
 /**

frontend/src/components/profile-page/access-tokens/profile-access-tokens.tsx

@@ -1,16 +1,16 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { getAccessTokenList } from '../../../api/tokens'
-import type { AccessToken } from '../../../api/tokens/types'
+import { getAccessTokenList } from '../../../api/api-tokens'
 import { useUiNotifications } from '../../notifications/ui-notification-boundary'
 import { AccessTokenCreationForm } from './access-token-creation-form/access-token-creation-form'
 import { AccessTokenListEntry } from './access-token-list-entry'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { Card, ListGroup } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
+import type { ApiTokenDto } from '@hedgedoc/commons'
 
 export interface AccessTokenUpdateProps {
   onUpdateList: () => void
@@ -21,7 +21,7 @@ export interface AccessTokenUpdateProps {
  */
 export const ProfileAccessTokens: React.FC = () => {
   useTranslation()
-  const [accessTokens, setAccessTokens] = useState<AccessToken[]>([])
+  const [accessTokens, setAccessTokens] = useState<ApiTokenDto[]>([])
   const { showErrorNotification } = useUiNotifications()
 
   const refreshAccessTokens = useCallback(() => {

frontend/src/components/profile-page/settings/profile-display-name.tsx

@@ -1,9 +1,9 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { updateDisplayName } from '../../../api/me'
+import { updateUser } from '../../../api/me'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { useOnInputChange } from '../../../hooks/common/use-on-input-change'
 import { DisplayNameField } from '../../common/fields/display-name-field'
@@ -27,7 +27,7 @@ export const ProfileDisplayName: React.FC = () => {
   const onSubmitNameChange = useCallback(
     (event: FormEvent) => {
       event.preventDefault()
-      updateDisplayName(displayName)
+      updateUser(displayName, null)
         .then(fetchAndSetUser)
         .catch(showErrorNotification('profile.changeDisplayNameFailed'))
     },