refactor(permissions): retrieve special permissions from hook

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/hooks/use-get-special-permissions.ts

@@ -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 { useMemo } from 'react'
+import { SpecialGroup } from '@hedgedoc/commons'
+
+/**
+ * Returns the special permissions for the current note.
+ * @return A memoized object containing the special permissions for the current note.
+ */
+export const useGetSpecialPermissions = () => {
+  const groupPermissions = useApplicationState((state) => state.noteDetails?.permissions.sharedToGroups)
+  return useMemo(() => {
+    const everyone = groupPermissions?.find((group) => group.groupName === (SpecialGroup.EVERYONE as string))
+    const loggedIn = groupPermissions?.find((group) => group.groupName === (SpecialGroup.LOGGED_IN as string))
+    return {
+      [SpecialGroup.EVERYONE]: everyone,
+      [SpecialGroup.LOGGED_IN]: loggedIn
+    }
+  }, [groupPermissions])
+}

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-entry-user.tsx

@@ -17,6 +17,7 @@ import { AccessLevel, SpecialGroup } from '@hedgedoc/commons'
 import React, { useCallback, useMemo } from 'react'
 import { useAsync } from 'react-use'
 import { PermissionInconsistentAlert } from './permission-inconsistent-alert'
+import { useGetSpecialPermissions } from './hooks/use-get-special-permissions'
 
 export interface PermissionEntryUserProps {
   entry: NoteUserPermissionEntry
@@ -34,16 +35,15 @@ export const PermissionEntryUser: React.FC<PermissionEntryUserProps & Permission
 }) => {
   const noteId = useApplicationState((state) => state.noteDetails?.primaryAddress)
   const { showErrorNotification } = useUiNotifications()
-  const groupPermissions = useApplicationState((state) => state.noteDetails.permissions.sharedToGroups)
+  const { [SpecialGroup.EVERYONE]: everyonePermission, [SpecialGroup.LOGGED_IN]: loggedInPermission } =
+    useGetSpecialPermissions()
 
-  const permissionInconsistent = useMemo(() => {
+  const permissionInconsistent = useMemo(
-    const everyonePermission = groupPermissions.find((group) => group.groupName === (SpecialGroup.EVERYONE as string))
+    () =>
-    const loggedInPermission = groupPermissions.find((group) => group.groupName === (SpecialGroup.LOGGED_IN as string))
-    return (
       (everyonePermission && everyonePermission.canEdit && !entry.canEdit) ||
-      (loggedInPermission && loggedInPermission.canEdit && !entry.canEdit)
+      (loggedInPermission && loggedInPermission.canEdit && !entry.canEdit),
-    )
+    [everyonePermission, loggedInPermission, entry]
-  }, [groupPermissions, entry])
+  )
 
   const onRemoveEntry = useCallback(() => {
     if (!noteId) {

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/permissions-sidebar-entry/permissions-modal/permission-section-special-groups.tsx

@@ -3,13 +3,13 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { useApplicationState } from '../../../../../../hooks/common/use-application-state'
 import { useIsOwner } from '../../../../../../hooks/common/use-is-owner'
 import type { PermissionDisabledProps } from './permission-disabled.prop'
 import { PermissionEntrySpecialGroup } from './permission-entry-special-group'
 import { AccessLevel, SpecialGroup } from '@hedgedoc/commons'
 import React, { Fragment, useMemo } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
+import { useGetSpecialPermissions } from './hooks/use-get-special-permissions'
 
 /**
  * Section of the permission modal for managing special group access to the note.
@@ -18,16 +18,10 @@ import { Trans, useTranslation } from 'react-i18next'
  */
 export const PermissionSectionSpecialGroups: React.FC<PermissionDisabledProps> = ({ disabled }) => {
   useTranslation()
-  const groupPermissions = useApplicationState((state) => state.noteDetails?.permissions.sharedToGroups)
   const isOwner = useIsOwner()
+  const { [SpecialGroup.EVERYONE]: groupEveryone, [SpecialGroup.LOGGED_IN]: groupLoggedIn } = useGetSpecialPermissions()
 
   const specialGroupEntries = useMemo(() => {
-    if (!groupPermissions) {
-      return
-    }
-    const groupEveryone = groupPermissions.find((entry) => entry.groupName === (SpecialGroup.EVERYONE as string))
-    const groupLoggedIn = groupPermissions.find((entry) => entry.groupName === (SpecialGroup.LOGGED_IN as string))
-
     return {
       everyoneLevel: groupEveryone
         ? groupEveryone.canEdit
@@ -41,11 +35,7 @@ export const PermissionSectionSpecialGroups: React.FC<PermissionDisabledProps> =
         : AccessLevel.NONE,
       loggedInInconsistentAlert: groupEveryone && (!groupLoggedIn || (groupEveryone.canEdit && !groupLoggedIn.canEdit))
     }
-  }, [groupPermissions])
+  }, [groupEveryone, groupLoggedIn])
-
-  if (!specialGroupEntries) {
-    return null
-  }
 
   return (
     <Fragment>