From 447172d0cb436fe5fa69c1d835855989000a4352 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Wed, 29 Dec 2021 06:52:48 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AF=20Fix=20template=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/builder/contexts/UserContext.tsx         |  1 -
 .../layouts/dashboard/TemplatesContent.tsx    | 35 +++++++++++++++++
 apps/builder/pages/typebots/create.tsx        | 39 +++----------------
 3 files changed, 40 insertions(+), 35 deletions(-)
 create mode 100644 apps/builder/layouts/dashboard/TemplatesContent.tsx

diff --git a/apps/builder/contexts/UserContext.tsx b/apps/builder/contexts/UserContext.tsx
index 53d70b5ab..5b1f749de 100644
--- a/apps/builder/contexts/UserContext.tsx
+++ b/apps/builder/contexts/UserContext.tsx
@@ -49,7 +49,6 @@ export const UserContext = ({ children }: { children: ReactNode }) => {
 
   useEffect(() => {
     if (isDefined(user) || !isDefined(session)) return
-
     setUser(session.user as User)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [session])
diff --git a/apps/builder/layouts/dashboard/TemplatesContent.tsx b/apps/builder/layouts/dashboard/TemplatesContent.tsx
new file mode 100644
index 000000000..38e09bb00
--- /dev/null
+++ b/apps/builder/layouts/dashboard/TemplatesContent.tsx
@@ -0,0 +1,35 @@
+import { Button, useToast } from '@chakra-ui/react'
+import { useUser } from 'contexts/UserContext'
+import { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import { createTypebot } from 'services/typebots'
+
+export const TemplatesContent = () => {
+  const { user } = useUser()
+  const router = useRouter()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  const toast = useToast({
+    position: 'top-right',
+    status: 'error',
+    title: 'An error occured',
+  })
+
+  const handleCreateSubmit = async () => {
+    if (!user) return
+    setIsLoading(true)
+    const { error, data } = await createTypebot({
+      folderId: router.query.folderId?.toString() ?? null,
+    })
+    if (error) toast({ description: error.message })
+    if (data) router.push(`/typebots/${data.id}/edit`)
+    setIsLoading(false)
+  }
+
+  return (
+    <Button ml={4} onClick={handleCreateSubmit} isLoading={isLoading}>
+      Start from scratch
+    </Button>
+  )
+}
diff --git a/apps/builder/pages/typebots/create.tsx b/apps/builder/pages/typebots/create.tsx
index 566850998..5d5bdad54 100644
--- a/apps/builder/pages/typebots/create.tsx
+++ b/apps/builder/pages/typebots/create.tsx
@@ -1,46 +1,17 @@
-import React, { useState } from 'react'
-import { Button, Stack, useToast } from '@chakra-ui/react'
-import { useRouter } from 'next/router'
+import React from 'react'
+import { Stack } from '@chakra-ui/react'
 import { Seo } from 'components/Seo'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
-import { createTypebot } from 'services/typebots'
-import { UserContext, useUser } from 'contexts/UserContext'
+import { UserContext } from 'contexts/UserContext'
+import { TemplatesContent } from 'layouts/dashboard/TemplatesContent'
 
 const TemplatesPage = () => {
-  const { user } = useUser()
-  const router = useRouter()
-
-  const [isLoading, setIsLoading] = useState(false)
-
-  const toast = useToast({
-    position: 'top-right',
-    status: 'error',
-    title: 'An error occured',
-  })
-
-  const handleCreateSubmit = async () => {
-    if (!user) return
-    setIsLoading(true)
-    const { error, data } = await createTypebot({
-      folderId: router.query.folderId?.toString() ?? null,
-    })
-    if (error) toast({ description: error.message })
-    if (data) router.push(`/typebots/${data.id}/edit`)
-    setIsLoading(false)
-  }
-
   return (
     <UserContext>
       <Seo title="Templates" />
       <Stack>
         <DashboardHeader />
-        <Button
-          ml={4}
-          onClick={() => handleCreateSubmit()}
-          isLoading={isLoading}
-        >
-          Start from scratch
-        </Button>
+        <TemplatesContent />
       </Stack>
     </UserContext>
   )