From bd9224fec98345419104cc3bf78b2683cfb1e3fb Mon Sep 17 00:00:00 2001
From: Frank Johnson <frankjohnson1993@gmail.com>
Date: Mon, 15 Nov 2021 01:26:47 -0500
Subject: [PATCH] initial commit, issue with OpenSCAD embed viewing

---
 app/api/db/schema.prisma                      |  2 +-
 app/web/src/Routes.js                         |  1 +
 .../EmbedProjectCell/EmbedProjectCell.mock.ts |  6 ++
 .../EmbedProjectCell.stories.tsx              | 16 +++++
 .../EmbedProjectCell.test.tsx                 | 21 ++++++
 .../EmbedProjectCell/EmbedProjectCell.tsx     | 71 +++++++++++++++++++
 .../components/EmbedViewer/EmbedViewer.tsx    | 19 +++++
 .../src/components/IdeViewer/IdeViewer.tsx    |  7 +-
 .../ProjectProfile/ProjectProfile.tsx         |  1 +
 .../EmbedProjectPage/EmbedProjectPage.tsx     | 11 +++
 10 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 app/web/src/components/EmbedProjectCell/EmbedProjectCell.mock.ts
 create mode 100644 app/web/src/components/EmbedProjectCell/EmbedProjectCell.stories.tsx
 create mode 100644 app/web/src/components/EmbedProjectCell/EmbedProjectCell.test.tsx
 create mode 100644 app/web/src/components/EmbedProjectCell/EmbedProjectCell.tsx
 create mode 100644 app/web/src/components/EmbedViewer/EmbedViewer.tsx
 create mode 100644 app/web/src/pages/EmbedProjectPage/EmbedProjectPage.tsx

