Merge pull request #189 from JohnsonMao/feature/signin-page-success-m…

…odal build: add ts dependencies and configure babel/eslint
daodaoedu · Dec 21, 2024 · 9e2067e · 9e2067e
2 parents c3ab188 + ca7ed8d
commit 9e2067e
Show file tree

Hide file tree

Showing 93 changed files with 557 additions and 939 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,7 +8,8 @@
             "importSource": "@emotion/react"
           }
         }
-      ]
+      ],
+      "@babel/preset-typescript"
     ],
     "plugins": [
       [

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,13 +1,14 @@
 module.exports = {
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: ['react', 'import', 'react-hooks'],
-  extends: ['airbnb'],
+  plugins: ['react', 'import', 'react-hooks', '@typescript-eslint'],
+  extends: ['airbnb', 'plugin:@typescript-eslint/recommended'],
   env: {
     browser: true,
     es2021: true,
@@ -21,21 +22,32 @@ module.exports = {
         map: [['@', '.']],
       },
       node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
     },
   },
   rules: {
-    "import/no-extraneous-dependencies": ["error", { devDependencies: ["./*.js"] }],
-    'import/extensions': ['error', 'ignorePackages', {
-      js: 'never',
-      jsx: 'never',
-      ts: 'never',
-      tsx: 'never',
-    }],
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: ['./*.js'] },
+    ],
+    'import/extensions': [
+      'error',
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
     'react/no-unescaped-entities': 'off',
     '@next/next/no-page-custom-font': 'off',
     'react/prop-types': [0],
+    'react/jsx-filename-extension': [
+      1,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
     'react/jsx-props-no-spreading': [0],
     'arrow-body-style': 0,
     'no-console': 0,
@@ -64,6 +76,7 @@ module.exports = {
     'react/function-component-definition': 0,
     'react/jsx-no-useless-fragment': 0,
     'react/no-unknown-property': 0,
+    'react/require-default-props': 0,
     'no-unsafe-optional-chaining': 0,
     'react/no-invalid-html-attribute': 0,
   },

diff --git a/.github/workflows/push-change-to-discord-webhook-url.yml b/.github/workflows/push-change-to-discord-webhook-url.yml
@@ -3,7 +3,7 @@ name: Push Change to Discord Webhook URL
 on:
   push:
     branches:
-      - main
+      - dev
 
   # Allow manual trigger
   workflow_dispatch:

diff --git a/components/About/AboutTeam/index.jsx b/components/About/AboutTeam/index.jsx
@@ -276,7 +276,7 @@ const AboutTeam = () => {
             flexDirection: 'row',
           }}
         >
-          {Members.map(({ id, name, image }) => (
+          {Members.map(({ id, name }) => (
             <Tooltip key={id} title={name}>
               <Avatar
                 sx={{ margin: '4px', width: 50, height: 50 }}

diff --git a/components/About/AwardInfo/index.jsx b/components/About/AwardInfo/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 
 const LinkWrapper = styled.a`
   color: black;

diff --git a/components/About/ContactUs/index.jsx b/components/About/ContactUs/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 
 const ContactUsWrapper = styled.address`
   margin: 20px 0;

diff --git a/components/About/Cooperate/index.jsx b/components/About/Cooperate/index.jsx
@@ -1,12 +1,7 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
-
-const LineWrapper = styled(Typography)`
-  margin: 5px 0;
-`;
+import { Typography } from '@mui/material';
 
 const SectionWrapper = styled.section`
   margin: 20px 0;

diff --git a/components/About/NeedYou/index.jsx b/components/About/NeedYou/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar, Button } from '@mui/material';
+import { Typography, Stack, Button } from '@mui/material';
 
 const LinkWrapper = styled.a`
   color: black;

diff --git a/components/About/RealizeMore/index.jsx b/components/About/RealizeMore/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 
 const LinkWrapper = styled.a`
   color: black;

diff --git a/components/About/RelatedReport/index.jsx b/components/About/RelatedReport/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 
 const LinkWrapper = styled.a`
   color: black;

diff --git a/components/About/TechStack/index.jsx b/components/About/TechStack/index.jsx
@@ -1,8 +1,7 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 
 const LineWrapper = styled(Typography)`
   margin: 5px 0;

diff --git a/components/About/Thanks/index.jsx b/components/About/Thanks/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
+import { Typography, Stack } from '@mui/material';
 
 const LineWrapper = styled(Typography)`
   margin: 5px 0;

diff --git a/components/About/index.jsx b/components/About/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Box, Paper, Typography, Stack, Avatar } from '@mui/material';
-import Tooltip from '@mui/material/Tooltip';
+import { Paper } from '@mui/material';
 import AboutUs from './AboutUs';
 import RealizeMore from './RealizeMore';
 import RelatedReport from './RelatedReport';

diff --git a/components/Activities/Ncku-bike-festival/index.jsx b/components/Activities/Ncku-bike-festival/index.jsx
@@ -1,10 +1,9 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import styled from '@emotion/styled';
-// import { css } from "@emotion/react";
 import { Box, Paper, Typography, Button } from '@mui/material';
-import { Stage, Layer, Rect, Text, Circle, Line, Image } from 'react-konva';
+import { Stage, Layer, Text, Image } from 'react-konva';
 import useImage from 'use-image';
 
 const ResourceWrapper = styled.section`
@@ -31,18 +30,18 @@ const ResourceWrapper = styled.section`
 
 const NckuBikeFestival = () => {
   const stageRef = React.useRef(null);
-  const [mainState, setMainState] = useState('initial'); // initial, search, gallery, uploaded
-  const [imageUploaded, setImageUploaded] = useState(0);
+  const [, setMainState] = useState('initial'); // initial, search, gallery, uploaded
+  const [, setImageUploaded] = useState(0);
   const [selectedFile, setSelectedFile] = useState(null);
   const [img] = useImage(selectedFile, 'Anonymous');
-  const [newImage] = useImage(stageRef?.current?.toDataURL(), 'Anonymous');
+  useImage(stageRef?.current?.toDataURL(), 'Anonymous');
 
   const handleUploadClick = (event) => {
     const file = event.target.files[0];
     const reader = new FileReader();
     const url = reader.readAsDataURL(file);
 
-    reader.onloadend = function (e) {
+    reader.onloadend = () => {
       setSelectedFile([reader.result]);
     };
     console.log(url);

diff --git a/components/ContributeResource/ActivitiesResource/index.jsx b/components/ContributeResource/ActivitiesResource/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
-import { Box, Paper, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 const ActivitiesResource = () => {
   return (

diff --git a/components/ContributeResource/LocationResource/index.jsx b/components/ContributeResource/LocationResource/index.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
-import { Box, Paper, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 const LearningResource = () => {
   return (

diff --git a/components/ContributeResource/index.jsx b/components/ContributeResource/index.jsx
@@ -3,7 +3,6 @@ import styled from '@emotion/styled';
 import { Paper, Box, Typography } from '@mui/material';
 import LearningResource from './LearningResource';
 import ActivitiesResource from './ActivitiesResource';
-import LocationResource from './LocationResource';
 
 const ResourceWrapper = styled.section`
   padding-top: 40px;

diff --git a/components/Group/Form/Fields/DateRadio.jsx b/components/Group/Form/Fields/DateRadio.jsx
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';

diff --git a/components/Group/detail/OrganizerCard.jsx b/components/Group/detail/OrganizerCard.jsx
@@ -72,13 +72,6 @@ const StyledTags = styled.div`
   }
 `;
 
-const StyledTime = styled.time`
-  display: flex;
-  justify-content: flex-end;
-  font-size: 12px;
-  color: #92989a;
-`;
-
 function OrganizerCard({ data = {}, isLoading }) {
   const educationStage =
     EDUCATION_STEP.find(({ key }) => key === data?.user?.educationStage)

diff --git a/components/Home/APPBanner/index.jsx b/components/Home/APPBanner/index.jsx
@@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import { Typography, Button } from '@mui/material';

diff --git a/components/Home/About/Tags/index.jsx b/components/Home/About/Tags/index.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
 import Chip from '@mui/material/Chip';
@@ -10,45 +10,8 @@ const TagsWrapper = styled.ul`
   flex-wrap: wrap;
 `;
 
-// const TagItemWrapper = styled.li`
-//   color: black;
-//   border-radius: 15px;
-//   padding: 2px 10px;
-//   margin: 0 5px;
-//   white-space: nowrap;
-//   cursor: pointer;
-//   ${({ color }) => css`
-//     background-color: ${COLOR_TABLE[color ?? "default"]};
-//   `}
-// `;
-
 const Tags = ({ tags = [], type }) => {
-  const { query, push } = useRouter();
-  const linkTagsHandler = useCallback(
-    (newQuery) => {
-      // 複製一份，避免影響到使用體驗
-      const clonedQuery = { ...query };
-      delete clonedQuery.title;
-      if (clonedQuery[type]) {
-        push({
-          pathname: '/search',
-          query: {
-            ...clonedQuery,
-            [type]: [clonedQuery[type].split(','), newQuery].join(','),
-          },
-        });
-      } else {
-        push({
-          pathname: '/search',
-          query: {
-            ...clonedQuery,
-            [type]: newQuery,
-          },
-        });
-      }
-    },
-    [push, query, type],
-  );
+  const { query } = useRouter();
 
   const linkList = useMemo(() => {
     return tags.map((newQuery) => {

diff --git a/components/Home/About/index.jsx b/components/Home/About/index.jsx
@@ -1,9 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import Box from '@mui/material/Box';
-import { Typography, Button } from '@mui/material';
-import { FacebookRounded } from '@mui/icons-material';
-import Chip from '@mui/material/Chip';
+import { Box, Chip, Typography } from '@mui/material';
 import { useRouter } from 'next/router';
 import { COLOR_TABLE } from '../../../constants/notion';
 import { CATEGORIES } from '../../../constants/category';

diff --git a/components/Home/Banner/index.jsx b/components/Home/Banner/index.jsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import styled from '@emotion/styled';
 import { Box, Button, Typography } from '@mui/material';
-import Typed from 'react-typed';
 import SearchField from '../SearchField';
 import BannerVideo from '../BannerVideo';
 import Title from './Title';

diff --git a/components/Home/FacebookPosts/CardList/Card/index.jsx b/components/Home/FacebookPosts/CardList/Card/index.jsx
@@ -1,9 +1,6 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { useRouter } from 'next/router';
-import { Box, Tooltip, Typography } from '@mui/material';
+import { Box, Tooltip } from '@mui/material';
 import dayjs from 'dayjs';
-import { slideInUp } from '../../../../../shared/styles/animation';
 
 const CardWrapper = styled.li`
   position: relative;
@@ -41,26 +38,7 @@ const ContentWrapper = styled.p`
   font-size: 12px;
 `;
 
-const BackgroundWrapper = styled.div`
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  border-radius: 20px;
-  z-index: -1;
-  ${({ image }) => css`
-    background-image: ${`url(${image})`};
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    filter: brightness(50%);
-  `}
-`;
-
-const Card = ({ id, message = '', date, title, link, type }) => {
-  const router = useRouter();
+const Card = ({ id, message = '', date }) => {
   return (
     <Tooltip title={message.slice(0, 150)}>
       <CardWrapper
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,8 @@ @@
                 "importSource": "@emotion/react"
               }
             }
-          ]
+          ],
+          "@babel/preset-typescript"
         ],
         "plugins": [
           [
@@ Expand Down @@