From 1485155fc8c8824628e4112aa04ff081d4fd707e Mon Sep 17 00:00:00 2001 From: hsuifang Date: Mon, 18 Mar 2024 00:24:14 +0800 Subject: [PATCH 1/2] fix: Fix logical of location property in useEditProfile --- components/Profile/Edit/useEditProfile.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/Profile/Edit/useEditProfile.jsx b/components/Profile/Edit/useEditProfile.jsx index c63ef380..897c8945 100644 --- a/components/Profile/Edit/useEditProfile.jsx +++ b/components/Profile/Edit/useEditProfile.jsx @@ -164,7 +164,8 @@ const useEditProfile = () => { }, wantToDoList, educationStage, - location: `${country}@${city}@${district}`, + location: + country === '國外' ? country : [country, city, district].join('@'), tagList, selfIntroduction, share, From 176583d7c8e29c1da4f5f4016b035e1f8bfb305d Mon Sep 17 00:00:00 2001 From: hsuifang Date: Mon, 18 Mar 2024 00:26:10 +0800 Subject: [PATCH 2/2] feat: Add mygroup in profile and modify style --- components/Profile/MyGroup/index.jsx | 19 +++-- components/Profile/UserCard/index.jsx | 49 ++++++++----- components/Profile/UserTabs/UserInfoBasic.jsx | 30 ++++++++ components/Profile/UserTabs/index.jsx | 51 +++++-------- components/Profile/index.jsx | 72 +++++++++++++++++-- 5 files changed, 157 insertions(+), 64 deletions(-) create mode 100644 components/Profile/UserTabs/UserInfoBasic.jsx diff --git a/components/Profile/MyGroup/index.jsx b/components/Profile/MyGroup/index.jsx index e192c73e..33dc0090 100644 --- a/components/Profile/MyGroup/index.jsx +++ b/components/Profile/MyGroup/index.jsx @@ -21,9 +21,11 @@ const StyledGroupsWrapper = styled.div` @media (max-width: 767px) { padding: 16px 20px; } + + ${(props) => props.sx} `; -const MyGroup = () => { +const MyGroup = ({ hasTitle = true, sx }) => { const [response, setResponse] = useState(null); const me = useSelector((state) => state.user); const { isFetching } = useFetch(`${GROUP_API_URL}/user/${me?._id}`, { @@ -71,12 +73,15 @@ const MyGroup = () => { }; return ( - - - 我的揪團 - + + {hasTitle && ( + + 我的揪團 + + )} + {isFetching ? ( diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx index 358ff6ce..634b1f04 100644 --- a/components/Profile/UserCard/index.jsx +++ b/components/Profile/UserCard/index.jsx @@ -21,10 +21,7 @@ const BottonEdit = { color: '#16B9B3', }, '@media (max-width: 767px)': { - position: 'absolute', - right: '25%', - top: '252%', - width: '160px', + display: 'none', }, }; @@ -89,32 +86,31 @@ 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; - @media (max-width: 767px) { - flex-direction: column; - align-items: flex-start; - } + flex-direction: column; + align-items: flex-start; li { align-items: center; display: flex; margin-right: 16px; - @media (max-width: 767px) { - margin-bottom: 8px; - } + margin-bottom: 8px; } li:last-of-type { - margin-right: 0; + margin-bottom: 0; } li svg { color: #16b9b3; } - li p { + li p, + li a { margin-left: 5px; color: #293a3d; font-size: 12px; @@ -122,6 +118,12 @@ const StyledProfileSocial = styled.ul` font-weight: 400; line-height: 140%; } + + li a { + color: #16b9b3; + cursor: pointer; + text-decoration: underline; + } `; const StyledProfileDate = styled.p` font-size: 12px; @@ -129,6 +131,7 @@ const StyledProfileDate = styled.p` font-weight: 400; line-height: 140%; @media (max-width: 767px) { + width: 100%; text-align: right; } `; @@ -206,7 +209,7 @@ function UserCard({ router.push('/profile'); }} > - + 編輯 ) : ( @@ -244,17 +247,29 @@ function UserCard({ )} - + {!!contactList.instagram && (
  • -

    {contactList.instagram}

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

    {contactList.facebook}

    + + {contactList.facebook} +
    • )} {!!contactList.line && ( diff --git a/components/Profile/UserTabs/UserInfoBasic.jsx b/components/Profile/UserTabs/UserInfoBasic.jsx new file mode 100644 index 00000000..023aef9e --- /dev/null +++ b/components/Profile/UserTabs/UserInfoBasic.jsx @@ -0,0 +1,30 @@ +import { StyledPanelBox, StyledPanelText } from './UserTabs.styled'; + +function UserInfoBasic({ description = '', wantToDoList = [], share = '' }) { + return ( + + +

    可分享

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

    想一起

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

    簡介

    +
    + {description + ? description.split('\n').map((d) => {d}) + : '尚未填寫'} +
    +     +     + ); +} + +export default UserInfoBasic; diff --git a/components/Profile/UserTabs/index.jsx b/components/Profile/UserTabs/index.jsx index 2be4d1bb..98b44a77 100644 --- a/components/Profile/UserTabs/index.jsx +++ b/components/Profile/UserTabs/index.jsx @@ -4,13 +4,9 @@ import Tab from '@mui/material/Tab'; import { TabContext } from '@mui/lab'; import TabList from '@mui/lab/TabList'; import TabPanel from '@mui/lab/TabPanel'; -import { - StyledTabContextBox, - StyledPanelBox, - StyledPanelText, -} from './UserTabs.styled'; +import { StyledTabContextBox } from './UserTabs.styled'; -const UserTabs = ({ description = '', wantToDoList = [], share = '' }) => { +const UserTabs = ({ panels = [] }) => { const [value, setValue] = useState('1'); return ( { centered sx={{ width: '100%' }} > - - - + {panels.length > 0 && + panels.map((panel) => ( + + ))} - - - -

    可分享

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

    想一起

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

    簡介

    - {description || '尚未填寫'} -     -     -     - - 即將推出，敬請期待 - - - 即將推出，敬請期待 - + {panels.length > 0 && + panels.map((panel) => ( + + {panel.content} + + ))}     ); diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx index 1196cab0..9703ac80 100644 --- a/components/Profile/index.jsx +++ b/components/Profile/index.jsx @@ -3,6 +3,8 @@ import { useRouter } from 'next/router'; import { Box, Button } from '@mui/material'; import Skeleton from '@mui/material/Skeleton'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; +import EditOutlinedIcon from '@mui/icons-material/EditOutlined'; + import { WANT_TO_DO_WITH_PARTNER, ROLE, @@ -10,8 +12,11 @@ import { } from '@/constants/member'; import { mapToTable } from '@/utils/helper'; import SEOConfig from '@/shared/components/SEO'; +import MyGroup from './MyGroup'; import UserCard from './UserCard'; import UserTabs from './UserTabs'; +import UserInfoBasic from './UserTabs/UserInfoBasic'; +import { StyledPanelBox } from './UserTabs/UserTabs.styled'; const BottonBack = { color: '#536166', @@ -27,6 +32,22 @@ const BottonBack = { position: 'unset', }, }; +const BottonEdit = { + display: 'none', + '@media (max-width: 767px)': { + display: 'flex', + width: '100%', + color: '#536166', + fontSize: '14px', + boxShadow: 'unset', + borderRadius: '20px', + marginTop: '32px', + padding: '8px 0', + '&:hover': { + color: '#16B9B3', + }, + }, +}; const WANT_TO_DO_WITH_PARTNER_TABLE = mapToTable(WANT_TO_DO_WITH_PARTNER); const ROLELIST = mapToTable(ROLE); const EDUCATION_STAGE_TABLE = mapToTable(EDUCATION_STAGE); @@ -128,7 +149,7 @@ const Profile = ({ /> )}     - + {/* UserTabs */} {isLoading ? ( + ), + }, + { + id: '2', + title: '推薦的資源', + content: 即將推出，敬請期待, + }, + { + id: '3', + title: '發起的揪團', + content: ( + + ), + }, + ]} /> )} - {email !== sendEmail && ( + {email !== sendEmail ? ( + ) : ( + )} );