chore(partner/profile): 1. 調整 partner 及 profile 呈現 2. build issue

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({
         <FlexSBAlignCenter mt="12px">
           <StyledTypoCaption>
             <FlexAlignCenter>
-              <LocationOnOutlinedIcon sx={{ marginRight: '10px' }} />
-              台北市松山區
+              {location && (
+                <>
+                  <LocationOnOutlinedIcon sx={{ marginRight: '10px' }} />
+                  {location}
+                </>
+              )}
             </FlexAlignCenter>
           </StyledTypoCaption>
-          <StyledTypoCaption fontWeight={300}>兩天前更新</StyledTypoCaption>
+          <StyledTypoCaption fontWeight={300}>
+            {updatedDate
+              ? moment(updatedDate).fromNow()
+              : moment(new Date() - 500 * 60 * 60).fromNow()}
+          </StyledTypoCaption>
         </FlexSBAlignCenter>
       </StyledCardContainer>
     </StyledCard>

components/Partner/PartnerList/index.jsx

@@ -43,6 +43,7 @@ function PartnerList() {
               tagList={item.tagList}
               wantToDoList={item.wantToDoList}
               location={item.location}
+              updatedDate={item.updatedDate}
             />
           </Grid>
           {!mobileScreen && (idx + 1) % 2 === 0 && idx + 1 !== lists.length && (

components/Profile/Contact/index.jsx

@@ -147,12 +147,12 @@ function ContactModal({
           </StyledGroup>
           <StyledGroup>
             <StyledTitle id="keep-mounted-modal-description">
-              聯繫資訊
+              聯絡資訊
             </StyledTitle>
             <StyledTextArea
               value={contact}
               onChange={(e) => setContact(e.target.value)}
-              placeholder="ex.  自學申請、學習方法、學習資源，或各種學習領域的知識"
+              placeholder="寫下您的聯繫資訊，如 e-mail、line、Facebook、Instagram 等等。"
             />
           </StyledGroup>
 

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 (
     <Box
       sx={{
@@ -103,17 +84,6 @@ const Profile = ({
         },
       }}
     >
-      <ContactModal
-        open={open}
-        title={name}
-        descipt={role || '-'}
-        avatar={photoURL}
-        // isLoadingSubmit={isLoadingSubmit}
-        onClose={() => {
-          setOpen(false);
-        }}
-        onOk={handleOnOk}
-      />
       <SEOConfig data={SEOData} />
       <Box
         sx={{
@@ -141,6 +111,8 @@ const Profile = ({
           photoURL={photoURL}
           userName={name}
           location={location}
+          updatedDate={updatedDate}
+          contactList={contactList}
         />
       </Box>
 
@@ -162,7 +134,7 @@ const Profile = ({
           }}
           disabled={!enableContactBtn}
           variant="contained"
-          onClick={() => setOpen(true)}
+          onClick={handleContactPartner}
         >
           聯繫夥伴
         </Button>

package.json

@@ -62,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"

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',

pages/partner/detail/index.jsx

@@ -1,27 +1,60 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useSelector, useDispatch } from 'react-redux';
 
 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 (
     <HomePageWrapper>
       <Navigation />
+      {!!partner && (
+        <ContactModal
+          open={open}
+          title={partner?.name}
+          descipt={partnerRole || '-'}
+          avatar={partner?.photoURL}
+          onClose={() => {
+            setOpen(false);
+          }}
+          onOk={handleOnOk}
+        />
+      )}
       <Profile
         {...partner}
         sendEmail={loginUserEmail}
         enableContactBtn={!!loginUserEmail}
+        handleContactPartner={() => setOpen(true)}
       />
       <Footer />
     </HomePageWrapper>

pages/profile/myprofile/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
-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 { useSelector } from 'react-redux';
+import styled from '@emotion/styled';
+import Navigation from '@/shared/components/Navigation_v2';
+import Footer from '@/shared/components/Footer_v2';
+import Profile from '@/components/Profile';
 
 const HomePageWrapper = styled.div`
   --section-height: calc(100vh - 80px);

pages/signin/index.jsx

@@ -19,7 +19,7 @@ import {
   HomePageWrapper,
   StyledContentWrapper,
   StyledQuestionInput,
-} from './signin.styled';
+} from './Signin.styled';
 
 function EditPage() {
   const router = useRouter();