feat(editor): ✨ Add auto save

apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx

@@ -26,7 +26,7 @@ export const TypebotHeader = () => {
   const handleNameSubmit = (name: string) => updateTypebot({ name })
 
   const handlePreviewClick = async () => {
-    await save()
+    save().then()
     setRightPanel(RightPanel.PREVIEW)
   }
 

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -30,6 +30,9 @@ import { choiceItemsAction, ChoiceItemsActions } from './actions/choiceItems'
 import { variablesAction, VariablesActions } from './actions/variables'
 import { edgesAction, EdgesActions } from './actions/edges'
 import { webhooksAction, WebhooksAction } from './actions/webhooks'
+import { useDebounce } from 'use-debounce'
+
+const autoSaveTimeout = 10000
 
 type UpdateTypebotPayload = Partial<{
   theme: Theme
@@ -85,6 +88,12 @@ export const TypebotContext = ({
     undefined
   )
 
+  const [debouncedLocalTypebot] = useDebounce(localTypebot, autoSaveTimeout)
+  useEffect(() => {
+    if (hasUnsavedChanges) saveTypebot()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedLocalTypebot])
+
   const [localPublishedTypebot, setLocalPublishedTypebot] =
     useState<PublicTypebot>()
   const [isSavingLoading, setIsSavingLoading] = useState(false)

apps/builder/pages/_app.tsx

@@ -9,14 +9,22 @@ import 'assets/styles/plate.css'
 import 'focus-visible/dist/focus-visible'
 import 'assets/styles/submissionsTable.css'
 import 'assets/styles/codeMirror.css'
+import { UserContext } from 'contexts/UserContext'
+import { TypebotContext } from 'contexts/TypebotContext'
+import { useRouter } from 'next/router'
 
 const App = ({ Component, pageProps }: AppProps) => {
   useRouterProgressBar()
+  const { query } = useRouter()
 
   return (
     <ChakraProvider theme={customTheme}>
       <SessionProvider>
-        <Component {...pageProps} />
+        <UserContext>
+          <TypebotContext typebotId={query.typebotId?.toString()}>
+            <Component {...pageProps} />
+          </TypebotContext>
+        </UserContext>
       </SessionProvider>
     </ChakraProvider>
   )

apps/builder/pages/account.tsx

@@ -1,18 +1,13 @@
 import { Stack } from '@chakra-ui/react'
 import { AccountHeader } from 'components/account/AccountHeader'
 import { Seo } from 'components/Seo'
-import { UserContext } from 'contexts/UserContext'
 import { AccountContent } from 'layouts/account/AccountContent'
 
-const AccountSubscriptionPage = () => {
-  return (
-    <UserContext>
-      <Seo title="My account" />{' '}
-      <Stack>
-        <AccountHeader />
-        <AccountContent />
-      </Stack>
-    </UserContext>
-  )
-}
+const AccountSubscriptionPage = () => (
+  <Stack>
+    <Seo title="My account" />
+    <AccountHeader />
+    <AccountContent />
+  </Stack>
+)
 export default AccountSubscriptionPage

apps/builder/pages/register.tsx

@@ -3,12 +3,14 @@ import { SignInForm } from 'components/auth/SignInForm'
 import { Heading, VStack } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import React from 'react'
+import { Seo } from 'components/Seo'
 
 const RegisterPage = () => {
   const { query } = useRouter()
 
   return (
     <VStack spacing={4} h="100vh" justifyContent="center">
+      <Seo title="Register" />
       <Heading>Create an account</Heading>
       <AuthSwitcher type="register" />
       <SignInForm defaultEmail={query.g?.toString()} />

apps/builder/pages/signin.tsx

@@ -2,10 +2,12 @@ import { AuthSwitcher } from 'components/auth/AuthSwitcher'
 import { SignInForm } from 'components/auth/SignInForm'
 import { Heading, VStack } from '@chakra-ui/react'
 import React from 'react'
+import { Seo } from 'components/Seo'
 
 const SignInPage = () => {
   return (
     <VStack spacing={4} h="100vh" justifyContent="center">
+      <Seo title="Sign in" />
       <Heading>Sign in</Heading>
       <AuthSwitcher type="signin" />
       <SignInForm />

apps/builder/pages/typebots/[typebotId]/edit.tsx

@@ -0,0 +1,23 @@
+import { Flex } from '@chakra-ui/layout'
+import { Board } from 'components/board/Board'
+import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import { EditorContext } from 'contexts/EditorContext'
+import { KBarProvider } from 'kbar'
+import React from 'react'
+import { actions } from 'libs/kbar'
+import { KBar } from 'components/shared/KBar'
+
+const TypebotEditPage = () => (
+  <EditorContext>
+    <Seo title="Editor" />
+    <KBarProvider actions={actions}>
+      <KBar />
+      <Flex overflow="hidden" h="100vh" flexDir="column">
+        <TypebotHeader />
+        <Board />
+      </Flex>
+    </KBarProvider>
+  </EditorContext>
+)
+export default TypebotEditPage

apps/builder/pages/typebots/[typebotId]/results.tsx

@@ -0,0 +1,15 @@
+import { Flex } from '@chakra-ui/layout'
+import { ResultsContent } from 'layouts/results/ResultsContent'
+import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import React from 'react'
+
+const ResultsPage = () => (
+  <Flex overflow="hidden" h="100vh" flexDir="column">
+    <Seo title="Share" />
+    <TypebotHeader />
+    <ResultsContent />
+  </Flex>
+)
+
+export default ResultsPage

apps/builder/pages/typebots/[typebotId]/results/analytics.tsx

@@ -0,0 +1,15 @@
+import { Flex } from '@chakra-ui/layout'
+import { ResultsContent } from 'layouts/results/ResultsContent'
+import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import React from 'react'
+
+const AnalyticsPage = () => (
+  <Flex overflow="hidden" h="100vh" flexDir="column">
+    <Seo title="Analytics" />
+    <TypebotHeader />
+    <ResultsContent />
+  </Flex>
+)
+
+export default AnalyticsPage

apps/builder/pages/typebots/[typebotId]/settings.tsx

@@ -0,0 +1,15 @@
+import { Flex } from '@chakra-ui/layout'
+import { Seo } from 'components/Seo'
+import { SettingsContent } from 'components/settings/SettingsContent'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import React from 'react'
+
+const SettingsPage = () => (
+  <Flex overflow="hidden" h="100vh" flexDir="column">
+    <Seo title="Settings" />
+    <TypebotHeader />
+    <SettingsContent />
+  </Flex>
+)
+
+export default SettingsPage

apps/builder/pages/typebots/[typebotId]/share.tsx

@@ -0,0 +1,15 @@
+import { Flex } from '@chakra-ui/layout'
+import { Seo } from 'components/Seo'
+import { ShareContent } from 'components/share/ShareContent'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import React from 'react'
+
+const SharePage = () => (
+  <Flex overflow="hidden" h="100vh" flexDir="column">
+    <Seo title="Share" />
+    <TypebotHeader />
+    <ShareContent />
+  </Flex>
+)
+
+export default SharePage

apps/builder/pages/typebots/[typebotId]/theme.tsx

@@ -0,0 +1,15 @@
+import { Flex } from '@chakra-ui/layout'
+import { Seo } from 'components/Seo'
+import { TypebotHeader } from 'components/shared/TypebotHeader'
+import { ThemeContent } from 'components/theme/ThemeContent'
+import React from 'react'
+
+const ThemePage = () => (
+  <Flex overflow="hidden" h="100vh" flexDir="column">
+    <Seo title="Theme" />
+    <TypebotHeader />
+    <ThemeContent />
+  </Flex>
+)
+
+export default ThemePage