From 9c05788834a8f8cac9c2c24b4f85dccfaf804537 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Fri, 4 Oct 2024 12:51:17 +0800
Subject: [PATCH] fix: share link issues (#6465)

---
 .../_shared/modal/ChangeAccount.tsx           | 46 +++++++++++++++++++
 .../components/_shared/view-icon/ViewIcon.tsx |  2 +-
 .../src/components/app/app.hooks.tsx          |  9 +++-
 .../app/landing-pages/ApproveRequestPage.tsx  | 40 ++++------------
 .../app/landing-pages/RequestAccess.tsx       |  6 ++-
 .../blocks/toggle-list/ToggleIcon.tsx         |  2 +-
 .../src/pages/AcceptInvitationPage.tsx        | 26 +----------
 7 files changed, 71 insertions(+), 60 deletions(-)
 create mode 100644 frontend/appflowy_web_app/src/components/_shared/modal/ChangeAccount.tsx

diff --git a/frontend/appflowy_web_app/src/components/_shared/modal/ChangeAccount.tsx b/frontend/appflowy_web_app/src/components/_shared/modal/ChangeAccount.tsx
new file mode 100644
index 0000000000..0584b116f1
--- /dev/null
+++ b/frontend/appflowy_web_app/src/components/_shared/modal/ChangeAccount.tsx
@@ -0,0 +1,46 @@
+import NormalModal from '@/components/_shared/modal/NormalModal';
+import { AFConfigContext, useCurrentUser } from '@/components/main/app.hooks';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { ReactComponent as ErrorIcon } from '@/assets/error.svg';
+
+function ChangeAccount ({
+  setModalOpened,
+  modalOpened,
+}: {
+  setModalOpened: (opened: boolean) => void;
+  modalOpened: boolean;
+
+}) {
+  const currentUser = useCurrentUser();
+  const navigate = useNavigate();
+  const openLoginModal = useContext(AFConfigContext)?.openLoginModal;
+  const { t } = useTranslation();
+
+  return (
+    <NormalModal
+      onCancel={() => {
+        setModalOpened(false);
+        navigate('/');
+      }}
+      closable={false}
+      cancelText={t('invitation.errorModal.close')}
+      onOk={openLoginModal}
+      okText={t('invitation.errorModal.changeAccount')}
+      title={<div className={'text-left font-bold flex gap-2 items-center'}>
+        <ErrorIcon className={'w-5 h-5 text-function-error'} />
+        {t('invitation.errorModal.title')}
+      </div>}
+      open={modalOpened}
+    >
+      <div className={'text-text-title flex flex-col text-sm gap-1 whitespace-pre-wrap break-words'}>
+        {t('invitation.errorModal.description', {
+          email: currentUser?.email,
+        })}
+      </div>
+    </NormalModal>
+  );
+}
+
+export default ChangeAccount;
\ No newline at end of file
diff --git a/frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx b/frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx
index 0ca4e7435f..a6f5b22802 100644
--- a/frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx
+++ b/frontend/appflowy_web_app/src/components/_shared/view-icon/ViewIcon.tsx
@@ -13,7 +13,7 @@ export function ViewIcon ({ layout, size }: { layout: ViewLayout; size: number |
     }
 
     if (size === 'medium') {
-      return 'h-5 w-5';
+      return 'h-4.5 w-4.5';
     }
 
     if (size === 'large') {
diff --git a/frontend/appflowy_web_app/src/components/app/app.hooks.tsx b/frontend/appflowy_web_app/src/components/app/app.hooks.tsx
index 6aad3bf254..55e7487612 100644
--- a/frontend/appflowy_web_app/src/components/app/app.hooks.tsx
+++ b/frontend/appflowy_web_app/src/components/app/app.hooks.tsx
@@ -235,12 +235,17 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
       try {
 
         await service.openWorkspace(workspaceId);
-        const path = window.location.pathname.split('/')[2];
+        const wId = window.location.pathname.split('/')[2];
+        const pageId = window.location.pathname.split('/')[3];
 
-        if (path && !uuidValidate(path)) {
+        // skip /app/trash and /app/*other-pages
+        if (wId && !uuidValidate(wId)) {
           return;
         }
 
+        // skip /app/:workspaceId/:pageId
+        if (pageId && uuidValidate(pageId) && wId && uuidValidate(wId) && wId === workspaceId) return;
+
         const lastViewId = localStorage.getItem('last_view_id');
 
         if (lastViewId && findView(res, lastViewId)) {
diff --git a/frontend/appflowy_web_app/src/components/app/landing-pages/ApproveRequestPage.tsx b/frontend/appflowy_web_app/src/components/app/landing-pages/ApproveRequestPage.tsx
index ecfb1a4cc3..5d4f3833b4 100644
--- a/frontend/appflowy_web_app/src/components/app/landing-pages/ApproveRequestPage.tsx
+++ b/frontend/appflowy_web_app/src/components/app/landing-pages/ApproveRequestPage.tsx
@@ -7,6 +7,7 @@ import {
 import { ReactComponent as AppflowyLogo } from '@/assets/appflowy.svg';
 import { ReactComponent as WarningIcon } from '@/assets/warning.svg';
 import { NormalModal } from '@/components/_shared/modal';
+import ChangeAccount from '@/components/_shared/modal/ChangeAccount';
 import { notify } from '@/components/_shared/notify';
 import { getAvatar } from '@/components/_shared/view-icon/utils';
 import { AFConfigContext, useService } from '@/components/main/app.hooks';
@@ -23,6 +24,8 @@ const REPEAT_REQUEST_CODE = 1043;
 
 function ApproveRequestPage () {
   const [searchParams] = useSearchParams();
+  const isAuthenticated = useContext(AFConfigContext)?.isAuthenticated;
+
   const [requestInfo, setRequestInfo] = React.useState<GetRequestAccessInfoResponse | null>(null);
   const [currentPlans, setCurrentPlans] = React.useState<SubscriptionPlan[]>([]);
   const isPro = useMemo(() => currentPlans.includes(SubscriptionPlan.Pro), [currentPlans]);
@@ -33,9 +36,13 @@ function ApproveRequestPage () {
   const [upgradeModalOpen, setUpgradeModalOpen] = React.useState(false);
   const [errorModalOpen, setErrorModalOpen] = React.useState(false);
   const [alreadyProModalOpen, setAlreadyProModalOpen] = React.useState(false);
-  const openLoginModal = useContext(AFConfigContext)?.openLoginModal;
   const [clicked, setClicked] = React.useState(false);
 
+  useEffect(() => {
+    if (!isAuthenticated) {
+      navigate('/login?redirectTo=' + encodeURIComponent(window.location.href));
+    }
+  }, [isAuthenticated, navigate]);
   const loadRequestInfo = useCallback(async () => {
     if (!service || !requestId) return;
     try {
@@ -248,36 +255,7 @@ function ApproveRequestPage () {
         </p>
 
       </NormalModal>
-      <NormalModal
-        keepMounted={false}
-        onOk={() => setErrorModalOpen(false)}
-        title={
-          <div className={'text-left font-semibold'}>{t('approveAccess.getRequestInfoError')}</div>
-        } open={errorModalOpen} onClose={() => setErrorModalOpen(false)}
-      >
-        <div className={'flex flex-col'}>
-           <span>
-             <Trans
-               i18nKey="requestAccess.tip"
-               components={{
-                 link: <span
-                   className={'underline text-fill-default'}
-                 >{requestInfo?.requester.name}</span>,
-               }}
-             />
-           </span>
-          <span>
-            <Trans
-              i18nKey="requestAccess.mightBe"
-              components={{
-                login: <span
-                  onClick={() => openLoginModal?.()} className={'underline text-fill-default cursor-pointer'}
-                >{t('signIn.logIn')}</span>,
-              }}
-            />
-           </span>
-        </div>
-      </NormalModal>
+      <ChangeAccount setModalOpened={setErrorModalOpen} modalOpened={errorModalOpen} />
       <NormalModal
         onOk={() => setAlreadyProModalOpen(false)}
         keepMounted={false}
diff --git a/frontend/appflowy_web_app/src/components/app/landing-pages/RequestAccess.tsx b/frontend/appflowy_web_app/src/components/app/landing-pages/RequestAccess.tsx
index a659304a28..c5a1070b18 100644
--- a/frontend/appflowy_web_app/src/components/app/landing-pages/RequestAccess.tsx
+++ b/frontend/appflowy_web_app/src/components/app/landing-pages/RequestAccess.tsx
@@ -97,6 +97,9 @@ function RequestAccess () {
         </div>
       </div>
       <NormalModal
+        cancelButtonProps={{
+          className: 'hidden',
+        }}
         onCancel={() => {
           setModalOpen(false);
         }} onOk={() => {
@@ -106,7 +109,8 @@ function RequestAccess () {
           <TaskAltRounded className={'text-function-success'} />
           {t('requestAccess.successful')}
         </div>
-      } open={modalOpen} onClose={() => setModalOpen(false)}
+      } open={modalOpen}
+        onClose={() => setModalOpen(false)}
       >
         {t('requestAccess.successfulMessage')}
       </NormalModal>
diff --git a/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle-list/ToggleIcon.tsx b/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle-list/ToggleIcon.tsx
index 80c2aa6348..808319e913 100644
--- a/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle-list/ToggleIcon.tsx
+++ b/frontend/appflowy_web_app/src/components/editor/components/blocks/toggle-list/ToggleIcon.tsx
@@ -37,7 +37,7 @@ function ToggleIcon ({ block, className }: { block: ToggleListNode; className: s
       onMouseDown={(e) => {
         e.preventDefault();
       }}
-      className={`${className} ${readOnly ? '' : 'cursor-pointer'} pr-1 text-xl hover:text-fill-default`}
+      className={`${className} ${readOnly ? '' : 'cursor-pointer hover:text-fill-default'} pr-1 text-xl`}
     >
       {collapsed ? <ExpandSvg className={'-rotate-90 transform'} /> : <ExpandSvg />}
     </span>
diff --git a/frontend/appflowy_web_app/src/pages/AcceptInvitationPage.tsx b/frontend/appflowy_web_app/src/pages/AcceptInvitationPage.tsx
index 395b72b050..60896e657b 100644
--- a/frontend/appflowy_web_app/src/pages/AcceptInvitationPage.tsx
+++ b/frontend/appflowy_web_app/src/pages/AcceptInvitationPage.tsx
@@ -1,7 +1,6 @@
 import { Invitation } from '@/application/types';
 import { ReactComponent as AppflowyLogo } from '@/assets/appflowy.svg';
-import { ReactComponent as ErrorIcon } from '@/assets/error.svg';
-import { NormalModal } from '@/components/_shared/modal';
+import ChangeAccount from '@/components/_shared/modal/ChangeAccount';
 import { notify } from '@/components/_shared/notify';
 import { getAvatar } from '@/components/_shared/view-icon/utils';
 import { AFConfigContext, useCurrentUser, useService } from '@/components/main/app.hooks';
@@ -17,7 +16,6 @@ function AcceptInvitationPage () {
   const isAuthenticated = useContext(AFConfigContext)?.isAuthenticated;
   const currentUser = useCurrentUser();
   const navigate = useNavigate();
-  const openLoginModal = useContext(AFConfigContext)?.openLoginModal;
   const [searchParams] = useSearchParams();
   const invitationId = searchParams.get('invited_id');
   const service = useService();
@@ -156,27 +154,7 @@ function AcceptInvitationPage () {
           {t('invitation.joinWorkspace')}
         </Button>
       </div>
-      <NormalModal
-        onCancel={() => {
-          setModalOpened(false);
-          navigate('/');
-        }}
-        closable={false}
-        cancelText={t('invitation.errorModal.close')}
-        onOk={openLoginModal}
-        okText={t('invitation.errorModal.changeAccount')}
-        title={<div className={'text-left font-bold flex gap-2 items-center'}>
-          <ErrorIcon className={'w-5 h-5 text-function-error'} />
-          {t('invitation.errorModal.title')}
-        </div>}
-        open={modalOpened}
-      >
-        <div className={'text-text-title flex flex-col text-sm gap-1 whitespace-pre-wrap break-words'}>
-          {t('invitation.errorModal.description', {
-            email: currentUser?.email,
-          })}
-        </div>
-      </NormalModal>
+      <ChangeAccount setModalOpened={setModalOpened} modalOpened={modalOpened} />
     </div>
   );
 }