chore: Types for a state manager

Author: georgylobko

src/app-layout/visual-refresh-toolbar/app-layout-state.tsx

@@ -1,17 +1,24 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { ForwardedRef, useLayoutEffect } from 'react';
+import React, { ForwardedRef, MutableRefObject, useLayoutEffect } from 'react';
 
 import { createWidgetizedComponent } from '../../internal/widgets';
 import { AppLayoutProps } from '../interfaces';
 import { AppLayoutInternalProps } from './interfaces';
 import { useSkeletonSlotsAttributes } from './skeleton/widget-slots/use-skeleton-slots-attributes';
 import { useAppLayout } from './use-app-layout';
 
+interface StateManager {
+  set: (
+    appLayoutState: ReturnType<typeof useAppLayout> | null,
+    skeletonAttributes: ReturnType<typeof useSkeletonSlotsAttributes> | null
+  ) => void;
+}
+
 export interface AppLayoutStateProps {
   props: AppLayoutInternalProps;
   forwardRef: ForwardedRef<AppLayoutProps.Ref>;
-  stateManager: any;
+  stateManager: MutableRefObject<StateManager>;
 }
 
 export const AppLayoutState = (props: AppLayoutStateProps) => {

src/app-layout/visual-refresh-toolbar/index.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { FC, useLayoutEffect, useRef, useState } from 'react';
+import React, { FC, MutableRefObject, useLayoutEffect, useRef, useState } from 'react';
 
 import { AppLayoutProps } from '../interfaces';
 import { AppLayoutVisibilityContext } from './contexts';
@@ -10,18 +10,21 @@ import { SkeletonLayout } from './skeleton';
 import { useSkeletonSlotsAttributes } from './skeleton/widget-slots/use-skeleton-slots-attributes';
 import { useAppLayout } from './use-app-layout';
 
+type AppLayoutState = ReturnType<typeof useAppLayout> | null;
+type SkeletonSlotsAttributes = ReturnType<typeof useSkeletonSlotsAttributes> | null;
+interface StateManager {
+  set: (appLayoutState: AppLayoutState, skeletonAttributes: SkeletonSlotsAttributes) => void;
+}
+
 const AppLayoutStateProvider: FC<{
-  children: (
-    appLayoutState: ReturnType<typeof useAppLayout> | null,
-    skeletonSlotsAttributes: ReturnType<typeof useSkeletonSlotsAttributes> | null
-  ) => React.ReactNode;
-  stateManager: any;
+  children: (appLayoutState: AppLayoutState, skeletonSlotsAttributes: SkeletonSlotsAttributes) => React.ReactNode;
+  stateManager: MutableRefObject<StateManager>;
 }> = ({ stateManager, children }) => {
-  const [appLayoutState, setAppLayoutState] = useState(null);
-  const [skeletonAttributes, setSkeletonAttributes] = useState(null);
+  const [appLayoutState, setAppLayoutState] = useState<AppLayoutState>(null);
+  const [skeletonAttributes, setSkeletonAttributes] = useState<SkeletonSlotsAttributes>(null);
 
   useLayoutEffect(() => {
-    stateManager.current.set = (appLayoutState: any, skeletonAttributes: any) => {
+    stateManager.current.set = (appLayoutState, skeletonAttributes) => {
       setAppLayoutState(appLayoutState);
       setSkeletonAttributes(skeletonAttributes);
     };
@@ -31,7 +34,7 @@ const AppLayoutStateProvider: FC<{
 
 const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutInternalProps>(
   (props, forwardRef) => {
-    const stateManager = useRef<any>({});
+    const stateManager = useRef<StateManager>({ set: () => {} });
 
     return (
       <>