Convert to UseIdeContext

related to #360

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

@@ -1,14 +1,13 @@
-import { useContext } from 'react'
 import { Menu } from '@headlessui/react'
 
-import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import Svg from 'src/components/Svg/Svg'
 import { useRender } from 'src/components/IdeWrapper/useRender'
 import {makeStlDownloadHandler, PullTitleFromFirstLine} from './helpers'
 
 const EditorMenu = () => {
   const handleRender = useRender()
-  const { state, thunkDispatch } = useContext(IdeContext)
+  const { state, thunkDispatch } = useIdeContext()
   const handleStlDownload = makeStlDownloadHandler({
     type: state.objectData?.type,
     geometry: state.objectData?.data,

app/web/src/components/EncodedUrl/FullScriptEncoding.tsx

@@ -1,9 +1,10 @@
 import { makeEncodedLink } from './helpers'
 import { copyTextToClipboard } from 'src/helpers/clipboard'
-import {useIdeContext} from 'src/helpers/hooks/useIdeContext'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+
 
 const FullScriptEncoding = () => {
-  const {state} = useIdeContext()
+  const { state } = useIdeContext()
   const encodedLink = makeEncodedLink(state.code)
   return (
     <>

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

@@ -1,10 +1,10 @@
-import { useContext, useEffect } from 'react'
+import { useEffect } from 'react'
-import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
 import PanelToolbar from 'src/components/PanelToolbar'
 
 const IdeConsole = () => {
-  const { state } = useContext(IdeContext)
+  const { state } = useIdeContext()
   useEffect(() => {
     const element = document.querySelector('.console-tile .mosaic-window-body')
     if (element) {

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

@@ -1,6 +1,6 @@
-import { useContext, useRef, useEffect } from 'react'
+import { useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
-import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
@@ -15,7 +15,7 @@ const ELEMENT_MAP = {
 }
 
 const IdeContainer = () => {
-  const { state, thunkDispatch } = useContext(IdeContext)
+  const { state, thunkDispatch } = useIdeContext()
   const viewerDOM = useRef(null)
   const debounceTimeoutId = useRef
 

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

@@ -1,5 +1,5 @@
-import { useContext, Suspense, lazy } from 'react'
+import { Suspense, lazy } from 'react'
-import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
 const Editor = lazy(() => import('@monaco-editor/react'))
@@ -12,7 +12,7 @@ export const matchEditorVsDarkTheme = {
 }
 
 const IdeEditor = () => {
-  const { state, thunkDispatch } = useContext(IdeContext)
+  const { state, thunkDispatch } = useIdeContext()
   const ideTypeToLanguageMap = {
     cadQuery: 'python',
     openScad: 'cpp',

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

@@ -1,5 +1,5 @@
-import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { useRef, useState, useEffect, useContext } from 'react'
+import { useRef, useState, useEffect } from 'react'
 import {
   Canvas,
   extend,
@@ -138,7 +138,7 @@ function Sphere(props) {
   )
 }
 const IdeViewer = () => {
-  const { state, thunkDispatch } = useContext(IdeContext)
+  const { state, thunkDispatch } = useIdeContext()
   const [isDragging, setIsDragging] = useState(false)
   const [image, setImage] = useState()
 

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

@@ -1,10 +1,9 @@
 import { makeCodeStoreKey } from 'src/helpers/hooks/useIdeState'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-import { useContext } from 'react'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
-import { IdeContext } from 'src/pages/DevIdePage/DevIdePage'
 
 export const useRender = () => {
-  const { state, thunkDispatch } = useContext(IdeContext)
+  const { state, thunkDispatch } = useIdeContext()
   return () => {
     thunkDispatch((dispatch, getState) => {
       const state = getState()