fix(composer): fix infinite storybook component update

awslabs · Jul 18, 2023 · 40fab0a · 40fab0a
1 parent d313682
commit 40fab0a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 28 deletions.
diff --git a/packages/scene-composer/stories/components/hooks/useSceneMetadataModule.ts b/packages/scene-composer/stories/components/hooks/useSceneMetadataModule.ts
@@ -41,7 +41,12 @@ const useSceneMetadataModule = (
       default:
         return undefined;
     }
-  }, [sceneMetadatModuleProps]);
+  }, [
+    sceneMetadatModuleProps.workspaceId,
+    sceneMetadatModuleProps.awsCredentials,
+    sceneMetadatModuleProps.sceneId,
+    sceneMetadatModuleProps.source,
+  ]);
 
   return sceneMetadataModule;
 };

diff --git a/packages/scene-composer/stories/components/scene-composer.tsx b/packages/scene-composer/stories/components/scene-composer.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import React, { FC, useCallback, useMemo, useRef } from 'react';
 import { Mode, Density } from '@awsui/global-styles';
 import styled from 'styled-components';
 import { CredentialProvider, Credentials } from '@aws-sdk/types';
@@ -60,51 +60,46 @@ const SceneComposerWrapper: FC<SceneComposerWrapperProps> = ({
   workspaceId,
   sceneId,
   features = [],
+  sceneLoader: ignoredLoader,
   onSceneUpdated = () => {},
   matterportModelId,
   matterportApplicationKey,
   viewportDurationSecs,
   queriesJSON,
   ...props
 }: SceneComposerWrapperProps) => {
-  const [viewport, setViewport] = useState<Viewport>();
   const duration = viewportDurationSecs ? viewportDurationSecs : 300; //default 5 minutes
   const stagedScene = useRef<ISceneDocumentSnapshot | undefined>(undefined);
   const scene = sceneId || localScene || 'scene_1';
   const datasource = useDataSource(awsCredentials, workspaceId);
   const loader = useLoader(source, scene, datasource.s3SceneLoader, sceneId);
   const sceneMetadataModule = useSceneMetadataModule({ source, scene, awsCredentials, workspaceId, sceneId });
 
-  const config = {
-    dracoDecoder: {
-      enable: true,
-    },
-    mode,
-    colorTheme: theme,
-    featureConfig: mapFeatures(features),
-  };
-
-  useEffect(() => {
-    let intervalId;
+  const config = useMemo(
+    () => ({
+      dracoDecoder: {
+        enable: true,
+      },
+      mode,
+      colorTheme: theme,
+      featureConfig: mapFeatures(features),
+    }),
+    [mode, theme, features],
+  );
+
+  const viewport: Viewport = useMemo(() => {
     // if using a custom query instead of mock poll the view port
     if (queriesJSON) {
-      intervalId = setInterval(() => {
-        const now = new Date();
-        setViewport({
-          start: new Date(now.getTime() - duration * 1000),
-          end: now,
-        });
-      }, 1000);
-
-      return () => clearInterval(intervalId);
+      return {
+        duration: duration * 1000,
+      };
     } else {
-      setViewport({
+      return {
         start: new Date(getTestDataInputContinuous().timeRange.from),
         end: new Date(getTestDataInputContinuous().timeRange.to),
-      });
-      clearInterval(intervalId);
+      };
     }
-  }, [viewport, queriesJSON, duration]);
+  }, [queriesJSON, duration]);
 
   const queries = queriesJSON
     ? JSON.parse(queriesJSON).map((q) => {

diff --git a/packages/scene-composer/stories/components/theme-manager.tsx b/packages/scene-composer/stories/components/theme-manager.tsx
@@ -1,11 +1,12 @@
 import { Mode, Density, applyDensity, applyMode } from '@awsui/global-styles';
-import React, { FC, useEffect } from 'react';
+import React, { FC, ReactNode, useEffect } from 'react';
 
 import { setDebugMode } from '../../src';
 
 export interface ThemeManagerProps {
   theme?: 'light' | 'dark';
   density?: string;
+  children: ReactNode;
 }
 
 const ThemeManager: FC<ThemeManagerProps> = ({ theme = Mode.Dark, density = Density.Comfortable, children }) => {