TypeScript: Convert pageDataUrls provider (#12727)

* initial commit

* update types

* update config

* cleanup

* update child type

* re-add await

* add imports

* update selector

* cleanup

* fix param

* update use state

* use type

* Update packages/story-editor/src/app/pageDataUrls/pageDataUrlsProvider.tsx

Co-authored-by: Miina <[email protected]>

* update config

* cleanup

* remove casting

* Continue migration

* Move things around

* Fix

* Revert

* Fix lint

* Revert

* PR feedback

Co-authored-by: Miina <[email protected]>
Co-authored-by: Pascal Birchler <[email protected]>

packages/story-editor/src/app/pageDataUrls/context.js → packages/story-editor/src/app/pageDataUrls/context.ts

@@ -18,4 +18,17 @@
  */
 import { createContext } from '@googleforcreators/react';
 
-export default createContext({ actions: {}, state: {} });
+/**
+ * Internal dependencies
+ */
+import type { PageDataUrlsContext } from '../../types';
+import { noop } from '../../utils/noop';
+
+export default createContext<PageDataUrlsContext>({
+  state: {
+    dataUrls: {},
+  },
+  actions: {
+    queuePageImageGeneration: noop,
+  },
+});

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

@@ -16,39 +16,33 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
+import type { Page } from '@googleforcreators/elements';
 import { useMemo, useCallback, useState } from '@googleforcreators/react';
+import type { PropsWithChildren } from 'react';
 
 /**
  * Internal dependencies
  */
 import useIdleTaskQueue from '../../utils/useIdleTaskQueue';
 import storyPageToDataUrl from '../pageCanvas/utils/storyPageToDataUrl';
+import type { PageDataUrls, QueuePageImageGeneration } from '../../types';
 import Context from './context';
-
-/**
- * @typedef {import('@googleforcreators/elements').Page} Page
- */
-
-function PageDataUrlProvider({ children }) {
-  const [dataUrls, setDataUrls] = useState({});
+function PageDataUrlProvider({ children }: PropsWithChildren<unknown>) {
+  const [dataUrls, setDataUrls] = useState<PageDataUrls>({});
   const queueIdleTask = useIdleTaskQueue();
 
   /**
    * Add page image generation task to a idle task
    * queue.
-   *
-   * @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: QueuePageImageGeneration = 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,
         }));
       };
 
@@ -77,8 +71,5 @@ function PageDataUrlProvider({ children }) {
 
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }
-PageDataUrlProvider.propTypes = {
-  children: PropTypes.node,
-};
 
 export default PageDataUrlProvider;

packages/story-editor/src/app/pageDataUrls/usePageDataUrls.js → packages/story-editor/src/app/pageDataUrls/usePageDataUrls.ts

@@ -21,10 +21,14 @@ import { useContextSelector, identity } from '@googleforcreators/react';
 /**
  * Internal dependencies
  */
+import type { PageDataUrlsContext } from '../../types';
 import Context from './context';
 
-function usePageDataUrls(selector) {
-  return useContextSelector(Context, selector ?? identity);
+function usePageDataUrls(): PageDataUrlsContext;
+function usePageDataUrls<T>(
+  selector: (state: PageDataUrlsContext) => T | PageDataUrlsContext = identity
+) {
+  return useContextSelector(Context, selector);
 }
 
 export default usePageDataUrls;

packages/story-editor/src/types/index.ts

@@ -19,6 +19,7 @@ export * from './currentUserProvider';
 export * from './historyProvider';
 export * from './layoutProvider';
 export * from './pageCanvas';
+export * from './pageDataUrls';
 export * from './story';
 export * from './storyEditor';
 export * from './storyProvider';

packages/story-editor/src/types/pageDataUrls.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type { Page } from '@googleforcreators/elements';
+
+export interface PageDataUrlsActions {
+  queuePageImageGeneration: (Page: Page) => void;
+}
+
+export type PageDataUrls = Record<string, string>;
+
+export type QueuePageImageGeneration = (page: Page) => void;
+
+export interface PageDataUrlsContext {
+  state: { dataUrls: PageDataUrls };
+  actions: { queuePageImageGeneration: QueuePageImageGeneration };
+}

packages/story-editor/src/utils/idleCallback.ts

@@ -24,7 +24,7 @@ const requestIdleCallback =
     return setTimeout(() => {
       callback({
         get didTimeout() {
-          return options.timeout
+          return typeof options.timeout !== 'undefined'
             ? false
             : performance.now() - start - relaxation > timeout;
         },

packages/story-editor/tsconfig.json

@@ -33,6 +33,7 @@
     "src/app/media/media3p/*.tsx",
     "src/app/media/utils/*.ts",
     "src/app/pageCanvas",
+    "src/app/pageDataUrls",
     "src/app/story",
     "src/constants/*",
     "src/utils/**/*.ts",