From 27453f39fe637c5f4decd473b31671a81f4fed9b Mon Sep 17 00:00:00 2001
From: QiShaoXuan <qishaoxuan777@gmail.com>
Date: Tue, 13 Dec 2022 15:37:42 +0800
Subject: [PATCH] fix: can not sync title in head when new page

---
 .../app/src/components/header/page-header.tsx | 67 ++++++++++---------
 1 file changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx
index 73c28543d9..ef01cff2c7 100644
--- a/packages/app/src/components/header/page-header.tsx
+++ b/packages/app/src/components/header/page-header.tsx
@@ -15,51 +15,56 @@ import { useModal } from '@/providers/global-modal-provider';
 import Header from './header';
 
 export const PageHeader = () => {
-  const [title, setTitle] = useState('Untitled');
+  const [title, setTitle] = useState('');
   const [isHover, setIsHover] = useState(false);
 
   const { editor } = useEditor();
   const { triggerQuickSearchModal } = useModal();
   useEffect(() => {
     if (editor?.model) {
-      setTitle(editor.model.title ?? '');
+      setTitle(editor.model.title || 'Untitled');
       editor.model.propsUpdated.on(() => {
         setTitle(editor.model.title);
       });
     }
+    return () => {
+      editor?.model?.propsUpdated.dispose();
+    };
   }, [editor]);
 
   return (
     <Header>
-      <StyledTitle
-        onMouseEnter={() => {
-          setIsHover(true);
-        }}
-        onMouseLeave={() => {
-          setIsHover(false);
-        }}
-      >
-        <StyledTitleWrapper>
-          <StyledSwitchWrapper>
-            <EditorModeSwitch
-              isHover={isHover}
-              style={{
-                marginRight: '12px',
-              }}
-            />
-          </StyledSwitchWrapper>
-          <Content ellipsis={true}>{title}</Content>
-          <StyledSearchArrowWrapper>
-            <IconButton
-              onClick={() => {
-                triggerQuickSearchModal();
-              }}
-            >
-              <MiddleIconArrowDownSmallIcon />
-            </IconButton>
-          </StyledSearchArrowWrapper>
-        </StyledTitleWrapper>
-      </StyledTitle>
+      {title && (
+        <StyledTitle
+          onMouseEnter={() => {
+            setIsHover(true);
+          }}
+          onMouseLeave={() => {
+            setIsHover(false);
+          }}
+        >
+          <StyledTitleWrapper>
+            <StyledSwitchWrapper>
+              <EditorModeSwitch
+                isHover={isHover}
+                style={{
+                  marginRight: '12px',
+                }}
+              />
+            </StyledSwitchWrapper>
+            <Content ellipsis={true}>{title}</Content>
+            <StyledSearchArrowWrapper>
+              <IconButton
+                onClick={() => {
+                  triggerQuickSearchModal();
+                }}
+              >
+                <MiddleIconArrowDownSmallIcon />
+              </IconButton>
+            </StyledSearchArrowWrapper>
+          </StyledTitleWrapper>
+        </StyledTitle>
+      )}
     </Header>
   );
 };