Merge pull request #125 from JohnsonMao/feature/v2

fix(group): old data fails to save due to validation error
daodaoedu · Nov 13, 2024 · 8bf7642 · 8bf7642
2 parents e9adefb + 92fe7e2
commit 8bf7642
Show file tree

Hide file tree

Showing 13 changed files with 2,387 additions and 101 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -23,6 +23,7 @@ module.exports = {
     },
   },
   rules: {
+    "import/no-extraneous-dependencies": ["error", { devDependencies: ["./*.js"] }],
     'react/no-unescaped-entities': 'off',
     '@next/next/no-page-custom-font': 'off',
     'react/prop-types': [0],

diff --git a/components/Group/Form/Fields/Upload.jsx b/components/Group/Form/Fields/Upload.jsx
@@ -77,12 +77,14 @@ export default function Upload({ name, value, control }) {
   useEffect(() => {
     if (typeof value === 'string' && value) {
       setPreview(value);
+      isLoading.current = false;
     } else if (!isLoading.current && !value) {
       isLoading.current = true;
       fetch('https://picsum.photos/436/244')
         .then((res) => res.blob())
-        .then(handleFile)
-        .then(() => {
+        .then((blob) => {
+          if (!isLoading.current) return;
+          handleFile(blob);
           isLoading.current = false;
         });
     }

diff --git a/components/Group/Form/index.jsx b/components/Group/Form/index.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Link from 'next/link';
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
@@ -45,20 +45,14 @@ export default function GroupForm({
     values,
     errors,
     isDirty,
-    setValues,
     handleSubmit,
-  } = useGroupForm();
+  } = useGroupForm({
+    ...defaultValues,
+    originPhotoURL: defaultValues?.photoURL,
+  });
   const [isChecked, setIsChecked] = useState(false);
   const isCreateMode = mode === 'create';
 
-  useEffect(() => {
-    if (!defaultValues) return;
-    setValues({
-      ...defaultValues,
-      originPhotoURL: defaultValues.photoURL,
-    });
-  }, [defaultValues]);
-
   const desc = (
     <StyledDesc>
       請確認揪團未涉及不雅內容並符合本網站{' '}

diff --git a/components/Group/Form/useGroupForm.jsx b/components/Group/Form/useGroupForm.jsx
@@ -18,7 +18,7 @@ export const categoriesOptions = CATEGORIES;
 export const areasOptions = AREAS.filter((area) => area.label !== '線上');
 export const eduOptions = _eduOptions;
 
-const DEFAULT_VALUES = {
+const INITIAL_VALUES = {
   userId: '',
   title: '',
   file: null,
@@ -79,12 +79,13 @@ const rules = {
   isGrouping: z.boolean(),
 };
 
-export default function useGroupForm() {
+export default function useGroupForm(defaultValue) {
   const [isDirty, setIsDirty] = useState(false);
   const me = useSelector((state) => state.user);
   const notLogin = !me?._id;
   const [values, setValues] = useState({
-    ...DEFAULT_VALUES,
+    ...INITIAL_VALUES,
+    ...defaultValue,
     userId: me?._id,
   });
   const [errors, setErrors] = useState({});
@@ -194,7 +195,6 @@ export default function useGroupForm() {
     errors,
     values,
     isDirty,
-    setValues,
     handleSubmit,
   };
 }
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@jitsi/react-sdk": "^1.0.1",
+    "@mdxeditor/editor": "^3.17.4",
     "@mui/base": "^5.0.0-alpha.77",
     "@mui/core": "^5.0.0-alpha.54",
     "@mui/icons-material": "^5.6.2",

diff --git a/pages/_app.jsx b/pages/_app.jsx
@@ -14,8 +14,9 @@ import GlobalStyle from '@/shared/styles/Global';
 import themeFactory from '@/shared/styles/themeFactory';
 import storeFactory from '@/redux/store';
 import { checkLoginValidity, fetchUserById } from '@/redux/actions/user';
-import { getRedirectionStorage, getReminderStorage } from '@/utils/storage';
+import { getReminderStorage } from '@/utils/storage';
 import DefaultLayout from '@/layout/DefaultLayout';
+import { startLoginListener } from '@/utils/openLoginWindow';
 import { initGA, logPageView } from '../utils/analytics';
 import Mode from '../shared/components/Mode';
 import 'regenerator-runtime/runtime'; // Speech.js
@@ -123,24 +124,10 @@ const ThemeComponentWrap = ({ pageProps, Component }) => {
   }, []);
 
   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);
-    };
+    const stopLoginListener = startLoginListener((id, token) => {
+      dispatch(fetchUserById(id, token));
+    });
+    return () => stopLoginListener();
   }, []);
 
   useEffect(() => {

diff --git a/pages/group/edit/index.jsx b/pages/group/edit/index.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react';
 import dynamic from 'next/dynamic';
 import { useSelector } from 'react-redux';
 import { useRouter } from 'next/router';
-import { Box, CircularProgress } from '@mui/material';
+import { Box } from '@mui/material';
 import { useSnackbar } from '@/contexts/Snackbar';
 import useFetch from '@/hooks/useFetch';
 import useMutation from '@/hooks/useMutation';
@@ -39,8 +39,6 @@ function EditGroupPage() {
     [router?.asPath],
   );
 
-  const goToDetail = () => router.replace(`/group/detail?id=${id}`);
-
   const { mutate, isLoading } = useMutation(`/activity/${id}`, {
     method: 'PUT',
     onSuccess: () => {
@@ -51,33 +49,22 @@ function EditGroupPage() {
 
   useEffect(() => {
     if (!me?._id) router.push('/login');
-    if (isFetching) return;
-    if (source?.userId !== me._id) goToDetail();
+    if (isFetching || !source?.userId) return;
+    if (source.userId !== me._id) router.replace(`/group/detail?id=${id}`);
   }, [me, source, isFetching, id]);
 
   return (
     <>
       <SEOConfig data={SEOData} />
-      {isFetching && (
-        <Box
-          sx={{
-            position: 'fixed',
-            bgcolor: '#3333',
-            inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            zIndex: 1,
-          }}
-        >
-          <CircularProgress />
-        </Box>
-      )}
-      <GroupForm
-        defaultValues={source}
-        isLoading={isLoading}
-        onSubmit={mutate}
-      />
+      <Box minHeight="60vh">
+        {source?.userId && (
+          <GroupForm
+            defaultValues={source}
+            isLoading={isLoading}
+            onSubmit={mutate}
+          />
+        )}
+      </Box>
     </>
   );
 }

diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useEffect } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
+import { sendLoginConfirmation } from '@/utils/openLoginWindow';
 import SEOConfig from '../shared/components/SEO';
 import Home from '../components/Home';
 import Navigation from '../shared/components/Navigation_v2';
@@ -48,13 +49,7 @@ const HomePage = () => {
   const { token, id } = router.query;
 
   useEffect(() => {
-    if (id && token) {
-      window.opener?.postMessage(
-        { isLogin: true, id, token },
-        window.location.origin,
-      );
-      window.close();
-    }
+    sendLoginConfirmation(id, token);
   }, [id, token]);
 
   return (

diff --git a/pages/signin/index.jsx b/pages/signin/index.jsx
@@ -1,9 +1,8 @@
-import { useMemo, useState, useEffect } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchUserById, createUser } from '@/redux/actions/user';
+import { createUser } from '@/redux/actions/user';
 import { GENDER, ROLE } from '@/constants/member';
-import { getRedirectionStorage } from '@/utils/storage';
 import dayjs from 'dayjs';
 import { Box, Typography, Button, Skeleton, TextField } from '@mui/material';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
@@ -22,6 +21,7 @@ import {
 } from '@/components/Signin/Signin.styled';
 import ErrorMessage from '@/components/Signin/ErrorMessage';
 import useProfileValidation from '@/components/Signin/useValidation';
+import { sendLoginConfirmation } from '@/utils/openLoginWindow';
 
 function SignInPage() {
   const router = useRouter();
@@ -35,14 +35,7 @@ function SignInPage() {
 
   // Oath login
   useEffect(() => {
-    if (id && token) {
-      getRedirectionStorage().set(`/signin?id=${id}`);
-      window.opener?.postMessage(
-        { isLogin: true, id, token },
-        window.location.origin,
-      );
-      window.close();
-    }
+    sendLoginConfirmation(id, token, `/signin?id=${id}`);
   }, [id, token]);
 
   useEffect(() => {

diff --git a/shared/components/Image/index.jsx b/shared/components/Image/index.jsx
@@ -33,6 +33,7 @@ const Image = ({
         objectPosition: 'center',
         borderRadius,
         background,
+        height,
       }}
       placeholder={<Loading height={height} />}
       onError={() => setIsError(true)}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,3 +1,5 @@
+const plugin = require("tailwindcss/plugin");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -8,7 +10,64 @@ module.exports = {
     "./shared/**/*.{jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          lightest: "#DEF5F5",
+          lighter: "#89DAD7",
+          base: "#16B9B3",
+          darker: "295E5C",
+        },
+        basic: {
+          white: "#FFFFFF",
+          100: "#F3F3F3",
+          200: "#DBDBDB",
+          300: "#92989A",
+          400: "#536166",
+          500: "#293A3D",
+          black: "#011416",
+        },
+        alert: "#B7DFDE",
+        tips: "#FF9526",
+        success: "#86C84A",
+      },
+    },
   },
-  plugins: [],
+  plugins: [
+    /** Typography */
+    plugin(({ addComponents, theme }) => {
+      const sizes = ["lg", "md", "sm"];
+      const headingFontSizes = [
+        [36, 28],
+        [22, 22],
+        [18, 20],
+      ];
+      const bodyFontSizes = [
+        [18, 20],
+        [16, 18],
+        [14, 16],
+      ];
+      sizes.forEach((size, index) => {
+        addComponents({
+          [`.heading-${size}`]: {
+            fontSize: headingFontSizes[index][1],
+            lineHeight: "140%",
+            fontWeight: "bold",
+            [`@media (min-width: ${theme("screens.md")})`]: {
+              fontSize: headingFontSizes[index][0],
+            },
+          },
+        });
+        addComponents({
+          [`.body-${size}`]: {
+            fontSize: bodyFontSizes[index][1],
+            lineHeight: "140%",
+            [`@media (min-width: ${theme("screens.md")})`]: {
+              fontSize: bodyFontSizes[index][0],
+            },
+          },
+        });
+      });
+    }),
+  ],
 };