Merge pull request #591 from ydcjeff/issue-277

feat: show login modal when anonymous user clicks on comment btn
cofacts · Dec 22, 2024 · ed528ce · ed528ce
2 parents 9f97ed6 + 07086fc
commit ed528ce
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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();
       }
     };