feat: use recoil for user info in main page, change main items ui, da…

…ta - #5, #8
BaedalMate · Jan 20, 2023 · d6fa841 · d6fa841
1 parent b2a8d90
commit d6fa841
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 311 deletions.
diff --git a/baedalmate/src/components/atoms/Main/BaedalMateRecommendationItem.tsx b/baedalmate/src/components/atoms/Main/BaedalMateRecommendationItem.tsx
@@ -27,20 +27,21 @@ const BaedalMateRecommendationItem = ({item}: {item: eachMainRecruitListI}) => {
   const durationMinutes = deadline.getMinutes() - now.getMinutes();
   const durationSeconds = deadline.getSeconds() - now.getSeconds();
 
-  const timeText =
-    time > 0
-      ? durationYear > 0
-        ? durationYear + '년'
-        : durationMonth > 0
-        ? durationMonth + '달'
-        : durationDate > 0
-        ? durationDate + '일'
-        : durationHour > 0
-        ? durationHour + '시간'
-        : durationMinutes > 0
-        ? durationMinutes + '분'
-        : '마감 임박'
-      : '마감';
+  const timeText = !item.active
+    ? '모집 완료'
+    : time > 0
+    ? durationYear > 0
+      ? durationYear + '년'
+      : durationMonth > 0
+      ? durationMonth + '달'
+      : durationDate > 0
+      ? durationDate + '일'
+      : durationHour > 0
+      ? durationHour + '시간'
+      : durationMinutes > 0
+      ? durationMinutes + '분'
+      : '마감 임박'
+    : '모집 완료';
 
   const navigation = useNavigation();
   return (

diff --git a/baedalmate/src/components/atoms/Main/CategoryItem.tsx b/baedalmate/src/components/atoms/Main/CategoryItem.tsx
@@ -4,7 +4,6 @@ import {
   StyleSheet,
   View,
   Image,
-  TouchableOpacity,
   ImageSourcePropType,
   TouchableHighlight,
 } from 'react-native';

diff --git a/baedalmate/src/components/atoms/Main/NowGatheringItem.tsx b/baedalmate/src/components/atoms/Main/NowGatheringItem.tsx
@@ -86,8 +86,12 @@ const NowGatheringItem = ({item}: {item: eachMainRecruitListI}) => {
                 }}>
                 <Image source={PEOPLE_WHITE} /> {item?.currentPeople}/
                 {item?.minPeople}
-                {'\t'}
-                <Image source={TIMER_WHITE} /> {timeText}
+                {item.active && (
+                  <>
+                    {'\t'}
+                    <Image source={TIMER_WHITE} /> {timeText}
+                  </>
+                )}
               </TextKRBold>
             </View>
 

diff --git a/baedalmate/src/components/atoms/Main/Slider.tsx b/baedalmate/src/components/atoms/Main/Slider.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React from 'react';
 import {StyleSheet, View} from 'react-native';
 import {PRIMARY_COLOR, WHITE_COLOR} from 'themes/theme';
 import TodayMenuItem from './TodayMenuItem';
@@ -186,7 +186,11 @@ const Slider = ({
         }}
       />
       <Pagination
-        dotsLength={mainTagRecruitList?.recruitList?.length + 1}
+        dotsLength={
+          mainTagRecruitList?.recruitList?.length >= 5
+            ? mainTagRecruitList.recruitList.length
+            : mainTagRecruitList.recruitList.length + 1
+        }
         activeDotIndex={index}
         dotStyle={{
           width: 7,

diff --git a/baedalmate/src/components/atoms/Main/TodayMenuItemCompleted.tsx b/baedalmate/src/components/atoms/Main/TodayMenuItemCompleted.tsx
@@ -1,20 +1,11 @@
 import React from 'react';
-import {
-  GestureResponderEvent,
-  Image,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {WHITE_COLOR} from 'themes/theme';
-import {Fonts} from '../../../assets/Fonts';
-import {wrap} from 'module';
 export type TodayMenuItemProps = {
   text: string;
 };
 import {STAR_PRIMARY} from 'themes/theme';
-import {TextKRBold, TextKRReg} from 'themes/text';
+import {TextKRBold} from 'themes/text';
 import {TagComponent} from './TodayMenuItem';
 import {eachMainTagRecruitListI} from 'components/pages/Main';
 import {formPrice} from 'components/utils/api/Recruit';

diff --git a/baedalmate/src/components/atoms/Main/TodayMenuItemCreate.tsx b/baedalmate/src/components/atoms/Main/TodayMenuItemCreate.tsx
@@ -1,20 +1,10 @@
 import React from 'react';
-import {
-  GestureResponderEvent,
-  Image,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {Image, StyleSheet, TouchableOpacity, View} from 'react-native';
 import {BLACK_COLOR, RightArrowBlack, WHITE_COLOR} from 'themes/theme';
-import {Fonts} from '../../../assets/Fonts';
-import {wrap} from 'module';
 export type TodayMenuItemProps = {
   text: string;
 };
-import {STAR_PRIMARY} from 'themes/theme';
-import {TextKRBold, TextKRReg} from 'themes/text';
+import {TextKRBold} from 'themes/text';
 import {TagComponent} from './TodayMenuItem';
 import {useNavigation} from '@react-navigation/native';
 
@@ -43,7 +33,7 @@ const TodayMenuItemCreate = () => {
   return (
     <TouchableOpacity
       onPress={() => {
-        navigation.navigate('상세 설정' as never);
+        navigation.navigate('상세 설정' as never, {type: 'CREATE'} as never);
       }}>
       <TagComponent item={createItemData} />
 

diff --git a/baedalmate/src/components/atoms/Main/UserInfoTitle.tsx b/baedalmate/src/components/atoms/Main/UserInfoTitle.tsx
@@ -4,88 +4,36 @@ import {View, Modal, FlatList} from 'react-native';
 import {LINE_GRAY_COLOR, PRIMARY_COLOR, WHITE_COLOR} from 'themes/theme';
 import {TextKRBold, TextKRReg} from 'themes/text';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import ChangeDormitory, {
-  DormitoryList,
-} from '../BottomSheet/ChangeDormitoryBottomSheet';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import axios from 'axios';
-import {userURL} from 'components/pages/Main';
-import {getJWTToken} from 'components/utils/api/Recruit';
 import {useNavigation} from '@react-navigation/native';
+import {useRecoilState, useResetRecoilState} from 'recoil';
+import {selectDormitoryState} from 'components/utils/recoil/atoms/User';
 
-const Item = ({title}) => null;
 export type UserAddressProps = {
   onPress(): void;
   text: string;
 };
-
-const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
+export const DormitoryList = [
+  {id: 0, value: '성림학사'},
+  {id: 1, value: 'KB학사'},
+  {id: 2, value: '불암학사'},
+  {id: 3, value: '누리학사'},
+  {id: 4, value: '수림학사'},
+];
+const UserInfoTitle = ({userName, userAddress}) => {
   const [modal, setModal] = useState(false);
-  const [selectedAddress, setSelectedAddress] = useState(userAddress);
-  const handleModal = () => {
-    modal ? setModal(false) : setModal(true);
-  };
-  const navigation = useNavigation();
+  // const [selectedAddress, setSelectedAddress] = useState(userAddress);
+  const [selectedAddress, setSelectedAddress] =
+    useRecoilState(selectDormitoryState);
+  const resetSelectedAddress = useResetRecoilState(selectDormitoryState);
   useEffect(() => {
     setSelectedAddress(userAddress);
-  }, [userAddress]);
-  // User dormitory 변경
-  const putUserDormitory = async () => {
-    let changedDormitory =
-      selectedAddress === 'KB학사'
-        ? 'KB'
-        : selectedAddress === '성림학사'
-        ? 'SUNGLIM'
-        : selectedAddress === '수림학사'
-        ? 'SULIM'
-        : selectedAddress === '불암학사'
-        ? 'BURAM'
-        : 'NURI';
-    // let dormIndex =
-    //   changedDormitory === 'NURI'
-    //     ? 0
-    //     : changedDormitory === 'SUNGLIM'
-    //     ? 1
-    //     : changedDormitory === 'KB'
-    //     ? 2
-    //     : changedDormitory === 'BURAM'
-    //     ? 3
-    //     : 4;
-    const JWTAccessToken = await getJWTToken();
-    console.log(changedDormitory, JWTAccessToken);
-    try {
-      const {data} = await axios
-        .put(
-          userURL,
-          {},
-          {
-            params: {
-              dormitory: changedDormitory,
-            },
-            headers: {
-              Authorization: 'Bearer ' + JWTAccessToken,
-            },
-          },
-        )
-        .then(function (response) {
-          console.log('put dormitory', response);
-          console.log(response);
-          // AsyncStorage에 유저 이름과 배달 거점 저장
-          AsyncStorage.setItem('@BaedalMate_Dormitory', changedDormitory);
-          // 해당 페이지는 렌더링 문제로 state 설정 후 사용
-          setDormitory(changedDormitory);
-          return response.data;
-        })
-        .catch(function (error) {
-          console.log('put dormitory', error);
-          return false;
-        });
-      return data;
-    } catch (error) {
-      console.log(error);
-      return false;
-    }
+  }, []);
+  const handleModal = (confirm: boolean) => {
+    confirm === false && resetSelectedAddress();
+    modal ? setModal(false) : setModal(true);
   };
+  const navigation = useNavigation();
+
   const renderItem = ({item}) => {
     return (
       <TouchableOpacity
@@ -113,9 +61,6 @@ const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
     );
   };
 
-  // useEffect(() => {
-  //   putUserDormitory();
-  // }, [selectedAddress]);
   useEffect(() => {
     console.log(userAddress, selectedAddress);
     setSelectedAddress(userAddress);
@@ -179,7 +124,7 @@ const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
           }}>
           배달 거점{'\t'}
           <TouchableOpacity
-            onPress={handleModal}
+            onPress={() => handleModal(false)}
             style={{
               height: 20,
               justifyContent: 'center',
@@ -194,13 +139,12 @@ const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
             </TextKRBold>
           </TouchableOpacity>
         </TextKRBold>
-        {/* <ChangeDormitory userAddress={userAddress} /> */}
         <View>
           <Modal
             transparent={true}
             visible={modal}
             animationType={'slide'}
-            onRequestClose={handleModal}>
+            onRequestClose={() => handleModal(false)}>
             <View
               style={{
                 width: '100%',
@@ -211,7 +155,7 @@ const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
                 justifyContent: 'center',
                 alignItems: 'center',
               }}
-              onTouchEnd={handleModal}></View>
+              onTouchEnd={() => handleModal(false)}></View>
             <View
               style={{
                 position: 'absolute',
@@ -245,7 +189,11 @@ const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
               </View>
               <TouchableOpacity
                 onPress={() => {
-                  handleModal(), navigation.navigate('거점 인증' as never);
+                  handleModal(true),
+                    navigation.navigate(
+                      '거점 인증' as never,
+                      {target: selectedAddress} as never,
+                    );
                 }}
                 style={{
                   width: '100%',
@@ -265,8 +213,6 @@ const UserInfoTitle = ({userName, userAddress, setDormitory}) => {
             </View>
           </Modal>
         </View>
-
-        {/* 해당 부분 화살표가 선택지인지 혹은 그냥 디자인인지 확인 필요 */}
       </View>
     </>
   );

diff --git a/baedalmate/src/components/molecules/Main/BaedalMateRecommendation.tsx b/baedalmate/src/components/molecules/Main/BaedalMateRecommendation.tsx
@@ -11,8 +11,9 @@ import {getJWTToken} from 'components/utils/api/Recruit';
 const BaedalMateRecommendation = ({}: {}) => {
   const [option, setOption] = useState(null);
 
-  const [mainRecruitSortList, setMainRecruitSortList] =
-    useState<eachMainRecruitListI[]>();
+  const [mainRecruitSortList, setMainRecruitSortList] = useState<
+    eachMainRecruitListI[]
+  >([]);
   // 메인 모집글 리스트 api
   // 모집글 리스트 Api 받아옴
   const getMainRecruitSortList = async () => {
@@ -34,9 +35,9 @@ const BaedalMateRecommendation = ({}: {}) => {
           if (response.status === 200) {
             console.log(response.data.recruitList);
             setMainRecruitSortList(response.data.recruitList);
-            // return response.data.recruitList;
+            return response.data.recruitList;
           }
-          // return false;
+          return false;
         })
         .catch(function (error) {
           console.log(error);

diff --git a/baedalmate/src/components/molecules/Main/Category.tsx b/baedalmate/src/components/molecules/Main/Category.tsx
@@ -18,13 +18,6 @@ import {
   CATEGORY_WESTERN_IMG,
 } from 'themes/theme';
 
-// interface CategoryProps {
-//   navigation: NavigationProp<any, any>;
-//   user: {
-//     userName: string;
-//     userAddress: string;
-//   };
-// }
 export const categoryData = [
   {
     categoryId: 0,

diff --git a/baedalmate/src/components/molecules/Main/NowGathering.tsx b/baedalmate/src/components/molecules/Main/NowGathering.tsx
@@ -5,14 +5,6 @@ import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
 import NowGatheringItem from '../../atoms/Main/NowGatheringItem';
 
-// interface CategoryProps {
-//   navigation: NavigationProp<any, any>;
-//   user: {
-//     userName: string;
-//     userAddress: string;
-//   };
-// }
-
 const NowGathering = ({
   mainRecruitList,
 }: {
@@ -27,10 +19,6 @@ const NowGathering = ({
         }}>
         {mainRecruitList.map((v, i) => (
           <NowGatheringItem item={v} key={i}></NowGatheringItem>
-          // <NowGatheringItem item={mainRecruitList[1]}></NowGatheringItem>
-          // <NowGatheringItem item={mainRecruitList[2]}></NowGatheringItem>
-          // <NowGatheringItem item={mainRecruitList[3]}></NowGatheringItem>
-          // <NowGatheringItem item={mainRecruitList[4]}></NowGatheringItem>
         ))}
       </ScrollView>
     </View>

diff --git a/baedalmate/src/components/molecules/Main/TodayMenu.tsx b/baedalmate/src/components/molecules/Main/TodayMenu.tsx
@@ -11,14 +11,12 @@ interface UserDataProps {
   dormitory: string;
   nickname: string;
   mainTagRecruitList: mainTagRecruitListI;
-  setDormitory: Function;
 }
 
 const TodayMenu: React.FunctionComponent<UserDataProps> = ({
   dormitory,
   nickname,
   mainTagRecruitList,
-  setDormitory,
 }) => {
   return (
     <View
@@ -29,11 +27,7 @@ const TodayMenu: React.FunctionComponent<UserDataProps> = ({
         paddingHorizontal: '5%',
       }}>
       <Header />
-      <UserInfoTitle
-        userName={nickname}
-        userAddress={dormitory}
-        setDormitory={setDormitory}
-      />
+      <UserInfoTitle userName={nickname} userAddress={dormitory} />
 
       <Slider mainTagRecruitList={mainTagRecruitList} />
     </View>