TypeScript: Convert APIProvider (#12673)

* Convert API provider to TS

* PR feedback

packages/story-editor/src/app/api/apiProvider.js → packages/story-editor/src/app/api/apiProvider.tsx

@@ -17,35 +17,29 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import { useCallback, useRef } from '@googleforcreators/react';
-import { getAllTemplates } from '@googleforcreators/templates';
+import type { PropsWithChildren } from 'react';
+import { getAllTemplates, Template } from '@googleforcreators/templates';
 
 /**
  * Internal dependencies
  */
 import { useConfig } from '../config';
 import Context from './context';
 
-function APIProvider({ children }) {
+function APIProvider({ children }: PropsWithChildren<Record<string, never>>) {
   const { apiCallbacks: actions, cdnURL } = useConfig();
-  const pageTemplates = useRef({
-    base: [],
-  });
+  const pageTemplates = useRef<Template[]>([]);
 
   actions.getPageTemplates = useCallback(async () => {
     // check if pageTemplates have been loaded yet
-    if (pageTemplates.current.base.length === 0) {
-      pageTemplates.current.base = await getAllTemplates({ cdnURL });
+    if (pageTemplates.current.length === 0) {
+      pageTemplates.current = await getAllTemplates({ cdnURL });
     }
-    return pageTemplates.current.base;
+    return pageTemplates.current;
   }, [cdnURL]);
 
   return <Context.Provider value={{ actions }}>{children}</Context.Provider>;
 }
 
-APIProvider.propTypes = {
-  children: PropTypes.node,
-};
-
 export default APIProvider;

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

@@ -19,4 +19,9 @@
  */
 import { createContext } from '@googleforcreators/react';
 
-export default createContext({ state: {}, actions: {} });
+/**
+ * Internal dependencies
+ */
+import type { APIState } from '../../types/apiProvider';
+
+export default createContext<APIState>({ actions: {} });

packages/story-editor/src/app/api/useAPI.js → packages/story-editor/src/app/api/useAPI.ts

@@ -18,12 +18,15 @@
  * External dependencies
  */
 import { identity, useContextSelector } from '@googleforcreators/react';
+
 /**
  * Internal dependencies
  */
+import type { APIState } from '../../types/apiProvider';
 import Context from './context';
 
-function useAPI(selector) {
+function useAPI(): APIState;
+function useAPI<T>(selector: (state: APIState) => T | APIState = identity) {
   return useContextSelector(Context, selector ?? identity);
 }
 

packages/story-editor/src/app/config/context.ts

@@ -37,7 +37,7 @@ export default createContext<ConfigState>({
   cdnURL: '',
   maxUpload: 0,
   capabilities: {},
-  metaData: {},
+  metadata: {},
   canViewDefaultTemplates: false,
   showMedia3p: false,
   encodeMarkup: false,

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

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+/**
+ * Internal dependencies
+ */
+import type { APICallbacks } from './configProvider';
+
+export interface APIState {
+  actions: APICallbacks;
+}

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

@@ -30,6 +30,7 @@ import type {
   TrimData,
   VideoResource,
 } from '@googleforcreators/media';
+import type { Template } from '@googleforcreators/templates';
 
 export interface Capabilities {
   /** If the user has permissions to upload files. */
@@ -73,7 +74,7 @@ export interface Tip {
   href: string;
 }
 
-interface PageTemplate extends Page {
+export interface PageTemplate extends Page {
   version: string;
 }
 interface TemplateData {
@@ -202,7 +203,7 @@ export interface APICallbacks {
   getMediaForCorsCheck?: () => Promise<Resource[]>;
   getMutedMediaById?: (id: number) => Promise<VideoResource>;
   getOptimizedMediaById?: (id: number) => Promise<Resource>;
-  getPageTemplates?: () => Promise<PageTemplate[]>;
+  getPageTemplates?: () => Promise<Template[]>;
   getPosterMediaById?: (id: number) => Promise<Resource>;
   getProducts?: () => Promise<ProductData[]>;
   getProxyUrl?: (src: string) => string;
@@ -243,7 +244,7 @@ export interface ConfigState {
   /** Max allowed upload in bytes */
   maxUpload: number;
   capabilities: Capabilities;
-  metaData: MetaData;
+  metadata: MetaData;
   canViewDefaultTemplates: boolean;
   /** If to show the 3rd party media in the library */
   showMedia3p: boolean;

packages/story-editor/tsconfig.json

@@ -4,5 +4,9 @@
     "rootDir": "src",
     "declarationDir": "dist-types"
   },
-  "include": ["src/app/config/*", "src/types"]
+  "include": [
+    "src/app/config/*",
+    "src/types",
+    "src/app/api/*"
+  ]
 }