Fix CascadeStudio integration

resolves #95

web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -0,0 +1,138 @@
+import { useMutation, useFlash } from '@redwoodjs/web'
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { initialize } from 'src/cascade/js/MainPage/CascadeMain'
+import CascadeController from 'src/helpers/cascadeController'
+import { useEffect, useState } from 'react'
+
+const DELETE_PART_MUTATION = gql`
+  mutation DeletePartMutation($id: Int!) {
+    deletePart(id: $id) {
+      id
+    }
+  }
+`
+const domNode = document.createElement('div').setAttribute('id', 'sickId')
+
+const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
+  const [code, setCode] = useState(part.code)
+  useEffect(() => {
+    const onCodeChange = (code) => setCode(code)
+    CascadeController.initialise(onCodeChange, part.code, domNode)
+    const element = document.getElementById('cascade-container')
+    element.setAttribute('style', 'height: auto; display: block; opacity: 100%') // eslint-disable-line
+    return () => {
+      element.setAttribute('style', 'height: auto; display: none;') // eslint-disable-line
+    }
+  }, [])
+  const hasChanges = code !== part.code
+  const { addMessage } = useFlash()
+  const [deletePart] = useMutation(DELETE_PART_MUTATION, {
+    onCompleted: () => {
+      // navigate(routes.parts())
+      addMessage('Part deleted.', { classes: 'rw-flash-success' })
+    },
+  })
+
+  const onDeleteClick = (id) => {
+    if (confirm('Are you sure you want to delete part ' + id + '?')) {
+      deletePart({ variables: { id } })
+    }
+  }
+
+  return (
+    <>
+      <nav className="rw-button-group">
+        {loading && 'Loading...'}
+        {hasChanges && !loading && (
+          <button
+            onClick={() => saveCode({ code }, part.id)}
+            className="rw-button rw-button-blue"
+          >
+            Save Changes
+          </button>
+        )}
+      </nav>
+      <div>
+        <div id="topnav" className="topnav">
+          <a href="https://github.com/zalo/CascadeStudio">
+            Cascade Studio 0.0.6
+          </a>
+          <a
+            href="#"
+            id="main-proj-button"
+            title="Sets this project to save in local storage."
+            onClick={() => makeMainProject()}
+          >
+            Make Main Project
+          </a>
+          <a
+            href="#"
+            title="Save Project to .json"
+            onClick={() => saveProject()}
+          >
+            Save Project
+          </a>
+          <label htmlFor="project-file" title="Load Project from .json">
+            Load Project
+            <input
+              id="project-file"
+              name="project-file"
+              type="file"
+              accept=".json"
+              style={{ display: 'none' }}
+              onInput={() => loadProject()}
+            />
+          </label>
+          <a href="#" onClick={() => threejsViewport.saveShapeSTEP()}>
+            Save STEP
+          </a>
+          <a href="#" onClick={() => threejsViewport.saveShapeSTL()}>
+            Save STL
+          </a>
+          <a href="#" onClick={() => threejsViewport.saveShapeOBJ()}>
+            Save OBJ
+          </a>
+          <label
+            htmlFor="files"
+            title="Import STEP, IGES, or (ASCII) STL from File"
+          >
+            Import STEP/IGES/STL
+            <input
+              id="files"
+              name="files"
+              type="file"
+              accept=".iges,.step,.igs,.stp,.stl"
+              multiple
+              style={{ display: 'none' }}
+              onInput={() => loadFiles()}
+            />
+          </label>
+          <a
+            href="#"
+            title="Clears the external step/iges/stl files stored in the project."
+            onClick={() => clearExternalFiles()}
+          >
+            Clear Imported Files
+          </a>
+          <a
+            href=""
+            title="Resets the project and localstorage."
+            onClick={() => {
+              window.localStorage.clear()
+              window.history.replaceState({}, 'Cascade Studio', '?')
+            }}
+          >
+            Reset Project
+          </a>
+        </div>
+        {/* <div
+          id="cascade-container"
+          style={{ height: 'auto' }}
+          // dangerouslySetInnerHTML={domNode}
+        ></div> */}
+      </div>
+    </>
+  )
+}
+
+export default IdeCascadeStudio

web/src/components/IdeCascadeStudio/IdeCascadeStudio.stories.js

@@ -0,0 +1,7 @@
+import IdeCascadeStudio from './IdeCascadeStudio'
+
+export const generated = () => {
+  return <IdeCascadeStudio />
+}
+
+export default { title: 'Components/IdeCascadeStudio' }

web/src/components/IdeCascadeStudio/IdeCascadeStudio.test.js

@@ -0,0 +1,11 @@
+import { render } from '@redwoodjs/testing'
+
+import IdeCascadeStudio from './IdeCascadeStudio'
+
+describe('IdeCascadeStudio', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<IdeCascadeStudio />)
+    }).not.toThrow()
+  })
+})

web/src/components/IdePartCell/IdePartCell.js

@@ -1,10 +1,11 @@
 import { useMutation, useFlash } from '@redwoodjs/web'
 import { navigate, routes } from '@redwoodjs/router'
-// import Part from 'src/components/Part'
+import IdeCascadeStudio from 'src/components/IdeCascadeStudio'
+// import Part from 'src/components/Part'a
 
 export const QUERY = gql`
-  query FIND_PART_BY_ID($id: Int!) {
-    part: part(id: $id) {
+  query FIND_PART_BY_USENAME_TITLE($partTitle: String!, $userName: String!) {
+    part: partByUserAndTitle(partTitle: $partTitle, userName: $userName) {
       id
       title
       description
@@ -16,7 +17,7 @@ export const QUERY = gql`
 `
 
 const UPDATE_PART_MUTATION = gql`
-  mutation UpdatePartMutation($id: Int!, $input: UpdatePartInput!) {
+  mutation UpdatePartMutation($id: String!, $input: UpdatePartInput!) {
     updatePart(id: $id, input: $input) {
       id
     }
@@ -27,7 +28,7 @@ export const Loading = () => <div>Loading...</div>
 
 export const Empty = () => <div>Part not found</div>
 
-export const Success = ({ part }) => {
+export const Success = ({ part, refetch }) => {
   const { addMessage } = useFlash()
   const [updatePart, { loading, error }] = useMutation(UPDATE_PART_MUTATION, {
     onCompleted: () => {
@@ -40,7 +41,14 @@ export const Success = ({ part }) => {
   const saveCode = (input, id) => {
     console.log(id, input, 'wowow')
     updatePart({ variables: { id, input } })
+    refetch()
   }
-  return <div>TODO part</div>
-  // return <Part part={{...part, code: part.code}} saveCode={saveCode} loading={loading} error={error} />
+  return (
+    <IdeCascadeStudio
+      part={part}
+      saveCode={saveCode}
+      loading={loading}
+      error={error}
+    />
+  )
 }

web/src/components/PartProfile/PartProfile.js

@@ -92,14 +92,21 @@ const PartProfile = ({
           >
             Comments 11
           </Button>
-          <Button
-            className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200"
-            shouldAnimateHover
-            iconName="terminal"
-            onClick={() => {}}
+          <Link
+            to={routes.ide({
+              userName: userPart.userName,
+              partTitle: part.title,
+            })}
           >
-            Open IDE
-          </Button>
+            <Button
+              className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200"
+              shouldAnimateHover
+              iconName="terminal"
+              onClick={() => {}}
+            >
+              Open IDE
+            </Button>
+          </Link>
           {canEdit && (
             <Button
               className="mt-4 ml-auto shadow-md hover:shadow-lg bg-indigo-200 relative z-20"