Merge pull request #34 from daodaoedu/feature/edit_locations

feat: Add country/city/district field in Location profile/edit, Modif…
daodaoedu · Jan 30, 2024 · fa0c22b · fa0c22b
2 parents 1cb36b1 + 174c8c8
commit fa0c22b
Show file tree

Hide file tree

Showing 5 changed files with 1,711 additions and 17 deletions.
diff --git a/components/Partner/PartnerList/PartnerCard/index.jsx b/components/Partner/PartnerList/PartnerCard/index.jsx
@@ -44,6 +44,7 @@ function PartnerCard({
 
   const role = roleList.length > 0 && ROLELIST[roleList[0]];
   const edu = educationStage && EDUCATION_STEP_TABLE[educationStage];
+  const locations = location && location.split('@');
 
   return (
     <StyledCard>
@@ -66,10 +67,14 @@ function PartnerCard({
         <FlexSBAlignCenter mt="12px">
           <StyledTypoCaption>
             <FlexAlignCenter>
-              {location && (
+              {locations && (
                 <>
                   <LocationOnOutlinedIcon sx={{ marginRight: '10px' }} />
-                  {location}
+                  {location
+                    ? location.length >= 2
+                      ? locations.join('').replace('台灣', '')
+                      : locations.join('')
+                    : '-'}
                 </>
               )}
             </FlexAlignCenter>

diff --git a/components/Profile/Edit/index.jsx b/components/Profile/Edit/index.jsx
@@ -3,7 +3,9 @@ import toast from 'react-hot-toast';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useRouter } from 'next/router';
 import { useSelector } from 'react-redux';
-import { AREAS } from '@/constants/areas';
+import { AREAS, TAIWAN_DISTRICT } from '@/constants/areas';
+import COUNTIES from '@/constants/countries.json';
+
 import {
   GENDER,
   ROLE,
@@ -56,14 +58,20 @@ function EditPage() {
   useEffect(() => {
     if (user._id) {
       Object.entries(user).forEach(([key, value]) => {
-        if (key !== 'contactList') {
-          onChangeHandler({ key, value });
-        } else {
+        if (key === 'contactList') {
           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 if (key === 'location') {
+          onChangeHandler({ key, value });
+          const [country, city, district] = value.split('@');
+          onChangeHandler({ key: 'country', value: country || null });
+          onChangeHandler({ key: 'city', value: city || null });
+          onChangeHandler({ key: 'district', value: district || null });
+        } else {
+          onChangeHandler({ key, value });
         }
       });
     } else {
@@ -238,12 +246,12 @@ function EditPage() {
             <StyledGroup>
               <Typography>居住地</Typography>
               <Select
-                labelId="location"
-                id="location"
-                value={userState.location}
+                labelId="country"
+                id="country"
+                value={userState.country}
                 onChange={(event) => {
                   onChangeHandler({
-                    key: 'location',
+                    key: 'country',
                     value: event.target.value,
                   });
                 }}
@@ -252,12 +260,64 @@ function EditPage() {
                 <MenuItem disabled value="-1">
                   <em>請選擇居住地</em>
                 </MenuItem>
-                {AREAS.map(({ name, label }) => (
-                  <MenuItem key={label} value={label}>
+                {COUNTIES.map(({ name, alpha2 }) => (
+                  <MenuItem key={alpha2} value={name}>
                     {name}
                   </MenuItem>
                 ))}
               </Select>
+              {(userState.country === '台灣' || userState.country === 'tw') && (
+                <Grid container columnSpacing={1}>
+                  <Grid item xs="12" sm="6">
+                    <Select
+                      labelId="country"
+                      id="country"
+                      value={userState.city}
+                      onChange={(event) => {
+                        onChangeHandler({
+                          key: 'city',
+                          value: event.target.value,
+                        });
+                      }}
+                      sx={{ width: '100%' }}
+                    >
+                      <MenuItem disabled value="-1">
+                        <em>縣市</em>
+                      </MenuItem>
+                      {TAIWAN_DISTRICT.map(({ name }) => (
+                        <MenuItem key={name} value={name}>
+                          {name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </Grid>
+                  <Grid item xs="12" sm="6">
+                    <Select
+                      labelId="district"
+                      id="district"
+                      value={userState.district}
+                      onChange={(event) => {
+                        onChangeHandler({
+                          key: 'district',
+                          value: event.target.value,
+                        });
+                      }}
+                      sx={{ width: '100%' }}
+                    >
+                      <MenuItem disabled value="-1">
+                        <em>鄉鎮市區</em>
+                      </MenuItem>
+                      {TAIWAN_DISTRICT.find(
+                        ({ name }) => name === userState.city,
+                      )?.districts.map(({ name, zip }) => (
+                        <MenuItem key={zip} value={name}>
+                          {name}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </Grid>
+                </Grid>
+              )}
             </StyledGroup>
           </StyledSection>
 

diff --git a/components/Profile/Edit/useEditProfile.jsx b/components/Profile/Edit/useEditProfile.jsx
@@ -15,13 +15,16 @@ const initialState = {
   discord: '',
   line: '',
   educationStage: '-1',
-  location: 'tw',
+  location: '台灣',
   tagList: [],
   selfIntroduction: '',
   share: '',
   isOpenLocation: false,
   isOpenProfile: false,
   isLoadingSubmit: false,
+  country: '',
+  city: '',
+  district: '',
 };
 
 const userReducer = (state, payload) => {
@@ -61,7 +64,6 @@ const useEditProfile = () => {
       gender,
       roleList,
       educationStage,
-      location,
       wantToDoList,
       share,
       isOpenLocation,
@@ -72,6 +74,9 @@ const useEditProfile = () => {
       facebook,
       discord,
       line,
+      country,
+      city,
+      district,
     } = userState;
 
     const payload = {
@@ -89,8 +94,8 @@ const useEditProfile = () => {
       },
       wantToDoList,
       educationStage,
-      location,
-      tagList, // TODO: 要修改
+      location: `${country}@${city}@${district}`,
+      tagList,
       selfIntroduction,
       share,
       isOpenLocation,

diff --git a/components/Profile/UserCard/index.jsx b/components/Profile/UserCard/index.jsx
@@ -225,7 +225,11 @@ function UserCard({
 
           <StyledProfileLocation>
             <LocationOnOutlinedIcon sx={{ marginRight: '10px' }} />{' '}
-            {location || '-'}
+            {location
+              ? location.split('@').length >= 2
+                ? location.split('@').join('').replace('台灣', '')
+                : location.split('@').join('')
+              : '-'}
           </StyledProfileLocation>
         </Box>
       </StyledProfileBaseInfo>