From 2551785451973e13e1cde64b754f4efde303a752 Mon Sep 17 00:00:00 2001
From: Himself65 <himself65@outlook.com>
Date: Thu, 23 Mar 2023 00:12:20 -0500
Subject: [PATCH] fix: patch refresh token logic (#1665)

---
 .../components/pure/message-center/index.tsx  | 37 ++++++++++++++++---
 apps/web/src/hooks/use-on-google-logout.ts    | 23 ++++++++++++
 apps/web/src/providers/ModalProvider.tsx      | 19 ++--------
 3 files changed, 58 insertions(+), 21 deletions(-)
 create mode 100644 apps/web/src/hooks/use-on-google-logout.ts

diff --git a/apps/web/src/components/pure/message-center/index.tsx b/apps/web/src/components/pure/message-center/index.tsx
index 56cd1da60d..422a88f2eb 100644
--- a/apps/web/src/components/pure/message-center/index.tsx
+++ b/apps/web/src/components/pure/message-center/index.tsx
@@ -1,8 +1,11 @@
 import { toast } from '@affine/component';
-import type { MessageCode } from '@affine/datacenter';
+import { MessageCode } from '@affine/datacenter';
 import { messages } from '@affine/datacenter';
 import type React from 'react';
-import { useEffect } from 'react';
+import { memo, useEffect, useState } from 'react';
+
+import { useOnGoogleLogout } from '../../../hooks/use-on-google-logout';
+import { apis } from '../../../shared/apis';
 
 declare global {
   interface DocumentEventMap {
@@ -12,20 +15,42 @@ declare global {
   }
 }
 
-export const MessageCenter: React.FC = () => {
+export const MessageCenter: React.FC = memo(function MessageCenter() {
+  const [popup, setPopup] = useState(false);
+  const onLogout = useOnGoogleLogout();
   useEffect(() => {
     const listener = (
       event: CustomEvent<{
         code: MessageCode;
       }>
     ) => {
-      toast(messages[event.detail.code].message);
+      // fixme: need refactor
+      //  - login and refresh refresh logic should be refactored
+      //  - error message should be refactored
+      if (
+        !popup &&
+        (event.detail.code === MessageCode.refreshTokenError ||
+          event.detail.code === MessageCode.loginError)
+      ) {
+        setPopup(true);
+        apis
+          .signInWithGoogle()
+          .then(() => {
+            setPopup(false);
+          })
+          .catch(() => {
+            setPopup(false);
+            onLogout();
+          });
+      } else {
+        toast(messages[event.detail.code].message);
+      }
     };
 
     document.addEventListener('affine-error', listener);
     return () => {
       document.removeEventListener('affine-error', listener);
     };
-  }, []);
+  }, [onLogout, popup]);
   return null;
-};
+});
diff --git a/apps/web/src/hooks/use-on-google-logout.ts b/apps/web/src/hooks/use-on-google-logout.ts
new file mode 100644
index 0000000000..cc2110c5c2
--- /dev/null
+++ b/apps/web/src/hooks/use-on-google-logout.ts
@@ -0,0 +1,23 @@
+import { useSetAtom } from 'jotai';
+import { useRouter } from 'next/router';
+import { useCallback } from 'react';
+
+import { jotaiWorkspacesAtom } from '../atoms';
+import { WorkspacePlugins } from '../plugins';
+import { RemWorkspaceFlavour } from '../shared';
+import { apis } from '../shared/apis';
+
+export function useOnGoogleLogout() {
+  const set = useSetAtom(jotaiWorkspacesAtom);
+  const router = useRouter();
+  return useCallback(() => {
+    apis.auth.clear();
+    set(workspaces =>
+      workspaces.filter(
+        workspace => workspace.flavour !== RemWorkspaceFlavour.AFFINE
+      )
+    );
+    WorkspacePlugins[RemWorkspaceFlavour.AFFINE].cleanup?.();
+    router.reload();
+  }, [router, set]);
+}
diff --git a/apps/web/src/providers/ModalProvider.tsx b/apps/web/src/providers/ModalProvider.tsx
index 0443d1be77..7e61e4de69 100644
--- a/apps/web/src/providers/ModalProvider.tsx
+++ b/apps/web/src/providers/ModalProvider.tsx
@@ -1,4 +1,4 @@
-import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
 import type React from 'react';
@@ -6,16 +6,15 @@ import { useCallback } from 'react';
 
 import {
   currentWorkspaceIdAtom,
-  jotaiWorkspacesAtom,
   openCreateWorkspaceModalAtom,
   openWorkspacesModalAtom,
 } from '../atoms';
 import { useCurrentUser } from '../hooks/current/use-current-user';
 import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
+import { useOnGoogleLogout } from '../hooks/use-on-google-logout';
 import { useRouterHelper } from '../hooks/use-router-helper';
 import { useWorkspaces, useWorkspacesHelper } from '../hooks/use-workspaces';
-import { WorkspacePlugins } from '../plugins';
-import { RemWorkspaceFlavour, WorkspaceSubPath } from '../shared';
+import { WorkspaceSubPath } from '../shared';
 import { apis } from '../shared/apis';
 
 const WorkspaceListModal = dynamic(
@@ -43,7 +42,6 @@ export function Modals() {
   const currentWorkspaceId = useAtomValue(currentWorkspaceIdAtom);
   const [, setCurrentWorkspace] = useCurrentWorkspace();
   const { createLocalWorkspace } = useWorkspacesHelper();
-  const set = useSetAtom(jotaiWorkspacesAtom);
 
   return (
     <>
@@ -76,16 +74,7 @@ export function Modals() {
             router.reload();
           });
         }, [router])}
-        onClickLogout={useCallback(() => {
-          apis.auth.clear();
-          set(workspaces =>
-            workspaces.filter(
-              workspace => workspace.flavour !== RemWorkspaceFlavour.AFFINE
-            )
-          );
-          WorkspacePlugins[RemWorkspaceFlavour.AFFINE].cleanup?.();
-          router.reload();
-        }, [router, set])}
+        onClickLogout={useOnGoogleLogout()}
         onCreateWorkspace={useCallback(() => {
           setOpenCreateWorkspaceModal(true);
         }, [setOpenCreateWorkspaceModal])}