From cc50c984e4fdcbfe49f4e01a0f232521dbe61220 Mon Sep 17 00:00:00 2001
From: Kurt Hutten <k.hutten@protonmail.ch>
Date: Mon, 27 Sep 2021 20:43:30 +1000
Subject: [PATCH] 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
---
 .../NavPlusButton/NavPlusButton.tsx           | 45 +++++++++++++++++--
 .../DraftProjectPage/DraftProjectPage.tsx     | 29 ------------
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/app/web/src/components/NavPlusButton/NavPlusButton.tsx b/app/web/src/components/NavPlusButton/NavPlusButton.tsx
index b5ea48f..7fb3fde 100644
--- a/app/web/src/components/NavPlusButton/NavPlusButton.tsx
+++ b/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>
diff --git a/app/web/src/pages/DraftProjectPage/DraftProjectPage.tsx b/app/web/src/pages/DraftProjectPage/DraftProjectPage.tsx
index f8137e7..791b5ba 100644
--- a/app/web/src/pages/DraftProjectPage/DraftProjectPage.tsx
+++ b/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} />
 }