enable open on mount (#6)

HumeAI · Mar 27, 2024 · 8c6b3c1 · 8c6b3c1
1 parent abb1110
commit 8c6b3c1
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -57,7 +57,7 @@ function App() {
             }}
             onOpen={(dimensions) => {
               setFrameSize(dimensions);
-              open(dimensions);
+              open();
             }}
             onResize={(dimensions) => {
               setFrameSize(dimensions);

diff --git a/src/components/IframeGuard/index.tsx b/src/components/IframeGuard/index.tsx
@@ -13,6 +13,7 @@ export const IframeGuard: FC<IframeGuardProps> = ({
 }) => {
   const [isIframe, setIsIframe] = useState(false);
   const close = useLayoutStore((store) => store.close);
+
   const hasMounted = useRef(false);
 
   useEffect(() => {
@@ -24,7 +25,6 @@ export const IframeGuard: FC<IframeGuardProps> = ({
   useEffect(() => {
     if (!hasMounted.current) {
       parentDispatch(WIDGET_IFRAME_IS_READY_ACTION);
-      close();
       hasMounted.current = true;
     }
   }, [close]);

diff --git a/src/store/layout.ts b/src/store/layout.ts
@@ -17,7 +17,7 @@ export enum LayoutState {
 interface LayoutStore {
   state: LayoutState;
   frameSize: WindowDimensions;
-  open: (dimensions: WindowDimensions) => void;
+  open: () => void;
   setFrameSize: (dimensions: WindowDimensions) => void;
   close: () => void;
 }
@@ -28,24 +28,29 @@ const DEFAULT_FRAME_WIDTH = 400;
 const DEFAULT_FRAME_HEIGHT = 300;
 const FRAME_MARGIN_X = 48;
 
-export const useLayoutStore = create<LayoutStore>()((set) => {
+function getFrameSize(dimensions: WindowDimensions) {
+  return {
+    width:
+      dimensions.width - FRAME_MARGIN_X < DEFAULT_FRAME_WIDTH
+        ? dimensions.width - FRAME_MARGIN_X
+        : DEFAULT_FRAME_WIDTH,
+    height: DEFAULT_FRAME_HEIGHT,
+  };
+}
+
+export const useLayoutStore = create<LayoutStore>()((set, get) => {
   return {
     state: LayoutState.CLOSED,
     frameSize: { width: DEFAULT_FRAME_WIDTH, height: DEFAULT_FRAME_HEIGHT },
     setFrameSize: (parentDimensions: WindowDimensions) => {
-      const frameSize = {
-        width:
-          parentDimensions.width - FRAME_MARGIN_X < DEFAULT_FRAME_WIDTH
-            ? parentDimensions.width - FRAME_MARGIN_X
-            : DEFAULT_FRAME_WIDTH,
-        height: DEFAULT_FRAME_HEIGHT,
-      };
+      const frameSize = getFrameSize(parentDimensions);
       set({ frameSize });
       parentDispatch(RESIZE_FRAME_ACTION(frameSize));
     },
-    open: (dimensions: WindowDimensions) => {
+    open: () => {
       clearTimeout(timeout);
-      parentDispatch(RESIZE_FRAME_ACTION(dimensions));
+      const frameSize = get().frameSize;
+      parentDispatch(RESIZE_FRAME_ACTION(frameSize));
       parentDispatch(EXPAND_WIDGET_ACTION);
       return set({ state: LayoutState.OPEN });
     },

diff --git a/src/views/Views.tsx b/src/views/Views.tsx
@@ -14,7 +14,6 @@ export const Views: FC<ViewsProps> = () => {
   const layoutState = useLayoutStore((store) => store.state);
   const open = useLayoutStore((store) => store.open);
   const close = useLayoutStore((store) => store.close);
-  const frameSize = useLayoutStore((store) => store.frameSize);
 
   const { connect, disconnect, status, error } = useVoice();
 
@@ -24,7 +23,7 @@ export const Views: FC<ViewsProps> = () => {
         <OpenButton
           status={status.value}
           onPress={() => {
-            open(frameSize);
+            open();
           }}
         />
       </>