TypeScript: Convert pageDataUrls provider

packages/story-editor/src/app/pageDataUrls/pageDataUrlsProvider.js → packages/story-editor/src/app/pageDataUrls/pageDataUrlsProvider.tsx

@@ -16,7 +16,7 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import type { Page } from '@googleforcreators/elements';
 import { useMemo, useCallback, useState } from '@googleforcreators/react';
 
 /**
@@ -26,12 +26,8 @@ import useIdleTaskQueue from '../../utils/useIdleTaskQueue';
 import storyPageToDataUrl from '../../utils/storyPageToDataUrl';
 import Context from './context';
 
-/**
- * @typedef {import('../../types.js').Page} Page
- */
-
-function PageDataUrlProvider({ children }) {
-  const [dataUrls, setDataUrls] = useState({});
+function PageDataUrlProvider({ children }: { children: React.ReactNode }) {
+  const [dataUrls, setDataUrls] = useState<Record<string, string>>({});
   const queueIdleTask = useIdleTaskQueue();
 
   /**
@@ -41,20 +37,25 @@ function PageDataUrlProvider({ children }) {
    * @param {Page} storyPage Page object.
    * @return {Function} function to cancel image generation request
    */
-  const queuePageImageGeneration = useCallback(
-    (storyPage) => {
-      const idleTaskUid = storyPage.id;
-      const idleTask = async () => {
+  const queuePageImageGeneration: (Page) => void = useCallback(
+    (storyPage: Page) => {
+      const idleTaskUid: string = storyPage.id;
+      const idleTask: () => Promise<void> = async () => {
         const dataUrl = await storyPageToDataUrl(storyPage, {});
         setDataUrls((state) => ({
           ...state,
-          [storyPage.id]: dataUrl,
+          [storyPage?.id]: dataUrl,
         }));
       };
 
-      const clearQueueOfPageTask = queueIdleTask([idleTaskUid, idleTask]);
-      return () => {
-        clearQueueOfPageTask();
+      const clearQueueOfPageTask = queueIdleTask([
+        idleTaskUid,
+        idleTask,
+      ]) as () => void;
+      return (): void => {
+        if (typeof clearQueueOfPageTask === 'function') {
+          clearQueueOfPageTask();
+        }
       };
     },
     [queueIdleTask]
@@ -74,8 +75,5 @@ function PageDataUrlProvider({ children }) {
 
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }
-PageDataUrlProvider.propTypes = {
-  children: PropTypes.node,
-};
 
 export default PageDataUrlProvider;

packages/story-editor/src/utils/storyPageToDataUrl.js → packages/story-editor/src/utils/storyPageToDataUrl.ts

@@ -18,37 +18,38 @@
  * External dependencies
  */
 import { PAGE_RATIO } from '@googleforcreators/units';
+import type { Page } from '@googleforcreators/elements';
+import type { Options } from 'html-to-image/lib/types';
 /**
  * Internal dependencies
  */
 import storyPageToNode from './storyPageToNode';
 
-/**
- * @typedef {import('../../../types').Page} Page
- */
-
 /**
  * Async method to generate a dataUrl from a story page.
  *
- * @param {Page} page Page object.
- * @param {Object} options options to pass to htmlToImage.toJpeg
- * @param {number} options.width desired width of image. Dictates height and container height
- * @return {Promise<string>} jpeg dataUrl
+ * @param page Page object.
+ * @param options options to pass to htmlToImage.toJpeg
+ * @param options.width desired width of image. Dictates height and container height
+ * @return jpeg dataUrl
  */
-async function storyPageToDataUrl(page, { width = 400, ...options }) {
+async function storyPageToDataUrl(
+  page: Page,
+  { width = 400, ...options }: Options
+): Promise<string> {
   const htmlToImage = await import(
     /* webpackChunkName: "chunk-html-to-image" */ 'html-to-image'
   );
 
-  const [node, cleanup] = await storyPageToNode(page, width);
+  const [node, cleanup] = storyPageToNode(page, width);
 
   const dataUrl = await htmlToImage.toJpeg(node, {
     ...options,
     width,
     height: width * (1 / PAGE_RATIO),
     canvasHeight: width * (1 / PAGE_RATIO),
     canvasWidth: width,
-  });
+  } as Options);
 
   cleanup();
 

packages/story-editor/tsconfig.json

@@ -14,6 +14,7 @@
     "src/app/config/*",
     "src/app/history",
     "src/types",
-    "src/utils/usePreventWindowUnload.ts"
+    "src/utils/usePreventWindowUnload.ts",
+    "src/app/pageDataUrls/*"
   ]
 }