Move create project into plus button (#531)

The draft page used to automatically create a new project and route
the user to the new project if the user was signed in. Problem arose
if the user use the back button as they would end up creating more
project. resolved my moving this logic into the plus button itself

Resolves #511

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>