Issue-178 Add draft mode for IDE

resolves #178
Initially the UI forced users to create a "part" before they got access
to the ide, now we're letting users go straight to hacking in the ide
and saving can come later. Better at getting users to the code earlier

web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -1,26 +1,47 @@
 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 defaultExampleCode = `// Welcome to Cascade Studio!   Here are some useful functions:
+//  Translate(), Rotate(), Scale(), Union(), Difference(), Intersection()
+//  Box(), Sphere(), Cylinder(), Cone(), Text3D(), Polygon()
+//  Offset(), Extrude(), RotatedExtrude(), Revolve(), Pipe(), Loft(),
+//  FilletEdges(), ChamferEdges(),
+//  Slider(), Button(), Checkbox()
+
+let holeRadius = Slider("Radius", 30 , 20 , 40);
+
+let sphere     = Sphere(50);
+let cylinderZ  =                     Cylinder(holeRadius, 200, true);
+let cylinderY  = Rotate([0,1,0], 90, Cylinder(holeRadius, 200, true));
+let cylinderX  = Rotate([1,0,0], 90, Cylinder(holeRadius, 200, true));
+
+Translate([0, 0, 50], Difference(sphere, [cylinderX, cylinderY, cylinderZ]));
+
+Translate([-130, 0, 100], Text3D("Start Hacking"));
+
+// Don't forget to push imported or oc-defined shapes into sceneShapes to add them to the workspace!`
+
 const IdeCascadeStudio = ({ part, saveCode, loading }) => {
-  const [code, setCode] = useState(part.code)
+  const isDraft = !part
+  const [code, setCode] = useState(isDraft ? defaultExampleCode : 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.
+    setCode(part?.code || '')
     const onCodeChange = (code) => setCode(code)
-    CascadeController.initialise(onCodeChange, part.code)
+    CascadeController.initialise(onCodeChange, 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
+  }, [part?.code])
+  const isChanges = code !== part?.code
 
   return (
     <>
@@ -28,6 +49,8 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => {
         <IdeToolbar
           canEdit={canEdit}
           isChanges={isChanges && !loading}
+          isDraft={isDraft}
+          code={code}
           onSave={() => {
             saveCode({
               input: {
@@ -42,8 +65,8 @@ const IdeCascadeStudio = ({ part, saveCode, loading }) => {
           }}
           onExport={(type) => threejsViewport[`saveShape${type}`]()}
           userNamePart={{
-            userName: part.user.userName,
-            partTitle: part.title,
+            userName: part?.user?.userName,
+            partTitle: part?.title,
             image: part?.user?.image,
           }}
         />