From 242faee2f5e2aa49ce04af1d0f960c409824ebf2 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Sun, 25 Aug 2024 22:06:34 +0800
Subject: [PATCH] fix: document issues (#6069)

---
 .../src/components/as-template/AsTemplate.tsx | 26 +++++++++----------
 .../database/components/tabs/DatabaseTabs.tsx | 15 ++++++-----
 .../src/components/publish/CollabView.tsx     | 19 ++++++++++++--
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/frontend/appflowy_web_app/src/components/as-template/AsTemplate.tsx b/frontend/appflowy_web_app/src/components/as-template/AsTemplate.tsx
index 5f38141aa3..3609f8b4b4 100644
--- a/frontend/appflowy_web_app/src/components/as-template/AsTemplate.tsx
+++ b/frontend/appflowy_web_app/src/components/as-template/AsTemplate.tsx
@@ -13,7 +13,6 @@ import { useTranslation } from 'react-i18next';
 import { ReactComponent as CloseIcon } from '@/assets/close.svg';
 import { ReactComponent as DeleteIcon } from '@/assets/trash.svg';
 import './template.scss';
-import { useNavigate } from 'react-router-dom';
 
 function AsTemplate ({
   viewName,
@@ -37,7 +36,9 @@ function AsTemplate ({
     loading,
   } = useLoadTemplate(viewId);
 
-  const navigate = useNavigate();
+  const handleBack = useCallback(() => {
+    window.location.href = `${decodeURIComponent(viewUrl)}`;
+  }, [viewUrl]);
   const handleSubmit = useCallback(async (data: AsTemplateFormValue) => {
     if (!service || !selectedCreatorId || selectedCategoryIds.length === 0) return;
     const formData: UploadTemplatePayload = {
@@ -50,8 +51,6 @@ function AsTemplate ({
       view_url: viewUrl,
     };
 
-    console.log('formData', formData);
-
     try {
       if (template) {
         await service?.updateTemplate(template.view_id, formData);
@@ -71,14 +70,14 @@ function AsTemplate ({
           window.open(`${url}/template-center/${selectedCategoryIds[0]}/${viewId}`, '_blank');
         },
       });
-      navigate(-1);
+      handleBack();
     } catch (error) {
       // eslint-disable-next-line
       // @ts-ignore
       notify.error(error.toString());
     }
 
-  }, [service, selectedCreatorId, selectedCategoryIds, viewId, isNewTemplate, isFeatured, viewUrl, template, t, navigate, loadTemplate]);
+  }, [service, selectedCreatorId, selectedCategoryIds, viewId, isNewTemplate, isFeatured, viewUrl, template, t, handleBack, loadTemplate]);
 
   const submitRef = React.useRef<HTMLInputElement>(null);
 
@@ -114,9 +113,7 @@ function AsTemplate ({
     <div className={'flex flex-col gap-4 w-full h-full overflow-hidden'}>
       <div className={'flex items-center justify-between'}>
         <Button
-          onClick={() => {
-            navigate(-1);
-          }}
+          onClick={handleBack}
           variant={'outlined'}
           color={'inherit'}
           endIcon={<CloseIcon className={'w-4 h-4'} />}
@@ -179,10 +176,13 @@ function AsTemplate ({
           </div>
         </div>
       </div>
-      {deleteModalOpen && <DeleteTemplate id={viewId} onDeleted={() => {
-        navigate(-1);
-      }} open={deleteModalOpen} onClose={() => setDeleteModalOpen(false)}
-      />}
+      {deleteModalOpen &&
+        <DeleteTemplate
+          id={viewId}
+          onDeleted={handleBack}
+          open={deleteModalOpen}
+          onClose={() => setDeleteModalOpen(false)}
+        />}
     </div>
 
   );
diff --git a/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx b/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx
index 3b5b070110..d18a9c334f 100644
--- a/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx
+++ b/frontend/appflowy_web_app/src/components/database/components/tabs/DatabaseTabs.tsx
@@ -76,12 +76,17 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
 
     const showActions = !hideConditions && layout !== DatabaseViewLayout.Calendar;
 
-    const getSelectedTabWidth = useCallback(() => {
+    const getSelectedTabIndicatorProps = useCallback(() => {
       const selectedTab = document.getElementById(`view-tab-${selectedViewId}`);
 
       if (!selectedTab) return;
 
-      return selectedTab.clientWidth;
+      return {
+        style: {
+          width: selectedTab.clientWidth,
+          left: selectedTab.offsetLeft,
+        },
+      };
     }, [selectedViewId]);
 
     if (viewIds.length === 0) return null;
@@ -99,11 +104,7 @@ export const DatabaseTabs = forwardRef<HTMLDivElement, DatabaseTabBarProps>(
             allowScrollButtonsMobile
             value={selectedViewId}
             onChange={handleChange}
-            TabIndicatorProps={{
-              style: {
-                width: getSelectedTabWidth(),
-              },
-            }}
+            TabIndicatorProps={getSelectedTabIndicatorProps()}
           >
             {viewIds.map((viewId) => {
               const view = views?.get(viewId) as YDatabaseView | null;
diff --git a/frontend/appflowy_web_app/src/components/publish/CollabView.tsx b/frontend/appflowy_web_app/src/components/publish/CollabView.tsx
index a0a0697596..573682c361 100644
--- a/frontend/appflowy_web_app/src/components/publish/CollabView.tsx
+++ b/frontend/appflowy_web_app/src/components/publish/CollabView.tsx
@@ -41,13 +41,28 @@ function CollabView ({ doc }: CollabViewProps) {
   const loadView = usePublishContext()?.loadView;
   const isTemplateThumb = usePublishContext()?.isTemplateThumb;
 
+  const className = useMemo(() => {
+    const classList = ['relative w-full flex-1'];
+
+    if (isTemplateThumb && layout !== ViewLayout.Document) {
+      classList.push('flex justify-center h-full');
+    }
+
+    if (layoutClassName) {
+      classList.push(layoutClassName);
+    }
+
+    return classList.join(' ');
+  }, [isTemplateThumb, layout, layoutClassName]);
+
   if (!doc || !View) {
     return <ComponentLoading />;
   }
 
   return (
-    <div style={style}
-         className={`relative w-full ${isTemplateThumb ? 'flex justify-center h-full' : 'flex-1'}  ${layoutClassName}`}
+    <div
+      style={style}
+      className={className}
     >
       <View
         doc={doc}