56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
import { useAuth } from '@redwoodjs/auth'
|
|
import { Link, routes } from '@redwoodjs/router'
|
|
import CascadeController from 'src/helpers/cascadeController'
|
|
import IdeToolbar from 'src/components/IdeToolbar'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
const IdeCascadeStudio = ({ part, saveCode, loading }) => {
|
|
const [code, setCode] = useState(part.code)
|
|
const { currentUser } = useAuth()
|
|
const canEdit = currentUser?.sub === part?.user?.id
|
|
useEffect(() => {
|
|
// Cascade studio attaches "cascade-container" a div outside the react app in 'web/src/index.html', and so we are
|
|
// "opening" and "closing" it for the ide part of the app by displaying none or block. Which is why this useEffect
|
|
// returns a clean up function that hides the div again.
|
|
const onCodeChange = (code) => setCode(code)
|
|
CascadeController.initialise(onCodeChange, part.code)
|
|
const element = document.getElementById('cascade-container')
|
|
element.setAttribute('style', 'display: block; opacity: 100%; overflow: hidden; height: calc(100vh - 8rem)') // eslint-disable-line
|
|
return () => {
|
|
element.setAttribute('style', 'display: none; overflow: hidden; height: calc(100vh - 8rem)') // eslint-disable-line
|
|
}
|
|
}, [part.code])
|
|
const isChanges = code !== part.code
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<IdeToolbar
|
|
canEdit={canEdit}
|
|
isChanges={isChanges && !loading}
|
|
onSave={() => {
|
|
saveCode({
|
|
input: {
|
|
code,
|
|
title: part?.title,
|
|
userId: currentUser?.sub,
|
|
description: part?.description,
|
|
},
|
|
id: part.id,
|
|
isFork: !canEdit,
|
|
})
|
|
}}
|
|
onExport={(type) => threejsViewport[`saveShape${type}`]()}
|
|
userNamePart={{
|
|
userName: part.user.userName,
|
|
partTitle: part.title,
|
|
image: part?.user?.image,
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default IdeCascadeStudio
|