diff --git a/app/api/db/schema.prisma b/app/api/db/schema.prisma
index d91dda8..3bc72bf 100644
--- a/app/api/db/schema.prisma
+++ b/app/api/db/schema.prisma
@@ -5,7 +5,7 @@ datasource db {
 
 generator client {
   provider      = "prisma-client-js"
-  binaryTargets = "native"
+  binaryTargets = ["native", "darwin-arm64", "darwin"]
 }
 
 // sqlLight does not suport enums so we can't use enums until we set up postgresql in dev mode
diff --git a/app/web/src/Routes.js b/app/web/src/Routes.js
index a2f053b..58578bc 100644
--- a/app/web/src/Routes.js
+++ b/app/web/src/Routes.js
@@ -56,6 +56,7 @@ const Routes = () => {
       <Route path="/u/{userName}" page={UserPage} name="user" />
       <Route path="/u/{userName}/{projectTitle}" page={ProjectPage} name="project" />
       <Route path="/u/{userName}/{projectTitle}/ide" page={IdeProjectPage} name="ide" />
+      <Route path="/u/{userName}/{projectTitle}/embed" page={EmbedProjectPage} name="embed" />
       <Route path="/u/{userName}/{projectTitle}/social-card" page={SocialCardPage} name="socialCard" />
 
       <Private unauthenticated="home" role="admin">
diff --git a/app/web/src/components/EmbedProjectCell/EmbedProjectCell.mock.ts b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.mock.ts
new file mode 100644
index 0000000..2e297e0
--- /dev/null
+++ b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.mock.ts
@@ -0,0 +1,6 @@
+// Define your own mock data here:
+export const standard = (/* vars, { ctx, req } */) => ({
+  ideProject: {
+    id: 42,
+  },
+})
diff --git a/app/web/src/components/EmbedProjectCell/EmbedProjectCell.stories.tsx b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.stories.tsx
new file mode 100644
index 0000000..8a20e23
--- /dev/null
+++ b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.stories.tsx
@@ -0,0 +1,16 @@
+import { Loading, Empty, Success } from './EmbedProjectCell'
+import { standard } from './EmbedProjectCell.mock'
+
+export const loading = () => {
+  return Loading ? <Loading /> : null
+}
+
+export const empty = () => {
+  return Empty ? <Empty /> : null
+}
+
+export const success = () => {
+  return Success ? <Success {...standard()} /> : null
+}
+
+export default { title: 'Cells/EmbedProjectCell' }
diff --git a/app/web/src/components/EmbedProjectCell/EmbedProjectCell.test.tsx b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.test.tsx
new file mode 100644
index 0000000..58efd22
--- /dev/null
+++ b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.test.tsx
@@ -0,0 +1,21 @@
+import { render, screen } from '@redwoodjs/testing'
+import { Loading, Empty, Success } from './EmbedProjectCell'
+import { standard } from './EmbedProjectCell.mock'
+
+describe('EmbedProjectCell', () => {
+  test('Loading renders successfully', () => {
+    render(<Loading />)
+    // Use screen.debug() to see output
+    expect(screen.getByText('Loading...')).toBeInTheDocument()
+  })
+
+  test('Empty renders successfully', async () => {
+    render(<Empty />)
+    expect(screen.getByText('Empty')).toBeInTheDocument()
+  })
+
+  test('Success renders successfully', async () => {
+    render(<Success ideProject={standard().ideProject} />)
+    expect(screen.getByText(/42/i)).toBeInTheDocument()
+  })
+})
diff --git a/app/web/src/components/EmbedProjectCell/EmbedProjectCell.tsx b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.tsx
new file mode 100644
index 0000000..fdda356
--- /dev/null
+++ b/app/web/src/components/EmbedProjectCell/EmbedProjectCell.tsx
@@ -0,0 +1,71 @@
+import useUser from 'src/helpers/hooks/useUser'
+import EmbedViewer from 'src/components/EmbedViewer/EmbedViewer'
+import { useIdeState } from 'src/helpers/hooks/useIdeState'
+import { IdeContext } from 'src/helpers/hooks/useIdeContext'
+
+export const QUERY = gql`
+  query FIND_PROJECT_BY_USENAME_TITLE(
+    $projectTitle: String!
+    $userName: String!
+  ) {
+    project: projectByUserAndTitle(
+      projectTitle: $projectTitle
+      userName: $userName
+    ) {
+      id
+      title
+      description
+      code
+      mainImage
+      createdAt
+      cadPackage
+      user {
+        id
+        userName
+        image
+      }
+    }
+  }
+`
+
+export interface Project {
+  id: string
+  title: string
+  code: string
+  description: string
+  mainImage: string
+  createdAt: string
+  cadPackage: 'openscad' | 'cadquery'
+  user: {
+    id: string
+    userName: string
+    image: string
+  }
+}
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Project not found</div>
+
+interface SaveCodeArgs {
+  input: any
+  id: string
+  isFork: boolean
+}
+
+export const Success = ({
+  project,
+  refetch,
+}: {
+  project: Project
+  refetch: any
+}) => {
+  const [state, thunkDispatch] = useIdeState()
+
+
+  return (
+      <IdeContext.Provider value={{ state, thunkDispatch, project }}>
+        <EmbedViewer />
+      </IdeContext.Provider>
+  )
+}
diff --git a/app/web/src/components/EmbedViewer/EmbedViewer.tsx b/app/web/src/components/EmbedViewer/EmbedViewer.tsx
new file mode 100644
index 0000000..6d28e98
--- /dev/null
+++ b/app/web/src/components/EmbedViewer/EmbedViewer.tsx
@@ -0,0 +1,19 @@
+import { useIdeInit } from 'src/components/EncodedUrl/helpers'
+import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
+import IdeViewer from 'src/components/IdeViewer/IdeViewer'
+import { use3dViewerResize } from 'src/helpers/hooks/use3dViewerResize'
+
+function EmbedViewer() {
+    const { state, project } = useIdeContext()
+    console.log('from EmbedViewer', { cadPackage: project.cadPackage, code: project.code })
+    useIdeInit(project?.cadPackage, project?.code || state?.code, "viewer")
+    const { viewerDomRef } = use3dViewerResize()
+
+    return (
+        <div className="h-screen flex flex-col">
+            <IdeViewer isMinimal={true} />
+        </div>
+    )
+}
+
+export default EmbedViewer
\ No newline at end of file
diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx
index 51ea4a4..d1af0d7 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.tsx
+++ b/app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -4,8 +4,10 @@ import { PureIdeViewer } from './PureIdeViewer'
 
 const IdeViewer = ({
   handleOwnCamera = false,
+  isMinimal = false,
 }: {
-  handleOwnCamera?: boolean
+  handleOwnCamera?: boolean,
+  isMinimal?: boolean,
 }) => {
   const { state, thunkDispatch } = useIdeContext()
   const dataType = state.objectData?.type
@@ -35,7 +37,7 @@ const IdeViewer = ({
       }
     })
   }
-
+  
   return (
     <PureIdeViewer
       dataType={dataType}
@@ -44,6 +46,7 @@ const IdeViewer = ({
       onCameraChange={onCameraChange}
       isLoading={state.isLoading}
       camera={state?.camera}
+      isMinimal={isMinimal}
     />
   )
 }
diff --git a/app/web/src/components/ProjectProfile/ProjectProfile.tsx b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
index cb0fb36..02d4700 100644
--- a/app/web/src/components/ProjectProfile/ProjectProfile.tsx
+++ b/app/web/src/components/ProjectProfile/ProjectProfile.tsx
@@ -52,6 +52,7 @@ const ProjectProfile = ({
         })
       )
   }, [currentUser, project?.title, userProject.userName])
+  console.log('from ProjectProfile', { cadPackage: project.cadPackage, code: project.code })
   useIdeInit(project?.cadPackage, project?.code, 'viewer')
   const [newDescription, setNewDescription] = useState(project?.description)
   const onDescriptionChange = (description) => setNewDescription(description())
diff --git a/app/web/src/pages/EmbedProjectPage/EmbedProjectPage.tsx b/app/web/src/pages/EmbedProjectPage/EmbedProjectPage.tsx
new file mode 100644
index 0000000..bca9257
--- /dev/null
+++ b/app/web/src/pages/EmbedProjectPage/EmbedProjectPage.tsx
@@ -0,0 +1,11 @@
+import EmbedProjectCell from 'src/components/EmbedProjectCell'
+
+const EmbedProjectPage = ({ userName, projectTitle }) => {
+  return (
+    <>
+      <EmbedProjectCell userName={userName} projectTitle={projectTitle} />
+    </>
+  )
+}
+
+export default EmbedProjectPage