Merge pull request #9270 from weseek/fix/edit-button-for-header

fix: Edit button appear for the side of header

apps/app/src/client/components/ReactMarkdownComponents/Header.tsx

@@ -67,7 +67,7 @@ export const Header = (props: HeaderProps): JSX.Element => {
   const { data: isReadOnlyUser } = useIsReadOnlyUser();
   const { data: isSharedUser } = useIsSharedUser();
   const { data: shareLinkId } = useShareLinkId();
-  const { data: currentPageYjsData } = useCurrentPageYjsData();
+  const { data: currentPageYjsData, isLoading: isLoadingCurrentPageYjsData } = useCurrentPageYjsData();
 
   const router = useRouter();
 
@@ -118,7 +118,7 @@ export const Header = (props: HeaderProps): JSX.Element => {
   // It will be possible to address this TODO ySyncAnnotation become available for import.
   // Ref: https://github.com/yjs/y-codemirror.next/pull/30
   const showEditButton = !isGuestUser && !isReadOnlyUser && !isSharedUser && shareLinkId == null
-                            && currentPageYjsData?.hasYdocsNewerThanLatestRevision === false;
+                            && (!isLoadingCurrentPageYjsData && !currentPageYjsData?.hasYdocsNewerThanLatestRevision);
 
   return (
     <>

apps/app/src/pages/[[...path]].page.tsx

@@ -282,7 +282,6 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
       const mutatePageData = async() => {
         const pageData = await mutateCurrentPage();
         mutateEditingMarkdown(pageData?.revision?.body);
-        mutateCurrentPageYjsDataFromApi();
       };
 
       // If skipSSR is true, use the API to retrieve page data.
@@ -294,6 +293,13 @@ const Page: NextPageWithLayout<Props> = (props: Props) => {
     mutateCurrentPageYjsDataFromApi, mutateEditingMarkdown, props.isNotFound, props.skipSSR,
   ]);
 
+  // Load current yjs data
+  useEffect(() => {
+    if (currentPageId != null && revisionId != null && !props.isNotFound) {
+      mutateCurrentPageYjsDataFromApi();
+    }
+  }, [currentPageId, mutateCurrentPageYjsDataFromApi, props.isNotFound, revisionId]);
+
   // sync pathname by Shallow Routing https://nextjs.org/docs/routing/shallow-routing
   useEffect(() => {
     const decodedURI = decodeURI(window.location.pathname);

apps/app/src/stores/yjs.ts

@@ -43,7 +43,7 @@ export const useSWRMUTxCurrentPageYjsData = (): SWRMutationResponse<CurrentPageY
 
   return useSWRMutation(
     key,
-    ([endpoint]) => apiv3Get<{ yjsData: CurrentPageYjsData }>(endpoint).then(result => result.data.yjsData),
+    endpoint => apiv3Get<{ yjsData: CurrentPageYjsData }>(endpoint).then(result => result.data.yjsData),
     { populateCache: true, revalidate: false },
   );
 };