diff --git a/components/Partner/PartnerList/PartnerCard/index.jsx b/components/Partner/PartnerList/PartnerCard/index.jsx index 1f1ee828..24ea1ebe 100644 --- a/components/Partner/PartnerList/PartnerCard/index.jsx +++ b/components/Partner/PartnerList/PartnerCard/index.jsx @@ -4,6 +4,7 @@ import { 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'; @@ -33,7 +34,9 @@ function PartnerCard({ tagList = [], wantToDoList = [], roleList = [], + location, educationStage, + updatedDate, }) { const wantTodo = wantToDoList .map((item) => WANT_TO_DO_WITH_PARTNER_TABLE[item]) @@ -63,11 +66,19 @@ function PartnerCard({ - - 台北市松山區 + {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 549b3d0a..bf11de8f 100644 --- a/components/Partner/PartnerList/index.jsx +++ b/components/Partner/PartnerList/index.jsx @@ -43,6 +43,7 @@ function PartnerList() { tagList={item.tagList} wantToDoList={item.wantToDoList} location={item.location} + updatedDate={item.updatedDate} /> {!mobileScreen && (idx + 1) % 2 === 0 && idx + 1 !== lists.length && ( diff --git a/components/Profile/Contact/index.jsx b/components/Profile/Contact/index.jsx index 801b557d..c24a026c 100644 --- a/components/Profile/Contact/index.jsx +++ b/components/Profile/Contact/index.jsx @@ -147,12 +147,12 @@ function ContactModal({ - 聯繫資訊 + 聯絡資訊 setContact(e.target.value)} - placeholder="ex. 自學申請、學習方法、學習資源，或各種學習領域的知識" + placeholder="寫下您的聯繫資訊，如 e-mail、line、Facebook、Instagram 等等。" /> diff --git a/components/Profile/index.jsx b/components/Profile/index.jsx index 11d1623b..ede32ae5 100644 --- a/components/Profile/index.jsx +++ b/components/Profile/index.jsx @@ -1,6 +1,5 @@ import { useMemo, useState } from 'react'; import { useRouter } from 'next/router'; -import { useDispatch } from 'react-redux'; import { Box, Button } from '@mui/material'; import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; import { @@ -12,9 +11,6 @@ import { mapToTable } from '@/utils/helper'; import SEOConfig from '@/shared/components/SEO'; import UserCard from './UserCard'; import UserTabs from './UserTabs'; -import ContactModal from './Contact'; -import { sendEmailToPartner } from '@/redux/actions/partners'; -import toast from 'react-hot-toast'; const BottonBack = { color: '#536166', @@ -47,12 +43,12 @@ const Profile = ({ share, enableContactBtn = false, sendEmail, + handleContactPartner, + contactList = {}, + updatedDate, }) => { - const dispatch = useDispatch(); const router = useRouter(); const [isLoading] = useState(false); - const [open, setOpen] = useState(false); - const role = roleList.length > 0 && ROLELIST[roleList[0]]; const edu = educationStage && EDUCATION_STEP_TABLE[educationStage]; const wantTodo = wantToDoList @@ -73,21 +69,6 @@ const Profile = ({ [router?.asPath, name], ); - const handleOnOk = ({ message, contact }) => { - dispatch( - sendEmailToPartner({ - to: email, - name, - roleList: roleList.length ? roleList : [], - photoURL, - text: message, - information: [sendEmail, contact], - }), - ); - setOpen(false); - toast.success('寄送成功'); - }; - return ( - { - setOpen(false); - }} - onOk={handleOnOk} - /> @@ -162,7 +134,7 @@ const Profile = ({ }} disabled={!enableContactBtn} variant="contained" - onClick={() => setOpen(true)} + onClick={handleContactPartner} > 聯繫夥伴 diff --git a/pages/_app.jsx b/pages/_app.jsx index 224e1f0f..896410a4 100644 --- a/pages/_app.jsx +++ b/pages/_app.jsx @@ -7,18 +7,17 @@ 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 -import { persistStore } from 'redux-persist'; -import { PersistGate } from 'redux-persist/integration/react'; - const store = storeFactory(); -let persistor = persistStore(store); +const persistor = persistStore(store); const firebaseConfig = { apiKey: 'AIzaSyBJK-FKcGHwDy1TMcoJcBdEqbTYpEquUi4', diff --git a/pages/partner/detail/index.jsx b/pages/partner/detail/index.jsx index 4f1c2517..5e99f3df 100644 --- a/pages/partner/detail/index.jsx +++ b/pages/partner/detail/index.jsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { useRouter } from 'next/router'; import { useSelector, useDispatch } from 'react-redux'; @@ -6,22 +6,55 @@ import styled from '@emotion/styled'; import Navigation from '@/shared/components/Navigation_v2'; import Footer from '@/shared/components/Footer_v2'; import Profile from '@/components/Profile'; - -import { fetchPartnerById } from '@/redux/actions/partners'; +import ContactModal from '@/components/Profile/Contact'; +import { sendEmailToPartner, fetchPartnerById } from '@/redux/actions/partners'; +import toast from 'react-hot-toast'; +import { ROLE } from '@/constants/member'; +import { mapToTable } from '@/utils/helper'; const HomePageWrapper = styled.div` --section-height: calc(100vh - 80px); --section-height-offset: 80px; `; +const ROLELIST = mapToTable(ROLE); + const Detail = () => { const dispatch = useDispatch(); + const [open, setOpen] = useState(false); + const { partner } = useSelector((state) => state?.partners); - const { email: loginUserEmail } = useSelector((state) => state?.user); + const partnerRole = useMemo(() => { + return partner?.roleList && partner.roleList.length > 0 + ? ROLELIST[partner.roleList[0]] + : ''; + }, [partner]); + + const { + name, + roleList, + photoURL, + email: loginUserEmail, + } = useSelector((state) => state?.user); const router = useRouter(); const { id } = router.query; + const handleOnOk = ({ message, contact }) => { + dispatch( + sendEmailToPartner({ + to: partner.email, + name, + roleList: roleList.length > 0 ? roleList : [''], + photoURL, + text: message, + information: [loginUserEmail, contact], + }), + ); + setOpen(false); + toast.success('寄送成功'); + }; + const fetchUser = async () => { dispatch(fetchPartnerById({ id })); }; @@ -34,10 +67,23 @@ const Detail = () => { return ( + {!!partner && ( + { + setOpen(false); + }} + onOk={handleOnOk} + /> + )} setOpen(true)} />