import { Modal } from 'react-bootstrap' import AccessibleModal from '@/shared/components/accessible-modal' import { useTranslation, Trans } from 'react-i18next' import { User } from '../../../../../../types/group-management/user' import getMeta from '@/utils/meta' import { SetStateAction, useCallback, useState, type Dispatch } from 'react' import useAsync from '@/shared/hooks/use-async' import { postJSON } from '@/infrastructure/fetch-json' import NotificationScrolledTo from '@/shared/components/notification-scrolled-to' import { debugConsole } from '@/utils/debugging' import { GroupUserAlert } from '../../utils/types' import { useGroupMembersContext } from '../../context/group-members-context' export type UnlinkUserModalProps = { onClose: () => void user: User setGroupUserAlert: Dispatch> } export default function UnlinkUserModal({ onClose, user, setGroupUserAlert, }: UnlinkUserModalProps) { const { t } = useTranslation() const groupId = getMeta('ol-groupId') const [hasError, setHasError] = useState() const { isLoading: unlinkInFlight, runAsync, reset } = useAsync() const { updateMemberView } = useGroupMembersContext() const setUserAsUnlinked = useCallback(() => { if (!user.enrollment?.sso) { return } const enrollment = Object.assign({}, user.enrollment, { sso: user.enrollment.sso.filter(sso => sso.groupId !== groupId), }) const updatedUser = Object.assign({}, user, { enrollment, }) updateMemberView(user._id, updatedUser) }, [groupId, updateMemberView, user]) const handleUnlink = useCallback( event => { event.preventDefault() setHasError(undefined) if (!user) { setHasError(t('generic_something_went_wrong')) return } runAsync(postJSON(`/manage/groups/${groupId}/unlink-user/${user._id}`)) .then(() => { setUserAsUnlinked() setGroupUserAlert({ variant: 'unlinkedSSO', email: user.email, }) onClose() reset() }) .catch(e => { debugConsole.error(e) setHasError(t('generic_something_went_wrong')) }) }, [ groupId, onClose, reset, runAsync, setGroupUserAlert, setUserAsUnlinked, t, user, ] ) return ( {t('unlink_user')} {hasError && (
)}

]} // eslint-disable-line react/jsx-key values={{ email: user.email }} shouldUnescape tOptions={{ interpolation: { escapeValue: true } }} />

) }