fix(editor): ♿️ Better autoSave handler

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

@@ -33,14 +33,6 @@ export const TypebotHeader = () => {
   } = useTypebot()
   const { setRightPanel } = useEditor()
 
-  const handleBackClick = async () => {
-    await save()
-    router.push({
-      pathname: `/typebots`,
-      query: { ...router.query, typebotId: [] },
-    })
-  }
-
   const handleNameSubmit = (name: string) => updateOnBothTypebots({ name })
 
   const handlePreviewClick = async () => {
@@ -113,9 +105,10 @@ export const TypebotHeader = () => {
       >
         <HStack alignItems="center">
           <IconButton
+            as={NextChakraLink}
             aria-label="Back"
             icon={<ChevronLeftIcon fontSize={30} />}
-            onClick={handleBackClick}
+            href="/typebots"
           />
           {typebot?.name && (
             <EditableTypebotName

apps/builder/contexts/TypebotContext/TypebotContext.tsx

@@ -1,6 +1,6 @@
 import { useToast } from '@chakra-ui/react'
 import { PublicTypebot, Settings, Theme, Typebot } from 'models'
-import { useRouter } from 'next/router'
+import { Router, useRouter } from 'next/router'
 import {
   createContext,
   ReactNode,
@@ -157,6 +157,14 @@ export const TypebotContext = ({
     debounceTimeout: autoSaveTimeout,
   })
 
+  useEffect(() => {
+    Router.events.on('routeChangeStart', saveTypebot)
+    return () => {
+      Router.events.off('routeChangeStart', saveTypebot)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   const [isSavingLoading, setIsSavingLoading] = useState(false)
   const [isPublishing, setIsPublishing] = useState(false)