From 1b7a336deda38e41e386f3a8d16dbd186374441c Mon Sep 17 00:00:00 2001
From: Yusuf Musleh <yusuf@opencraft.com>
Date: Mon, 29 Jul 2024 18:55:50 +0300
Subject: [PATCH] feat: Implement pasting library content

Adds mutation to call endpoint that pastes content from clipboard into Library
---
 .../add-content/AddContentContainer.tsx       | 37 ++++++++++++++-----
 src/library-authoring/add-content/messages.ts | 15 ++++++++
 src/library-authoring/data/api.ts             | 26 +++++++++++++
 src/library-authoring/data/apiHooks.ts        | 12 ++++++
 4 files changed, 80 insertions(+), 10 deletions(-)

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'] });
+    },
+  });
+};