diff --git a/services/web/frontend/js/features/ide-react/hooks/use-socket-listeners.ts b/services/web/frontend/js/features/ide-react/hooks/use-socket-listeners.ts index 4b593f769e..713f39e183 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-socket-listeners.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-socket-listeners.ts @@ -9,6 +9,8 @@ import { useConnectionContext } from '@/features/ide-react/context/connection-co import { useIdeReactContext } from '@/features/ide-react/context/ide-react-context' import { useModalsContext } from '@/features/ide-react/context/modals-context' import { debugConsole } from '@/utils/debugging' +import { useCallback } from 'react' +import { PublicAccessLevel } from '../../../../../types/public-access-level' function useSocketListeners() { const { t } = useTranslation() @@ -19,46 +21,64 @@ function useSocketListeners() { const [, setProjectMembers] = useScopeValue('project.members') const [, setProjectInvites] = useScopeValue('project.invites') - useSocketListener(socket, 'project:access:revoked', () => { - showGenericMessageModal( - t('removed_from_project'), - t( - 'you_have_been_removed_from_this_project_and_will_be_redirected_to_project_dashboard' + useSocketListener( + socket, + 'project:access:revoked', + useCallback(() => { + showGenericMessageModal( + t('removed_from_project'), + t( + 'you_have_been_removed_from_this_project_and_will_be_redirected_to_project_dashboard' + ) ) + }, [showGenericMessageModal, t]) + ) + + useSocketListener( + socket, + 'project:publicAccessLevel:changed', + useCallback( + (data: { newAccessLevel?: PublicAccessLevel }) => { + if (data.newAccessLevel) { + setPublicAccessLevel(data.newAccessLevel) + } + }, + [setPublicAccessLevel] ) - }) + ) - useSocketListener(socket, 'project:publicAccessLevel:changed', data => { - if (data.newAccessLevel) { - setPublicAccessLevel(data.newAccessLevel) - } - }) + useSocketListener( + socket, + 'project:membership:changed', + useCallback( + (data: { members?: boolean; invites?: boolean }) => { + if (data.members) { + listProjectMembers(projectId) + .then(({ members }) => { + if (members) { + setProjectMembers(members) + } + }) + .catch(err => { + debugConsole.error('Error fetching members for project', err) + }) + } - useSocketListener(socket, 'project:membership:changed', data => { - if (data.members) { - listProjectMembers(projectId) - .then(({ members }) => { - if (members) { - setProjectMembers(members) - } - }) - .catch(err => { - debugConsole.error('Error fetching members for project', err) - }) - } - - if (data.invites) { - listProjectInvites(projectId) - .then(({ invites }) => { - if (invites) { - setProjectInvites(invites) - } - }) - .catch(err => { - debugConsole.error('Error fetching invites for project', err) - }) - } - }) + if (data.invites) { + listProjectInvites(projectId) + .then(({ invites }) => { + if (invites) { + setProjectInvites(invites) + } + }) + .catch(err => { + debugConsole.error('Error fetching invites for project', err) + }) + } + }, + [projectId, setProjectInvites, setProjectMembers] + ) + ) } export default useSocketListeners