Feature/1.2 profile and find partner

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/Accountsetting/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState, useEffect } from 'react';
 import {
   Box,
   Typography,
@@ -8,7 +8,8 @@ import {
   FormControlLabel,
 } from '@mui/material';
 import { useRouter } from 'next/router';
-import useFirebase from '../../../hooks/useFirebase';
+import { useDispatch, useSelector } from 'react-redux';
+import { updateUser, userLogout } from '@/redux/actions/user';
 
 const TypographyStyle = {
   fontFamily: 'Noto Sans TC',
@@ -20,15 +21,35 @@ const TypographyStyle = {
 };
 
 const AccountSetting = () => {
-  const { push } = useRouter();
-  const { auth, user, signInWithFacebook, signOutWithGoogle } = useFirebase();
+  const dispatch = useDispatch();
+  const router = useRouter();
+
+  const [isSubscribeEmail, setIsSubscribeEmail] = useState(false);
+  const user = useSelector((state) => state.user);
+
+  const onUpdateUser = () => {
+    const payload = {
+      email: user.email,
+      isSubscribeEmail,
+    };
+    dispatch(updateUser(payload));
+  };
+
+  const logout = () => {
+    dispatch(userLogout());
+    router.push('/');
+  };
+
+  useEffect(() => {
+    setIsSubscribeEmail(user?.isSubscribeEmail || false);
+  }, [user]);
+
   return (
     <Box
       sx={{
         backgroundColor: '#ffffff',
         width: '672px',
         borderRadius: '16px',
-        // border: '1px solid black',
         padding: '36px 40px',
         display: 'flex',
         flexDirection: 'column',
@@ -54,10 +75,10 @@ const AccountSetting = () => {
             disabled
             sx={{ width: '100%', margin: '8px 0 30px 0' }}
           >
-            [email protected]
+            {user.email}
           </Button>
         </Box>
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        {/* <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Typography sx={TypographyStyle}>電話驗證</Typography>
           <Button
             variant="contained"
@@ -70,15 +91,23 @@ const AccountSetting = () => {
           >
             進行驗證
           </Button>
-        </Box>
+        </Box> */}
         <Box sx={{ display: 'flex', flexDirection: 'column' }}>
           <Typography sx={TypographyStyle}>電子報</Typography>
           <FormControlLabel
             sx={{
               marginTop: '20px',
-              color: '#536166',
             }}
-            control={<Checkbox />}
+            control={
+              // eslint-disable-next-line react/jsx-wrap-multilines
+              <Checkbox
+                checked={isSubscribeEmail}
+                onChange={(event) => {
+                  setIsSubscribeEmail(event.target.checked);
+                  // onUpdateUser();//待處理取消訂閱
+                }}
+              />
+            }
             label="訂閱電子報與島島阿學的新資訊"
           />
         </Box>
@@ -92,10 +121,7 @@ const AccountSetting = () => {
               margin: '24px 0 30px 0',
               backgroundColor: 'white',
             }}
-            onClick={() => {
-              signOutWithGoogle();
-              push('/');
-            }}
+            onClick={logout}
           >
             登出
           </Button>

components/Profile/Contact/index.jsx

@@ -7,8 +7,49 @@ import {
   TextareaAutosize,
   Avatar,
 } from '@mui/material';
+import styled from '@emotion/styled';
+
+const StyledGroup = styled(Box)`
+  margin-bottom: 16px;
+`;
+
+const StyledTitle = styled(Typography)`
+  color: var(--black-white-gray-dark, #293a3d);
+  /* desktop/body-M-Medium */
+  font-family: Noto Sans TC;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 140%; /* 22.4px */
+  margin-bottom: 11px;
+`;
+const StyledTextArea = styled(TextareaAutosize)`
+  border-radius: 8px;
+  border: 1px solid var(--black-white-gray-very-light, #dbdbdb);
+  background: var(--black-white-white, #fff);
+  padding: 12px 16px;
+  width: 100%;
+  min-height: 128px;
+`;
+
+function ContactModal({
+  title,
+  descipt,
+  avatar,
+  onClose,
+  onOk,
+  isLoadingSubmit,
+  open,
+}) {
+  const [message, setMessage] = useState('');
+  const [contact, setContact] = useState('');
+
+  const handleSubmit = () => {
+    onOk({ message, contact });
+    setMessage('');
+    setContact('');
+  };
 
-function ContactModal({ onClose, onOk, isLoadingSubmit, open }) {
   return (
     <Modal
       keepMounted
@@ -60,9 +101,10 @@ function ContactModal({ onClose, onOk, isLoadingSubmit, open }) {
               justifyContent: 'flex-start',
               borderRadius: '16px',
               p: 2,
+              mb: '16px',
             }}
           >
-            <Avatar />
+            <Avatar alt={title} src={avatar} />
             <Box
               sx={{
                 width: '100%',
@@ -80,7 +122,7 @@ function ContactModal({ onClose, onOk, isLoadingSubmit, open }) {
                   lineHeight: '140%',
                 }}
               >
-                黃芊宇
+                {title}
               </Typography>
               <Typography
                 sx={{
@@ -90,54 +132,29 @@ function ContactModal({ onClose, onOk, isLoadingSubmit, open }) {
                   lineHeight: '140%',
                 }}
               >
-                實驗教育學生
+                {descipt}
               </Typography>
             </Box>
           </Box>
-          <Typography
-            id="keep-mounted-modal-subtitle"
-            sx={{
-              color: ' #293A3D',
-              fontWeight: 400,
-              fontSize: '16px',
-              lineHeight: '140%',
-              margin: '16px 0 11px 0',
-            }}
-          >
-            邀請訊息
-          </Typography>
-          <TextareaAutosize
-            sx={{
-              color: '#DBDBDB',
-              width: '100%',
-              minHeight: '200px',
-              padding: '10px',
-            }}
-            placeholder="想要和新夥伴交流什麼呢？可以簡單的自我介紹，寫下想認識夥伴的原因。"
-          />
 
-          <Typography
-            id="keep-mounted-modal-description"
-            sx={{
-              mt: 2,
-              color: ' #293A3D',
-              fontWeight: 400,
-              fontSize: '16px',
-              lineHeight: '140%',
-              margin: '16px 0 11px 0',
-            }}
-          >
-            聯繫資訊
-          </Typography>
-          <TextareaAutosize
-            sx={{
-              color: '#DBDBDB',
-              width: '100%',
-              minHeight: '200px',
-              padding: '10px',
-            }}
-            placeholder="ex.  自學申請、學習方法、學習資源，或各種學習領域的知識"
-          />
+          <StyledGroup>
+            <StyledTitle id="keep-mounted-modal-subtitle">邀請訊息</StyledTitle>
+            <StyledTextArea
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="想要和新夥伴交流什麼呢？可以簡單的自我介紹，寫下想認識夥伴的原因。"
+            />
+          </StyledGroup>
+          <StyledGroup>
+            <StyledTitle id="keep-mounted-modal-description">
+              聯絡資訊
+            </StyledTitle>
+            <StyledTextArea
+              value={contact}
+              onChange={(e) => setContact(e.target.value)}
+              placeholder="寫下您的聯繫資訊，如 e-mail、line、Facebook、Instagram 等等。"
+            />
+          </StyledGroup>
 
           <Box
             sx={{
@@ -163,6 +180,8 @@ function ContactModal({ onClose, onOk, isLoadingSubmit, open }) {
                 bgcolor: '#16B9B3',
               }}
               variant="contained"
+              disabled={isLoadingSubmit}
+              onClick={() => handleSubmit({ message, contact })}
             >
               送出
             </Button>