diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js --- a/web/modals/threads/settings/thread-settings-general-tab.react.js +++ b/web/modals/threads/settings/thread-settings-general-tab.react.js @@ -3,7 +3,7 @@ import * as React from 'react'; import tinycolor from 'tinycolor2'; -import { threadHasPermission } from 'lib/shared/thread-utils.js'; +import { useThreadHasPermission } from 'lib/shared/thread-utils.js'; import { type SetState } from 'lib/types/hook-types.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js'; @@ -80,11 +80,13 @@ [setQueuedChanges, threadInfo.color], ); - const threadNameInputDisabled = !threadHasPermission( + const canEditThreadName = useThreadHasPermission( threadInfo, threadPermissions.EDIT_THREAD_NAME, ); + const threadNameInputDisabled = !canEditThreadName; + return (
diff --git a/web/modals/threads/settings/thread-settings-modal.react.js b/web/modals/threads/settings/thread-settings-modal.react.js --- a/web/modals/threads/settings/thread-settings-modal.react.js +++ b/web/modals/threads/settings/thread-settings-modal.react.js @@ -13,8 +13,8 @@ import { getAvailableRelationshipButtons } from 'lib/shared/relationship-utils.js'; import { getSingleOtherUser, - threadHasPermission, threadUIName, + useThreadHasPermission, } from 'lib/shared/thread-utils.js'; import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { RelationshipButton } from 'lib/types/relationship-types.js'; @@ -97,39 +97,58 @@ return getAvailableRelationshipButtons(otherUserInfo); }, [otherUserInfo]); + const canEditThreadName = useThreadHasPermission( + threadInfo, + threadPermissions.EDIT_THREAD_NAME, + ); + const canEditThreadColor = useThreadHasPermission( + threadInfo, + threadPermissions.EDIT_THREAD_COLOR, + ); + const canEditThreadDescription = useThreadHasPermission( + threadInfo, + threadPermissions.EDIT_THREAD_DESCRIPTION, + ); + const canEditThreadPermissions = useThreadHasPermission( + threadInfo, + threadPermissions.EDIT_PERMISSIONS, + ); + const canDeleteThread = useThreadHasPermission( + threadInfo, + threadPermissions.DELETE_THREAD, + ); + const hasPermissionForTab = React.useCallback( // ESLint doesn't recognize that invariant always throws // eslint-disable-next-line consistent-return - (thread: ThreadInfo, tab: TabType) => { + (tab: TabType) => { if (tab === 'general') { return ( - threadHasPermission(thread, threadPermissions.EDIT_THREAD_NAME) || - threadHasPermission(thread, threadPermissions.EDIT_THREAD_COLOR) || - threadHasPermission( - thread, - threadPermissions.EDIT_THREAD_DESCRIPTION, - ) + canEditThreadName || canEditThreadColor || canEditThreadDescription ); } else if (tab === 'privacy') { - return threadHasPermission( - thread, - threadPermissions.EDIT_PERMISSIONS, - ); + return canEditThreadPermissions; } else if (tab === 'delete') { - return threadHasPermission(thread, threadPermissions.DELETE_THREAD); + return canDeleteThread; } else if (tab === 'relationship') { return true; } invariant(false, `invalid tab: ${tab}`); }, - [], + [ + canEditThreadName, + canEditThreadColor, + canEditThreadDescription, + canEditThreadPermissions, + canDeleteThread, + ], ); React.useEffect(() => { if ( threadInfo && currentTabType !== 'general' && - !hasPermissionForTab(threadInfo, currentTabType) + !hasPermissionForTab(currentTabType) ) { setCurrentTabType('general'); } @@ -162,7 +181,7 @@ result.push({ id: 'relationship', header: 'Relationship' }); } - if (hasPermissionForTab(threadInfo, 'delete')) { + if (hasPermissionForTab('delete')) { result.push({ id: 'delete', header: 'Delete' }); }