overleaf/services/web/frontend/js/features/group-management/context/group-members-context.tsx
Jakob Ackermann aa480a2663 Merge pull request #18898 from overleaf/jpa-no-window
[web] migrate from window attributes to getMeta

GitOrigin-RevId: 3dcf1ab6b01155e5e4abeb3e78d0fa9053e055bc
2024-06-19 08:04:21 +00:00

213 lines
5.6 KiB
TypeScript

import {
ReactNode,
createContext,
useCallback,
useContext,
useMemo,
useState,
} from 'react'
import { User } from '../../../../../types/group-management/user'
import { deleteJSON, FetchError, postJSON } from '@/infrastructure/fetch-json'
import { mapSeries } from '@/infrastructure/promise'
import getMeta from '@/utils/meta'
import { APIError } from '../components/error-alert'
import useUserSelection from '../hooks/use-user-selection'
import { parseEmails } from '../utils/emails'
import { debugConsole } from '@/utils/debugging'
export type GroupMembersContextValue = {
users: User[]
selectedUsers: User[]
selectUser: (user: User) => void
selectAllUsers: () => void
unselectAllUsers: () => void
selectAllNonManagedUsers: () => void
unselectUser: (user: User) => void
addMembers: (emailString: string) => void
removeMembers: (e: any) => void
removeMember: (user: User) => Promise<void>
removeMemberLoading: boolean
removeMemberError?: APIError
updateMemberView: (userId: string, updatedUser: User) => void
inviteMemberLoading: boolean
inviteError?: APIError
paths: { [key: string]: string }
}
export const GroupMembersContext = createContext<
GroupMembersContextValue | undefined
>(undefined)
type GroupMembersProviderProps = {
children: ReactNode
}
export function GroupMembersProvider({ children }: GroupMembersProviderProps) {
const {
users,
setUsers,
selectedUsers,
selectAllUsers,
unselectAllUsers,
selectAllNonManagedUsers,
selectUser,
unselectUser,
} = useUserSelection(getMeta('ol-users') || [])
const [inviteUserInflightCount, setInviteUserInflightCount] = useState(0)
const [inviteError, setInviteError] = useState<APIError>()
const [removeMemberInflightCount, setRemoveMemberInflightCount] = useState(0)
const [removeMemberError, setRemoveMemberError] = useState<APIError>()
const groupId = getMeta('ol-groupId')
const paths = useMemo(
() => ({
addMember: `/manage/groups/${groupId}/invites`,
removeMember: `/manage/groups/${groupId}/user`,
removeInvite: `/manage/groups/${groupId}/invites`,
exportMembers: `/manage/groups/${groupId}/members/export`,
}),
[groupId]
)
const addMembers = useCallback(
emailString => {
setInviteError(undefined)
const emails = parseEmails(emailString)
mapSeries(emails, async email => {
setInviteUserInflightCount(count => count + 1)
try {
const data = await postJSON<{ user: User }>(paths.addMember, {
body: {
email,
},
})
if (data.user) {
const alreadyListed = users.find(
user => user.email === data.user.email
)
if (!alreadyListed) {
setUsers(users => [...users, data.user])
}
}
} catch (error: unknown) {
debugConsole.error(error)
setInviteError((error as FetchError)?.data?.error || {})
}
setInviteUserInflightCount(count => count - 1)
})
},
[paths.addMember, users, setUsers]
)
const removeMember = useCallback(
async user => {
let url
if (paths.removeInvite && user.invite && user._id == null) {
url = `${paths.removeInvite}/${encodeURIComponent(user.email)}`
} else if (paths.removeMember && user._id) {
url = `${paths.removeMember}/${user._id}`
} else {
return
}
setRemoveMemberInflightCount(count => count + 1)
try {
await deleteJSON(url, {})
setUsers(users => users.filter(u => u !== user))
unselectUser(user)
} catch (error: unknown) {
debugConsole.error(error)
setRemoveMemberError((error as FetchError)?.data?.error || {})
}
setRemoveMemberInflightCount(count => count - 1)
},
[unselectUser, setUsers, paths.removeInvite, paths.removeMember]
)
const removeMembers = useCallback(
e => {
e.preventDefault()
setRemoveMemberError(undefined)
;(async () => {
for (const user of selectedUsers) {
if (user?.enrollment?.managedBy) {
continue
}
await removeMember(user)
}
})()
},
[selectedUsers, removeMember]
)
const updateMemberView = useCallback(
(userId, updatedUser) => {
setUsers(
users.map(u => {
if (u._id === userId) {
return updatedUser
} else {
return u
}
})
)
},
[setUsers, users]
)
const value = useMemo<GroupMembersContextValue>(
() => ({
users,
selectedUsers,
selectAllUsers,
unselectAllUsers,
selectAllNonManagedUsers,
selectUser,
unselectUser,
updateMemberView,
addMembers,
removeMembers,
removeMember,
removeMemberLoading: removeMemberInflightCount > 0,
removeMemberError,
inviteMemberLoading: inviteUserInflightCount > 0,
inviteError,
paths,
}),
[
users,
selectedUsers,
selectAllUsers,
unselectAllUsers,
selectAllNonManagedUsers,
selectUser,
unselectUser,
updateMemberView,
addMembers,
removeMembers,
removeMember,
removeMemberInflightCount,
removeMemberError,
inviteUserInflightCount,
inviteError,
paths,
]
)
return (
<GroupMembersContext.Provider value={value}>
{children}
</GroupMembersContext.Provider>
)
}
export function useGroupMembersContext() {
const context = useContext(GroupMembersContext)
if (!context) {
throw new Error(
'GroupMembersContext is only available inside GroupMembersProvider'
)
}
return context
}