diff --git a/src/library-authoring/add-content/AddContentContainer.tsx b/src/library-authoring/add-content/AddContentContainer.tsx index dab3bca92e..421c81be68 100644 --- a/src/library-authoring/add-content/AddContentContainer.tsx +++ b/src/library-authoring/add-content/AddContentContainer.tsx @@ -20,13 +20,15 @@ import { useParams } from 'react-router-dom'; import { ToastContext } from '../../generic/toast-context'; import { useCopyToClipboard } from '../../generic/clipboard'; import { getCanEdit } from '../../course-unit/data/selectors'; -import { useCreateLibraryBlock } from '../data/apiHooks'; +import { useCreateLibraryBlock, useLibraryPasteClipboard } from '../data/apiHooks'; + import messages from './messages'; const AddContentContainer = () => { const intl = useIntl(); const { libraryId } = useParams(); const createBlockMutation = useCreateLibraryBlock(); + const pasteClipboardMutation = useLibraryPasteClipboard(); const { showToast } = useContext(ToastContext); const canEdit = useSelector(getCanEdit); const { showPasteXBlock } = useCopyToClipboard(canEdit); @@ -84,18 +86,33 @@ const AddContentContainer = () => { const onCreateContent = (blockType: string) => { if (libraryId) { - createBlockMutation.mutateAsync({ - libraryId, - blockType, - definitionId: `${uuid4()}`, - }).then(() => { - showToast(intl.formatMessage(messages.successCreateMessage)); - }).catch(() => { - showToast(intl.formatMessage(messages.errorCreateMessage)); - }); + if (blockType === 'paste') { + pasteClipboardMutation.mutateAsync({ + libraryId, + blockId: `${uuid4()}`, + }).then(() => { + showToast(intl.formatMessage(messages.successPasteClipboardMessage)); + }).catch(() => { + showToast(intl.formatMessage(messages.errorPasteClipboardMessage)); + }); + } else { + createBlockMutation.mutateAsync({ + libraryId, + blockType, + definitionId: `${uuid4()}`, + }).then(() => { + showToast(intl.formatMessage(messages.successCreateMessage)); + }).catch(() => { + showToast(intl.formatMessage(messages.errorCreateMessage)); + }); + } } }; + if (pasteClipboardMutation.isLoading) { + showToast(intl.formatMessage(messages.pastingClipboardMessage)); + } + return ( <Stack direction="vertical"> <Button diff --git a/src/library-authoring/add-content/messages.ts b/src/library-authoring/add-content/messages.ts index 72314a67a8..8cc2db3c96 100644 --- a/src/library-authoring/add-content/messages.ts +++ b/src/library-authoring/add-content/messages.ts @@ -60,6 +60,21 @@ const messages = defineMessages({ defaultMessage: 'Add Content', description: 'Title of add content in library container.', }, + successPasteClipboardMessage: { + id: 'course-authoring.library-authoring.paste-clipboard.success.text', + defaultMessage: 'Content pasted successfully.', + description: 'Message when pasting clipboard in library is successful', + }, + errorPasteClipboardMessage: { + id: 'course-authoring.library-authoring.paste-clipboard.error.text', + defaultMessage: 'There was an error pasting the content.', + description: 'Message when pasting clipboard in library errors', + }, + pastingClipboardMessage: { + id: 'course-authoring.library-authoring.paste-clipboard.loading.text', + defaultMessage: 'Pasting content from clipboard...', + description: 'Message when in process of pasting content in library', + }, }); export default messages; diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts index abf38b7630..478d4227b1 100644 --- a/src/library-authoring/data/api.ts +++ b/src/library-authoring/data/api.ts @@ -20,6 +20,10 @@ export const getContentLibraryV2ListApiUrl = () => `${getApiBaseUrl()}/api/libra * Get the URL for commit/revert changes in library. */ export const getCommitLibraryChangesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/commit/`; +/** + * Get the URL for paste clipboard content into library. + */ +export const getLibraryPasteClipboardUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/paste_clipboard/`; export interface ContentLibrary { id: string; @@ -101,6 +105,11 @@ export interface UpdateBlockDataRequest { license?: string | null; } +export interface LibraryPasteClipboardRequest { + libraryId: string; + blockId: string; +} + /** * Fetch block types of a library */ @@ -185,3 +194,20 @@ export async function revertLibraryChanges(libraryId: string) { const client = getAuthenticatedHttpClient(); await client.delete(getCommitLibraryChangesUrl(libraryId)); } + +/** + * Paste clipboard content into library. + */ +export async function libraryPasteClipboard({ + libraryId, + blockId, +}: LibraryPasteClipboardRequest): Promise<CreateBlockDataResponse> { + const client = getAuthenticatedHttpClient(); + const { data } = await client.post( + getLibraryPasteClipboardUrl(libraryId), + { + block_id: blockId, + }, + ); + return data; +} diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts index e4a17a5e60..ea55c6eb81 100644 --- a/src/library-authoring/data/apiHooks.ts +++ b/src/library-authoring/data/apiHooks.ts @@ -9,6 +9,7 @@ import { commitLibraryChanges, revertLibraryChanges, updateLibraryMetadata, + libraryPasteClipboard, } from './api'; export const libraryAuthoringQueryKeys = { @@ -104,3 +105,14 @@ export const useRevertLibraryChanges = () => { }, }); }; + +export const useLibraryPasteClipboard = () => { + const queryClient = useQueryClient(); + return useMutation({ + mutationFn: libraryPasteClipboard, + onSettled: (_data, _error, variables) => { + queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(variables.libraryId) }); + queryClient.invalidateQueries({ queryKey: ['content_search'] }); + }, + }); +};