Merge pull request #415 from Irev-Dev/kurt/409-update-title-and-more

Kurt/409 update title and more

app/web/src/components/CaptureButton/CaptureButton.tsx

@@ -60,7 +60,6 @@ const CaptureButton = ({ canEdit, TheButton, shouldUpdateImage }) => {
       })
       updateCanvasSize(oldSize)
     } else {
-      console.log(project?.title)
       imgBlob = state.objectData.data
     }
     const config = {

app/web/src/components/EditableProjecTitle/EditableProjecTitle.tsx

@@ -36,8 +36,12 @@ const EditableProjectTitle = ({
       toast.success('Project updated.')
     },
   })
-  const onTitleChange = ({ target }) =>
-    setNewTitle(target.value.replace(/([^a-zA-Z\d_:])/g, '-'))
+  const onTitleChange = ({ target }) => {
+    if (target.value.length > 25) {
+      toast.error('Titles must be 25 or less characters')
+    }
+    setNewTitle(target.value.replace(/([^a-zA-Z\d_:])/g, '-').slice(0, 25))
+  }
   return (
     <>
       {!inEditMode && (
@@ -68,7 +72,7 @@ const EditableProjectTitle = ({
           <span className="flex items-center ml-4 border border-ch-gray-300 rounded-sm">
             <span className="ml-1">/</span>
             <input
-              className="pl-1 bg-ch-gray-900"
+              className="pl-1 w-64 bg-ch-gray-900"
               value={newTitle}
               onChange={onTitleChange}
               ref={inputRef}

app/web/src/components/IdeContainer/IdeContainer.tsx

@@ -21,7 +21,7 @@ const SmallLoadingPing = (
   </div>
 )
 
-const BigLoadingPing = () => (
+export const BigLoadingPing = (
   <div className="inset-0 absolute flex items-center justify-center bg-ch-gray-800">
     <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
   </div>

app/web/src/components/IdeViewer/IdeViewer.tsx

@@ -36,14 +36,13 @@ function Controls({ onCameraChange, onDragStart, onInit }) {
   const { camera, gl } = threeInstance
   useEffect(() => {
     onInit(threeInstance)
-  }, [])
-  useEffect(() => {
     // init camera position
     camera.position.x = 200
     camera.position.y = 140
     camera.position.z = 20
     camera.far = 10000
     camera.fov = 22.5 // matches default openscad fov
+    camera.updateProjectionMatrix()
 
     // Order matters with Euler rotations
     // We want it to rotate around the z or vertical axis first then the x axis to match openscad
@@ -163,7 +162,7 @@ const IdeViewer = ({ Loading }) => {
   const indigo900 = '#312E81'
   return (
     <div className="relative h-full bg-ch-gray-800">
-      {state.isLoading && <Loading />}
+      {state.isLoading && Loading}
       {image && (
         <div
           className={`absolute inset-0 transition-opacity duration-500 ${

app/web/src/components/IdeWrapper/IdeWrapper.tsx

@@ -6,7 +6,6 @@ import IdeSideBar from 'src/components/IdeSideBar/IdeSideBar'
 import IdeHeader from 'src/components/IdeHeader/IdeHeader'
 import Svg from 'src/components/Svg/Svg'
 import { useIdeInit } from 'src/components/EncodedUrl/helpers'
-import type { Project } from 'src/components/IdeProjectCell/IdeProjectCell'
 import { useIdeContext } from 'src/helpers/hooks/useIdeContext'
 import { useSaveCode } from 'src/components/IdeWrapper/useSaveCode'
 

app/web/src/components/IdeWrapper/useSaveCode.ts

@@ -18,7 +18,7 @@ export const useSaveCode = () => {
   if (!!error !== nowError) {
     setNowError(!!error)
   }
-  if (project?.user?.id !== currentUser?.sub) {
+  if (!currentUser || project?.user?.id !== currentUser?.sub) {
     return () => console.log('not your project')
   }
   return (input: Prisma.ProjectUpdateInput) => {

app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx

@@ -7,6 +7,7 @@ import Popover from '@material-ui/core/Popover'
 import useUser from 'src/helpers/hooks/useUser'
 import ImageUploader from 'src/components/ImageUploader'
 import LoginModal from 'src/components/LoginModal'
+import Gravatar from 'src/components//Gravatar/Gravatar'
 
 const ProfileSlashLogin = () => {
   const { logOut, isAuthenticated, currentUser, client } = useAuth()
@@ -43,21 +44,14 @@ const ProfileSlashLogin = () => {
     <div className="flex-shrink-0">
       {isAuthenticated ? (
         <div
-          className="h-8 w-8 border-2 rounded-full border-gray-200 relative text-indigo-200"
+          className="h-8 w-8 relative text-indigo-200"
           aria-describedby={popoverId}
         >
           <button
             className="absolute inset-0 w-full h-full"
             onClick={togglePopover}
           >
-            {!loading && (
-              <ImageUploader
-                className="rounded-full object-cover"
-                aspectRatio={1}
-                imageUrl={user?.image}
-                width={80}
-              />
-            )}
+            {!loading && <Gravatar image={user?.image} />}
           </button>
         </div>
       ) : (

app/web/src/components/ProfileViewer/ProfileViewer.tsx

@@ -1,12 +1,7 @@
 import { lazy, Suspense } from 'react'
 const IdeViewer = lazy(() => import('src/components/IdeViewer/IdeViewer'))
 import { use3dViewerResize } from 'src/helpers/hooks/use3dViewerResize'
-
-const BigLoadingPing = () => (
-  <div className="inset-0 absolute flex items-center justify-center bg-ch-gray-800">
-    <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-  </div>
-)
+import { BigLoadingPing } from 'src/components/IdeContainer/IdeContainer'
 
 const ProfileViewer = () => {
   const { viewerDomRef } = use3dViewerResize()

app/web/src/helpers/hooks/useUpdateProject.ts

@@ -6,7 +6,10 @@ const UPDATE_PROJECT_MUTATION_HOOK = gql`
     $input: UpdateProjectInput!
   ) {
     updateProject: updateProject(id: $id, input: $input) {
-      id
+      title
+      user {
+        userName
+      }
     }
   }
 `

app/web/src/pages/DevIdePage/DevIdePage.tsx

@@ -21,7 +21,7 @@ const DevIdePage = ({ cadPackage, project }: Props) => {
       />
       <Toaster timeout={9000} />
       <IdeContext.Provider value={{ state, thunkDispatch, project }}>
-        <IdeWrapper cadPackage={cadPackage} />
+        <IdeWrapper cadPackage={cadPackage.toLocaleLowerCase()} />
       </IdeContext.Provider>
     </div>
   )

app/web/src/pages/ProjectPage/ProjectPage.tsx

@@ -4,6 +4,7 @@ import ProjectCell from 'src/components/ProjectCell'
 import Seo from 'src/components/Seo/Seo'
 import { useIdeState } from 'src/helpers/hooks/useIdeState'
 import { IdeContext } from 'src/helpers/hooks/useIdeContext'
+import { Toaster } from '@redwoodjs/web/toast'
 
 const ProjectPage = ({ userName, projectTitle }) => {
   const { currentUser } = useAuth()
@@ -11,6 +12,7 @@ const ProjectPage = ({ userName, projectTitle }) => {
   return (
     <>
       <Seo title={projectTitle} description={projectTitle} lang="en-US" />
+      <Toaster timeout={1500} />
       <IdeContext.Provider value={{ state, thunkDispatch, project: null }}>
         <ProjectCell
           userName={userName}