From 2fcc54f1aa0f1771d1244ff553815aa0f3b144d9 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Tue, 23 Jul 2024 00:27:43 +0800 Subject: [PATCH 01/12] fix: multiple tags presentation --- components/Profile/InputTags/index.jsx | 73 ++++++++++++++++---------- 1 file changed, 45 insertions(+), 28 deletions(-) diff --git a/components/Profile/InputTags/index.jsx b/components/Profile/InputTags/index.jsx index cb2b247b..6d0b091f 100644 --- a/components/Profile/InputTags/index.jsx +++ b/components/Profile/InputTags/index.jsx @@ -13,6 +13,7 @@ const Tag = ({ label, onCancel }) => { borderRadius: '4px', padding: '4px 8px', mr: '8px', + mb: '8px', }} > { ); }; -const StyledTagsField = styled(TextField)` +const StyledTagsWrapper = styled(Box)` + width: 100%; + border: 1px solid #dbdbdb; + border-radius: 4px; + align-items: center; + padding: 8px 16px; + min-height: 50px; + div { + &::before { + border-color: transparent; + } + } input { - padding-left: ${({ hasData }) => (hasData ? '0' : '16px')}; + padding: 0; } `; @@ -51,33 +63,38 @@ function InputTags({ value = [], change }) { } } }; + return ( - 0} - fullWidth="true" - placeholder="搜尋或新增標籤" - onKeyDown={keyDownHandle} - className="input-tags" - InputProps={ - value.length && { - startAdornment: ( - - {Array.isArray(value) && - value.map( - (item) => - typeof item === 'string' && ( - change(item)} - /> - ), - )} - - ), - } - } - /> + + + {Array.isArray(value) && + value.map( + (item) => + typeof item === 'string' && ( + change(item)} /> + ), + )} + + + ); } From 6684c891967c5e0db1e0d406b93c01404a742a7e Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Tue, 23 Jul 2024 23:45:32 +0800 Subject: [PATCH 02/12] fix: include activity title in send email (#68) --- components/Group/detail/Contact/index.jsx | 9 +++++---- components/Group/detail/index.jsx | 3 ++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx index db9f4821..52b4c9d9 100644 --- a/components/Group/detail/Contact/index.jsx +++ b/components/Group/detail/Contact/index.jsx @@ -48,8 +48,8 @@ const Transition = forwardRef((props, ref) => { function ContactButton({ user, - children, - title, + label, + activityTitle, description, descriptionPlaceholder, isLoading, @@ -99,6 +99,7 @@ function ContactButton({ from: me.email, to: user.email, subject: '【島島阿學】點開 Email，認識新夥伴', + activityTitle, title: '你發起的揪團有人來信！', text: message, information: [me.email, contact], @@ -129,7 +130,7 @@ function ContactButton({ alt="contact icon" style={{ marginRight: '8px' }} /> - {children || title} + {label} - {title} + {label} From d8134bca8699e4828c38910918432e10fee29af2 Mon Sep 17 00:00:00 2001 From: Johnson Mao <86179381+JohnsonMao@users.noreply.github.com> Date: Wed, 24 Jul 2024 23:07:22 +0800 Subject: [PATCH 03/12] chore: update text, link and dropdown (#69) * chore: update email subject * chore: update report link url * chore: update education stage dropdown in search group page --- components/Group/SearchField/SelectedEducationStep.jsx | 6 ++---- components/Group/detail/Contact/index.jsx | 2 +- components/Group/detail/More.jsx | 2 +- components/Profile/UserCard/Dropdown.jsx | 2 +- 4 files changed, 5 insertions(+), 7 deletions(-) diff --git a/components/Group/SearchField/SelectedEducationStep.jsx b/components/Group/SearchField/SelectedEducationStep.jsx index d1f856da..b415449b 100644 --- a/components/Group/SearchField/SelectedEducationStep.jsx +++ b/components/Group/SearchField/SelectedEducationStep.jsx @@ -1,9 +1,7 @@ import Select from '@/shared/components/Select'; -import { EDUCATION_STEP } from '@/constants/member'; +import { EDUCATION_STAGE } from '@/constants/member'; import useSearchParamsManager from '@/hooks/useSearchParamsManager'; -const EduStep = EDUCATION_STEP.slice(0, 7); - export default function SelectedEducationStep() { const QUERY_KEY = 'partnerEducationStep'; const [getSearchParams, pushState] = useSearchParamsManager(); @@ -17,7 +15,7 @@ export default function SelectedEducationStep() { multiple value={getSearchParams(QUERY_KEY)} onChange={handleChange} - items={EduStep} + items={EDUCATION_STAGE} itemLabel="label" itemValue="label" renderValue={(selected) => diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx index 52b4c9d9..10c928ea 100644 --- a/components/Group/detail/Contact/index.jsx +++ b/components/Group/detail/Contact/index.jsx @@ -98,7 +98,7 @@ function ContactButton({ photoUrl: me.photoURL, from: me.email, to: user.email, - subject: '【島島阿學】點開 Email，認識新夥伴', + subject: '【島島阿學】點開 Email，揪團有新消息', activityTitle, title: '你發起的揪團有人來信！', text: message, diff --git a/components/Group/detail/More.jsx b/components/Group/detail/More.jsx index f2be94b3..d8174dff 100644 --- a/components/Group/detail/More.jsx +++ b/components/Group/detail/More.jsx @@ -41,7 +41,7 @@ export default function More() { > Date: Thu, 25 Jul 2024 23:41:16 +0800 Subject: [PATCH 04/12] chore: update tooltip text for contact button (#72) --- components/Group/detail/Contact/index.jsx | 53 +++++++++++++++++------ 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/components/Group/detail/Contact/index.jsx b/components/Group/detail/Contact/index.jsx index 10c928ea..69e35242 100644 --- a/components/Group/detail/Contact/index.jsx +++ b/components/Group/detail/Contact/index.jsx @@ -1,6 +1,7 @@ import { useId, useState, forwardRef, useEffect } from 'react'; import { useRouter } from 'next/router'; import { useSelector } from 'react-redux'; +import Link from 'next/link'; import styled from '@emotion/styled'; import { Avatar, @@ -23,6 +24,19 @@ import Feedback from './Feedback'; const ROLELIST = mapToTable(ROLE); +const StyledButton = styled(Button)` + padding: 8px 36px; + line-height: 1.5; + border-radius: 20px; + color: #ffff; + background-color: #16b9b3; + font-size: 16px; + + &:disabled img { + mix-blend-mode: difference; + opacity: 0.3; + } +`; const StyledTitle = styled.label` display: block; color: var(--black-white-gray-dark, #293a3d); @@ -41,6 +55,18 @@ const StyledTextArea = styled(TextareaAutosize)` width: 100%; min-height: 128px; `; +const StyledLink = styled(Link)` + margin-top: 6px; + margin-left: 6px; + display: block; + color: black; + font-size: 12px; +`; +const StyledSpan = styled.span` + padding: 0 2px; + color: #16b9b3; + text-decoration: underline; +`; const Transition = forwardRef((props, ref) => { return ; @@ -66,6 +92,7 @@ function ContactButton({ const descriptionId = `modal-description-${id}`; const messageId = `message-${id}`; const contactId = `contact-${id}`; + const isLogin = !!me?._id; const role = ROLE.find(({ key }) => user?.roleList?.includes(key))?.label || '暫無資料'; @@ -108,21 +135,13 @@ function ContactButton({ useEffect(() => { if (!me?._id && open) router.push('/login'); - }, [me, open, router]); + }, [me?._id, open, router]); return ( - <> - + + {!isLogin && ( + + 註冊或登入 + 即可聯繫主揪！ + + )} setFeedback('')} /> - + ); } From 11122b3cd10075a66c2506918d9879161f932320 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Fri, 26 Jul 2024 00:01:08 +0800 Subject: [PATCH 05/12] =?UTF-8?q?feat:=20Nav=E5=8D=80=E6=9C=89=E5=B0=8E?= =?UTF-8?q?=E8=A6=BD=E5=88=97=E7=9A=84UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/profile/index.jsx | 2 +- .../MainNav/Hamberger/MenuItem.jsx | 41 ++--- .../MainNav/Hamberger/MenuList.jsx | 44 +++-- .../Navigation_v2/MainNav/Hamberger/index.jsx | 8 +- .../MainNav/SubList/UserAvatar/index.jsx | 159 +++++++++++------- .../Navigation_v2/MainNav/SubList/index.jsx | 31 ++-- .../Navigation_v2/MainNav/index.jsx | 4 +- .../components/Navigation_v2/PromotionBar.jsx | 20 +-- shared/components/Navigation_v2/index.jsx | 40 +++-- 9 files changed, 204 insertions(+), 145 deletions(-) diff --git a/pages/profile/index.jsx b/pages/profile/index.jsx index 8bb5467b..4ccdb670 100644 --- a/pages/profile/index.jsx +++ b/pages/profile/index.jsx @@ -21,7 +21,7 @@ const HomePageWrapper = styled.div` `; const StyledTab = styled(Tab)(({ isActive, mobileScreen }) => ({ - width: `${mobileScreen ? '50%' : '100%'}`, + width: `${mobileScreen ? '33%' : '100%'}`, color: '#536166', borderRadius: '8px', '&.Mui-selected': { diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx index 64e5dbb2..6d158123 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuItem.jsx @@ -37,47 +37,32 @@ const MenuItemWrapper = styled.li` `; const ItemWrapper = styled.div` - font-size: 30px; - padding: 1rem 0; - margin: 0 5%; + font-size: 18px; + padding: 12px 24px; + border-radius: 8px; cursor: pointer; - color: #fafafa; transition: color 0.2s ease-in-out; animation: 0.5s ${slideInFrames} forwards; + color: #536166; ${(props) => css` animation-delay: ${props.delay}; `} &:hover { - color: 'gray'; + background-color: #def5f5; + font-weight: bold; } `; -const LineStyle = styled.div` - width: '90%'; - height: '1px'; - background: '#fafafa'; - margin: '0 auto'; - animation: 0.5s ${shrinkFrames} forwards; - ${(props) => css` - animation-delay: ${props.delay}; - `} -`; - const MenuItem = ({ delay, text, link, onClick }) => { - if (link) { - return ( - - - {text} - - - - ); - } return ( - {text} - + {link ? ( + + {text} + + ) : ( + {text} + )} ); }; diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx index add3b866..d0212b87 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx @@ -1,45 +1,55 @@ -// import { keyframes, css } from '@emotion/react'; import styled from '@emotion/styled'; -import { Box } from '@mui/material'; import { useRouter } from 'next/router'; import MenuItem from './MenuItem'; import UserAvatar from '../SubList/UserAvatar'; import { useSelector } from 'react-redux'; +import { Button } from '@mui/material'; const MenuWrapper = styled.div` position: fixed; - top: 0; + top: ${(props) => props.shiftTop}; left: 0; - height: ${(props) => (props.open ? '100%' : 0)}; + height: ${(props) => (props.open ? '100dvh' : 0)}; width: 100vw; display: flex; flex-direction: column; - background: #16b9b3; - opacity: 0.95; - color: #fafafa; + background: white; transition: height 0.3s ease; z-index: 100; overflow: auto; `; const MenuListWrapper = styled.div` - padding: 3rem; - margin-top: 30px; + padding: 1rem; position: relative; z-index: 100; + height: inherit; `; -const Menu = ({ open, list, onCloseMenu }) => { - const router = useRouter(); +const MenuDivider = styled.div` + height: 1px; + width: 100%; + background-color: #def5f5; + margin: 1rem 0; +`; +const LoginButton = styled(Button)` + width: 100%; + height: 40px; + padding: 5px 20px; + color: #536166; + font-size: 16px; + line-height: 1.4; + border-radius: 20px; + border: 1px solid #16b9b3; +`; +const Menu = ({ open, list, onCloseMenu, shiftTop = '80px' }) => { const user = useSelector((state) => state.user); - console.log("MenuList", user); return ( - + {open && ( - {list.map((value, index) => { return ( { /> ); })} + + {user._id ? ( + + ) : ( + 登入 + )} )} diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx index 7db6c736..ee6d8bc3 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/index.jsx @@ -19,7 +19,10 @@ const MobileLinkListWrapper = styled.ul` li { flex: none; width: 100%; - border-bottom: solid 1px white; + } + + li a { + color: #536166; } svg[type='menu']:checked + ul { @@ -39,13 +42,14 @@ const MobileLinkListWrapper = styled.ul` } `; -const MainNav = () => { +const MainNav = ({ shiftTop = 0 }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const avatar = ''; const isUserLogin = true; return ( { +const slideInFrames = keyframes` + 0% { + transform: translateX(-2%); + } + 100% { + transform: translateX(0); + } +`; + +const StyledMenuItem = styled(MenuItem)` + animation: 0.5s ${slideInFrames} forwards; + transition: color 0.2s ease-in-out; + color: #536166; + border-radius: 4px; + ${(props) => css` + animation-delay: ${props.delay}; + padding: ${props.isPadScreen} ? 12px : 12px 52px; + font-size: ${props.isPadScreen} ? 18px : 16px; + magrin: ${props.isPadScreen} ? 8px 0; : '0'; + &:hover { + background-color: #DEF5F5; + } + `} +`; + +const UserAvatar = ({ onCloseMenu = () => {}, user }) => { + const isPadScreen = useMediaQuery('(max-width: 767px)'); + const { push } = useRouter(); - const user = useSelector((state) => state.user); const [isOpenMenu, setIsOpenMenu] = useState(null); - const handleSignOut = () => { - console.log('handleSignOut'); + const logout = () => { + dispatch(userLogout()); + setIsOpenMenu(false); + onCloseMenu(); + push('/'); }; - if (!user._id) { - return ( - { - push('/login'); - }} - > - - - ); - } return ( - - setIsOpenMenu(event.currentTarget)} - onClick={() => { - setIsOpenMenu(false); - push('/profile'); + + setIsOpenMenu(!isOpenMenu)} + > + {user.name && ( + + )} + {isPadScreen && ( + <> + + {user.name} + + {isOpenMenu ? : } + + )} + + - setIsOpenMenu(false)} > - { - setIsOpenMenu(false); - push('/profile'); - }} - > - 個人頁面 - - { - setIsOpenMenu(false); - push('/profile'); - }} - > - 帳號設定 - - { - handleSignOut(); - push('/'); - setIsOpenMenu(false); - }} - > - 登出 - - - + + {[ + { name: '個人資料', id: 'person-setting' }, + { name: '我的揪團', id: 'my-group' }, + { name: '帳號設定', id: 'account-setting' }, + ].map((v, i) => ( + { + setIsOpenMenu(false); + onCloseMenu(); + push('/profile?id=' + v.id); + }} + > + {v.name} + + ))} + + 登出 + + + ); }; diff --git a/shared/components/Navigation_v2/MainNav/SubList/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/index.jsx index cde450ff..a3ec13bd 100644 --- a/shared/components/Navigation_v2/MainNav/SubList/index.jsx +++ b/shared/components/Navigation_v2/MainNav/SubList/index.jsx @@ -1,14 +1,10 @@ import React from 'react'; import styled from '@emotion/styled'; import Link from 'next/link'; -import { Typography } from '@mui/material'; -import useFirebase from '../../../../../hooks/useFirebase'; import UserAvatar from './UserAvatar'; -// import { useAuthState } from "react-firebase-hooks/auth"; -// import { signInWithPopup } from "firebase/auth"; -// import { useDispatch, useSelector } from "react-redux"; -// import { userLogin } from "../../../../../redux/actions/user"; -// import { useCollectionData } from "react-firebase-hooks/firestore"; +import { useSelector } from 'react-redux'; +import { Button } from '@mui/material'; +import { BASE_URL } from '@/constants/common'; const LinkListWrapper = styled.ul` display: flex; @@ -50,8 +46,7 @@ const SubListWrapper = styled.div` `; const SubList = () => { - // const dispatch = useDispatch(); - const { auth, user } = useFirebase(); + const user = useSelector((state) => state.user); return ( @@ -64,7 +59,23 @@ const SubList = () => {
  • - + {user._id ? ( + + ) : ( + + )}
    • diff --git a/shared/components/Navigation_v2/MainNav/index.jsx b/shared/components/Navigation_v2/MainNav/index.jsx index 26b8731f..e929694f 100644 --- a/shared/components/Navigation_v2/MainNav/index.jsx +++ b/shared/components/Navigation_v2/MainNav/index.jsx @@ -24,7 +24,7 @@ const BoxWrapper = styled(Box)` } `; -const MainNav = () => { +const MainNav = ({ height }) => { return ( @@ -34,7 +34,7 @@ const MainNav = () => { {/* right list */} {/* mobile only */} - + ); diff --git a/shared/components/Navigation_v2/PromotionBar.jsx b/shared/components/Navigation_v2/PromotionBar.jsx index 8320649a..20aa552b 100644 --- a/shared/components/Navigation_v2/PromotionBar.jsx +++ b/shared/components/Navigation_v2/PromotionBar.jsx @@ -2,6 +2,10 @@ import { useState, useEffect } from 'react'; import styled from '@emotion/styled'; const PromotionBarWrapper = styled.div` + width: 100%; + position: fixed; + top: 0; + padding-bottom: 20px; background-color: #f37b5f; color: #fff; padding: 7px; @@ -46,25 +50,15 @@ const CloseButton = styled.span` } `; -const PromotionBar = ({ link, text }) => { - const [show, setShow] = useState(undefined); - - useEffect(() => { - setShow(true); - }, []); - - const handleClose = () => { - setShow(false); - }; - +const PromotionBar = ({ isShow, link, text, toggleAction }) => { return ( <> - {show && ( + {isShow && ( {text} - + toggleAction(false)} /> )} diff --git a/shared/components/Navigation_v2/index.jsx b/shared/components/Navigation_v2/index.jsx index ba84470c..942dedad 100644 --- a/shared/components/Navigation_v2/index.jsx +++ b/shared/components/Navigation_v2/index.jsx @@ -1,20 +1,23 @@ -import React from 'react'; +import { useEffect, useState } from 'react'; import styled from '@emotion/styled'; import { AppBar } from '@mui/material'; import MainNav from './MainNav'; import PromotionBar from './PromotionBar'; -const NavigationWrapper = styled(AppBar)` - display: flex; - justify-content: center; - align-items: center; - height: 80px; - padding-left: 5%; - padding-right: 5%; - .MuiToolbar-root { - padding: 0; - } -`; +const NavigationWrapper = styled(AppBar)(({ hasPromote }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '80px', + padding: '0 5%', + ...(hasPromote && { + padding: '38px 5% 0', + height: '118px', + }), + '.MuiToolbar-root': { + padding: '0', + }, +})); const donateTexts = [ '✨島島阿學需要你的支持，讓人人都享有同等資源✨', @@ -32,12 +35,19 @@ const buildRandomText = () => { // `; // 問卷 https://docs.google.com/forms/d/e/1FAIpQLSeyU9-Q-kIWp5uutcik3h-RO4o5VuG6oG0m-4u1Ua18EOu3aw/viewform const Navigation = () => { + const [showPromotetionBar, setShowPromotionBar] = useState(true); + return ( <> - - + + {/* */} - + {/* */} From 59ff4b3cf90b9d274c7b7ff09549eabc69a9c1e8 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Fri, 26 Jul 2024 00:11:52 +0800 Subject: [PATCH 06/12] fix(mainNav): Add import useDispatch --- .../Navigation_v2/MainNav/SubList/UserAvatar/index.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx index b5e36686..68436908 100644 --- a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx +++ b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx @@ -3,6 +3,7 @@ import { keyframes, css } from '@emotion/react'; import styled from '@emotion/styled'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import { useDispatch } from 'react-redux'; import { userLogout } from '@/redux/actions/user'; import useMediaQuery from '@mui/material/useMediaQuery'; @@ -35,6 +36,7 @@ const StyledMenuItem = styled(MenuItem)` `; const UserAvatar = ({ onCloseMenu = () => {}, user }) => { + const dispatch = useDispatch(); const isPadScreen = useMediaQuery('(max-width: 767px)'); const { push } = useRouter(); @@ -85,7 +87,7 @@ const UserAvatar = ({ onCloseMenu = () => {}, user }) => { zIndex: 1, }} > - + {[ { name: '個人資料', id: 'person-setting' }, { name: '我的揪團', id: 'my-group' }, From 37954948cf5837f3d29e188ad213725ead4687b2 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Fri, 26 Jul 2024 01:02:48 +0800 Subject: [PATCH 07/12] fix(Navbar): show items in avatar --- .../Navigation_v2/MainNav/Hamberger/MenuList.jsx | 4 ++-- .../MainNav/SubList/UserAvatar/index.jsx | 16 ++++++++++------ 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx index d0212b87..cdbff87f 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; -import { useRouter } from 'next/router'; import MenuItem from './MenuItem'; import UserAvatar from '../SubList/UserAvatar'; import { useSelector } from 'react-redux'; import { Button } from '@mui/material'; +import { BASE_URL } from '@/constants/common'; const MenuWrapper = styled.div` position: fixed; @@ -65,7 +65,7 @@ const Menu = ({ open, list, onCloseMenu, shiftTop = '80px' }) => { {user._id ? ( ) : ( - 登入 + 登入 )} )} diff --git a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx index 68436908..1af85cd1 100644 --- a/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx +++ b/shared/components/Navigation_v2/MainNav/SubList/UserAvatar/index.jsx @@ -26,11 +26,12 @@ const StyledMenuItem = styled(MenuItem)` border-radius: 4px; ${(props) => css` animation-delay: ${props.delay}; - padding: ${props.isPadScreen} ? 12px : 12px 52px; - font-size: ${props.isPadScreen} ? 18px : 16px; - magrin: ${props.isPadScreen} ? 8px 0; : '0'; + min-width: 126px; + padding: ${props.isPadScreen ? '12px 52px' : '12px'}; + font-size: ${props.isPadScreen ? '18px' : '16px'}; + margin-top: ${props.isPadScreen ? '8px' : '0'}; &:hover { - background-color: #DEF5F5; + background-color: #def5f5; } `} `; @@ -87,13 +88,14 @@ const UserAvatar = ({ onCloseMenu = () => {}, user }) => { zIndex: 1, }} > - + {[ { name: '個人資料', id: 'person-setting' }, { name: '我的揪團', id: 'my-group' }, { name: '帳號設定', id: 'account-setting' }, ].map((v, i) => ( {}, user }) => { ))} - 登出 + + 登出 + From 989d7e44cf27550f5dab4aa1ec8e4f963c0709d8 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Wed, 31 Jul 2024 00:35:08 +0800 Subject: [PATCH 08/12] style(hamburger): Add padding in menuWrapper --- shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx index cdbff87f..ad6bf294 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx @@ -15,6 +15,7 @@ const MenuWrapper = styled.div` flex-direction: column; background: white; transition: height 0.3s ease; + padding-bottom: 160px; z-index: 100; overflow: auto; `; From 8293df1c24e0f6272d95994722627077e85fd866 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Wed, 31 Jul 2024 00:46:12 +0800 Subject: [PATCH 09/12] fix(hamburger): add conditional styling to hamburger menu based on state --- shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx index ad6bf294..604743f7 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx @@ -15,7 +15,7 @@ const MenuWrapper = styled.div` flex-direction: column; background: white; transition: height 0.3s ease; - padding-bottom: 160px; + padding-bottom: ${(props) => (props.open ? '160px' : 0)}; z-index: 100; overflow: auto; `; From f40de0f272f274f538f28b377910ad5954a3bb0e Mon Sep 17 00:00:00 2001 From: hsuifng Date: Fri, 2 Aug 2024 14:25:56 +0800 Subject: [PATCH 10/12] chore(signin): Modify signin and profile based on router.query --- components/Profile/UserCard/Avator.jsx | 38 ++++ .../Profile/UserCard/SocialMediaItem.jsx | 15 ++ components/Profile/UserCard/Tag.jsx | 19 ++ .../Profile/UserCard/UserCard.styled.jsx | 120 ++++++++++ components/Profile/UserCard/index.jsx | 215 +++--------------- pages/signin/index.jsx | 14 +- .../MainNav/Hamberger/MenuList.jsx | 2 +- 7 files changed, 238 insertions(+), 185 deletions(-) create mode 100644 components/Profile/UserCard/Avator.jsx create mode 100644 components/Profile/UserCard/SocialMediaItem.jsx create mode 100644 components/Profile/UserCard/Tag.jsx create mode 100644 components/Profile/UserCard/UserCard.styled.jsx diff --git a/components/Profile/UserCard/Avator.jsx b/components/Profile/UserCard/Avator.jsx new file mode 100644 index 00000000..15a7efd7 --- /dev/null +++ b/components/Profile/UserCard/Avator.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { Skeleton } from '@mui/material'; + +const Avator = ({ photoURL }) => { + return ( + + } + /> + ); +}; + +export default Avator; diff --git a/components/Profile/UserCard/SocialMediaItem.jsx b/components/Profile/UserCard/SocialMediaItem.jsx new file mode 100644 index 00000000..5cfd273e --- /dev/null +++ b/components/Profile/UserCard/SocialMediaItem.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Box } from '@mui/material'; + +const SocialMediaItem = ({ link, text, tag, iconComponent }) => { + return ( + + {iconComponent} + + {text} + + + ); +}; + +export default SocialMediaItem; diff --git a/components/Profile/UserCard/Tag.jsx b/components/Profile/UserCard/Tag.jsx new file mode 100644 index 00000000..1a55daf1 --- /dev/null +++ b/components/Profile/UserCard/Tag.jsx @@ -0,0 +1,19 @@ +import { Chip } from '@mui/material'; + +const Tag = ({ label }) => { + return ( + + ); +}; + +export default Tag; diff --git a/components/Profile/UserCard/UserCard.styled.jsx b/components/Profile/UserCard/UserCard.styled.jsx new file mode 100644 index 00000000..8c822526 --- /dev/null +++ b/components/Profile/UserCard/UserCard.styled.jsx @@ -0,0 +1,120 @@ +import styled from '@emotion/styled'; +import { Box, Typography } from '@mui/material'; + +export const StyledProfileWrapper = styled(Box)` + width: 100%; + padding: 30px; + background-color: #fff; + border-radius: 20px; + @media (max-width: 767px) { + width: 100%; + padding: 16px; + } +`; + +export const StyledProfileBaseInfo = styled(Box)` + display: flex; + justify-content: flex-start; + align-items: center; +`; + +export 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 */ + } +`; + +export 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 */ +`; + +export const StyledProfileTag = styled(Box)` + margin-top: 24px; + display: flex; + flex-wrap: wrap; +`; + +export const StyledProfileOther = styled(Box)` + margin-top: 24px; + display: flex; + justify-content: space-between; + align-items: flex-end; + @media (max-width: 767px) { + flex-direction: column; + align-items: flex-start; + } +`; + +export const StyledProfileSocial = styled.ul` + display: flex; + align-items: center; + flex-direction: column; + align-items: flex-start; + li { + align-items: center; + display: flex; + margin-right: 16px; + margin-bottom: 8px; + } + li:last-of-type { + margin-bottom: 0; + } + li svg { + color: #16b9b3; + } + li p, + li a { + margin-left: 5px; + color: #293a3d; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 140%; + } + + li a { + color: #16b9b3; + cursor: pointer; + text-decoration: underline; + } +`; + +export const StyledProfileDate = styled.p` + font-size: 12px; + color: #92989a; + font-weight: 400; + line-height: 140%; + @media (max-width: 767px) { + width: 100%; + text-align: right; + } +`; diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx index 6330c0f6..e10a8a37 100644 --- a/components/Profile/UserCard/index.jsx +++ b/components/Profile/UserCard/index.jsx @@ -1,13 +1,25 @@ -import styled from '@emotion/styled'; -import { Box, Chip, Button, Skeleton, Typography } from '@mui/material'; -import { LazyLoadImage } from 'react-lazy-load-image-component'; +import { BASE_URL } from '@/constants/common'; +import { useRouter } from 'next/router'; +import moment from 'moment'; +import { Box, Button } from '@mui/material'; import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; -import moment from 'moment'; -import { useRouter } from 'next/router'; import { RiInstagramFill } from 'react-icons/ri'; import { FaFacebook, FaLine, FaDiscord } from 'react-icons/fa'; import DropdownMenu from './Dropdown'; +import SocialMediaItem from './SocialMediaItem'; +import AvatorComponent from './Avator'; +import Tag from './Tag'; +import { + StyledProfileWrapper, + StyledProfileBaseInfo, + StyledProfileDate, + StyledProfileLocation, + StyledProfileOther, + StyledProfileSocial, + StyledProfileTag, + StyledProfileTitle, +} from './UserCard.styled'; const BottonEdit = { color: '#536166', @@ -25,166 +37,6 @@ const BottonEdit = { }, }; -const StyledProfileWrapper = styled(Box)` - width: 100%; - 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; - align-items: flex-end; - @media (max-width: 767px) { - flex-direction: column; - align-items: flex-start; - } -`; -const StyledProfileSocial = styled.ul` - display: flex; - align-items: center; - flex-direction: column; - align-items: flex-start; - li { - align-items: center; - display: flex; - margin-right: 16px; - margin-bottom: 8px; - } - li:last-of-type { - margin-bottom: 0; - } - li svg { - color: #16b9b3; - } - li p, - li a { - margin-left: 5px; - color: #293a3d; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 140%; - } - - li a { - color: #16b9b3; - cursor: pointer; - text-decoration: underline; - } -`; -const StyledProfileDate = styled.p` - font-size: 12px; - color: #92989a; - font-weight: 400; - line-height: 140%; - @media (max-width: 767px) { - width: 100%; - text-align: right; - } -`; - -function Tag({ label }) { - return ( - - ); -} - -function Avator({ photoURL }) { - return ( - - } - /> - ); -} - function UserCard({ isLoginUser, tagList = [], @@ -217,7 +69,7 @@ function UserCard({ )} - +
    @@ -248,29 +100,32 @@ function UserCard({ - {!!contactList.instagram && ( + {!!contactList['聯繫方式'] && (
  • - - {contactList.instagram} + {contactList['聯繫方式']}
    • )} + {!!contactList.instagram && ( + } + /> + )} {!!contactList.facebook && ( -
  • - - - {contactList.facebook} - -
    • + } + /> )} {!!contactList.line && (
  • diff --git a/pages/signin/index.jsx b/pages/signin/index.jsx index f2dbf4e1..f57a16ad 100644 --- a/pages/signin/index.jsx +++ b/pages/signin/index.jsx @@ -63,7 +63,11 @@ function EditPage() { const router = useRouter(); const dispatch = useDispatch(); + const { id, token } = router.query; + const { + _id: userId, + token: userToken, birthDay: userBirthDay, gender: userGender, roleList: userRoleList, @@ -72,7 +76,6 @@ function EditPage() { createdDate, updatedDate, } = useSelector((state) => state?.user); - const { id } = router.query; const [isSubscribeEmail, setIsSubscribeEmail] = useState(false); const [birthDay, setBirthDay] = useState(dayjs()); @@ -80,14 +83,17 @@ function EditPage() { const [roleList, setRoleList] = useState([]); const fetchUser = async () => { - dispatch(fetchUserById(id)); + if (!userId) { + dispatch(fetchUserById(id, token)); + } + router.push(`/signin?id=${id}`); }; useEffect(() => { - if (id) { + if (id || token) { fetchUser(); } - }, [id]); + }, [id, token]); useEffect(() => { setBirthDay(userBirthDay ? dayjs(userBirthDay) : dayjs()); diff --git a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx index 604743f7..2b8c7138 100644 --- a/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx +++ b/shared/components/Navigation_v2/MainNav/Hamberger/MenuList.jsx @@ -15,7 +15,7 @@ const MenuWrapper = styled.div` flex-direction: column; background: white; transition: height 0.3s ease; - padding-bottom: ${(props) => (props.open ? '160px' : 0)}; + padding-bottom: ${(props) => (props.open ? '180px' : 0)}; z-index: 100; overflow: auto; `; From 1aa2f28760313a93bf9a6a2757534878c0b8780b Mon Sep 17 00:00:00 2001 From: hsuifang Date: Thu, 8 Aug 2024 14:28:59 +0800 Subject: [PATCH 11/12] chore: TEMP TEST --- pages/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/pages/index.jsx b/pages/index.jsx index b132474b..84e9f7ab 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -54,7 +54,11 @@ const HomePage = () => { useEffect(() => { if (token) { dispatch(fetchUserById(id, token)); - router.push('/'); + // router.push('/'); + // console.log('----------'); + // console.log('fetch user'); + // console.log('----------'); + console.log('========2024-01-01 00:00:00================'); } }, [id, token]); From bb9653209018aec63b086da363423fe6300247c6 Mon Sep 17 00:00:00 2001 From: hsuifang Date: Thu, 8 Aug 2024 14:50:22 +0800 Subject: [PATCH 12/12] Revert "chore: TEMP TEST" This reverts commit 1aa2f28760313a93bf9a6a2757534878c0b8780b. --- pages/index.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/pages/index.jsx b/pages/index.jsx index 84e9f7ab..b132474b 100644 --- a/pages/index.jsx +++ b/pages/index.jsx @@ -54,11 +54,7 @@ const HomePage = () => { useEffect(() => { if (token) { dispatch(fetchUserById(id, token)); - // router.push('/'); - // console.log('----------'); - // console.log('fetch user'); - // console.log('----------'); - console.log('========2024-01-01 00:00:00================'); + router.push('/'); } }, [id, token]);