Refactor: break out engine manager setup into hook

Preparing for making a wrapper component around the App
that will manage the engine manager at the same level as
the modelingMachine.

src/App.tsx

@@ -41,11 +41,14 @@ import { CameraDragInteractionType_type } from '@kittycad/lib/dist/types/src/mod
 import { CodeMenu } from 'components/CodeMenu'
 import { TextEditor } from 'components/TextEditor'
 import { Themes, getSystemTheme } from 'lib/theme'
+import { useEngineWithStream } from 'hooks/useEngineWithStream'
 
 export function App() {
   const { code: loadedCode, project } = useLoaderData() as IndexLoaderData
 
   const streamRef = useRef<HTMLDivElement>(null)
+  useEngineWithStream(streamRef)
+
   useHotKeyListener()
   const {
     addLog,
@@ -147,33 +150,6 @@ export function App() {
     }
   }, [loadedCode, setCode])
 
-  const streamWidth = streamRef?.current?.offsetWidth
-  const streamHeight = streamRef?.current?.offsetHeight
-
-  const width = streamWidth ? streamWidth : 0
-  const quadWidth = Math.round(width / 4) * 4
-  const height = streamHeight ? streamHeight : 0
-  const quadHeight = Math.round(height / 4) * 4
-
-  useLayoutEffect(() => {
-    setStreamDimensions({
-      streamWidth: quadWidth,
-      streamHeight: quadHeight,
-    })
-    if (!width || !height) return
-    const eng = new EngineCommandManager({
-      setMediaStream,
-      setIsStreamReady,
-      width: quadWidth,
-      height: quadHeight,
-      token,
-    })
-    setEngineCommandManager(eng)
-    return () => {
-      eng?.tearDown()
-    }
-  }, [quadWidth, quadHeight])
-
   useEffect(() => {
     if (!isStreamReady) return
     if (!engineCommandManager) return

src/hooks/useEngineWithStream.ts

@@ -0,0 +1,60 @@
+import { useLayoutEffect } from 'react'
+import { useStore } from 'useStore'
+import { useGlobalStateContext } from './useGlobalStateContext'
+import { EngineCommandManager } from 'lang/std/engineConnection'
+
+export function useEngineWithStream(streamRef: React.RefObject<HTMLElement>) {
+  const {
+    setStreamDimensions,
+    setEngineCommandManager,
+    setMediaStream,
+    setIsStreamReady,
+  } = useStore((s) => ({
+    setStreamDimensions: s.setStreamDimensions,
+    setEngineCommandManager: s.setEngineCommandManager,
+    setMediaStream: s.setMediaStream,
+    setIsStreamReady: s.setIsStreamReady,
+  }))
+  const {
+    auth: {
+      context: { token },
+    },
+  } = useGlobalStateContext()
+
+  const streamWidth = streamRef?.current?.offsetWidth
+  const streamHeight = streamRef?.current?.offsetHeight
+
+  const width = streamWidth ? streamWidth : 0
+  const quadWidth = Math.round(width / 4) * 4
+  const height = streamHeight ? streamHeight : 0
+  const quadHeight = Math.round(height / 4) * 4
+
+  useLayoutEffect(() => {
+    setStreamDimensions({
+      streamWidth: quadWidth,
+      streamHeight: quadHeight,
+    })
+    if (!width || !height) return
+    const eng = new EngineCommandManager({
+      setMediaStream,
+      setIsStreamReady,
+      width: quadWidth,
+      height: quadHeight,
+      token,
+    })
+    setEngineCommandManager(eng)
+    return () => {
+      eng?.tearDown()
+    }
+  }, [
+    quadWidth,
+    quadHeight,
+    setStreamDimensions,
+    width,
+    height,
+    setMediaStream,
+    setIsStreamReady,
+    token,
+    setEngineCommandManager,
+  ])
+}