Feat: add api for Mypage - 리뷰관리

BOBpossible · Jul 8, 2022 · 8192848 · 8192848
1 parent c8e05e0
commit 8192848
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 43 deletions.
diff --git a/src/api/queryKey.ts b/src/api/queryKey.ts
@@ -1,3 +1,4 @@
 export const queryKey = {
   POINTSLIST: 'pointsList',
+  REVIEWLIST: 'reviewList',
 };
diff --git a/src/components/My/MyReviewEach.tsx b/src/components/My/MyReviewEach.tsx
@@ -5,57 +5,66 @@ import {useNavigation} from '@react-navigation/native';
 import {DesignSystem} from '../../assets/DesignSystem';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
+export type ReviewImagesType = {
+  imageUrl: string;
+};
+export type ReviewReplyType = {
+  date: string;
+  reply: string;
+  reviewReplyId: number;
+};
 export type MyReviewEachProps = {
-  name: string;
+  content: string;
   date: string;
+  images: ReviewImagesType[];
+  name: string;
   rate: number;
-  content: string;
-  imageUrl: string;
-  replyDate: string;
-  replyReply: string;
+  reply: ReviewReplyType[];
+  reviewId: numbeer;
 };
 
 //prettier-ignore
-export const MyReviewEach: FC<MyReviewEachProps> = ({name, date, rate, content, imageUrl, replyDate, replyReply}) => {
-  const navigation = useNavigation();
+export const MyReviewEach: FC<MyReviewEachProps> = ({name, date, rate, content, images, reply, reviewId}) => {
+
 
   return (
     <View style={{backgroundColor: 'white'}}>
-        <View style={[styles.totalWrap]}>
-            <View style={[styles.customerWrap]}>
-                <View style={[styles.title]}>
-                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
-                        <Text style={[DesignSystem.title3SB, DesignSystem.grey17, {marginRight: 12}]}>{name}</Text>
-                        <Text style={{fontFamily: 'Pretendard-Light', fontSize: 14, color: '#C4C4C4'}}>{date.slice(0,4)}.{date.slice(5,7)}.{date.slice(8,10)}</Text>
-                    </View>
-                    <TouchableOpacity>
-                        <Text style={[DesignSystem.body1Lt, DesignSystem.grey8]}>삭제</Text>
-                    </TouchableOpacity>
-                </View>
-                <View style={[styles.stars]}>
-                {[...Array(rate)].map((e, i) => (
-                  <View key={i}>
-                    <Icon name="star" size={18} color={'#FFDE69'} />
-                  </View>
-                ))}
-                </View>
-                <View style={[styles.reviewContents]}>
-                    <Text style={{fontFamily: 'Pretendard-Light', fontSize: 16, color: 'black'}}>{content}</Text>
-                </View>
-                <View style={[styles.reviewImg]}>
-                  <Text>🚨🚨🚨🚨🚨🚨🚨🚨🚨리뷰사진🚨🚨🚨🚨🚨</Text>
+      <View style={[styles.totalWrap]}>
+        <View style={[styles.customerWrap]}>
+            <View style={[styles.title]}>
+                <View style={{flexDirection: 'row', alignItems: 'center'}}>
+                    <Text style={[DesignSystem.title3SB, DesignSystem.grey17, {marginRight: 12}]}>{name}</Text>
+                    <Text style={{fontFamily: 'Pretendard-Light', fontSize: 14, lineHeight: 14, color: '#C4C4C4'}}>{date.slice(0,4)}.{date.slice(5,7)}.{date.slice(8,10)}</Text>
                 </View>
+                <TouchableOpacity>
+                    <Text style={[DesignSystem.body1Lt, DesignSystem.grey8]}>삭제</Text>
+                </TouchableOpacity>
             </View>
-            <View style={[styles.ownerWrap]}>
-                <View style={[styles.ownerTitle, {alignItems: 'center'}]}>
-                    <Text style={{fontFamily: 'Pretendard-Light', fontSize: 14, color: '#7D7D7D', marginRight: 6}}>사장님 답글</Text>
-                    <Text style={[DesignSystem.grey7, {fontFamily: 'Pretendard-Light', fontSize: 14}]}>{replyDate.slice(0,4)}.{replyDate.slice(5,7)}.{replyDate.slice(8,10)}</Text>
-                </View>
-                <View style={[styles.ownerContents]}>
-                  <Text style={[DesignSystem.body2Lt, {color: 'black'}, styles.ownerContentsText]}>{replyReply}</Text>
-                </View>
+            <View style={[styles.stars]}>
+            {[...Array(rate)].map((e, i) => (
+              <View key={i}>
+                <Icon name="star" size={18} color={'#FFDE69'} />
+              </View>
+            ))}
             </View>
-    </View>
+            <View style={[styles.reviewContents]}>
+                <Text style={[DesignSystem.body1Lt, {color: 'black'}]}>{content}</Text>
+            </View>
+            <View style={[styles.reviewImg]}>
+              <Text>🚨🚨🚨🚨🚨🚨🚨🚨🚨리뷰사진🚨🚨🚨🚨🚨</Text>
+              {/* images.imageUrl */}
+            </View>
+        </View>
+        <View style={[styles.ownerWrap]}>
+            <View style={[styles.ownerTitle, {alignItems: 'center'}]}>
+                <Text style={{fontFamily: 'Pretendard-Light', fontSize: 14, lineHeight: 14, color: '#7D7D7D', marginRight: 6}}>사장님 답글</Text>
+                <Text style={[DesignSystem.grey7, {fontFamily: 'Pretendard-Light', fontSize: 14, lineHeight: 14}]}>{reply[0].date.slice(0,4)}.{reply[0].date.slice(5,7)}.{reply[0].date.slice(8,10)}</Text>
+            </View>
+            <View style={[styles.ownerContents]}>
+              <Text style={[DesignSystem.body2Long, {color: 'black'}, styles.ownerContentsText]}>{reply[0].reply}</Text>
+            </View>
+        </View>
+      </View>
     </View>
   );
 };
@@ -74,6 +83,7 @@ const styles = StyleSheet.create({
   title: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    alignItems: 'center',
     marginBottom: 4,
   },
   stars: {

diff --git a/src/screens/my/MyReview.tsx b/src/screens/my/MyReview.tsx
@@ -4,6 +4,11 @@ import type {NativeStackScreenProps} from '@react-navigation/native-stack';
 import {MyStackParamList} from '../../nav/MyNavigator';
 import {MyHeader} from '../../components/My/MyHeader';
 import {MyReviewEach} from '../../components/My/MyReviewEach';
+import {userToken} from '../../state';
+import {useRecoilValue} from 'recoil';
+import {customAxios} from '../../api/customAxios';
+import {useQuery} from 'react-query';
+import {queryKey} from '../../api/queryKey';
 
 const dummyMission = [
   {
@@ -83,13 +88,25 @@ const dummyMission = [
     reviewId: 1,
   },
 ];
-
+export type PointsListType = {
+  content: PointsListContent[];
+  totalPoints: number;
+};
 type Props = NativeStackScreenProps<MyStackParamList, 'MyReview'>;
 
 export const MyReview = ({navigation}: Props) => {
+  const token = useRecoilValue(userToken);
+  //마이페이지 - 나의 포인트 내역 조회
+  const getReviewsMe = async () => {
+    const {data} = await customAxios(token).get('/api/v1/reviews/me');
+    return data.result;
+  };
+  const DataReviewList = useQuery<PointsListType>([queryKey.REVIEWLIST, token], getReviewsMe);
+
   const goBack = () => {
     navigation.goBack();
   };
+
   return (
     <SafeAreaView style={[styles.flex]}>
       <MyHeader goBack={goBack} title={'리뷰 관리'} />
@@ -104,9 +121,9 @@ export const MyReview = ({navigation}: Props) => {
               date={item.date}
               rate={item.rate}
               content={item.content}
-              imageUrl={item.images[0].imageUrl}
-              replyDate={item.reply[0].date}
-              replyReply={item.reply[0].reply}
+              images={item.images}
+              reply={item.reply}
+              reviewId={item.reviewId}
             />
           </>
         )}