diff --git a/.babelrc b/.babelrc index f26687df..ca0cb10d 100644 --- a/.babelrc +++ b/.babelrc @@ -10,5 +10,25 @@ } ] ], - "plugins": ["@emotion/babel-plugin"] + "plugins": [ + [ + "babel-plugin-import", + { + "libraryName": "@mui/material", + "libraryDirectory": "", + "camel2DashComponentName": false + }, + "core" + ], + [ + "babel-plugin-import", + { + "libraryName": "@mui/icons-material", + "libraryDirectory": "", + "camel2DashComponentName": false + }, + "icons" + ], + "@emotion/babel-plugin" + ] } \ No newline at end of file diff --git a/.env.sample b/.env.sample new file mode 100644 index 00000000..4b73e256 --- /dev/null +++ b/.env.sample @@ -0,0 +1 @@ +NEXT_PUBLIC_API_URL= \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js index 77efc207..ffdd3c2b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,13 +14,14 @@ module.exports = { node: true, }, ignorePatterns: ['.eslintrc.js'], - // settings: { - // 'import/resolver': { - // node: { - // extensions: ['.js', '.jsx', '.ts', '.tsx'], - // }, - // }, - // }, + settings: { + 'import/resolver': { + alias: { + extensions: ['.js', '.jsx'], + map: [['@', '.']], + }, + }, + }, rules: { 'react/no-unescaped-entities': 'off', '@next/next/no-page-custom-font': 'off', @@ -41,6 +42,7 @@ module.exports = { 'operator-linebreak': 0, 'function-paren-newline': 0, 'jsx-a11y/click-events-have-key-events': 0, + 'jsx-a11y/control-has-associated-label': 0, 'jsx-a11y/no-noninteractive-element-interactions': 0, 'react/jsx-one-expression-per-line': 0, 'no-confusing-arrow': 0, diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 0238bf0f..00000000 --- a/.prettierrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "trailingComma": "all", - "singleQuote": true, - "printWidth": 80, - "tabWidth": 2 -} diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..ab823d15 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,6 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 80, + "tabWidth": 2 +} diff --git a/components/Group/AreaChips.jsx b/components/Group/AreaChips.jsx new file mode 100644 index 00000000..6bb3a551 --- /dev/null +++ b/components/Group/AreaChips.jsx @@ -0,0 +1,48 @@ +import { useCallback, useMemo } from 'react'; +import styled from '@emotion/styled'; +import { AREAS } from '@/constants/areas'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; +import Chip from '@/shared/components/Chip'; + +const StyledAreaChips = styled.ul` + display: flex; + flex-wrap: wrap; + margin-bottom: 16px; + gap: 12px 0; +`; + +const AreaChips = () => { + const [getSearchParams, pushState] = useSearchParamsManager(); + + const currentArea = useMemo( + () => + getSearchParams('area').filter((area) => + AREAS.find(({ name }) => name === area), + ), + [getSearchParams], + ); + + const handleClickArea = useCallback( + (event) => { + const targetArea = event.target.parentNode.textContent; + const areas = currentArea.filter((area) => area !== targetArea); + + pushState('area', areas.toString()); + }, + [pushState, currentArea], + ); + + return ( + currentArea.length > 0 && ( + + {currentArea.map((name) => ( +
  • + +
    • + ))} +     + ) + ); +}; + +export default AreaChips; diff --git a/components/Group/Banner.jsx b/components/Group/Banner.jsx new file mode 100644 index 00000000..3c687c7b --- /dev/null +++ b/components/Group/Banner.jsx @@ -0,0 +1,74 @@ +import { useRouter } from 'next/router'; +import styled from '@emotion/styled'; +import Button from '@/shared/components/Button'; +import groupBannerImg from '@/public/assets/group-banner.png'; +import Image from '@/shared/components/Image'; + +const StyledBanner = styled.div` + position: relative; + + picture { + position: absolute; + width: 100%; + top: 0; + height: 398px; + img { + height: inherit; + } + } + + h1 { + margin-bottom: 8px; + font-weight: 700; + font-size: 36px; + line-height: 140%; + color: #536166; + } + + p { + font-weight: 400; + font-size: 14px; + line-height: 140%; + color: #536166; + } + + > div { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 100px; + } +`; + +const Banner = () => { + const router = useRouter(); + + const handleClick = () => { + // TODO: 判斷是否登入決定按鈕導向哪個頁面 + router.push('/login'); + }; + + return ( + + + 揪團封面 + +
    +

    揪團

    +

    想一起組織有趣的活動或學習小組嗎？

    +

    註冊並加入我們，然後創建你的活動，讓更多人一起參加！

    + +
    +     + ); +}; + +export default Banner; diff --git a/components/Group/GroupList/GroupCard.jsx b/components/Group/GroupList/GroupCard.jsx new file mode 100644 index 00000000..38a889a1 --- /dev/null +++ b/components/Group/GroupList/GroupCard.jsx @@ -0,0 +1,62 @@ +import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; +import Image from '@/shared/components/Image'; +import emptyCoverImg from '@/public/assets/empty-cover.png'; +import { timeDuration } from '@/utils/date'; +import { + StyledAreas, + StyledContainer, + StyledFooter, + StyledGroupCard, + StyledInfo, + StyledLabel, + StyledText, + StyledTitle, +} from './GroupCard.styled'; + +function GroupCard({ + photoURL, + photoAlt, + title = '未定義主題', + category = [], + partnerEducationStep, + description, + area, + isGrouping, + updatedDate, +}) { + return ( + + {photoAlt + + {title} + + + 學習領域 + {category.join('、')} + + + 適合階段 + {partnerEducationStep || '皆可'} + + + + {description} + + + + {area} + + + + {isGrouping ? ( +
    揪團中
    + ) : ( +
    已結束
    + )} +     +     +     + ); +} + +export default GroupCard; diff --git a/components/Group/GroupList/GroupCard.styled.jsx b/components/Group/GroupList/GroupCard.styled.jsx new file mode 100644 index 00000000..4c3dd3cf --- /dev/null +++ b/components/Group/GroupList/GroupCard.styled.jsx @@ -0,0 +1,108 @@ +import styled from '@emotion/styled'; + +export const StyledLabel = styled.span` + flex-basis: 50px; + color: #293a3d; + font-size: 12px; + font-weight: bold; +`; + +export const StyledText = styled.div` + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: ${(props) => props.lineClamp || '1'}; + overflow: hidden; + color: ${(props) => props.color || '#536166'}; + font-size: ${(props) => props.fontSize || '12px'}; +`; + +export const StyledTitle = styled.h2` + font-size: 14px; + font-weight: bold; + line-height: 1.4; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + overflow: hidden; +`; + +export const StyledInfo = styled.div` + ${StyledLabel} { + margin-right: 5px; + padding-right: 5px; + border-right: 1px solid #536166; + } +`; + +export const StyledFooter = styled.footer` + display: flex; + justify-content: space-between; + align-items: center; + + time, + div { + font-size: 12px; + } + + time { + font-weight: 300; + color: #92989a; + } + + div { + --bg-color: #def5f5; + --color: #16b9b3; + display: flex; + align-items: center; + padding: 4px 10px; + background: var(--bg-color); + color: var(--color); + border-radius: 4px; + font-weight: 500; + gap: 4px; + + &::before { + content: ''; + display: block; + width: 8px; + height: 8px; + background: var(--color); + border-radius: 50%; + } + + &.finished { + --bg-color: #f3f3f3; + --color: #92989a; + } + } +`; + +export const StyledContainer = styled.div` + padding: 10px; + display: flex; + flex-direction: column; + gap: 10px; +`; + +export const StyledAreas = styled.div` + display: flex; + align-items: center; +`; + +export const StyledGroupCard = styled.div` + position: relative; + background: #fff; + padding: 0.5rem; + transition: transform 0.15s, box-shadow 0.15s; + border-radius: 4px; + + &:hover { + z-index: 1; + transform: scale(1.0125); + box-shadow: 0 0 6px 2px #0001; + } + + img { + vertical-align: middle; + } +`; diff --git a/components/Group/GroupList/index.jsx b/components/Group/GroupList/index.jsx new file mode 100644 index 00000000..d92ec7ca --- /dev/null +++ b/components/Group/GroupList/index.jsx @@ -0,0 +1,114 @@ +import { useEffect } from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import styled from '@emotion/styled'; +import { Box } from '@mui/material'; +import { AREAS } from '@/constants/areas'; +import { CATEGORIES } from '@/constants/category'; +import { EDUCATION_STEP } from '@/constants/member'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; +import { setQuery } from '@/redux/actions/group'; +import GroupCard from './GroupCard'; + +export const StyledGroupItem = styled.li` + position: relative; + margin-top: 1rem; + flex-basis: 33.33%; + border-bottom: 1px solid #dbdbdb; + + &:nth-of-type(1) { + margin-top: 0; + } + + &:nth-last-of-type(1) { + border-bottom: none; + } + + @media (max-width: 767px) { + flex-basis: calc(50% - 12px); + } + + @media (min-width: 767px) { + &:nth-of-type(3) { + margin-top: 0; + } + + &:nth-last-of-type(3) { + border-bottom: none; + } + } + + @media (max-width: 560px) { + flex-basis: calc(100% - 24px); + } + + @media (min-width: 560px) { + &:nth-of-type(2) { + margin-top: 0; + } + + &:nth-last-of-type(2) { + border-bottom: none; + } + } +`; + +const StyledGroupList = styled.ul` + display: flex; + flex-wrap: wrap; +`; + +function GroupList() { + const dispatch = useDispatch(); + const [getSearchParams] = useSearchParamsManager(); + const { items, isLoading } = useSelector((state) => state.group); + + useEffect(() => { + const filterOptions = { + area: AREAS, + category: CATEGORIES, + edu: EDUCATION_STEP, + grouping: true, + q: true, + }; + const params = {}; + const searchParams = getSearchParams(); + Object.keys(filterOptions).forEach((key) => { + const searchParam = searchParams[key]; + const options = filterOptions[key]; + + if (searchParam && options) { + params[key] = Array.isArray(options) + ? searchParam + .split(',') + .filter((item) => options.some((option) => option.label === item)) + .join(',') + : searchParam; + } + }); + dispatch(setQuery(params)); + }, [getSearchParams]); + + return ( + <> + + {items?.length || isLoading ? ( + items.map((data) => ( + + + + )) + ) : ( +
  • + 哎呀！這裡好像沒有符合你條件的揪團，別失望！讓我們試試其他選項。 +
    • + )} +     + + {isLoading && ( + 搜尋揪團中～ + )} + + ); +} + +export default GroupList; diff --git a/components/Group/More.jsx b/components/Group/More.jsx new file mode 100644 index 00000000..d7e78f2d --- /dev/null +++ b/components/Group/More.jsx @@ -0,0 +1,33 @@ +import { useDispatch, useSelector } from 'react-redux'; +import { Box, Button } from '@mui/material'; +import { setPageSize } from '@/redux/actions/group'; + +export default function More() { + const dispatch = useDispatch(); + const { pageSize, total, isLoading } = useSelector((state) => state.group); + const isMore = total > pageSize || isLoading; + + return ( + + {isMore ? ( + + ) : ( + '已經到底囉～' + )} + + ); +} diff --git a/components/Group/SearchField/CheckboxGrouping.jsx b/components/Group/SearchField/CheckboxGrouping.jsx new file mode 100644 index 00000000..1b2c6b5e --- /dev/null +++ b/components/Group/SearchField/CheckboxGrouping.jsx @@ -0,0 +1,35 @@ +import FormControlLabel from '@mui/material/FormControlLabel'; +import Checkbox from '@mui/material/Checkbox'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +export default function CheckboxGrouping() { + const QUERY_KEY = 'grouping'; + const [getSearchParams, pushState] = useSearchParamsManager(); + + const handleClick = ({ target: { checked } }) => { + pushState(QUERY_KEY, checked || ''); + }; + + const checkbox = ( + + ); + + return ( + + ); +} diff --git a/components/Group/SearchField/SearchInput.jsx b/components/Group/SearchField/SearchInput.jsx new file mode 100644 index 00000000..1a70d086 --- /dev/null +++ b/components/Group/SearchField/SearchInput.jsx @@ -0,0 +1,99 @@ +import { useState, useEffect } from 'react'; +import dynamic from 'next/dynamic'; +import styled from '@emotion/styled'; +import InputBase from '@mui/material/InputBase'; +import Paper from '@mui/material/Paper'; +import IconButton from '@mui/material/IconButton'; +import MicIcon from '@mui/icons-material/Mic'; +import SearchIcon from '@mui/icons-material/Search'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +const Speech = dynamic(import('@/shared/components/Speech'), { + ssr: false, +}); + +const SearchInputWrapper = styled(Paper)` + width: 100%; + position: relative; + display: flex; + align-items: center; + border: 1px solid #dbdbdb; + border-radius: 30px; + padding-right: 4px; + box-shadow: none; + overflow: hidden; + + @media (max-width: 767px) { + border-radius: 20px; + width: 100%; + } +`; + +const IconButtonWrapper = styled(IconButton)` + color: #536166; + border-radius: 40px; + height: 40px; + width: 40px; +`; + +const InputBaseWrapper = styled(InputBase)(() => ({ + flex: 1, + '& .MuiInputBase-input': { + paddingTop: '14px', + paddingLeft: '20px', + paddingBottom: '14px', + background: 'white', + zIndex: 10, + borderRadius: '20px', + width: '100%', + fontSize: 14, + }, +})); + +const SearchInput = () => { + const [getSearchParams, pushState] = useSearchParamsManager(); + const [keyword, setKeyword] = useState(''); + const [isSpeechMode, setIsSpeechMode] = useState(false); + const currentKeyword = getSearchParams('q').toString(); + + useEffect(() => { + setKeyword(currentKeyword); + }, [currentKeyword]); + + const handleChange = ({ target }) => { + setKeyword(target.value); + }; + + /** @type {(event: SubmitEvent) => void} */ + const handleSubmit = (event) => { + event.preventDefault(); + pushState('q', keyword); + }; + + return ( + + + {isSpeechMode && ( + + )} + setIsSpeechMode(true)} + > + + + + + + + ); +}; + +export default SearchInput; diff --git a/components/Group/SearchField/SelectedAreas.jsx b/components/Group/SearchField/SelectedAreas.jsx new file mode 100644 index 00000000..25354144 --- /dev/null +++ b/components/Group/SearchField/SelectedAreas.jsx @@ -0,0 +1,29 @@ +import Select from '@/shared/components/Select'; +import { AREAS } from '@/constants/areas'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +export default function SelectedAreas() { + const QUERY_KEY = 'area'; + const [getSearchParams, pushState] = useSearchParamsManager(); + + const handleChange = ({ target: { value } }) => { + pushState(QUERY_KEY, value.toString()); + }; + + return ( + + selected.length === 0 ? '適合的教育階段' : selected.join('、') + } + sx={{ + '@media (max-width: 767px)': { + width: '100%', + }, + }} + /> + ); +} diff --git a/components/Group/SearchField/index.jsx b/components/Group/SearchField/index.jsx new file mode 100644 index 00000000..35f7a40e --- /dev/null +++ b/components/Group/SearchField/index.jsx @@ -0,0 +1,38 @@ +import styled from '@emotion/styled'; +import SearchInput from './SearchInput'; +import SelectedAreas from './SelectedAreas'; +import SelectedEducationStep from './SelectedEducationStep'; +import CheckboxGrouping from './CheckboxGrouping'; + +const StyledSearchField = styled.div` + margin-top: 8px; + width: 100%; + + .selects-wrapper { + margin-top: 12px; + display: flex; + align-items: center; + gap: 16px; + + @media (max-width: 767px) { + margin: 10px 0; + flex-direction: column; + align-items: stretch; + } + } +`; + +const SearchField = () => { + return ( + + +
    + + + +
    +     + ); +}; + +export default SearchField; diff --git a/components/Group/SelectedCategory.jsx b/components/Group/SelectedCategory.jsx new file mode 100644 index 00000000..068835e6 --- /dev/null +++ b/components/Group/SelectedCategory.jsx @@ -0,0 +1,134 @@ +import { useCallback, useMemo, useRef, useState } from 'react'; +import styled from '@emotion/styled'; +import { CATEGORIES } from '@/constants/category'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; +import ScrollButton from '@/shared/components/ScrollButton'; +import Chip from '@/shared/components/Chip'; + +const StyledSelectedCategory = styled.div` + margin-top: 12px; + display: flex; + align-items: center; + + > p { + margin-right: 20px; + font-weight: 700; + font-size: 14px; + color: #536166; + flex-shrink: 0; + } + + > div { + position: relative; + max-width: calc(100% - 76px); + } + + ul { + display: flex; + overflow-x: scroll; + -ms-overflow-style: none; /* IE */ + scrollbar-width: none; /* Firefox */ + scroll-behavior: smooth; + + &::-webkit-scrollbar { + display: none; /* Chrome, Safari, Edge and Opera */ + } + + @media (max-width: 767px) { + margin: 10px 0; + } + } +`; + +const SelectedCategory = () => { + /** @type {React.MutableRefObject} */ + const categoryListRef = useRef(null); + const [getSearchParams, pushState] = useSearchParamsManager(); + const [isShowLeftScrollButton, setIsShowLeftScrollButton] = useState(false); + const [isShowRightScrollButton, setIsShowRightScrollButton] = useState(false); + + const currentCategories = useMemo( + () => getSearchParams('category'), + [getSearchParams], + ); + + const handleClickCategory = useCallback( + (event) => { + const targetCategory = event.target.textContent; + const hasCategory = currentCategories.includes(targetCategory); + const categories = hasCategory + ? currentCategories.filter((category) => category !== targetCategory) + : [...currentCategories, targetCategory]; + + pushState('category', categories.toString()); + }, + [pushState, currentCategories], + ); + + const updateScrollButtonVisibility = () => { + const { scrollLeft, scrollWidth, clientWidth } = categoryListRef.current; + const isStart = Math.floor(scrollLeft) <= 0; + const isEnd = Math.ceil(scrollLeft + clientWidth) >= scrollWidth; + + setIsShowLeftScrollButton(!isStart); + setIsShowRightScrollButton(!isEnd); + }; + + const resetScrollButtonVisibility = () => { + setIsShowLeftScrollButton(false); + setIsShowRightScrollButton(false); + }; + + const scrollButtonHandler = (type) => () => { + const delta = categoryListRef.current.offsetWidth + 100; + + if (type === 'left') { + categoryListRef.current.scrollLeft -= delta; + } else if (type === 'right') { + categoryListRef.current.scrollLeft += delta; + } + }; + + return ( + +

    學習領域

    +
    + +
      +
    • + pushState('category')} + /> +
      • + {CATEGORIES.map(({ key, value }) => ( +
    • + +
      • + ))} +
    + +
    +     + ); +}; + +export default SelectedCategory; diff --git a/components/Group/index.jsx b/components/Group/index.jsx new file mode 100644 index 00000000..6ee2bed2 --- /dev/null +++ b/components/Group/index.jsx @@ -0,0 +1,52 @@ +import styled from '@emotion/styled'; +import { Box } from '@mui/material'; +import AreaChips from './AreaChips'; +import Banner from './Banner'; +import SearchField from './SearchField'; +import SelectedCategory from './SelectedCategory'; +import GroupList from './GroupList'; +import More from './More'; + +const StyledGroup = styled.div` + position: relative; + margin: 70px auto 0; + width: 924px; + + @media (max-width: 1024px) { + width: 768px; + } + + @media (max-width: 800px) { + padding: 0 16px; + width: 100%; + } +`; + +const ContainerWrapper = styled(Box)` + padding: 32px; + border-radius: 20px; + box-shadow: 0px 4px 6px rgba(196, 194, 193, 0.2); + background: #fff; + z-index: 2; +`; + +function Group() { + return ( + + + + + + + + + + + + + + + ); +} + +export default Group; diff --git a/components/Home/FacebookPosts/index.jsx b/components/Home/FacebookPosts/index.jsx index e0b355f3..2ba90240 100644 --- a/components/Home/FacebookPosts/index.jsx +++ b/components/Home/FacebookPosts/index.jsx @@ -81,12 +81,12 @@ const Guide = () => { isLoading={isLoadingInstagramPosts} direction="right" /> - + /> */} ); }; diff --git a/components/Partner/About/Tags/index.jsx b/components/Partner/About/Tags/index.jsx deleted file mode 100644 index 3f21a73f..00000000 --- a/components/Partner/About/Tags/index.jsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import styled from '@emotion/styled'; -import { useRouter } from 'next/router'; -import Chip from '@mui/material/Chip'; -import Link from 'next/link'; -import { COLOR_TABLE } from '../../../../constants/notion'; - -const TagsWrapper = styled.ul` - display: flex; - 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 linkList = useMemo(() => { - return tags.map((newQuery) => { - // 複製一份，避免影響到使用體驗 - const clonedQuery = { ...query }; - delete clonedQuery.title; - if (clonedQuery[type]) { - const queryObject = { - ...clonedQuery, - [type]: [clonedQuery[type].split(','), newQuery].join(','), - }; - const queryStirng = Object.keys(queryObject) - .map((key) => queryObject[key]) - .join('&'); - return `/search?${queryStirng}`; - } else { - const queryObject = { - ...clonedQuery, - [type]: newQuery, - }; - const queryStirng = Object.keys(queryObject) - .map((key) => queryObject[key]) - .join('&'); - return `/search?${queryStirng}`; - } - }); - }, [tags, query]); - - return ( - - {tags.map(({ name, color }, index) => ( -
  • - - linkTagsHandler(name)} - sx={{ - backgroundColor: COLOR_TABLE[color ?? 'default'], - cursor: 'pointer', - margin: '5px', - whiteSpace: 'nowrap', - fontWeight: 500, - fontSize: '14px', - '&:hover': { - opacity: '60%', - transition: 'transform 0.4s', - }, - }} - /> - -
    • - ))} -     - ); -}; - -export default Tags; diff --git a/components/Partner/About/index.jsx b/components/Partner/About/index.jsx deleted file mode 100644 index dd4b6085..00000000 --- a/components/Partner/About/index.jsx +++ /dev/null @@ -1,154 +0,0 @@ -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 { useRouter } from 'next/router'; -import { COLOR_TABLE } from '../../../constants/notion'; -import { CATEGORIES } from '../../../constants/category'; -import RelatedResources from '../../../shared/components/RelatedResources'; - -const GuideWrapper = styled.div` - width: 90%; - /* height: calc(var(--section-height) + var(--section-height-offset)); */ - margin: 0 auto; - padding-top: 80px; - padding-bottom: 80px; - .guide-title { - color: #536166; - font-weight: bold; - font-size: 40px; - line-height: 50px; - letter-spacing: 0.08em; - margin-left: '20px'; - } - - @media (max-width: 767px) { - padding-top: 40px; - padding-bottom: 20px; - } -`; - -const About = () => { - const router = useRouter(); - return ( - - - 來點島島阿學的資源吧！ - - - coffeeandlearning - - - - 「學習資源爆炸多，卻常常找不到適合自己的？」 - - - - ✅ 由各領域資深學習者分享及彙整 - - - ✅ 免費資源百百種 - - - ✅ 資源跨領域跨年齡跨國 - - - ✅ 三鍵篩選出合適資源 - - - ✅ 人人都可以分享資源 - - - 自主學習的時代，用共好共享成為彼此學習路上的橋樑吧！ - - - - 豐富的學習類別 - - - {CATEGORIES.map(({ key, value }) => ( - router.push(`/search?cats=${value}`)} - sx={{ - backgroundColor: COLOR_TABLE.green, - opacity: '60%', - cursor: 'pointer', - margin: '5px', - whiteSpace: 'nowrap', - fontWeight: 500, - fontSize: '16px', - '&:hover': { - opacity: '100%', - backgroundColor: COLOR_TABLE.green, - transition: 'transform 0.4s', - }, - }} - /> - ))} - - - - - - - ); -}; - -export default About; diff --git a/components/Partner/Banner/BannerImage/index.jsx b/components/Partner/Banner/BannerImage/index.jsx deleted file mode 100644 index 1b5cd14e..00000000 --- a/components/Partner/Banner/BannerImage/index.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; -import { Box } from '@mui/material'; - -const BannerImageWrapper = styled.div` - position: absolute; - width: 100%; - overflow: hidden; - z-index: -1; - top: 0px; - height: 60vh; - /* @media (max-width: 768px) { - height: 80vh; - } */ -`; - -function BannerImage() { - return ( - - - - ); -} - -export default BannerImage; diff --git a/components/Partner/Banner/index.jsx b/components/Partner/Banner/index.jsx index c4dff161..42cea4a0 100644 --- a/components/Partner/Banner/index.jsx +++ b/components/Partner/Banner/index.jsx @@ -1,71 +1,84 @@ -import React from 'react'; -import { Box, Button, Typography } from '@mui/material'; +import styled from '@emotion/styled'; import { useRouter } from 'next/router'; -import BannerImage from './BannerImage'; +import { Box } from '@mui/material'; +import Button from '@/shared/components/Button'; +import Image from '@/shared/components/Image'; +import partnerImg from '@/public/assets/partner-banner.png'; + +const StyledBanner = styled(Box)(({ theme }) => ({ + height: '398px', + zIndex: 0, + position: 'relative', + [theme.breakpoints.down('md')]: { + height: '256px', + }, + '> picture': { + position: 'absolute', + width: '100%', + top: 0, + height: '398px', + zIndex: -1, + [theme.breakpoints.down('md')]: { + height: '256px', + }, + img: { + height: 'inherit', + }, + }, +})); + +const StyledContent = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + height: '100%', + paddingBottom: '40px', + [theme.breakpoints.down('md')]: { + paddingBottom: '0', + }, + '> h1': { + fontWeight: 700, + fontSize: '36px', + lineHeight: '140%', + color: '#536166', + marginBottom: '8px', + [theme.breakpoints.down('md')]: { + fontSize: '22px', + }, + }, + '> p': { + fontWeight: 400, + fontSize: '14px', + lineHeight: '140%', + color: '#536166', + [theme.breakpoints.down('md')]: { + textAlign: 'center', + }, + }, +})); const Banner = () => { const router = useRouter(); return ( - - - - 尋找夥伴 - - - 想找到一起交流的學習夥伴嗎 - - - 註冊加入會員，並填寫個人資料，你的資訊就會刊登在頁面上囉！ - - - - - + + +

    尋找夥伴

    +

    想找到一起交流的學習夥伴嗎

    +

    註冊加入會員，並填寫個人資料，你的資訊就會刊登在頁面上囉！

    + +     + + 尋找夥伴 + +     ); }; diff --git a/components/Partner/Group/index.jsx b/components/Partner/Group/index.jsx deleted file mode 100644 index daae7a54..00000000 --- a/components/Partner/Group/index.jsx +++ /dev/null @@ -1,137 +0,0 @@ -import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import Box from '@mui/material/Box'; -import { Button, Typography } from '@mui/material'; -import { FacebookRounded } from '@mui/icons-material'; -import { useRouter } from 'next/router'; -import WramModal from '../../../shared/components/WarmModal'; - -const GroupWrapper = styled.div` - width: 90%; - /* height: calc(var(--section-height) + var(--section-height-offset)); */ - margin: 0 auto; - padding-top: 80px; - padding-bottom: 80px; - - @media (max-width: 767px) { - padding-top: 40px; - padding-bottom: 20px; - } -`; - -const Group = () => { - const router = useRouter(); - const [open, setOpen] = useState(false); - - return ( - - - 加入島島阿學學習社群 - - - - - - 我們是島島阿學學習社群，努力搭起互助學習的橋梁。 - - - - - 期盼以集體智慧，打造沒有天花板的學習環境，一個以自主學習為主的民主社群。 - - - - - 目前提供學習資源網以及社群的服務，包含各領域各種形式的資源、學習活動、學習經驗、教育新聞等等。 - - - - - 我們認為社群即資源、支援，讓學習者在民主教育的社群中，以共好的概念，解決彼此學習的問題，支持彼此成為自己想成為的人。 - - - - - 社群中有許多有愛的島友即時地分享各種學習資源唷！快加入吧！ - - - - - - - - - - - group - - - ); -}; - -export default Group; diff --git a/components/Partner/Parnter.styled.jsx b/components/Partner/Parnter.styled.jsx new file mode 100644 index 00000000..5f50432d --- /dev/null +++ b/components/Partner/Parnter.styled.jsx @@ -0,0 +1,31 @@ +import styled from '@emotion/styled'; +import { Box } from '@mui/material'; + +export const StyledWrapper = styled.div` + position: relative; + margin: 70px auto 0; + padding-bottom: 14px; + width: 100%; + max-width: 1024px; + min-height: 100vh; + margin-top: -80px; + + @media (max-width: 900px) { + padding: 0 16px 44px; + margin-top: -50px; + } +`; +export const StyledContent = styled(Box)` + margin-top: 24px; + padding: 32px 40px; + background-color: #fff; + border-radius: 20px; + @media (max-width: 900px) { + padding: 0; + background-color: transparent; + } +`; + +export const StyledSearchWrapper = styled(Box)` + margin-top: 24px; +`; diff --git a/components/Partner/PartnerList/PartnerCard/PartnerCard.styled.jsx b/components/Partner/PartnerList/PartnerCard/PartnerCard.styled.jsx new file mode 100644 index 00000000..de5d5a61 --- /dev/null +++ b/components/Partner/PartnerList/PartnerCard/PartnerCard.styled.jsx @@ -0,0 +1,112 @@ +import styled from '@emotion/styled'; +import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Grid, Box, Typography } from '@mui/material'; + +export const StyledCard = styled(Box)` + display: flex; + padding: 12px; + background-color: #fff; + justify-content: space-between; + align-items: flex-start; + width: 100%; + border-radius: 20px; + cursor: pointer; + &:hover { + box-shadow: 0px 4px 10px 0px rgba(196, 194, 193, 0.4); + h2 { + color: #16b9b3; + } + } +`; + +export const StyledCardContainer = styled(Box)` + width: 100%; +`; + +export const StyledImage = styled(LazyLoadImage)` + display: block; + width: 50px; + height: 50px; + border-radius: 50%; + background: rgba(240, 240, 240, 0.8); + object-fit: cover; + object-position: center; +`; + +export const StyledCardTitle = styled.h2` + color: #293a3d; + font-weight: 500; + font-size: 16px; + margin-right: 5px; +`; + +export const StyledCardLabel = styled(Typography)` + color: var(--black-white-gray-dark, #293a3d); + text-align: center; + font-family: Noto Sans TC; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; + border-radius: 4px; + background: #f3f3f3; + padding: 3px 10px; +`; + +export const StyledCardSubtitle = styled(Typography)` + color: #92989a; + font-weight: 400; + font-size: 14px; +`; + +export const StyledTypoCaption = styled(Typography)` + color: #92989a; + font-family: 'Noto Sans TC'; + font-size: 12px; + font-style: normal; + line-height: 1.4; +`; + +export const StyledTagContainer = styled(Grid)` + display: flex; + align-items: center; +`; + +export const StyledTagText = styled(Grid)` + color: var(--black-white-gray, #536166); + text-align: center; + font-family: 'Noto Sans TC'; + font-size: 12px; + font-style: normal; + line-height: 1.4; + border-radius: 13px; + padding: 3px 10px; + display: flex; + justify-content: center; + background: #def5f5; +`; + +export const StyledTypoEllipsis = styled(Box)` + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +`; + +export const FlexSBAlignCenter = styled(Box)` + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const FlexAlignCenter = styled(Box)` + display: flex; + align-items: center; +`; + +export const FlexColCenterSB = styled(Box)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: space-between; +`; diff --git a/components/Partner/PartnerList/PartnerCard/PartnerCardAvator.jsx b/components/Partner/PartnerList/PartnerCard/PartnerCardAvator.jsx new file mode 100644 index 00000000..6b599709 --- /dev/null +++ b/components/Partner/PartnerList/PartnerCard/PartnerCardAvator.jsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Skeleton } from '@mui/material'; +import { StyledImage } from './PartnerCard.styled'; + +const PartnerCardAvator = ({ image }) => { + return image ? ( + + ) : ( + + ); +}; + +export default PartnerCardAvator; diff --git a/components/Partner/PartnerList/PartnerCard/PartnerCardDescription.jsx b/components/Partner/PartnerList/PartnerCard/PartnerCardDescription.jsx new file mode 100644 index 00000000..513689a2 --- /dev/null +++ b/components/Partner/PartnerList/PartnerCard/PartnerCardDescription.jsx @@ -0,0 +1,20 @@ +import { Typography } from '@mui/material'; +import { StyledTypoEllipsis } from './PartnerCard.styled'; + +const PartnerCardDescription = ({ title, content, ...rest }) => { + return ( + + + {title} + + + | + + + {content || '尚未填寫'} + + + ); +}; + +export default PartnerCardDescription; diff --git a/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx b/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx new file mode 100644 index 00000000..0724878e --- /dev/null +++ b/components/Partner/PartnerList/PartnerCard/PartnerCardTag.jsx @@ -0,0 +1,20 @@ +import { StyledTagContainer, StyledTagText } from './PartnerCard.styled'; + +const PartnerCardTag = ({ tagList = [] }) => { + const showItems = tagList.slice(0, 5); + const hideItems = tagList.slice(5); + return ( + + {showItems.map((tag) => ( + + {tag} + + ))} + {hideItems.length > 0 && ( + {hideItems.length} + )} + + ); +}; + +export default PartnerCardTag; diff --git a/components/Partner/PartnerList/PartnerCard/index.jsx b/components/Partner/PartnerList/PartnerCard/index.jsx index d94f5b56..24ea1ebe 100644 --- a/components/Partner/PartnerList/PartnerCard/index.jsx +++ b/components/Partner/PartnerList/PartnerCard/index.jsx @@ -1,140 +1,87 @@ -import React, { useRef } from 'react'; -import styled from '@emotion/styled'; -import { Box, Typography, Divider, Skeleton } from '@mui/material'; -import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Box } from '@mui/material'; import { WANT_TO_DO_WITH_PARTNER, - CATEGORIES, -} from '../../../../constants/member'; -import { mapToTable } from '../../../../utils/helper'; + ROLE, + EDUCATION_STEP, +} from '@/constants/member'; +import moment from 'moment'; +import { mapToTable } from '@/utils/helper'; +import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; +import PartnerCardAvator from './PartnerCardAvator'; +import PartnerCardDescription from './PartnerCardDescription'; +import PartnerCardTag from './PartnerCardTag'; + +import { + StyledCard, + StyledCardContainer, + StyledCardTitle, + StyledCardLabel, + StyledCardSubtitle, + StyledTypoCaption, + FlexSBAlignCenter, + FlexAlignCenter, + FlexColCenterSB, +} from './PartnerCard.styled'; const WANT_TO_DO_WITH_PARTNER_TABLE = mapToTable(WANT_TO_DO_WITH_PARTNER); -const CATEGORIES_TABLE = mapToTable(CATEGORIES); +const ROLELIST = mapToTable(ROLE); +const EDUCATION_STEP_TABLE = mapToTable(EDUCATION_STEP); + function PartnerCard({ - id, image, name, - subTitle, - canShare = [], - canTogether = [], + share, + tagList = [], + wantToDoList = [], + roleList = [], + location, + educationStage, + updatedDate, }) { - return ( - - - - - - } - /> + const wantTodo = wantToDoList + .map((item) => WANT_TO_DO_WITH_PARTNER_TABLE[item]) + .join('、'); - - - {name} - - - {subTitle} - - {/* - {' '} - 台北市松山區 - */} - - - {/* - {tagList.map((tag) => ( - - ))} - */} - - - - - 可分享 - - - {canShare - .map((item) => WANT_TO_DO_WITH_PARTNER_TABLE[item] || '') - .join(', ')} - - - - - 想一起 - - - {canTogether - .map((item) => CATEGORIES_TABLE[item] || '') - .join(', ')} - - + const role = roleList.length > 0 && ROLELIST[roleList[0]]; + const edu = educationStage && EDUCATION_STEP_TABLE[educationStage]; + + return ( + + + + + + + {name} + {edu && {edu}} + + {role && {role}} + + + + + - - + + + + + {location && ( + <> + + {location} + + )} + + + + {updatedDate + ? moment(updatedDate).fromNow() + : moment(new Date() - 500 * 60 * 60).fromNow()} + + + + ); } diff --git a/components/Partner/PartnerList/index.jsx b/components/Partner/PartnerList/index.jsx index 807fcefe..bf11de8f 100644 --- a/components/Partner/PartnerList/index.jsx +++ b/components/Partner/PartnerList/index.jsx @@ -1,86 +1,59 @@ -import React, { useRef } from 'react'; -import styled from '@emotion/styled'; -import { Box, Typography, Divider, Skeleton } from '@mui/material'; -import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Fragment } from 'react'; +import { useRouter } from 'next/router'; +import { useSelector } from 'react-redux'; +import useMediaQuery from '@mui/material/useMediaQuery'; +import { Grid, Box } from '@mui/material'; import PartnerCard from './PartnerCard'; -const LIST = [ - { - name: '許浪手', - image: - 'https://images.unsplash.com/photo-1502680390469-be75c86b636f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c3VyZnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', - subTitle: '實驗教育老師', - canShare: '心智圖法', - canTogether: '學習交流、教學相長', - tags: ['實驗教育'], - location: '台北市松山區', - }, - { - name: '許浪手2', - image: - 'https://images.unsplash.com/photo-1502680390469-be75c86b636f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c3VyZnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', - subTitle: '實驗教育老師', - canShare: '心智圖法', - canTogether: '學習交流、教學相長', - tags: ['實驗教育'], - location: '台北市松山區', - }, - { - name: '許浪手3', - image: - 'https://images.unsplash.com/photo-1502680390469-be75c86b636f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c3VyZnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', - subTitle: '實驗教育老師', - canShare: '心智圖法', - canTogether: '學習交流、教學相長', - tags: ['實驗教育'], - location: '台北市松山區', - }, - { - name: '許浪手4', - image: - 'https://images.unsplash.com/photo-1502680390469-be75c86b636f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c3VyZnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', - subTitle: '實驗教育老師', - canShare: '心智圖法', - canTogether: '學習交流、教學相長', - tags: ['實驗教育'], - location: '台北市松山區', - }, -]; +function PartnerList() { + const router = useRouter(); + + const partners = useSelector((state) => state.partners); + + const lists = partners.items || []; + const mobileScreen = useMediaQuery('(max-width: 900px)'); -function PartnerList({ list = [] }) { return ( - - - {list.map( - ({ - id, - userName, - photoURL, - subTitle, - wantToLearnList, - interestAreaList, - }) => ( + + {lists.map((item, idx) => ( + + router.push(`partner/detail?id=${item._id}`)} + item + width="100%" + md={6} + mb={mobileScreen && '12px'} + > - ), - )} - - + + {!mobileScreen && (idx + 1) % 2 === 0 && idx + 1 !== lists.length && ( + + + + )} + + ))} + ); } diff --git a/components/Partner/SearchField/AgeCheckbox/index.jsx b/components/Partner/SearchField/AgeCheckbox/index.jsx deleted file mode 100644 index 20fc06de..00000000 --- a/components/Partner/SearchField/AgeCheckbox/index.jsx +++ /dev/null @@ -1,91 +0,0 @@ -/* eslint-disable react/jsx-wrap-multilines */ -import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import { Box, Select, MenuItem } from '@mui/material'; -import { useRouter } from 'next/router'; -// import { SEARCH_TAGS } from "../../../constants/category"; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import Chip from '@mui/material/Chip'; -import FormLabel from '@mui/material/FormLabel'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormHelperText from '@mui/material/FormHelperText'; -import Checkbox from '@mui/material/Checkbox'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - PaperProps: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, -}; - -const names = ['學齡前', '國小', '國高中', '大學以上']; - -const AgeDropdown = () => { - const { query, push } = useRouter(); - const ages = query?.ages ? (query?.ages).split(',') : []; - const handleChange = (event) => { - const newAges = query?.ages ? (query?.ages).split(',') : []; - const { name } = event.target; - const { checked } = event.target; - if (checked) { - newAges.push(name); - } else { - const index = newAges.indexOf(name); - newAges.splice(index, 1); - } - if (newAges.length === 0) { - delete query.ages; - push({ - pathname: '/search', - query, - }); - } else { - push({ - pathname: '/search', - query: { - ...query, - ages: newAges.join(','), - }, - }); - } - }; - return ( - - 年齡層 - - {names.map((name) => ( - - } - /> - ))} - - - ); -}; - -export default AgeDropdown; diff --git a/components/Partner/SearchField/AgeDropdown/index.jsx b/components/Partner/SearchField/AgeDropdown/index.jsx deleted file mode 100644 index 93531bbe..00000000 --- a/components/Partner/SearchField/AgeDropdown/index.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import { Box, Select, MenuItem } from '@mui/material'; -import { useRouter } from 'next/router'; -// import { SEARCH_TAGS } from "../../../constants/category"; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import Chip from '@mui/material/Chip'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - PaperProps: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, -}; - -const names = ['學齡前', '國小', '國高中', '大學以上']; - -const AgeDropdown = () => { - const { query, push } = useRouter(); - const ages = query?.ages ? (query?.ages).split(',') : []; - const handleChange = (event) => { - const { - target: { value }, - } = event; - - if (value.length > 0) { - push({ - pathname: '/search', - query: { - ...query, - ages: value.join(','), - }, - }); - } else { - delete query.ages; - push({ - pathname: '/search', - query, - }); - } - }; - return ( - - 年齡層 - - - ); -}; - -export default AgeDropdown; diff --git a/components/Partner/SearchField/FeeDropdown/index.jsx b/components/Partner/SearchField/FeeDropdown/index.jsx deleted file mode 100644 index 19452fae..00000000 --- a/components/Partner/SearchField/FeeDropdown/index.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import React, { useState } from 'react'; -import styled from '@emotion/styled'; -import { Box, Select, MenuItem } from '@mui/material'; -import { useRouter } from 'next/router'; -// import { SEARCH_TAGS } from "../../../constants/category"; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import Chip from '@mui/material/Chip'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - PaperProps: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, -}; - -const names = ['不拘', '免費', '部分免費', '需付費']; - -const FeeDropdown = () => { - const { query, push } = useRouter(); - const fee = query?.fee ? (query?.fee).split(',') : []; - const handleChange = (event) => { - const { - target: { value }, - } = event; - - if (value === names[0]) { - delete query.fee; - push({ - pathname: '/search', - query, - }); - } else { - push({ - pathname: '/search', - query: { - ...query, - fee: value, - }, - }); - } - }; - return ( - - 費用 - - {names.map((name) => ( - } - /> - ))} - - {/* */} - - ); -}; - -export default FeeDropdown; diff --git a/components/Partner/SearchField/HotTags/index.jsx b/components/Partner/SearchField/HotTags/index.jsx deleted file mode 100644 index 6de3607e..00000000 --- a/components/Partner/SearchField/HotTags/index.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; -import { Whatshot } from '@mui/icons-material'; -import { Box } from '@mui/material'; -import { SEARCH_TAGS } from '../../../../constants/category'; -import Item from './item'; -// import { TikTokFont } from "../../../../shared/styles/css"; - -const TagsWrapper = styled.ul` - display: flex; - justify-content: flex-start; - align-items: center; - margin: auto 5px; - white-space: nowrap; - max-width: calc(100vw - 49px); - overflow-x: scroll; - -ms-overflow-style: none; /* IE */ - scrollbar-width: none; /* Firefox */ - &::-webkit-scrollbar { - display: none; /* Chrome, Safari, Edge and Opera */ - } -`; - -const Tags = ({ queryList }) => { - const lastSelectedCat = queryList.length > 0 && queryList[0]; - const hotTags = - Array.isArray(queryList) && queryList.length > 0 && lastSelectedCat - ? SEARCH_TAGS[lastSelectedCat] - : SEARCH_TAGS['全部']; - return ( - - - - {hotTags.map((value) => ( - - ))} - - - ); -}; - -export default Tags; diff --git a/components/Partner/SearchField/HotTags/item.jsx b/components/Partner/SearchField/HotTags/item.jsx deleted file mode 100644 index 6804b277..00000000 --- a/components/Partner/SearchField/HotTags/item.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import React, { useCallback, useMemo } from 'react'; -import { useRouter } from 'next/router'; -import { Chip } from '@mui/material'; -import { COLOR_TABLE } from '../../../../constants/notion'; -import stringSanitizer from '../../../../utils/sanitizer'; - -// const TagWrapper = styled(Chip)` -// margin: auto 5px; -// font-weight: 700; -// white-space: nowrap; -// a { -// color: #37b9eb; -// font-weight: bold; -// font-size: 16px; -// } - -// a:hover { -// text-decoration: underline; -// } - -// @media (max-width: 767px) { -// left: 70px; -// width: 85vw; -// overflow-x: visible; -// a { -// color: #007bbb; -// font-size: 14px; -// } -// } -// `; -const Tag = ({ title }) => { - const { push, query } = useRouter(); - const queryTags = useMemo( - () => - typeof query.tags === 'string' - ? stringSanitizer(query.tags).split(',') - : [], - [query.tags], - ); - const linkHandler = useCallback( - (targetQuery) => { - push({ - pathname: '/search', - query: { - ...query, - tags: [...new Set([...queryTags, targetQuery])].join(','), - }, - }); - }, - [push, query, queryTags], - ); - return ( - linkHandler(title)} - sx={{ - backgroundColor: COLOR_TABLE.pink, - cursor: 'pointer', - margin: '5px', - whiteSpace: 'nowrap', - fontWeight: 500, - fontSize: '14px', - '&:hover': { - opacity: '60%', - transition: 'transform 0.4s', - }, - }} - /> - ); -}; - -export default Tag; diff --git a/components/Partner/SearchField/SearchInput.jsx b/components/Partner/SearchField/SearchInput.jsx new file mode 100644 index 00000000..ba485a31 --- /dev/null +++ b/components/Partner/SearchField/SearchInput.jsx @@ -0,0 +1,98 @@ +import { useState, useEffect } from 'react'; +import dynamic from 'next/dynamic'; +import styled from '@emotion/styled'; +import InputBase from '@mui/material/InputBase'; +import Paper from '@mui/material/Paper'; +import IconButton from '@mui/material/IconButton'; +import MicIcon from '@mui/icons-material/Mic'; +import SearchIcon from '@mui/icons-material/Search'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +const Speech = dynamic(import('@/shared/components/Speech'), { + ssr: false, +}); + +const SearchInputWrapper = styled(Paper)` + width: 100%; + position: relative; + display: flex; + align-items: center; + border: 1px solid #dbdbdb; + border-radius: 30px; + padding-right: 4px; + box-shadow: none; + overflow: hidden; + + @media (max-width: 767px) { + border-radius: 20px; + width: 100%; + } +`; + +const IconButtonWrapper = styled(IconButton)` + color: #536166; + border-radius: 40px; + height: 40px; + width: 40px; +`; + +const InputBaseWrapper = styled(InputBase)(() => ({ + flex: 1, + '& .MuiInputBase-input': { + paddingTop: '14px', + paddingLeft: '20px', + paddingBottom: '14px', + background: 'white', + zIndex: 10, + borderRadius: '20px', + width: '100%', + fontSize: 14, + }, +})); + +const SearchInput = () => { + const [getSearchParams, pushState] = useSearchParamsManager(); + const [keyword, setKeyword] = useState(''); + const [isSpeechMode, setIsSpeechMode] = useState(false); + const currentKeyword = getSearchParams('q').toString(); + + useEffect(() => { + setKeyword(currentKeyword); + }, [currentKeyword]); + + const handleChange = ({ target }) => { + setKeyword(target.value); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + pushState('q', keyword); + }; + + return ( + + + {isSpeechMode && ( + + )} + setIsSpeechMode(true)} + > + + + + + + + ); +}; + +export default SearchInput; diff --git a/components/Partner/SearchField/SearchInput/Button/index.jsx b/components/Partner/SearchField/SearchInput/Button/index.jsx deleted file mode 100644 index a9e3cb0b..00000000 --- a/components/Partner/SearchField/SearchInput/Button/index.jsx +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; -import { IconButton } from '@mui/material'; -import SearchIcon from '@mui/icons-material/Search'; -import styled from '@emotion/styled'; - -const SearchButtonWrapper = styled(IconButton)` - overflow: hidden; - color: #16b9b3; - width: 40px; - height: 100%; - right: 0; - border-radius: 0; - padding: 10px; - - &:hover { - background-color: white; - /* opacity: 0.8; - transition: opacity 0.5s; */ - } - @media (max-width: 767px) { - width: 40px; - padding: 0px; - /* border-radius: 20px; */ - } -`; - -const SearchButton = ({ routingPush }) => ( - { - routingPush(); - // addSearchHistory(); - }} - aria-label="search" - > - - -); - -export default SearchButton; diff --git a/components/Partner/SearchField/SearchInput/SuggestList/index.jsx b/components/Partner/SearchField/SearchInput/SuggestList/index.jsx deleted file mode 100644 index 738f997a..00000000 --- a/components/Partner/SearchField/SearchInput/SuggestList/index.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import Link from 'next/link'; - -const SuggestWrapper = styled.div` - width: 100%; - top: 20px; - left: 0px; - background-color: white; - position: absolute; - display: flex; - flex-direction: column; - justify-content: flex-start; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - border: 2px #37b9eb solid; - overflow: hidden; - border-top: 0; - /* box-shadow: 0 4px 6px rgb(32 33 36 / 28%); */ - ${({ isFocus, isEmpty }) => - isFocus && - !isEmpty && - css` - border: 0px; - `} - - a { - display: block; - padding: 6px 12px; - color: black; - - &:hover { - background-color: #eeeeee; - } - - &:first-of-type { - margin-top: 15px; - } - - &:last-of-type { - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - } - } -`; - -const SuggestList = ({ - isFocus, - keyword, - suggestKeywords, - addSearchHistory, - referenceSelected, -}) => { - const isServerSide = !process.browser; - if (isServerSide) return <>; - const historyKeywords = - JSON.parse(window?.localStorage.getItem('historyKeywords') || null) || []; - - if (!isFocus) return <>; - - if (keyword.length === 0 && historyKeywords.length > 0) { - return ( - - {historyKeywords.map(({ keyword: suggest, id }, idx) => ( - - {suggest} - - ))} - - ); - } - - return ( - - {keyword.length > 0 && - Array.isArray(suggestKeywords) && - suggestKeywords.map((suggest, idx) => ( - addSearchHistory(suggest)} - style={{ - background: referenceSelected === idx ? '#eee' : null, - wordBreak: 'break-all', - }} - > - {suggest} - - ))} - - ); -}; - -export default SuggestList; diff --git a/components/Partner/SearchField/SearchInput/index.jsx b/components/Partner/SearchField/SearchInput/index.jsx deleted file mode 100644 index d23aaaf4..00000000 --- a/components/Partner/SearchField/SearchInput/index.jsx +++ /dev/null @@ -1,178 +0,0 @@ -import React, { useState, useEffect, useCallback, useMemo } from 'react'; -// import ClickAwayListener from "@mui/base/ClickAwayListener"; -import InputBase from '@mui/material/InputBase'; -import Paper from '@mui/material/Paper'; -import styled from '@emotion/styled'; -// import { Search } from "@mui/icons-material"; -import { useRouter } from 'next/router'; -// import i18n from "../../../../../constants/i18n"; -// import SuggestList from "./SuggestList"; -import { IconButton, Box } from '@mui/material'; -import MicIcon from '@mui/icons-material/Mic'; -import dynamic from 'next/dynamic'; -import SearchButton from './Button'; - -const Speech = dynamic(import('../../../../shared/components/Speech'), { - ssr: false, -}); - -const SearchToolsWrapper = styled(Box)` - position: relative; - height: 40px; - margin-left: auto; - margin-right: 5px; - display: flex; -`; - -const SearchButtonWrapper = styled(IconButton)` - /* position: absolute; */ - overflow: hidden; - color: white; - border-radius: 10px; - float: right; - height: 100%; - width: 40px; - right: 0; - &:hover { - /* background-color: #007bbb; */ - } -`; -const FormWrapper = styled.form` - width: 100%; -`; - -const SearchInputWrapper = styled(Paper)` - height: 40px; - width: 100%; - position: relative; - border-radius: 10px; - // 可以試著淡化border - border: 2px solid #16b9b3; - box-shadow: none; - overflow: hidden; - - @media (max-width: 767px) { - border-radius: 20px; - width: 100%; - } -`; - -const PLACEHOLDER_TEXT = [ - '英語, 心理學, 自主學習 ...', - '好想出國喔～該來學英語了', - '我的腦袋不太好，但是知道邏輯要訓練', - '不會寫程式，也要了解科技趨勢', - '斜槓與文青的時間到了', - '誰說健身不是學習的一種？', - '生活在學習', -]; - -const InputBaseWrapper = styled(InputBase)` - background: white; - z-index: 10; - border-bottom-right-radius: 20px; - border-top-right-radius: 20px; - margin-left: 10px; - width: 100%; - - @media (max-width: 767px) { - border-radius: 20px; - } -`; - -const SearchInput = () => { - const { query, push } = useRouter(); - // const isServerSide = useMemo(() => !process.browser, []); - const [keyword, setKeyword] = useState(query?.q); - const [isSpeechMode, setIsSpeechMode] = useState(false); - // const [referenceSelected, setReferenceSelected] = useState(null); - - useEffect(() => { - setKeyword(query?.q ?? ''); - }, [query?.q]); - - const routingPush = useCallback( - (words) => { - if (words !== '') { - push({ - query: { - ...query, - q: words, - }, - }); - } else { - delete query.q; - push({ - query, - }); - } - }, - [push, query], - ); - - const placeholder = useMemo( - () => PLACEHOLDER_TEXT[Math.floor(Math.random() * 7)], - [], - ); - - return ( - - { - e.preventDefault(); - if (keyword !== '') { - push({ - query: { - ...query, - q: keyword, - }, - }); - } else if (keyword.length === 0) { - delete query.q; - push({ query }); - } - }} - > - { - // setReferenceSelected(null); - setKeyword(event.target.value); - }} - // components={<>} - /> - - {isSpeechMode && ( - - )} - - setIsSpeechMode(true)} - > - - - {}} /> - - - ); -}; - -export default SearchInput; diff --git a/components/Partner/SearchField/SearchTags.jsx b/components/Partner/SearchField/SearchTags.jsx new file mode 100644 index 00000000..976a54da --- /dev/null +++ b/components/Partner/SearchField/SearchTags.jsx @@ -0,0 +1,84 @@ +import React, { useState, useEffect } from 'react'; +import styled from '@emotion/styled'; +import { SEARCH_TAGS } from '@/constants/category'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +const StyledContainer = styled.div` + margin-top: 12px; + display: flex; + align-items: center; + width: 100%; + @media (max-width: 767px) { + margin-left: 10px 0; + flex-direction: column; + align-items: flex-start; + } + > p { + color: #536166; + font-size: 14px; + font-style: normal; + font-weight: 700; + line-height: 140%; + white-space: nowrap; + @media (max-width: 767px) { + margin-bottom: 8px; + } + } + ul { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + + -ms-overflow-style: none; /* IE */ + scrollbar-width: none; /* Firefox */ + scroll-behavior: smooth; + + margin-left: 24px; + + &::-webkit-scrollbar { + display: none; /* Chrome, Safari, Edge and Opera */ + } + @media (max-width: 767px) { + margin-left: 0; + } + } + ul > li { + color: #16b9b3; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; + margin-right: 16px; + flex: 0 0 auto; + cursor: pointer; + } +`; + +const SearchTags = () => { + const [getSearchParams, pushState] = useSearchParamsManager(); + const [_, setTag] = useState(); + const currentTags = getSearchParams('tag').toString(); + + const handleChange = (val) => { + pushState('tag', val.toString()); + }; + + useEffect(() => { + setTag(currentTags); + }, [currentTags]); + + return ( + +

    熱門標籤

    +
      + {SEARCH_TAGS['全部'].map((t) => ( +
    • handleChange(t)}> + {t} +
      • + ))} +
    +     + ); +}; + +export default SearchTags; diff --git a/components/Partner/SearchField/SelectedAreas.jsx b/components/Partner/SearchField/SelectedAreas.jsx new file mode 100644 index 00000000..d39a5086 --- /dev/null +++ b/components/Partner/SearchField/SelectedAreas.jsx @@ -0,0 +1,29 @@ +import Select from '@/shared/components/Select'; +import { AREAS } from '@/constants/areas'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +export default function SelectedAreas() { + const QUERY_KEY = 'area'; + const [getSearchParams, pushState] = useSearchParamsManager(); + + const handleChange = ({ target: { value } }) => { + pushState(QUERY_KEY, value.toString()); + }; + + return ( + + selected.length === 0 ? '教育階段' : selected.join('、') + } + sx={{ + '@media (max-width: 767px)': { + width: '100%', + }, + }} + /> + ); +} diff --git a/components/Partner/SearchField/SelectedFriendType.jsx b/components/Partner/SearchField/SelectedFriendType.jsx new file mode 100644 index 00000000..1d012942 --- /dev/null +++ b/components/Partner/SearchField/SelectedFriendType.jsx @@ -0,0 +1,35 @@ +import Select from '@/shared/components/Select'; +import { ROLE } from '@/constants/member'; +import useSearchParamsManager from '@/hooks/useSearchParamsManager'; + +const ROLE_TYPE = ROLE.map(({ label, key }) => ({ label, key })); + +const SelectedFriendType = () => { + const QUERY_KEY = 'role'; + const [getSearchParams, pushState] = useSearchParamsManager(); + + const handleChange = ({ target: { value } }) => { + pushState(QUERY_KEY, value.toString()); + }; + + return ( + { + onChangeHandler({ + key: 'educationStage', + value: event.target.value, + }); + }} + sx={{ width: '100%' }} + > + + 請選擇您或孩子目前的教育階段 + + {EDUCATION_STAGE.map(({ label, value }) => ( + + {label} + + ))} + + + + 居住地 + + + + + {/* 聯絡方式 */} + + + 聯絡方式 + + 聯絡資訊會呈現在你的公開頁面上，讓夥伴能聯繫你 + + + + + + Instagram + { + onChangeHandler({ + key: 'instagram', + value: event.target.value, + }); + }} + placeholder="請填寫ID" + sx={{ width: '100%' }} + /> + + + + + Discord + { + onChangeHandler({ + key: 'discord', + value: event.target.value, + }); + }} + placeholder="請填寫ID" + sx={{ width: '100%' }} + /> + + + + + Line + { + onChangeHandler({ + key: 'line', + value: event.target.value, + }); + }} + placeholder="請填寫ID" + sx={{ width: '100%' }} + /> + + + + + Facebook + { + onChangeHandler({ + key: 'facebook', + value: event.target.value, + }); + }} + placeholder="請填寫ID" + sx={{ width: '100%' }} + /> + + + + + + + + 想和夥伴一起 + + {WANT_TO_DO_WITH_PARTNER.map(({ label, value }) => ( + { + onChangeHandler({ + key: 'wantToDoList', + value, + isMultiple: true, + }); + }} + > + + {label} + + + ))} + + + + 可以和夥伴分享的事物 + { + onChangeHandler({ key: 'share', value: e.target.value }); + }} + /> + + + {/* TODO: NEED TO FIXED */} + 標籤 + { + onChangeHandler({ + key: 'tagList', + value: event.target.value, + }); + }} + /> + + 可以是學習領域、興趣等等的標籤，例如：音樂創作、程式語言、電繪、社會議題。 + + + + + 個人簡介 + { + onChangeHandler({ + key: 'selfIntroduction', + value: event.target.value, + }); + }} + /> + + + + + + 公開顯示居住地 + { + onChangeHandler({ + key: 'isOpenLocation', + value, + }); + }} + /> + + + 公開個人頁面尋找夥伴 + { + onChangeHandler({ + key: 'isOpenProfile', + value, + }); + }} + /> + + + + + { + router.push('/profile/myprofile'); + }} + > + 查看我的頁面 + + { + onUpdateUser(() => router.push('/profile')); + }} + > + 儲存資料 + + + + + + ); +} + +export default EditPage; diff --git a/components/Profile/Edit/useEditProfile.jsx b/components/Profile/Edit/useEditProfile.jsx new file mode 100644 index 00000000..e682236e --- /dev/null +++ b/components/Profile/Edit/useEditProfile.jsx @@ -0,0 +1,110 @@ +import dayjs from 'dayjs'; +import { useReducer } from 'react'; +import { useDispatch } from 'react-redux'; +import { updateUser } from '@/redux/actions/user'; + +const initialState = { + name: '', + photoURL: '', + birthDay: dayjs(), + gender: '', + roleList: [], + wantToDoList: [], + instagram: '', + facebook: '', + discord: '', + line: '', + educationStage: '-1', + location: 'tw', + tagList: [], + selfIntroduction: '', + share: '', + isOpenLocation: false, + isOpenProfile: false, + isLoadingSubmit: false, +}; + +const userReducer = (state, payload) => { + const { key, value, isMultiple = false } = payload; + if (isMultiple) { + return { + ...state, + [key]: state[key].includes(value) + ? state[key].filter((role) => role !== value) + : [...state[key], value], + }; + } else if (state && state[key] !== undefined) { + return { + ...state, + [key]: value, + }; + } + return state; +}; + +const useEditProfile = () => { + const reduxDispatch = useDispatch(); + + const [userState, stateDispatch] = useReducer(userReducer, initialState); + + // TODO ErrorMap + + const onChangeHandler = ({ key, value, isMultiple }) => { + stateDispatch({ key, value, isMultiple }); + }; + + const onSubmit = async ({ id, email }) => { + if (!id || !email) return; + const { + name, + birthDay, + gender, + roleList, + educationStage, + location, + wantToDoList, + share, + isOpenLocation, + isOpenProfile, + tagList, + selfIntroduction, + instagram, + facebook, + discord, + line, + } = userState; + + const payload = { + id, + email, + name, + birthDay, + gender, + roleList, + contactList: { + instagram, + facebook, + discord, + line, + }, + wantToDoList, + educationStage, + location, + tagList: [tagList], // TODO: 要修改 + selfIntroduction, + share, + isOpenLocation, + isOpenProfile, + }; + + reduxDispatch(updateUser(payload)); + }; + + return { + userState, + onChangeHandler, + onSubmit, + }; +}; + +export default useEditProfile; diff --git a/components/Profile/UserCard/Dropdown.jsx b/components/Profile/UserCard/Dropdown.jsx new file mode 100644 index 00000000..98ac11e0 --- /dev/null +++ b/components/Profile/UserCard/Dropdown.jsx @@ -0,0 +1,68 @@ +import { useState } from 'react'; +import styled from '@emotion/styled'; +import { Box, Button, Menu, MenuItem } from '@mui/material'; +import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'; +import Icon from '@mui/material/Icon'; + +const StyledMenu = styled((props) => ( + +))(() => ({ + '& .MuiPaper-root': { + borderRadius: 8, + minWidth: 150, + padding: '12px', + boxShadow: '0px 4px 10px 0px rgba(196, 194, 193, 0.40)', + }, + '& .MuiMenu-list': { + padding: '0', + }, + '& .MuiMenuItem-root': { + padding: '8px', + }, +})); + +export default function Dropdown({ sx }) { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + const handleClick = (event) => { + setAnchorEl(event.currentTarget); + }; + const handleClose = () => { + setAnchorEl(null); + }; + + return ( + + + + + 檢舉 + + + + ); +} diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx index 992a5332..9c4cfacb 100644 --- a/components/Profile/UserCard/index.jsx +++ b/components/Profile/UserCard/index.jsx @@ -1,9 +1,13 @@ -import { Box, Button, Chip, Skeleton, Typography } from '@mui/material'; +import styled from '@emotion/styled'; +import { Box, Chip, Button, Skeleton, Typography } from '@mui/material'; import { LazyLoadImage } from 'react-lazy-load-image-component'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; +import moment from 'moment'; import { useRouter } from 'next/router'; -import LOCATION from '../../../constants/countries.json'; +import { RiInstagramFill } from 'react-icons/ri'; +import { FaFacebook, FaLine, FaDiscord } from 'react-icons/fa'; +import DropdownMenu from './Dropdown'; const BottonEdit = { color: '#536166', @@ -24,172 +28,248 @@ const BottonEdit = { }, }; +const StyledProfileWrapper = styled(Box)` + width: 720px; + padding: 30px; + background-color: #fff; + border-radius: 20px; + @media (max-width: 767px) { + width: 100%; + padding: 16px; + } +`; +const StyledProfileBaseInfo = styled(Box)` + display: flex; + justify-content: flex-start; + align-items: center; +`; +const StyledProfileTitle = styled(Box)` + div { + display: flex; + align-items: center; + } + h2 { + color: #536166; + font-size: 18px; + font-style: normal; + font-weight: 700; + line-height: 120%; + margin-right: 10px; + } + span { + border-radius: 4px; + background: #f3f3f3; + padding: 3px 10px; + } + p { + color: #92989a; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; /* 19.6px */ + } +`; +const StyledProfileLocation = styled(Typography)` + margin-top: 12px; + display: flex; + justify-content: flex-start; + align-items: center; + color: #536166; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 140%; /* 16.8px */ +`; +const StyledProfileTag = styled(Box)` + margin-top: 24px; + display: flex; + flex-wrap: wrap; +`; +const StyledProfileOther = styled(Box)` + margin-top: 24px; + display: flex; + justify-content: space-between; + @media (max-width: 767px) { + flex-direction: column; + } +`; +const StyledProfileSocial = styled.ul` + display: flex; + align-items: center; + @media (max-width: 767px) { + flex-direction: column; + align-items: flex-start; + } + li { + align-items: center; + display: flex; + margin-right: 16px; + @media (max-width: 767px) { + margin-bottom: 8px; + } + } + li:last-of-type { + margin-right: 0; + } + li svg { + color: #16b9b3; + } + li p { + margin-left: 5px; + color: #293a3d; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 140%; + } +`; +const StyledProfileDate = styled.p` + font-size: 12px; + color: #92989a; + font-weight: 400; + line-height: 140%; + @media (max-width: 767px) { + text-align: right; + } +`; + function Tag({ label }) { return ( ); } -function UserCard({ isLoading, tagList, photoURL, userName, location }) { - const router = useRouter(); - if (isLoading) { - return ( - - - - - - - - - {' '} - - - - - - - - - ); - } + +function Avator({ photoURL }) { return ( - - - - } + variant="circular" + animation="wave" /> + } + /> + ); +} + +function UserCard({ + isLoginUser, + tagList = [], + role, + educationStepLabel, + photoURL, + userName, + location, + contactList = {}, + updatedDate, +}) { + const router = useRouter(); + + return ( + + {isLoginUser ? ( + ) : ( + + )} + + + - - {userName || '-'} - - - - - - + +
    +

    {userName || '-'}

    + {educationStepLabel && {educationStepLabel}} +
    +

    {role || '-'}

    +     + + {' '} - {LOCATION.find( - (item) => item.alpha2 === location || item.alpha3 === location, - )?.name || '-'} -     + {location || '-'} +     -     - - {tagList.map((tag) => ( - - ))} - -     + + + + {!!tagList.length && + !!tagList[0] && + tagList[0].split('、').map((tag) => )} + + + + + {!!contactList.instagram && ( +
  • + +

    {contactList.instagram}

    +
    • + )} + {!!contactList.facebook && ( +
  • + +

    {contactList.facebook}

    +
    • + )} + {!!contactList.line && ( +
  • + +

    {contactList.line}

    +
    • + )} + {!!contactList.discord && ( +
  • + +

    {contactList.discord}

    +
    • + )} +     + + {updatedDate + ? moment(updatedDate).fromNow() + : moment(new Date() - 500 * 60 * 60).fromNow()} + +     + ); } diff --git a/components/Profile/UserTabs/UserTabs.styled.jsx b/components/Profile/UserTabs/UserTabs.styled.jsx new file mode 100644 index 00000000..3662d6ab --- /dev/null +++ b/components/Profile/UserTabs/UserTabs.styled.jsx @@ -0,0 +1,48 @@ +import styled from '@emotion/styled'; +import { Box } from '@mui/material'; + +export const StyledTabContextBox = styled(Box)(({ theme }) => ({ + borderBottom: '1px solid #536166', + color: theme.secondary, // Assuming secondary is a valid theme property + borderColor: theme.secondary, // Use borderColor for indicator color + '@media (max-width: 767px)': { + width: '100%', + }, +})); + +export const StyledPanelBox = styled(Box)` + width: 720px; + padding: 40px 30px; + margin-top: '10px'; + @media (max-width: 767px) { + width: 100%; + padding: 30px; + } +`; + +export const StyledPanelText = styled(Box)` + display: flex; + p { + color: #293a3d; + font-weight: 500; + white-space: nowrap; + min-width: 50px; + } + span { + color: #536166; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 140%; + margin-left: 12px; + display: grid; + place-items: center; + } + @media (max-width: 767px) { + flex-direction: column; + span { + margin-left: 0px; + place-items: start; + } + } +`; diff --git a/components/Profile/UserTabs/index.jsx b/components/Profile/UserTabs/index.jsx index f461aac0..2be4d1bb 100644 --- a/components/Profile/UserTabs/index.jsx +++ b/components/Profile/UserTabs/index.jsx @@ -1,295 +1,65 @@ -import { Box, Typography, Divider, Skeleton } from '@mui/material'; +import { useState } from 'react'; +import { Box } from '@mui/material'; import Tab from '@mui/material/Tab'; import { TabContext } from '@mui/lab'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; -import { useState } from 'react'; -import { WANT_TO_DO_WITH_PARTNER } from '../../../constants/member'; -import { mapToTable } from '../../../utils/helper'; - -const UserTabs = ({ - description = '', - wantToLearnList = [], - isLoading = false, -}) => { - // console.log('description', description); - // console.log('wantToLearnList', wantToLearnList); +import { + StyledTabContextBox, + StyledPanelBox, + StyledPanelText, +} from './UserTabs.styled'; +const UserTabs = ({ description = '', wantToDoList = [], share = '' }) => { const [value, setValue] = useState('1'); - if (isLoading) { - return ( - - - - setValue(newValue)} - aria-label="lab API tabs example" - centered - sx={{ - width: '100%', - }} - > - - - - - - - - - 可分享 - - - - - - - 想一起 - - - - - - - 個人網站 - - - - - - - 簡介 - - - - - - - - - - - - - ); - } return ( - + setValue(newValue)} - aria-label="lab API tabs example" centered - sx={{ - width: '100%', - }} + sx={{ width: '100%' }} > - - + + + - - - - - - 可分享 - - - - - - - - 想一起 - - - {wantToLearnList - .map((item) => mapToTable(WANT_TO_DO_WITH_PARTNER)[item]) - .join(', ') || '-'} - - - - - - 個人網站 - - - - - - - - 簡介 - - - {description || '-'} - - - + + + + +

    可分享

    + {share || '尚未填寫'} +     + +

    想一起

    + {wantToDoList || '尚未填寫'} +     + +

    簡介

    + {description || '尚未填寫'} +     +     - - - 即將推出，敬請期待 - + + 即將推出，敬請期待 + + + 即將推出，敬請期待     diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx index 7714ee1b..6568b6c5 100644 --- a/components/Profile/index.jsx +++ b/components/Profile/index.jsx @@ -1,15 +1,16 @@ -import React, { useMemo, useState, useLayoutEffect } from 'react'; +import { useMemo, useState } from 'react'; import { useRouter } from 'next/router'; import { Box, Button } from '@mui/material'; -import { useAuthState } from 'react-firebase-hooks/auth'; -import { getAuth } from 'firebase/auth'; -import { getFirestore, doc, getDoc } from 'firebase/firestore'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import { CATEGORIES } from '../../constants/member'; -import { mapToTable } from '../../utils/helper'; +import { + WANT_TO_DO_WITH_PARTNER, + ROLE, + EDUCATION_STEP, +} from '@/constants/member'; +import { mapToTable } from '@/utils/helper'; +import SEOConfig from '@/shared/components/SEO'; import UserCard from './UserCard'; import UserTabs from './UserTabs'; -import SEOConfig from '../../shared/components/SEO'; const BottonBack = { color: '#536166', @@ -25,40 +26,38 @@ const BottonBack = { position: 'unset', }, }; +const WANT_TO_DO_WITH_PARTNER_TABLE = mapToTable(WANT_TO_DO_WITH_PARTNER); +const ROLELIST = mapToTable(ROLE); +const EDUCATION_STEP_TABLE = mapToTable(EDUCATION_STEP); -const Profile = () => { +const Profile = ({ + name, + email, + photoURL, + tagList = [], + roleList = [], + educationStage, + selfIntroduction, + wantToDoList = [], + location, + share, + enableContactBtn = false, + sendEmail, + handleContactPartner, + contactList = {}, + updatedDate, +}) => { const router = useRouter(); - const auth = getAuth(); - const [user, isLoadingUser] = useAuthState(auth); - const [userName, setUserName] = useState(''); - const [description, setDescription] = useState(''); - const [photoURL, setPhotoURL] = useState(''); - const [location, setLocation] = useState(''); - const [wantToLearnList, setWantToLearnList] = useState([]); - const [interestAreaList, setInterestAreaList] = useState([]); - const [isLoading, setIsLoading] = useState(isLoadingUser); - - useLayoutEffect(() => { - const db = getFirestore(); - if (!isLoadingUser && user?.uid) { - const docRef = doc(db, 'user', user?.uid || ''); - getDoc(docRef).then((docSnap) => { - const data = docSnap.data(); - console.log('data', data); - setUserName(data?.userName || ''); - setPhotoURL(data?.photoURL || ''); - setDescription(data?.description || ''); - setWantToLearnList(data?.wantToLearnList || []); - setInterestAreaList(data?.interestAreaList || []); - setLocation(data?.location || ''); - setIsLoading(false); - }); - } - }, [user, isLoadingUser]); + const [isLoading] = useState(false); + const role = roleList.length > 0 && ROLELIST[roleList[0]]; + const edu = educationStage && EDUCATION_STEP_TABLE[educationStage]; + const wantTodo = wantToDoList + .map((item) => WANT_TO_DO_WITH_PARTNER_TABLE[item]) + .join('、'); const SEOData = useMemo( () => ({ - title: `${userName}的小島｜島島阿學`, + title: `${name}的小島｜島島阿學`, description: '「島島阿學」盼能透過建立多元的學習資源網絡，讓自主學習者能找到合適的成長方法，進一步成為自己想成為的人，從中培養共好精神。目前正積極打造「可共編的學習資源平台」。', keywords: '島島阿學', @@ -67,53 +66,82 @@ const Profile = () => { imgLink: 'https://www.daoedu.tw/preview.webp', link: `${process.env.HOSTNAME}${router?.asPath}`, }), - [router?.asPath], + [router?.asPath, name], ); - const tagList = interestAreaList.map((item) => mapToTable(CATEGORIES)[item]); - return ( + + + {email !== sendEmail && ( + + )} ); }; diff --git a/components/Search/SearchResultList/Item/index.jsx b/components/Search/SearchResultList/Item/index.jsx index d77e067a..1865187a 100644 --- a/components/Search/SearchResultList/Item/index.jsx +++ b/components/Search/SearchResultList/Item/index.jsx @@ -102,13 +102,11 @@ const Item = ({ data, queryTags }) => { [data], ); - const title = useMemo( - () => - (data?.properties['資源名稱']?.title ?? []).find( - (item) => item?.type === 'text', - )?.plain_text, - [data?.properties], - ); + const titleTextList = (data?.properties['資源名稱']?.title ?? []) + .filter((item) => item?.type === 'text') + .map((item) => item?.plain_text); + + const title = useMemo(() => titleTextList.join(''), [data?.properties]); const contributors = useMemo( () => data?.properties['創建者']?.multi_select ?? [], diff --git a/constants/areas.js b/constants/areas.js new file mode 100644 index 00000000..c9a31cec --- /dev/null +++ b/constants/areas.js @@ -0,0 +1,25 @@ +export const AREAS = [ + { name: '線上', label: '線上' }, + { name: '台北市', label: '台北市' }, + { name: '新北市', label: '新北市' }, + { name: '基隆市', label: '基隆市' }, + { name: '桃園市', label: '桃園市' }, + { name: '新竹市', label: '新竹市' }, + { name: '新竹縣', label: '新竹縣' }, + { name: '苗栗縣', label: '苗栗縣' }, + { name: '台中市', label: '台中市' }, + { name: '南投縣', label: '南投縣' }, + { name: '彰化縣', label: '彰化縣' }, + { name: '雲林縣', label: '雲林縣' }, + { name: '嘉義市', label: '嘉義市' }, + { name: '嘉義縣', label: '嘉義縣' }, + { name: '台南市', label: '台南市' }, + { name: '高雄市', label: '高雄市' }, + { name: '屏東縣', label: '屏東縣' }, + { name: '台東縣', label: '台東縣' }, + { name: '花蓮縣', label: '花蓮縣' }, + { name: '宜蘭縣', label: '宜蘭縣' }, + { name: '澎湖縣', label: '澎湖縣' }, + { name: '金門縣', label: '金門縣' }, + { name: '連江縣', label: '連江縣' }, +]; diff --git a/constants/category.js b/constants/category.js index 79629194..eac54897 100644 --- a/constants/category.js +++ b/constants/category.js @@ -62,50 +62,62 @@ export const SEARCH_TAGS = { export const CATEGORIES = [ { key: 'language', + label: '語言與文學', value: '語言與文學', }, { key: 'math', + label: '數學與邏輯', value: '數學與邏輯', }, { key: 'comsci', + label: '資訊與工程', value: '資訊與工程', }, { key: 'humanity', + label: '人文社會', value: '人文社會', }, { key: 'natusci', + label: '自然科學', value: '自然科學', }, { key: 'art', + label: '藝術', value: '藝術', }, { key: 'education', + label: '教育', value: '教育', }, { key: 'life', + label: '生活', value: '生活', }, { key: 'health', + label: '運動/心理/醫學', value: '運動/心理/醫學', }, { key: 'business', + label: '商業與社會創新', value: '商業與社會創新', }, { key: 'multires', + label: '綜合型學習資源', value: '綜合型學習資源', }, { key: 'learningtools', + label: '學習/教學工具', value: '學習/教學工具', }, ]; @@ -204,11 +216,11 @@ export const NAV_LINK = [ link: '/search', target: '_self', }, - // { - // name: '找夥伴', - // link: '/partner', - // target: '_self', - // }, + { + name: '找夥伴', + link: '/partner', + target: '_self', + }, { name: '找活動', link: '/activities', diff --git a/constants/common.js b/constants/common.js new file mode 100644 index 00000000..a35f253d --- /dev/null +++ b/constants/common.js @@ -0,0 +1,2 @@ +export const BASE_URL = + process.env.NEXT_PUBLIC_API_URL || 'https://daodao-server.vercel.app'; diff --git a/constants/member.js b/constants/member.js index ef40c414..f585b8e8 100644 --- a/constants/member.js +++ b/constants/member.js @@ -54,6 +54,59 @@ export const ROLE = [ ]; export const EDUCATION_STEP = [ + { + label: '學齡前', + key: 'preschool', + value: 'preschool', + }, + { + label: '國小低年級', + key: 'elementary-junior', + value: 'elementary-junior', + }, + { + label: '國小中年級', + key: 'elementary-middle', + value: 'elementary-middle', + }, + { + label: '國小高年級', + key: 'elementary-senior', + value: 'elementary-senior', + }, + { + label: '國中', + key: 'junior-high', + value: 'junior-high', + }, + { + label: '高中', + key: 'high', + value: 'high', + }, + { + label: '大學', + key: 'university', + value: 'university', + }, + { + label: '碩士', + key: 'master', + value: 'master', + }, + { + label: '博士', + key: 'doctor', + value: 'doctor', + }, + { + label: '其他', + key: 'other', + value: 'other', + }, +]; + +export const EDUCATION_STAGE = [ { label: '學齡前', value: 'preschool', @@ -110,7 +163,7 @@ export const WANT_TO_DO_WITH_PARTNER = [ value: 'make-group-class', }, { - label: '做專案', + label: '做專案/競賽', key: 'do-project', value: 'do-project', }, diff --git a/hooks/useSearchParamsManager.jsx b/hooks/useSearchParamsManager.jsx new file mode 100644 index 00000000..58b50f8c --- /dev/null +++ b/hooks/useSearchParamsManager.jsx @@ -0,0 +1,43 @@ +import { useCallback } from 'react'; +import { useSearchParams } from 'next/navigation'; +import { useRouter } from 'next/router'; + +export default function useSearchParamsManager() { + const { push } = useRouter(); + const searchParams = useSearchParams(); + + const getSearchParams = useCallback( + (key) => + key + ? (searchParams.get(key) ?? '').split(',').filter(Boolean) + : Object.fromEntries(searchParams.entries()), + [searchParams], + ); + + const pushState = useCallback( + (key, value) => { + const query = Object.fromEntries(searchParams.entries()); + if (value) query[key] = value; + else delete query[key]; + push({ query }, undefined, { scroll: false }); + }, + [push, searchParams], + ); + + const generateParamsItems = useCallback( + (arr, keyObj = {}) => { + if (!Array.isArray(arr)) return []; + return arr.reduce((acc, param) => { + const values = getSearchParams(param).filter((value) => + keyObj[param] === 'PASS_STRING' + ? value + : keyObj[param]?.includes(value), + ); + return [...acc, { key: param, values }]; + }, []); + }, + [searchParams], + ); + + return [getSearchParams, pushState, generateParamsItems]; +} diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 00000000..2a2e4b3b --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "paths": { + "@/*": ["./*"] + } + } +} diff --git a/next.config.js b/next.config.js index 43ca88ab..4c9f5cac 100644 --- a/next.config.js +++ b/next.config.js @@ -5,7 +5,7 @@ const withPWA = require('next-pwa')({ module.exports = withPWA({ reactStrictMode: false, images: { - domains: ['imgur.com'], + domains: ['imgur.com', 'images.unsplash.com', 'lh3.googleusercontent.com'], }, env: { HOSTNAME: 'https://www.daoedu.tw', diff --git a/package.json b/package.json index 53d2b6fb..51031fbb 100644 --- a/package.json +++ b/package.json @@ -38,10 +38,12 @@ "global": "^4.4.0", "konva": "^7.0.0", "localforage": "^1.10.0", + "moment": "^2.29.4", "next": "^13.0.3", "next-pwa": "^5.6.0", "next-sitemap": "^1.6.203", "node-fetch": "^2.6.1", + "prop-types": "^15.8.1", "react": "^18.0.0", "react-copy-to-clipboard": "^5.0.4", "react-dom": "^18.0.0", @@ -60,6 +62,7 @@ "react-typed": "^1.2.0", "redux": "^4.1.0", "redux-logger": "^3.0.6", + "redux-persist": "^6.0.0", "redux-saga": "^1.1.3", "regenerator-runtime": "^0.13.9", "use-image": "^1.0.10" @@ -68,9 +71,11 @@ "@emotion/babel-plugin": "^11.9.2", "@next/eslint-plugin-next": "^13.2.1", "@types/chrome": "^0.0.206", + "babel-plugin-import": "^1.13.8", "eslint": "^8.35.0", "eslint-config-airbnb": "^18.2.1", "eslint-config-prettier": "^8.6.0", + "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-html": "^6.1.2", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jest": "^27.2.1", diff --git a/pages/_app.jsx b/pages/_app.jsx index 4c00e61b..896410a4 100644 --- a/pages/_app.jsx +++ b/pages/_app.jsx @@ -7,14 +7,18 @@ import { useRouter } from 'next/router'; import Script from 'next/script'; import Head from 'next/head'; import { initializeApp } from 'firebase/app'; -import GlobalStyle from '../shared/styles/Global'; -import themeFactory from '../shared/styles/themeFactory'; -import storeFactory from '../redux/store'; +import { persistStore } from 'redux-persist'; +import { PersistGate } from 'redux-persist/integration/react'; +import GlobalStyle from '@/shared/styles/Global'; +import themeFactory from '@/shared/styles/themeFactory'; +import storeFactory from '@/redux/store'; import { initGA, logPageView } from '../utils/analytics'; import Mode from '../shared/components/Mode'; import 'regenerator-runtime/runtime'; // Speech.js const store = storeFactory(); +const persistor = persistStore(store); + const firebaseConfig = { apiKey: 'AIzaSyBJK-FKcGHwDy1TMcoJcBdEqbTYpEquUi4', authDomain: 'daodaoedu-4ae8f.firebaseapp.com', @@ -93,7 +97,9 @@ const App = ({ Component, pageProps }) => { /> - + + + ); diff --git a/pages/group/index.jsx b/pages/group/index.jsx new file mode 100644 index 00000000..5b1f8265 --- /dev/null +++ b/pages/group/index.jsx @@ -0,0 +1,34 @@ +import React, { useMemo } from 'react'; +import { useRouter } from 'next/router'; +import SEOConfig from '@/shared/components/SEO'; +import Group from '@/components/Group'; +import Navigation from '@/shared/components/Navigation_v2'; +import Footer from '@/shared/components/Footer_v2'; + +function GroupPage() { + const router = useRouter(); + const SEOData = useMemo( + () => ({ + title: '揪團學習列表｜島島阿學', + description: + '「島島阿學」盼能透過建立多元的學習資源網絡，讓自主學習者能找到合適的成長方法，進一步成為自己想成為的人，從中培養共好精神。目前正積極打造「可共編的學習資源平台」。', + keywords: '島島阿學', + author: '島島阿學', + copyright: '島島阿學', + imgLink: 'https://www.daoedu.tw/preview.webp', + link: `${process.env.HOSTNAME}${router?.asPath}`, + }), + [router?.asPath], + ); + + return ( + <> + + + +