Move context provide up one layer to the DevIdePage

Related to #360

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 import { Menu } from '@headlessui/react'
 
-import { IdeContext } from 'src/components/IdeToolbarNew/IdeToolbarNew'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 import Svg from 'src/components/Svg/Svg'
 import { useRender } from 'src/components/IdeToolbarNew/useRender'
 import {makeStlDownloadHandler, PullTitleFromFirstLine} from './helpers'

app/web/src/components/IdeConsole/IdeConsole.js

@@ -1,5 +1,5 @@
 import { useContext, useEffect } from 'react'
-import { IdeContext } from 'src/components/IdeToolbarNew'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
 import PanelToolbar from 'src/components/PanelToolbar'
 

app/web/src/components/IdeContainer/IdeContainer.js

@@ -1,6 +1,6 @@
 import { useContext, useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
-import { IdeContext } from 'src/components/IdeToolbarNew'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'

app/web/src/components/IdeEditor/IdeEditor.js

@@ -1,5 +1,5 @@
 import { useContext, Suspense, lazy } from 'react'
-import { IdeContext } from 'src/components/IdeToolbarNew'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 const Editor = lazy(() => import('@monaco-editor/react'))

app/web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -1,7 +1,7 @@
-import { createContext, useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import IdeContainer from 'src/components/IdeContainer'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
-import { useIdeState } from 'src/helpers/hooks/useIdeState'
 import { handleRenderVerbose } from './useRender'
 import { decode } from 'src/helpers/compress'
 import { flow } from 'lodash/fp'
@@ -19,9 +19,8 @@ export const githubSafe = (url) =>
 
 const prepareEncodedUrl = flow(decodeURIComponent, githubSafe)
 
-export const IdeContext = createContext()
 const IdeToolbarNew = ({ cadPackage }) => {
-  const [state, thunkDispatch] = useIdeState()
+  const { state, thunkDispatch } = useContext(IdeContext)
   const [shouldShowConstructionMessage, setShouldShowConstructionMessage] = useState(true)
   const scriptKey = 'encoded_script'
   const scriptKeyV2 = 'encoded_script_v2'
@@ -68,34 +67,32 @@ const IdeToolbarNew = ({ cadPackage }) => {
   }
 
   return (
-    <IdeContext.Provider value={{ state, thunkDispatch }}>
+    <div className="h-full flex">
-      <div className="h-full flex">
+      <div className="w-16 bg-gray-700 flex-shrink-0">
-        <div className="w-16 bg-gray-700 flex-shrink-0">
+        <IdeSideBar />
-          <IdeSideBar />
-        </div>
-        <div className="h-full flex flex-grow flex-col">
-          <nav className="flex">
-            <IdeHeader handleRender={handleRender} />
-          </nav>
-          {shouldShowConstructionMessage && <div className="py-2 bg-pink-200 flex">
-            <div className="flex-grow text-center">
-              We're still working on this. Since you're here, have a look what{' '}
-              <OutBound
-                className="text-pink-700"
-                to="https://github.com/Irev-Dev/cadhub/discussions/212"
-              >
-                we've got planned
-              </OutBound>
-              .
-            </div>
-            <button className="flex" onClick={() => setShouldShowConstructionMessage(false)}>
-              <Svg className="h-4 w-6 text-gray-500 mr-3 items-center" name="x"/>
-            </button>
-          </div>}
-          <IdeContainer />
-        </div>
       </div>
-    </IdeContext.Provider>
+      <div className="h-full flex flex-grow flex-col">
+        <nav className="flex">
+          <IdeHeader handleRender={handleRender} />
+        </nav>
+        {shouldShowConstructionMessage && <div className="py-2 bg-pink-200 flex">
+          <div className="flex-grow text-center">
+            We're still working on this. Since you're here, have a look what{' '}
+            <OutBound
+              className="text-pink-700"
+              to="https://github.com/Irev-Dev/cadhub/discussions/212"
+            >
+              we've got planned
+            </OutBound>
+            .
+          </div>
+          <button className="flex" onClick={() => setShouldShowConstructionMessage(false)}>
+            <Svg className="h-4 w-6 text-gray-500 mr-3 items-center" name="x"/>
+          </button>
+        </div>}
+        <IdeContainer />
+      </div>
+    </div>
   )
 }
 

app/web/src/components/IdeToolbarNew/useRender.ts

@@ -1,7 +1,7 @@
 import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 import { useContext } from 'react'
-import { IdeContext } from 'src/components/IdeToolbarNew/IdeToolbarNew'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 
 export const handleRenderVerbose = ({thunkDispatch, state}) => {
   thunkDispatch((dispatch, getState) => {

app/web/src/components/IdeViewer/IdeViewer.js

@@ -1,4 +1,4 @@
-import { IdeContext } from 'src/components/IdeToolbarNew'
+import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 import { useRef, useState, useEffect, useContext } from 'react'
 import {
   Canvas,

app/web/src/pages/DevIdePage/DevIdePage.js

@@ -1,8 +1,12 @@
+import { createContext } from 'react'
 import Seo from 'src/components/Seo/Seo'
 import IdeToolbar from 'src/components/IdeToolbarNew'
 import { Toaster } from '@redwoodjs/web/toast'
+import { useIdeState } from 'src/helpers/hooks/useIdeState'
 
+export const IdeContext = createContext()
 const DevIdePage = ({ cadPackage }) => {
+  const [state, thunkDispatch] = useIdeState()
   return (
     <div className="h-screen flex flex-col">
       <Seo
@@ -11,7 +15,9 @@ const DevIdePage = ({ cadPackage }) => {
         lang="en-US"
       />
       <Toaster timeout={9000} />
-      <IdeToolbar cadPackage={cadPackage} />
+      <IdeContext.Provider value={{ state, thunkDispatch }}>
+        <IdeToolbar cadPackage={cadPackage} />
+      </IdeContext.Provider>
     </div>
   )
 }