app/web/src/components/NavPlusButton/NavPlusButton.tsx

@@ -1,4 +1,10 @@
-import { Link, routes } from '@redwoodjs/router'
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { useAuth } from '@redwoodjs/auth'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import useUser from 'src/helpers/hooks/useUser'
+import { CREATE_PROJECT_MUTATION } from 'src/components/ProjectCell/ProjectCell'
 import Svg from 'src/components/Svg/Svg'
 import { Popover } from '@headlessui/react'
 import { CadPackageType } from 'src/components/CadPackage/CadPackage'
@@ -34,6 +40,36 @@ const menuOptions: {
 ]
 
 const NavPlusButton: React.FC = () => {
+  const { isAuthenticated } = useAuth()
+  const { user } = useUser()
+  const [createProject] = useMutation(CREATE_PROJECT_MUTATION, {})
+  const handleCreate = async (ideType) => {
+    const projectPromise = createProject({
+      variables: { input: { userId: user.id, cadPackage: ideType } },
+    })
+    toast.promise(projectPromise, {
+      loading: 'creating Project',
+      success: <b>Initializing</b>,
+      error: <b>Problem creating.</b>,
+    })
+    const {
+      data: { createProject: project },
+    } = await projectPromise
+    navigate(
+      routes.ide({
+        userName: project?.user?.userName,
+        projectTitle: project?.title,
+      })
+    )
+  }
+  const ButtonWrap = ({ children, ideType }) =>
+    isAuthenticated && user ? (
+      <button className="text-left" onClick={() => handleCreate(ideType)}>
+        {children}
+      </button>
+    ) : (
+      <Link to={routes.draftProject({ cadPackage: ideType })}>{children}</Link>
+    )
   return (
     <Popover className="relative outline-none w-full h-full">
       <Popover.Button className="h-full w-full outline-none hover:bg-ch-gray-550 border-ch-gray-400 border-2 rounded-full">
@@ -49,18 +85,19 @@ const NavPlusButton: React.FC = () => {
               key={name}
               className={
                 bgClasses +
-                ' px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid grid-flow-col-dense items-center gap-2'
+                ' px-4 py-1 my-4 bg-opacity-30 hover:bg-opacity-70 grid items-center gap-2'
               }
+              style={{ gridTemplateColumns: '2.5rem 1fr' }}
             >
               <div
                 className={
                   dotClasses + ' justify-self-center w-5 h-5 rounded-full'
                 }
               ></div>
-              <Link to={routes.draftProject({ cadPackage: ideType })}>
+              <ButtonWrap ideType={ideType}>
                 <div>{name}</div>
                 <div className="text-xs text-ch-gray-400 font-light">{sub}</div>
-              </Link>
+              </ButtonWrap>
             </li>
           ))}
         </ul>

app/web/src/pages/DraftProjectPage/DraftProjectPage.tsx

@@ -1,35 +1,6 @@
-import { useMutation } from '@redwoodjs/web'
-import { toast } from '@redwoodjs/web/toast'
-import { useEffect } from 'react'
-import { useAuth } from '@redwoodjs/auth'
-import { navigate, routes } from '@redwoodjs/router'
-
 import DevIdePage from 'src/pages/DevIdePage/DevIdePage'
-import useUser from 'src/helpers/hooks/useUser'
-import { CREATE_PROJECT_MUTATION } from 'src/components/ProjectCell/ProjectCell'
 
 const DraftProjectPage = ({ cadPackage }: { cadPackage: string }) => {
-  const { isAuthenticated } = useAuth()
-  const { user, loading } = useUser()
-  const [createProject] = useMutation(CREATE_PROJECT_MUTATION, {
-    onCompleted: ({ createProject }) => {
-      navigate(
-        routes.ide({
-          userName: createProject?.user?.userName,
-          projectTitle: createProject?.title,
-        })
-      )
-      toast.success('Project Created.')
-    },
-  })
-  useEffect(() => {
-    if (isAuthenticated && user) {
-      createProject({ variables: { input: { userId: user.id, cadPackage } } })
-    }
-  }, [isAuthenticated, user])
-  if (loading || user?.id) {
-    return <div>loading</div>
-  }
   return <DevIdePage cadPackage={cadPackage} />
 }