🧯 Fix template page

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])

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>
+  )
+}

apps/builder/pages/typebots/create.tsx

@@ -1,46 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react'
-import { Button, Stack, useToast } from '@chakra-ui/react'
+import { Stack } from '@chakra-ui/react'
-import { useRouter } from 'next/router'
 import { Seo } from 'components/Seo'
 import { DashboardHeader } from 'components/dashboard/DashboardHeader'
-import { createTypebot } from 'services/typebots'
+import { UserContext } from 'contexts/UserContext'
-import { UserContext, useUser } 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
+        <TemplatesContent />
-          ml={4}
-          onClick={() => handleCreateSubmit()}
-          isLoading={isLoading}
-        >
-          Start from scratch
-        </Button>
       </Stack>
     </UserContext>
   )