From 8171edb290f17dae42925b07390d277208504a58 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 25 Feb 2022 14:53:34 +0100
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E2=99=BF=EF=B8=8F=20Better=20au?=
 =?UTF-8?q?toSave=20handler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shared/TypebotHeader/TypebotHeader.tsx | 11 ++---------
 .../contexts/TypebotContext/TypebotContext.tsx        | 10 +++++++++-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx b/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
index 303f0e4e6..745684e1a 100644
--- a/apps/builder/components/shared/TypebotHeader/TypebotHeader.tsx
+++ b/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
diff --git a/apps/builder/contexts/TypebotContext/TypebotContext.tsx b/apps/builder/contexts/TypebotContext/TypebotContext.tsx
index a2fa1b701..ab7fd21bf 100644
--- a/apps/builder/contexts/TypebotContext/TypebotContext.tsx
+++ b/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)