From 07086fc5f0745f4096fa60bc0e6262b26f74e091 Mon Sep 17 00:00:00 2001
From: ydcjeff <n2ya@duck.com>
Date: Sat, 21 Dec 2024 22:38:45 +0800
Subject: [PATCH] feat: show login modal when anonymous user clicks on comment
 btn

---
 components/AppLayout/AppLayout.js             | 61 ++++++++++---------
 components/AppLayout/context.js               |  9 +++
 .../CreateReplyRequestForm.js                 |  4 +-
 3 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 components/AppLayout/context.js

diff --git a/components/AppLayout/AppLayout.js b/components/AppLayout/AppLayout.js
index 52c2aa6b..9dc0bbcc 100644
--- a/components/AppLayout/AppLayout.js
+++ b/components/AppLayout/AppLayout.js
@@ -13,6 +13,7 @@ import LoginModal from './LoginModal';
 import fetchAPI from 'lib/fetchAPI';
 import { blockUserBrowserAndRefreshIfNeeded } from 'lib/isUserBlocked';
 import Snackbar from '@material-ui/core/Snackbar';
+import { AppProvider } from './context';
 
 const USER_QUERY = gql`
   query AppLayoutQuery {
@@ -86,35 +87,37 @@ function AppLayout({ children, container = true }) {
 
   return (
     <Fragment>
-      <AppHeader
-        user={data?.GetUser}
-        showProgress={isRouteChanging}
-        onMenuButtonClick={toggleSidebar}
-        onLoginModalOpen={openLoginModal}
-        onLogout={logout}
-      />
-      <AppSidebar
-        open={sidebarOpen}
-        toggle={setSidebarOpen}
-        user={data?.GetUser}
-        onLoginModalOpen={openLoginModal}
-        onLogout={logout}
-      />
-      {container ? (
-        <Container className={classes.container}>{children}</Container>
-      ) : (
-        children
-      )}
-      <AppFooter />
-      {loginModalOpen && (
-        <LoginModal onClose={() => setLoginModalOpen(false)} />
-      )}
-      <Snackbar
-        open={snackMsg ? true : false}
-        onClose={() => setSnackMsg('')}
-        message={snackMsg}
-      />
-      <UpgradeDialog />
+      <AppProvider value={{ openLoginModal }}>
+        <AppHeader
+          user={data?.GetUser}
+          showProgress={isRouteChanging}
+          onMenuButtonClick={toggleSidebar}
+          onLoginModalOpen={openLoginModal}
+          onLogout={logout}
+        />
+        <AppSidebar
+          open={sidebarOpen}
+          toggle={setSidebarOpen}
+          user={data?.GetUser}
+          onLoginModalOpen={openLoginModal}
+          onLogout={logout}
+        />
+        {container ? (
+          <Container className={classes.container}>{children}</Container>
+        ) : (
+          children
+        )}
+        <AppFooter />
+        {loginModalOpen && (
+          <LoginModal onClose={() => setLoginModalOpen(false)} />
+        )}
+        <Snackbar
+          open={snackMsg ? true : false}
+          onClose={() => setSnackMsg('')}
+          message={snackMsg}
+        />
+        <UpgradeDialog />
+      </AppProvider>
     </Fragment>
   );
 }
diff --git a/components/AppLayout/context.js b/components/AppLayout/context.js
new file mode 100644
index 00000000..22f36ccb
--- /dev/null
+++ b/components/AppLayout/context.js
@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+const AppContext = createContext();
+
+export const useAppContext = () => useContext(AppContext);
+
+export const AppProvider = ({ children, value }) => {
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
+};
diff --git a/components/CreateReplyRequestForm/CreateReplyRequestForm.js b/components/CreateReplyRequestForm/CreateReplyRequestForm.js
index 8b0758e7..eb656316 100644
--- a/components/CreateReplyRequestForm/CreateReplyRequestForm.js
+++ b/components/CreateReplyRequestForm/CreateReplyRequestForm.js
@@ -22,6 +22,7 @@ import ReportAbuseMenuItem, {
 } from 'components/ActionMenu/ReportAbuseMenuItem';
 import useCurrentUser from 'lib/useCurrentUser';
 import cx from 'clsx';
+import { useAppContext } from 'components/AppLayout/context';
 
 const localStorage = typeof window === 'undefined' ? {} : window.localStorage;
 
@@ -201,12 +202,13 @@ const CreateReplyRequestForm = React.memo(
 
     const classes = useStyles();
     const user = useCurrentUser();
+    const { openLoginModal } = useAppContext();
 
     const onCommentButtonClick = () => {
       if (user) setShowForm(!showForm);
       else {
         setShowForm(false);
-        alert(t`Please login first.`);
+        openLoginModal();
       }
     };