Add "STL Download" to project profile page (#585)

* Moved EditorMenu/helpers.ts file to src/helpers. Reused STL download helper on a new button in the project profile page

* Tweak download STL style - flex-wrap the column and grow original "built with" content so the button is pushed write but remains responsive on smaller screens

CONTRIBUTING.md

@@ -32,9 +32,9 @@ Install dependencies
 yarn install
 ```
 
-Setting up the db, you'll need to have a postgres installed locally, you can [follow this guide](https://redwoodjs.com/docs/local-postgres-setup).
+Setting up the db, you'll need to have a postgres installed locally, you can [follow this guide](https://redwoodjs.com/docs/local-postgres-setup). 
 
-Run the following
+Run the following (Note: these commands require the `DATABASE_URL` env variable to be set. if you see no result when you run `echo $DATABASE_URL`, you can set it with a command like `export DATABASE_URL=postgres://postgres:somepassword@localhost`)
 ``` terminal
 yarn rw prisma migrate dev
 yarn rw prisma db seed

app/web/src/components/EditorMenu/menuConfig.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useRender } from 'src/components/IdeWrapper/useRender'
-import { makeStlDownloadHandler, PullTitleFromFirstLine } from './helpers'
+import { makeStlDownloadHandler, PullTitleFromFirstLine } from 'src/helpers/download_stl'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 import { DropdownItem } from './Dropdowns'
 import { useShortcutsModalContext } from './AllShortcutsModal'

app/web/src/components/ProjectCell/ProjectCell.tsx

@@ -2,6 +2,7 @@ import { useMutation } from '@redwoodjs/web'
 import { toast } from '@redwoodjs/web/toast'
 import { navigate, routes } from '@redwoodjs/router'
 import { useAuth } from '@redwoodjs/auth'
+import { makeStlDownloadHandler } from 'src/helpers/download_stl'
 import { useIdeState } from 'src/helpers/hooks/useIdeState'
 import { IdeContext } from 'src/helpers/hooks/useIdeContext'
 import { CREATE_PROJECT_MUTATION } from 'src/components/NavPlusButton/NavPlusButton'
@@ -192,6 +193,15 @@ export const Success = ({ userProject, refetch }) => {
       },
     })
 
+  const onStlDownload = makeStlDownloadHandler({
+      type: state.objectData?.type,
+      ideType: state.ideType,
+      geometry: state.objectData?.data,
+      quality: state.objectData?.quality,
+      fileName: `${userProject.title }.stl`,
+      thunkDispatch,
+    })
+
   return (
     <IdeContext.Provider
       value={{
@@ -213,6 +223,7 @@ export const Success = ({ userProject, refetch }) => {
         onDelete={onDelete}
         onReaction={onReaction}
         onComment={onComment}
+        onStlDownload={onStlDownload}
       />
     </IdeContext.Provider>
   )

app/web/src/components/ProjectProfile/ProjectProfile.tsx

@@ -25,6 +25,7 @@ const ProjectProfile = ({
   onDelete,
   onReaction,
   onComment,
+  onStlDownload,
 }) => {
   const [comment, setComment] = useState('')
   const [isEditing, setIsEditing] = useState(false)
@@ -91,12 +92,25 @@ const ProjectProfile = ({
                 <h3 className="text-5xl capitalize text-ch-gray-300">
                   {project?.title.replace(/-/g, ' ')}
                 </h3>
-                <div className="flex items-center text-gray-100">
+                <div className="flex items-center text-gray-100 flex-wrap">
-                  <span className="pr-4">Built with</span>
+                  <div className="flex flex-grow items-center">
-                  <CadPackage
+                    <span className="pr-4">Built with</span>
-                    cadPackage={project?.cadPackage}
+                    <CadPackage
-                    className="px-3 py-2 rounded"
+                      cadPackage={project?.cadPackage}
-                  />
+                      className="px-3 py-2 rounded"
+                    />
+                  </div>
+                  <Button
+                    className={getActiveClasses(
+                      'ml-3 hover:bg-opacity-100 bg-ch-pink-800 bg-opacity-30 mt-4 mb-3 text-ch-gray-300',
+                                { 'bg-indigo-200': currentUser }
+                    )}
+                    shouldAnimateHover
+                    iconName={'document-download'}
+                    onClick={onStlDownload}
+                  >
+                    Download STL
+                  </Button>
                 </div>
                 {(project?.description || hasPermissionToEdit) && (
                   <KeyValue

app/web/src/components/Svg/Svg.tsx

@@ -139,6 +139,21 @@ const Svg = ({
         />
       </svg>
     ),
+    'document-download': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+        />
+      </svg>
+    ),
     'dots-vertical': (
       <svg
         xmlns="http://www.w3.org/2000/svg"