feat: 新增社群及標籤

daodaoedu · Jan 15, 2024 · e943b69 · e943b69
1 parent d807fe9
commit e943b69
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 41 deletions.
diff --git a/components/Profile/Edit/index.jsx b/components/Profile/Edit/index.jsx
@@ -1,4 +1,5 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useEffect } from 'react';
+import toast from 'react-hot-toast';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
 import COUNTIES from '@/constants/countries.json';
@@ -28,14 +29,14 @@ import SEOConfig from '@/shared/components/SEO';
 
 import useEditProfile from './useEditProfile';
 import {
+  HomePageWrapper,
+  ContentWrapper,
   StyledGroup,
   StyledSelectWrapper,
   StyledSelectBox,
   StyledSelectText,
   StyledToggleWrapper,
   StyledToggleText,
-  HomePageWrapper,
-  ContentWrapper,
   StyledTitleWrap,
   StyledSection,
   StyledButtonGroup,
@@ -48,22 +49,27 @@ function EditPage() {
   const { userState, onChangeHandler, onSubmit } = useEditProfile();
   const user = useSelector((state) => state.user);
 
-  const [isLoadingSubmit, setIsLoadingSubmit] = useState(false);
-
   useEffect(() => {
     if (user._id) {
       Object.entries(user).forEach(([key, value]) => {
-        onChangeHandler({ key, value });
+        if (key !== 'contactList') {
+          onChangeHandler({ key, value });
+        } else {
+          const { instagram, facebook, discord, line } = value;
+          onChangeHandler({ key: 'instagram', value: instagram || '' });
+          onChangeHandler({ key: 'facebook', value: facebook || '' });
+          onChangeHandler({ key: 'discord', value: discord || '' });
+          onChangeHandler({ key: 'line', value: line || '' });
+        }
       });
     } else {
       router.push('/');
     }
   }, [user]);
 
   const onUpdateUser = async (successCallback) => {
-    setIsLoadingSubmit(true);
     await onSubmit({ id: user._id, email: user.email });
-    setIsLoadingSubmit(false);
+    toast.success('更新成功');
     successCallback();
   };
 
@@ -252,7 +258,6 @@ function EditPage() {
 
           {/* 聯絡方式 */}
           <StyledSection>
-            {/* TODO: 新增 Social */}
             <StyledGroup mt="0">
               <Typography>聯絡方式</Typography>
               <Typography
@@ -265,25 +270,65 @@ function EditPage() {
               <Grid item xs="6">
                 <StyledGroup>
                   <Typography>Instagram</Typography>
-                  <TextField placeholder="請填寫ID" sx={{ width: '100%' }} />
+                  <TextField
+                    value={userState.instagram}
+                    onChange={(event) => {
+                      onChangeHandler({
+                        key: 'instagram',
+                        value: event.target.value,
+                      });
+                    }}
+                    placeholder="請填寫ID"
+                    sx={{ width: '100%' }}
+                  />
                 </StyledGroup>
               </Grid>
               <Grid item xs="6">
                 <StyledGroup>
                   <Typography>Discord</Typography>
-                  <TextField placeholder="請填寫ID" sx={{ width: '100%' }} />
+                  <TextField
+                    value={userState.discord}
+                    onChange={(event) => {
+                      onChangeHandler({
+                        key: 'discord',
+                        value: event.target.value,
+                      });
+                    }}
+                    placeholder="請填寫ID"
+                    sx={{ width: '100%' }}
+                  />
                 </StyledGroup>
               </Grid>
               <Grid item xs="6">
                 <StyledGroup>
                   <Typography>Line</Typography>
-                  <TextField placeholder="請填寫ID" sx={{ width: '100%' }} />
+                  <TextField
+                    value={userState.line}
+                    onChange={(event) => {
+                      onChangeHandler({
+                        key: 'line',
+                        value: event.target.value,
+                      });
+                    }}
+                    placeholder="請填寫ID"
+                    sx={{ width: '100%' }}
+                  />
                 </StyledGroup>
               </Grid>
               <Grid item xs="6">
                 <StyledGroup>
                   <Typography>Facebook</Typography>
-                  <TextField placeholder="請填寫ID" sx={{ width: '100%' }} />
+                  <TextField
+                    value={userState.facebook}
+                    onChange={(event) => {
+                      onChangeHandler({
+                        key: 'facebook',
+                        value: event.target.value,
+                      });
+                    }}
+                    placeholder="請填寫ID"
+                    sx={{ width: '100%' }}
+                  />
                 </StyledGroup>
               </Grid>
             </Grid>
@@ -329,18 +374,17 @@ function EditPage() {
                 }}
               />
             </StyledGroup>
-            {/* TODO: 新增 TAG */}
             <StyledGroup>
+              {/* TODO: NEED TO FIXED */}
               <Typography>標籤</Typography>
               <TextField
                 sx={{ width: '100%' }}
                 placeholder="搜尋或新增標籤"
-                value={userState.tagList}
+                value={userState.tagList[0]}
                 onChange={(event) => {
                   onChangeHandler({
-                    tagList: event.target.value,
-                    isMultiple: true,
                     key: 'tagList',
+                    value: event.target.value,
                   });
                 }}
               />

diff --git a/components/Profile/Edit/useEditProfile.jsx b/components/Profile/Edit/useEditProfile.jsx
@@ -10,10 +10,12 @@ const initialState = {
   gender: '',
   roleList: [],
   wantToDoList: [],
-  // interestList: [],
+  instagram: '',
+  facebook: '',
+  discord: '',
+  line: '',
   educationStage: '-1',
   location: 'tw',
-  contactInformationList: [],
   tagList: [],
   selfIntroduction: '',
   share: '',
@@ -47,8 +49,8 @@ const useEditProfile = () => {
 
   // TODO ErrorMap
 
-  const onChangeHandler = ({ key, value }) => {
-    stateDispatch({ key, value });
+  const onChangeHandler = ({ key, value, isMultiple }) => {
+    stateDispatch({ key, value, isMultiple });
   };
 
   const onSubmit = async ({ id, email }) => {
@@ -64,23 +66,31 @@ const useEditProfile = () => {
       share,
       isOpenLocation,
       isOpenProfile,
-      contactInformationList,
       tagList,
       selfIntroduction,
+      instagram,
+      facebook,
+      discord,
+      line,
     } = userState;
 
     const payload = {
       id,
       email,
-      contactInformationList,
       name,
       birthDay,
       gender,
       roleList,
+      contactList: {
+        instagram,
+        facebook,
+        discord,
+        line,
+      },
       wantToDoList,
       educationStage,
       location,
-      tagList,
+      tagList: [tagList], // TODO: 要修改
       selfIntroduction,
       share,
       isOpenLocation,

diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx
@@ -190,6 +190,8 @@ function UserCard({
   photoURL,
   userName,
   location,
+  contactList = {},
+  updatedDate,
 }) {
   const router = useRouter();
 
@@ -230,30 +232,41 @@ function UserCard({
 
       <StyledProfileTag>
         {!!tagList.length &&
+          !!tagList[0] &&
           tagList[0].split('、').map((tag) => <Tag key={tag} label={tag} />)}
       </StyledProfileTag>
 
       <StyledProfileOther>
         <StyledProfileSocial style={{ listStyle: 'none', display: 'flex' }}>
-          <li>
-            <RiInstagramFill size="20px" />
-            <p>Chien22</p>
-          </li>
-          <li>
-            <FaFacebook size="20px" />
-            <p>ene_soew</p>
-          </li>
-          <li>
-            <FaLine size="20px" />
-            <p>Chien12348888</p>
-          </li>
-          <li>
-            <FaDiscord size="20px" />
-            <p>#Chien22</p>
-          </li>
+          {!!contactList.instagram && (
+            <li>
+              <RiInstagramFill size="20px" />
+              <p>{contactList.instagram}</p>
+            </li>
+          )}
+          {!!contactList.facebook && (
+            <li>
+              <FaFacebook size="20px" />
+              <p>{contactList.facebook}</p>
+            </li>
+          )}
+          {!!contactList.line && (
+            <li>
+              <FaLine size="20px" />
+              <p>{contactList.line}</p>
+            </li>
+          )}
+          {!!contactList.discord && (
+            <li>
+              <FaDiscord size="20px" />
+              <p>{contactList.discord}</p>
+            </li>
+          )}
         </StyledProfileSocial>
         <StyledProfileDate>
-          {moment(new Date() - 500 * 60 * 60).fromNow()}
+          {updatedDate
+            ? moment(updatedDate).fromNow()
+            : moment(new Date() - 500 * 60 * 60).fromNow()}
         </StyledProfileDate>
       </StyledProfileOther>
     </StyledProfileWrapper>