Converted help center provider to TypeScript (#12744)

* Converted help center provider to TypeScript

* Fixed design system exports

* Fixed references to help center constants

* Lints

packages/design-system/src/types.ts

@@ -20,5 +20,7 @@
 
 export * from './components/keyboard';
 export * from './types/keyboard';
+export * from './utils/constants';
+export * from './utils/localStore';
 
 export {};

packages/design-system/src/utils/localStore.js → packages/design-system/src/utils/localStore.ts

@@ -40,22 +40,26 @@ export const LOCAL_STORAGE_PREFIX = {
   MEDIA_RECORDING_VIDEO_EFFECT: 'web_stories_media_recording_video_effect',
 };
 
-function getItemByKey(key) {
-  let parsed = null;
+function getMessage(err: unknown): string {
+  return err instanceof Error ? err.message : 'Unknown error';
+}
+
+function getItemByKey(key: string): unknown {
+  let parsed: unknown = null;
   try {
     const stored = localStorage.getItem(key);
-    parsed = JSON.parse(stored);
+    parsed = stored !== null ? JSON.parse(stored) : stored;
   } catch (err) {
-    trackError('local_storage_read', err.message);
+    void trackError('local_storage_read', getMessage(err));
   }
   return parsed;
 }
 
-function setItemByKey(key, data) {
+function setItemByKey(key: string, data: unknown) {
   try {
     localStorage.setItem(key, JSON.stringify(data));
   } catch (err) {
-    trackError('local_storage_write', err.message);
+    void trackError('local_storage_write', getMessage(err));
   }
 }
 

packages/design-system/tsconfig.json

@@ -10,5 +10,11 @@
     { "path": "../react" },
     { "path": "../tracking" }
   ],
-  "include": ["src/types.ts", "src/components/keyboard/*", "src/types/*"]
+  "include": [
+    "src/types.ts",
+    "src/components/keyboard/*",
+    "src/types/*",
+    "src/utils/constants.ts",
+    "src/utils/localStore.ts"
+  ]
 }

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

@@ -28,5 +28,8 @@ export default createContext<CurrentUserState>({
   state: {
     currentUser: null,
   },
-  actions: {},
+  actions: {
+    updateCurrentUser: () => null,
+    toggleWebStoriesMediaOptimization: () => null,
+  },
 });

packages/story-editor/src/app/currentUser/currentUserProvider.tsx

@@ -24,15 +24,10 @@ import type { PropsWithChildren } from 'react';
  */
 import { useAPI } from '../api';
 import type { User } from '../../types/configProvider';
-import type {
-  CurrentUserState,
-  UpdateCurrentUserProps,
-} from '../../types/currentUserProvider';
+import type { CurrentUserState } from '../../types/currentUserProvider';
 import Context from './context';
 
-function CurrentUserProvider({
-  children,
-}: PropsWithChildren<Record<string, never>>) {
+function CurrentUserProvider({ children }: PropsWithChildren<unknown>) {
   const [currentUser, setCurrentUser] = useState<User | null>(null);
   const {
     actions: { getCurrentUser, updateCurrentUser: _updateCurrentUser },
@@ -55,7 +50,7 @@ function CurrentUserProvider({
   }, [currentUser, getCurrentUser]);
 
   const updateCurrentUser = useCallback(
-    (data: UpdateCurrentUserProps) =>
+    (data: Partial<User>) =>
       _updateCurrentUser ? _updateCurrentUser(data).then(setCurrentUser) : null,
     [_updateCurrentUser]
   );

packages/story-editor/src/app/currentUser/useCurrentUser.ts

@@ -25,6 +25,7 @@ import type { CurrentUserState } from '../../types/currentUserProvider';
 import Context from './context';
 
 function useCurrentUser(): CurrentUserState;
+function useCurrentUser<T>(selector: (state: CurrentUserState) => T): T;
 function useCurrentUser<T>(
   selector: (state: CurrentUserState) => T | CurrentUserState = identity
 ) {

packages/story-editor/src/components/helpCenter/constants.js → packages/story-editor/src/app/helpCenter/constants.ts

@@ -118,7 +118,7 @@ export const DONE_TIP_ENTRY = [
       ),
     ],
   },
-];
+] as const;
 
 export const GUTTER_WIDTH = 24;
 

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

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2021 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 { createContext } from '@googleforcreators/react';
+
+/**
+ * Internal dependencies
+ */
+import type { HelpCenterContext } from './types';
+
+export default createContext<HelpCenterContext>({
+  state: {
+    isOpen: false,
+    isOpeningToTip: false,
+    navigationIndex: -1,
+    navigationFlow: [],
+    isLeftToRightTransition: false,
+    hasBottomNavigation: false,
+    isPrevDisabled: false,
+    isNextDisabled: false,
+    readTips: {},
+    readError: false,
+    unreadTipsCount: 0,
+    isHydrated: false,
+    tips: {},
+    tipKeys: [],
+  },
+  actions: {
+    goToNext: () => undefined,
+    goToPrev: () => undefined,
+    goToMenu: () => undefined,
+    goToTip: () => undefined,
+    openToUnreadTip: () => undefined,
+    toggle: () => undefined,
+    close: () => undefined,
+    hydrateReadTipsSuccess: () => undefined,
+    persistingReadTipsError: () => undefined,
+  },
+});

packages/story-editor/src/app/helpCenter/index.js → packages/story-editor/src/app/helpCenter/index.ts

@@ -15,4 +15,4 @@
  */
 
 export { default as HelpCenterProvider } from './provider';
-export { useHelpCenter } from './useHelpCenter';
+export { default as useHelpCenter } from './useHelpCenter';