Merge pull request #24 from daodaoedu/feature/2.2_partner_profile

feat(partner): 串接 user/:id 及 調整頁面路徑

components/Partner/PartnerList/index.jsx

@@ -27,7 +27,7 @@ function PartnerList() {
       {lists.map((item, idx) => (
         <Fragment key={`${item._id}`}>
           <Grid
-            onClick={() => router.push(`partner/${item._id}`)}
+            onClick={() => router.push(`partner/detail?id=${item._id}`)}
             item
             width="100%"
             md={6}

components/Profile/UserCard/index.jsx

@@ -184,7 +184,8 @@ function Avator({ photoURL }) {
 
 function UserCard({
   isLoginUser,
-  tagList,
+  tagList = [],
+  role,
   educationStepLabel,
   photoURL,
   userName,
@@ -215,9 +216,9 @@ function UserCard({
           <StyledProfileTitle>
             <div>
               <h2>{userName || '-'}</h2>
-              <span>{educationStepLabel}</span>
+              {educationStepLabel && <span>{educationStepLabel}</span>}
             </div>
-            <p>實驗教育學生</p>
+            <p>{role || '-'}</p>
           </StyledProfileTitle>
 
           <StyledProfileLocation>
@@ -228,9 +229,8 @@ function UserCard({
       </StyledProfileBaseInfo>
 
       <StyledProfileTag>
-        {tagList.map((tag) => (
-          <Tag key={tag} label={tag} />
-        ))}
+        {!!tagList.length &&
+          tagList[0].split('、').map((tag) => <Tag key={tag} label={tag} />)}
       </StyledProfileTag>
 
       <StyledProfileOther>

components/Profile/UserTabs/UserTabs.styled.jsx

@@ -35,6 +35,8 @@ export const StyledPanelText = styled(Box)`
     font-weight: 400;
     line-height: 140%;
     margin-left: 12px;
+    display: grid;
+    place-items: center;
   }
   @media (max-width: 767px) {
     flex-direction: column;

components/Profile/UserTabs/index.jsx

@@ -10,14 +10,8 @@ import {
   StyledPanelText,
 } from './UserTabs.styled';
 
-const UserTabs = ({
-  description = '',
-  wantToLearnList = [],
-  isLoading = false,
-}) => {
+const UserTabs = ({ description = '', wantToDoList = [], share = '' }) => {
   const [value, setValue] = useState('1');
-  // TODO
-  console.log(description, wantToLearnList, isLoading);
   return (
     <Box
       sx={{
@@ -47,21 +41,17 @@ const UserTabs = ({
               sx={{ borderBottom: '1px solid #F3F3F3', paddingBottom: '6px' }}
             >
               <p>可分享</p>
-              <span sx={{ marginLeft: '12px' }}>自學心得</span>
+              <span>{share || '無'}</span>
             </StyledPanelText>
             <StyledPanelText
               sx={{ borderBottom: '1px solid #F3F3F3', padding: '6px 0' }}
             >
               <p>想一起</p>
-              <span>學習交流、組課、共學、交朋友</span>
+              <span>{wantToDoList || '無'}</span>
             </StyledPanelText>
             <StyledPanelText sx={{ paddingTop: '6px' }}>
               <p>簡介</p>
-              <span>
-                休學一年，目前是高二自學生，一直在探索自己喜歡什麼，
-                喜歡聽音樂，最近要開始準備英文考試中檢
-                有興趣想交流可以來私訊我～
-              </span>
+              <span>{description || '無'}</span>
             </StyledPanelText>
           </StyledPanelBox>
         </TabPanel>

components/Profile/index.jsx

@@ -2,8 +2,12 @@ import { useMemo, useState } from 'react';
 import { useRouter } from 'next/router';
 import { Box, Button } from '@mui/material';
 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';
@@ -23,18 +27,31 @@ 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 = ({
   name,
   photoURL,
   tagList = [],
-  educationStepLabel,
+  roleList = [],
+  educationStage,
+  selfIntroduction,
+  wantToDoList = [],
   location,
+  share,
 }) => {
   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
+    .map((item) => WANT_TO_DO_WITH_PARTNER_TABLE[item])
+    .join('、');
+
   const SEOData = useMemo(
     () => ({
       title: `${name}的小島｜島島阿學`,
@@ -46,7 +63,7 @@ const Profile = ({
       imgLink: 'https://www.daoedu.tw/preview.webp',
       link: `${process.env.HOSTNAME}${router?.asPath}`,
     }),
-    [router?.asPath],
+    [router?.asPath, name],
   );
 
   return (
@@ -95,17 +112,24 @@ const Profile = ({
           <ChevronLeftIcon />
           返回
         </Button>
+
         <UserCard
           isLoading={isLoading}
-          educationStepLabel={educationStepLabel}
+          educationStepLabel={edu}
+          role={role}
           tagList={tagList}
           photoURL={photoURL}
           userName={name}
           location={location}
         />
       </Box>
 
-      <UserTabs isLoading={isLoading} description={[]} wantToLearnList={[]} />
+      <UserTabs
+        isLoading={isLoading}
+        description={selfIntroduction}
+        wantToDoList={wantTodo}
+        share={share}
+      />
 
       <Button
         sx={{

pages/partner/detail/index.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect } 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';
+
+const HomePageWrapper = styled.div`
+  --section-height: calc(100vh - 80px);
+  --section-height-offset: 80px;
+`;
+
+const Detail = () => {
+  const dispatch = useDispatch();
+  const { partner } = useSelector((state) => state?.partners);
+
+  const router = useRouter();
+  const { id } = router.query;
+
+  const fetchUser = async () => {
+    dispatch(fetchPartnerById({ id }));
+  };
+  useEffect(() => {
+    if (id) {
+      fetchUser();
+    }
+  }, [id]);
+
+  return (
+    <HomePageWrapper>
+      <Navigation />
+      <Profile {...partner} />
+      <Footer />
+    </HomePageWrapper>
+  );
+};
+
+export default Detail;

redux/actions/partners.js

@@ -8,3 +8,12 @@ export function fetchPartners({ pageSize = 10, page = 1, ...rest } = {}) {
     },
   };
 }
+
+export function fetchPartnerById({ id } = {}) {
+  return {
+    type: 'FETCH_PARTNER_BY_ID',
+    payload: {
+      id,
+    },
+  };
+}

redux/reducers/partners.js

@@ -1,5 +1,6 @@
 const initialState = {
   items: [],
+  partner: null,
   pagination: {
     pageSize: 10,
     page: 1,
@@ -28,6 +29,18 @@ const reducer = (state = initialState, action) => {
         ...initialState,
       };
     }
+    case 'FETCH_PARTNER_BY_ID_SUCCESS': {
+      return {
+        ...state,
+        partner: action.payload,
+      };
+    }
+    case 'FETCH_PARTNER_BY_ID_FAILURE': {
+      return {
+        ...state,
+        partner: null,
+      };
+    }
     default: {
       return state;
     }

redux/sagas/partnersSaga.js

@@ -1,5 +1,7 @@
 import { put, takeEvery } from 'redux-saga/effects';
 
+const BASEURL = 'https://daodao-server.onrender.com';
+
 function* fetchPartnersResource(action) {
   const { pageSize = 10, page = 1, ...rest } = action.payload;
 
@@ -11,8 +13,7 @@ function* fetchPartnersResource(action) {
   }, startParams);
 
   try {
-    const baseUrl =
-      process.env.NEXT_PUBLIC_API_URL || 'https://daodao-server.onrender.com';
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || BASEURL;
     const URL = `${baseUrl}/user?${queryStr}`;
     const result = yield fetch(URL).then((res) => res.json());
     yield put({
@@ -33,8 +34,24 @@ function* fetchPartnersResource(action) {
   }
 }
 
+function* fetchPartnerById(action) {
+  const { id } = action.payload;
+  try {
+    const baseUrl = process.env.NEXT_PUBLIC_API_URL || BASEURL;
+    const URL = `${baseUrl}/user/${id}`;
+    const result = yield fetch(URL).then((res) => res.json());
+    yield put({
+      type: 'FETCH_PARTNER_BY_ID_SUCCESS',
+      payload: result.data && result.data[0],
+    });
+  } catch (error) {
+    yield put({ type: 'FETCH_PARTNER_BY_ID_FAILURE' });
+  }
+}
+
 function* partnerSaga() {
   yield takeEvery('FETCH_PARTNERS', fetchPartnersResource);
+  yield takeEvery('FETCH_PARTNER_BY_ID', fetchPartnerById);
 }
 
 export default partnerSaga;