Move encoded script logic together

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -1,68 +1,16 @@
-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 { useState } from 'react'
+import IdeContainer from 'src/components/IdeContainer/IdeContainer'
 import { useRender } from './useRender'
-import { decode } from 'src/helpers/compress'
-import { flow } from 'lodash/fp'
-import OutBound from 'src/components/OutBound'
-import IdeSideBar from 'src/components/IdeSideBar'
-import IdeHeader from 'src/components/IdeHeader'
-import Svg from 'src/components/Svg'
-
-export const githubSafe = (url) =>
-  url.includes('github.com')
-    ? url
-        .replace('github.com', 'raw.githubusercontent.com')
-        .replace('/blob/', '/')
-    : url
-
-const prepareEncodedUrl = flow(decodeURIComponent, githubSafe)
+import OutBound from 'src/components/OutBound/OutBound'
+import IdeSideBar from 'src/components/IdeSideBar/IdeSideBar'
+import IdeHeader from 'src/components/IdeHeader/IdeHeader'
+import Svg from 'src/components/Svg/Svg'
+import { useIdeInit } from 'src/components/EncodedUrl/helpers'
 
 const IdeToolbarNew = ({ cadPackage }) => {
-  const { state, thunkDispatch } = useContext(IdeContext)
   const [shouldShowConstructionMessage, setShouldShowConstructionMessage] = useState(true)
   const handleRender = useRender()
-  const scriptKey = 'encoded_script'
-  const scriptKeyV2 = 'encoded_script_v2'
-  const fetchText = 'fetch_text_v1'
-  useEffect(() => {
-    thunkDispatch({
-      type: 'initIde',
-      payload: { cadPackage },
-    })
-    // load code from hash if it's there
-    const triggerRender = () =>
-      setTimeout(() => {
-        // definitely a little hacky, timeout with no delay is just to push it into the next event loop.
-        handleRender()
-      })
-    let hash
-    if (isBrowser) {
-      hash = window.location.hash
-    }
-    const [key, encodedScript] = hash.slice(1).split('=')
-    if (key === scriptKey) {
-      const script = atob(encodedScript)
-      thunkDispatch({ type: 'updateCode', payload: script })
-      triggerRender()
-    } else if (key === scriptKeyV2) {
-      const script = decode(encodedScript)
-      thunkDispatch({ type: 'updateCode', payload: script })
-      triggerRender()
-    } else if (key === fetchText) {
-      const url = prepareEncodedUrl(encodedScript)
-      fetch(url).then((response) =>
-        response.text().then((script) => {
-          thunkDispatch({ type: 'updateCode', payload: script })
-          triggerRender()
-        })
-      )
-    } else {
-      triggerRender()
-    }
-    window.location.hash = ''
-  }, [cadPackage])
+  useIdeInit(cadPackage)
 
   return (
     <div className="h-full flex">