Files
cadhub/app/web/src/components/IdeWrapper/IdeWrapper.tsx
2021-09-11 06:05:17 -04:00

52 lines
1.7 KiB
TypeScript

import { useEffect, useState } from 'react'
import IdeContainer from 'src/components/IdeContainer/IdeContainer'
import { useRender } from './useRender'
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'
import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
import { ShortcutsModalContext } from 'src/components/EditorMenu/AllShortcutsModal'
interface Props {
cadPackage: string
}
const IdeWrapper = ({ cadPackage }: Props) => {
const { state, project } = useIdeContext()
const handleRender = useRender()
const saveCode = useSaveCode()
const onRender = () => {
handleRender()
saveCode({ code: state.code })
}
useIdeInit(cadPackage, project?.code || state?.code)
const [shortcutModalOpen, setShortcutModalOpen] = useState(false)
const shortcutModalContextValues = {
open: shortcutModalOpen,
toggleOpen: () => setShortcutModalOpen(!shortcutModalOpen),
}
return (
<div className="h-full flex flex-col">
<ShortcutsModalContext.Provider value={shortcutModalContextValues}>
<nav className="flex">
<IdeHeader handleRender={onRender} />
</nav>
<div className="h-full flex flex-grow bg-ch-gray-900">
<div className="flex-shrink-0">
<IdeSideBar />
</div>
<div className="h-full flex flex-grow">
<IdeContainer />
</div>
</div>
</ShortcutsModalContext.Provider>
</div>
)
}
export default IdeWrapper