fix: types and cleanup

openedx · Aug 30, 2024 · 70cd2ef · 70cd2ef
1 parent a9023ba
commit 70cd2ef
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 21 deletions.
diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -3,11 +3,17 @@ import React, {
 } from 'react';
 import { ensureConfig, getConfig } from '@edx/frontend-platform';
 
+import type { XBlockRenderResponse } from '../data/api';
 import wrapBlockHtmlForIFrame from './wrap';
 
 // FixMe: We need this?
 ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'library block component');
 
+interface LibraryBlockProps {
+  getHandlerUrl: (usageId: string) => Promise<string>;
+  onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
+  view: XBlockRenderResponse
+}
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
  *
@@ -17,7 +23,7 @@ ensureConfig(['LMS_BASE_URL', 'SECURE_ORIGIN_XBLOCK_BOOTSTRAP_HTML_URL'], 'libra
  * cannot access things like the user's cookies, nor can it make GET/POST
  * requests as the user. However, it is allowed to call any XBlock handlers.
  */
-const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }) => {
+const LibraryBlock = ({ getHandlerUrl, onBlockNotification, view }: LibraryBlockProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [iFrameHeight, setIFrameHeight] = useState(400);
 

diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { useXBlockRender } from '../data/apiHooks';
-import { getXBlockHandlerUrl } from '../data/api';
 import { LibraryBlock } from '../LibraryBlock';
+import { getXBlockHandlerUrl } from '../data/api';
+import { useXBlockRender } from '../data/apiHooks';
 
 interface ComponentPreviewProps {
   usageKey: string;
@@ -11,7 +11,7 @@ interface ComponentPreviewProps {
 const ComponentPreview = ({ usageKey }: ComponentPreviewProps) => {
   const { data: view } = useXBlockRender(usageKey);
 
-  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey, 'handler_name');
+  const getHandlerUrl = () => getXBlockHandlerUrl(usageKey);
 
   return (
     <div>

diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
@@ -42,8 +42,9 @@ export const getXBlockRenderUrl = (usageKey: string) => `${getApiBaseUrl()}/api/
 
 /**
  * Get the URL for the xblock handler API.
+ * The string `handler_name` is a placeholder for the name of the handler.
  */
-export const getXBlockHandlerUrlUrl = (usageKey: string, handlerName: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/handler_url/${handlerName}/`;
+export const getXBlockHandlerUrlUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/handler_url/handler_name/`;
 
 export interface ContentLibrary {
   id: string;
@@ -284,7 +285,7 @@ export async function getXBlockRender(usageKey: string): Promise<XBlockRenderRes
 /**
   * Get the URL of the xblock handler.
  */
-export const getXBlockHandlerUrl = async (usageKey: string, handlerName: string): Promise<string> => {
-  const { data } = await getAuthenticatedHttpClient().get(getXBlockHandlerUrlUrl(usageKey, handlerName));
+export const getXBlockHandlerUrl = async (usageKey: string): Promise<string> => {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockHandlerUrlUrl(usageKey));
   return data.handler_url;
 };
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
@@ -54,7 +54,7 @@ export const libraryAuthoringQueryKeys = {
     'content',
     'libraryBlockTypes',
   ],
-  // FixMe: Move to xblockQueryKeys
+  // ToDo: Move to xblockQueryKeys
   xblockFields: (contentLibraryId: string, usageKey: string) => [
     ...libraryAuthoringQueryKeys.contentLibrary(contentLibraryId),
     'content',
@@ -73,11 +73,6 @@ export const xblockQueryKeys = {
     ...xblockQueryKeys.xblock(usageKey),
     'render',
   ],
-  handlerUrl: (usageKey: string, handlerName: string) => [
-    ...xblockQueryKeys.xblock(usageKey),
-    'handlerUrl',
-    handlerName,
-  ],
 };
 
 /**
@@ -236,11 +231,3 @@ export const useXBlockRender = (usageKey: string) => (
     enabled: !!usageKey,
   })
 );
-
-export const useXBlockHandlerUrl = (usageKey: string, handlerName: string) => (
-  useQuery({
-    queryKey: xblockQueryKeys.handlerUrl(usageKey, handlerName),
-    queryFn: () => getXBlockHandlerUrl(usageKey, handlerName),
-    enabled: !!usageKey,
-  })
-);