fix group page

components/Group/Form/index.jsx

@@ -24,8 +24,15 @@ export default function GroupForm({
   isLoading,
   onSubmit,
 }) {
-  const { control, values, errors, isDirty, setValues, handleSubmit } =
-    useGroupForm();
+  const {
+    notLogin,
+    control,
+    values,
+    errors,
+    isDirty,
+    setValues,
+    handleSubmit,
+  } = useGroupForm();
   const isCreateMode = mode === 'create';
 
   useEffect(() => {
@@ -36,6 +43,10 @@ export default function GroupForm({
     });
   }, [defaultValues]);
 
+  if (notLogin) {
+    return <Box sx={{ minHeight: '50vh' }} />;
+  }
+
   return (
     <Box sx={{ background: '#f3fcfc', py: '60px' }}>
       <StyledContainer>

components/Group/Form/useGroupForm.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useRouter } from 'next/router';
 import { ZodType, z } from 'zod';
 import { CATEGORIES } from '@/constants/category';
 import { AREAS } from '@/constants/areas';
 import { EDUCATION_STEP } from '@/constants/member';
 import { BASE_URL } from '@/constants/common';
+import openLoginWindow from '@/utils/openLoginWindow';
 
 const _eduOptions = EDUCATION_STEP.filter(
   (edu) => !['master', 'doctor', 'other'].includes(edu.value),
@@ -47,7 +47,7 @@ const rules = {
   partnerStyle: z.string().max(50, '請勿輸入超過 50 字'),
   partnerEducationStep: z
     .array(z.enum(eduOptions.map(({ label }) => label)))
-    .min(1, '請選擇的學習階段'),
+    .min(1, '請選擇適合的學習階段'),
   description: z
     .string()
     .min(1, '請輸入揪團描述')
@@ -57,9 +57,9 @@ const rules = {
 };
 
 export default function useGroupForm() {
-  const router = useRouter();
   const [isDirty, setIsDirty] = useState(false);
   const me = useSelector((state) => state.user);
+  const notLogin = !me?._id;
   const [values, setValues] = useState({
     ...DEFAULT_VALUES,
     userId: me?._id,
@@ -143,10 +143,11 @@ export default function useGroupForm() {
   };
 
   useEffect(() => {
-    if (!me?._id) router.push('/login');
-  }, [me, router]);
+    if (notLogin) openLoginWindow('/login');
+  }, [notLogin]);
 
   return {
+    notLogin,
     control,
     errors,
     values,

components/Group/detail/Contact/index.jsx

@@ -1,7 +1,6 @@
 import { useId, useState, forwardRef, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
-import Link from 'next/link';
 import styled from '@emotion/styled';
 import {
   Avatar,
@@ -20,6 +19,7 @@ import { ROLE } from '@/constants/member';
 import chatSvg from '@/public/assets/icons/chat.svg';
 import useMutation from '@/hooks/useMutation';
 import { mapToTable } from '@/utils/helper';
+import openLoginWindow from '@/utils/openLoginWindow';
 import Feedback from './Feedback';
 
 const ROLELIST = mapToTable(ROLE);
@@ -55,17 +55,18 @@ const StyledTextArea = styled(TextareaAutosize)`
   width: 100%;
   min-height: 128px;
 `;
-const StyledLink = styled(Link)`
+const StyledText = styled.div`
   margin-top: 6px;
   margin-left: 6px;
   display: block;
   color: black;
   font-size: 12px;
 `;
-const StyledSpan = styled.span`
+const StyledLink = styled.span`
   padding: 0 2px;
   color: #16b9b3;
   text-decoration: underline;
+  cursor: pointer;
 `;
 
 const Transition = forwardRef((props, ref) => {
@@ -152,10 +153,11 @@ function ContactButton({
         {label}
       </StyledButton>
       {!isLogin && (
-        <StyledLink href="/login">
-          <StyledSpan>註冊</StyledSpan>或<StyledSpan>登入</StyledSpan>
+        <StyledText>
+          <StyledLink onClick={() => router.push('/login')}>註冊</StyledLink>或
+          <StyledLink onClick={() => openLoginWindow()}>登入</StyledLink>
           即可聯繫主揪！
-        </StyledLink>
+        </StyledText>
       )}
       <Dialog
         keepMounted

components/Group/detail/index.jsx

@@ -50,12 +50,6 @@ function GroupDetail({ id, source, isLoading }) {
             ) : (
               <StyledStatus className="finished">已結束</StyledStatus>
             )}
-            <ShareButtonGroup
-              title={source?.title}
-              text={source?.description}
-              url={window.location.href}
-              hashtag={source?.hashtag}
-            />
           </Box>
           {isMyGroup ? (
             <StyledDesktopEditButton
@@ -67,6 +61,14 @@ function GroupDetail({ id, source, isLoading }) {
           ) : (
             <More />
           )}
+          <Box sx={{ mt: '8px' }}>
+            <ShareButtonGroup
+              title={source?.title}
+              text={source?.description}
+              url={window.location.href}
+              hashtag={source?.hashtag}
+            />
+          </Box>
           <StyledHeading>
             {isLoading ? <Skeleton animation="wave" /> : source?.title}
           </StyledHeading>

pages/_app.jsx

@@ -6,14 +6,14 @@ import { Provider, useDispatch, useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import Head from 'next/head';
-import { initializeApp } from 'firebase/app';
 import { persistStore } from 'redux-persist';
 import { PersistGate } from 'redux-persist/integration/react';
 import SnackbarProvider from '@/contexts/Snackbar';
 import GlobalStyle from '@/shared/styles/Global';
 import themeFactory from '@/shared/styles/themeFactory';
 import storeFactory from '@/redux/store';
-import { checkLoginValidity } from '@/redux/actions/user';
+import { checkLoginValidity, fetchUserById } from '@/redux/actions/user';
+import { getRedirectionStorage } from '@/utils/storage';
 import { initGA, logPageView } from '../utils/analytics';
 import Mode from '../shared/components/Mode';
 import 'regenerator-runtime/runtime'; // Speech.js
@@ -112,15 +112,36 @@ const App = ({ Component, pageProps }) => {
 
 const ThemeComponentWrap = ({ pageProps, Component }) => {
   const dispatch = useDispatch();
-  const firebaseApp = initializeApp(firebaseConfig);
   const mode = useSelector((state) => state?.theme?.mode ?? 'light');
   const theme = useMemo(() => themeFactory(mode), [mode]);
   const isEnv = useMemo(() => process.env.NODE_ENV === 'development', []);
+  const router = useRouter();
 
   useEffect(() => {
     dispatch(checkLoginValidity());
   }, []);
 
+  useEffect(() => {
+    const receiveMessage = (e) => {
+      if (e.origin !== window.location.origin) return;
+      if (e.data.isLogin) {
+        const { token, id } = e.data;
+        const redirectionStorage = getRedirectionStorage();
+        const redirection = redirectionStorage.get();
+        dispatch(fetchUserById(id, token));
+        if (redirection) {
+          redirectionStorage.remove();
+          router.push(redirection);
+        }
+      }
+    };
+    window.addEventListener('message', receiveMessage, false);
+
+    return () => {
+      window.removeEventListener('message', receiveMessage, false);
+    };
+  }, []);
+
   return (
     <ThemeProvider theme={theme}>
       {/* mui normalize css */}

pages/index.jsx

@@ -1,8 +1,6 @@
 import React, { useMemo, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
-import { useDispatch, useSelector } from 'react-redux';
-import { fetchUserById } from '@/redux/actions/user';
 import SEOConfig from '../shared/components/SEO';
 import Home from '../components/Home';
 import Navigation from '../shared/components/Navigation_v2';
@@ -47,14 +45,15 @@ const HomePage = () => {
     [router?.asPath],
   );
 
-  // fetch signin userData with token and id from query String
-
-  const dispatch = useDispatch();
   const { token, id } = router.query;
+
   useEffect(() => {
-    if (token) {
-      dispatch(fetchUserById(id, token));
-      router.push('/');
+    if (id && token) {
+      window.opener?.postMessage(
+        { isLogin: true, id, token },
+        window.location.origin,
+      );
+      window.close();
     }
   }, [id, token]);
 

pages/login/index.jsx

@@ -1,14 +1,14 @@
 import React, { useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
-import Link from '@mui/material/Link';
 import Script from 'next/script';
 import { Box, Typography, Button, Skeleton } from '@mui/material';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
 import SEOConfig from '@/shared/components/SEO';
 import Navigation from '@/shared/components/Navigation_v2';
 import Footer from '@/shared/components/Footer_v2';
 import { BASE_URL } from '@/constants/common';
+import openLoginWindow from '@/utils/openLoginWindow';
 // import sendDataToChromeExtension from '../../utils/sendDataToChromeExtension';
 
 const HomePageWrapper = styled.div`
@@ -38,7 +38,7 @@ const ContentWrapper = styled.div`
 `;
 
 const LoginPage = () => {
-  const LOGINPATH = `${BASE_URL}/auth/google`;
+  const LOGIN_PATH = `${BASE_URL}/auth/google`;
   const router = useRouter();
 
   const SEOData = useMemo(
@@ -101,21 +101,19 @@ const LoginPage = () => {
               />
             }
           />
-          <Link href={LOGINPATH} target="_blank" rel="noreferrer noopener">
-            <Button
-              sx={{
-                marginTop: '24px',
-                width: '100%',
-                borderRadius: '20px',
-                color: '#fff',
-                bgcolor: '#16B9B3',
-                boxShadow: '0px 4px 10px rgba(89, 182, 178, 0.5)',
-              }}
-              variant="contained"
-            >
-              Google 登入 / 註冊
-            </Button>
-          </Link>
+          <Button
+            onClick={() => openLoginWindow('/', LOGIN_PATH)}
+            sx={{
+              marginTop: '24px',
+              borderRadius: '20px',
+              color: '#fff',
+              bgcolor: '#16B9B3',
+              boxShadow: '0px 4px 10px rgba(89, 182, 178, 0.5)',
+            }}
+            variant="contained"
+          >
+            Google 登入 / 註冊
+          </Button>
           <Box sx={{ marginTop: '24px' }}>
             <Typography sx={{ color: '#536166', fontSize: '14px' }}>
               {`註冊即代表您同意島島阿學的 `}