From 92a2f86b40de9f34024933def7bc7c533d7dfe0b Mon Sep 17 00:00:00 2001 From: yejinleee Date: Tue, 12 Jul 2022 18:22:08 +0900 Subject: [PATCH] Feat: ReviewNo --- src/components/Map/MapStoreReviewList.tsx | 173 ++++++++++++--------- src/components/Map/MapStoreReviewPhoto.tsx | 168 ++++++++++++-------- src/components/ReviewNo.tsx | 18 +++ src/modal/StoreModal.tsx | 4 +- src/screens/my/MyPoint.tsx | 25 --- src/screens/my/MyReview.tsx | 82 +++++----- 6 files changed, 267 insertions(+), 203 deletions(-) create mode 100644 src/components/ReviewNo.tsx diff --git a/src/components/Map/MapStoreReviewList.tsx b/src/components/Map/MapStoreReviewList.tsx index d79f927..511d4fa 100644 --- a/src/components/Map/MapStoreReviewList.tsx +++ b/src/components/Map/MapStoreReviewList.tsx @@ -9,6 +9,8 @@ import {MapReviewToggleButton} from './MapReviewToggleButton'; import {MapStoreInfo} from '..'; import {ImageSwiper} from '../Common/ImageSwiper'; import {IStoreData, IStoreReview} from '../../data'; +import {DesignSystem} from '../../assets/DesignSystem'; +import {ReviewNo} from '../ReviewNo'; type props = { storeData?: IStoreData; @@ -37,7 +39,6 @@ export const MapStoreReviewList = ({ ({pageParam}) => getStoreReviewList({pageParam}, storeData?.storeId), { getNextPageParam: (lastPage, pages) => { - // console.log('페이지들:', pages.length); if (lastPage.data.result.last === false) { return pages.length + 1; } else { @@ -47,81 +48,105 @@ export const MapStoreReviewList = ({ }, ); - return ( - { - Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], { - useNativeDriver: false, - })(event); - }} - ListHeaderComponent={ - <> - - - setPhotoModal(false)} - /> - - - - - setIsReview(true)} - togglePhoto={() => setIsReview(false)} - isReview={isReview} - reviewCount={reviewCount} - /> - - - } - data={reviewList.data?.pages} - renderItem={({item, index}) => { - return ( - - {item.data.result.content.map((review: IStoreReview) => ( - + + + setPhotoModal(false)} + /> + + + + + setIsReview(true)} + togglePhoto={() => setIsReview(false)} + isReview={isReview} + reviewCount={reviewCount} + /> + + + + + + ); + } else { + return ( + { + Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], { + useNativeDriver: false, + })(event); + }} + ListHeaderComponent={ + <> + + + setPhotoModal(false)} /> - ))} - - ); - }} - contentContainerStyle={styles.reviewListWrap} - onEndReached={() => { - if (reviewList.hasNextPage) { - reviewList.fetchNextPage(); + + + + + setIsReview(true)} + togglePhoto={() => setIsReview(false)} + isReview={isReview} + reviewCount={reviewCount} + /> + + } - }} - ListFooterComponent={ - <>{reviewList.isFetching && !reviewList.isFetchingNextPage && } - } - /> - ); - - // return ( - // - // {renderedReviews(dummyReviews)} - // setPhotoModal(false)} - // /> - // - // ); + data={reviewList.data?.pages} + renderItem={({item, index}) => { + return ( + + {item.data.result.content.map((review: IStoreReview) => ( + + ))} + + ); + }} + contentContainerStyle={styles.reviewListWrap} + onEndReached={() => { + if (reviewList.hasNextPage) { + reviewList.fetchNextPage(); + } + }} + ListFooterComponent={ + <>{reviewList.isFetching && !reviewList.isFetchingNextPage && } + } + /> + ); + } }; const styles = StyleSheet.create({ diff --git a/src/components/Map/MapStoreReviewPhoto.tsx b/src/components/Map/MapStoreReviewPhoto.tsx index 40f799c..99d59e0 100644 --- a/src/components/Map/MapStoreReviewPhoto.tsx +++ b/src/components/Map/MapStoreReviewPhoto.tsx @@ -4,8 +4,6 @@ import { View, Dimensions, TouchableOpacity, - FlatList, - Image, Animated, ActivityIndicator, } from 'react-native'; @@ -14,10 +12,12 @@ import FastImage from 'react-native-fast-image'; import {useInfiniteQuery} from 'react-query'; import {queryKey} from '../../api/queryKey'; import {getStoreReviewImages} from '../../api/store'; -import {IStoreData, IStoreReviewImages} from '../../data'; +import {IStoreData} from '../../data'; import {MapStoreInfo} from './MapStoreInfo'; import {ImageSwiper} from '../Common/ImageSwiper'; import {MapReviewToggleButton} from './MapReviewToggleButton'; +import {ReviewNo} from '../ReviewNo'; +import {DesignSystem} from '../../assets/DesignSystem'; const WIDTH = Dimensions.get('window').width; const IMAGESIZE = WIDTH / 3; @@ -53,75 +53,111 @@ export const MapStoreReviewPhoto = ({ }, }, ); - const openPhotoModal = (imageSource: string) => { setReviewPhoto({uri: imageSource}); setPhotoModal(true); }; - return ( - { - Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], { - useNativeDriver: false, - })(event); - }} - ListHeaderComponent={ - <> - - - setPhotoModal(false)} - /> - - - - - setIsReview(true)} - togglePhoto={() => setIsReview(false)} - isReview={isReview} - reviewCount={reviewCount} - /> - - - } - data={reviewImages.data?.pages} - renderItem={({item}) => { - return ( - - {item.data.result.content.map((image: any, index: number) => ( - openPhotoModal(image.imageUrl)}> - - - - - ))} - - ); - }} - contentContainerStyle={styles.reviewPhotoWrap} - onEndReached={() => { - if (reviewImages.hasNextPage) { - reviewImages.fetchNextPage(); + //리뷰없는경우 ---------------------------- + if (reviewCount === 0) { + return ( + <> + + + setPhotoModal(false)} + /> + + + + + setIsReview(true)} + togglePhoto={() => setIsReview(false)} + isReview={isReview} + reviewCount={reviewCount} + /> + + + + + + ); + } else { + return ( + { + Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], { + useNativeDriver: false, + })(event); + }} + ListHeaderComponent={ + <> + + + setPhotoModal(false)} + /> + + + + + setIsReview(true)} + togglePhoto={() => setIsReview(false)} + isReview={isReview} + reviewCount={reviewCount} + /> + + } - }} - ListFooterComponent={ - <>{reviewImages.isFetching && !reviewImages.isFetchingNextPage && } - } - /> - ); + data={reviewImages.data?.pages} + renderItem={({item}) => { + return ( + + {item.data.result.content.map((image: any, index: number) => ( + openPhotoModal(image.imageUrl)}> + + + + + ))} + + ); + }} + contentContainerStyle={styles.reviewPhotoWrap} + onEndReached={() => { + if (reviewImages.hasNextPage) { + reviewImages.fetchNextPage(); + } + }} + ListFooterComponent={ + <> + {reviewImages.isFetching && !reviewImages.isFetchingNextPage && } + + } + /> + ); + } }; const styles = StyleSheet.create({ diff --git a/src/components/ReviewNo.tsx b/src/components/ReviewNo.tsx new file mode 100644 index 0000000..4a7e6c7 --- /dev/null +++ b/src/components/ReviewNo.tsx @@ -0,0 +1,18 @@ +import React, {FC} from 'react'; +import {Image, Text, View} from 'react-native'; +import {DesignSystem} from '../assets/DesignSystem'; + +export type ReviewNoProps = { + isPhoto: number; // 리뷰사진1, 리뷰0 +}; + +export const ReviewNo: FC = ({isPhoto}) => { + return ( + + + {isPhoto === 1 ? '아직 리뷰 사진이 없어요!' : '아직 리뷰가 없어요!'} + + + + ); +}; diff --git a/src/modal/StoreModal.tsx b/src/modal/StoreModal.tsx index ab52c28..21f594f 100644 --- a/src/modal/StoreModal.tsx +++ b/src/modal/StoreModal.tsx @@ -43,7 +43,7 @@ const StoreModal: FC = ({storeId, visible, closeStoreModal}) => extrapolate: 'clamp', }), }); - + // console.log('------------------', storeData.data); //undefined 인ㅇ지로 반편 return ( @@ -136,7 +136,7 @@ const styles = StyleSheet.create({ borderRadius: 41, backgroundColor: '#2A2A2A', position: 'absolute', - bottom: 4, + bottom: 16, alignSelf: 'center', justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/my/MyPoint.tsx b/src/screens/my/MyPoint.tsx index 1313850..d663f3c 100644 --- a/src/screens/my/MyPoint.tsx +++ b/src/screens/my/MyPoint.tsx @@ -25,31 +25,6 @@ export type PointsListType = { // nextPage: number; pageNumber: number; }; -const dummyMission = [ - { - date: '2022-12-03T16:01:34.864Z', - title: '마라마라마라탕', - subTitle: '20000원 이상 식사', - point: -500, - }, - { - date: '2022-12-03T16:01:34.864Z', - title: '어쩌고 맛집', - subTitle: '15000원 이상', - point: 3000, - }, - { - date: '2022-11-13T16:01:34.864Z', - title: '포인트 전환', - point: -400, - }, - { - date: '2022-06-02T16:01:34.864Z', - title: '와라라라 맛집', - subTitle: '18000원 이상', - point: 500, - }, -]; export const MyPoint = ({navigation, route}: Props) => { const [point, setPoint] = useState(route.params.point); diff --git a/src/screens/my/MyReview.tsx b/src/screens/my/MyReview.tsx index 9e9e992..94f9f95 100644 --- a/src/screens/my/MyReview.tsx +++ b/src/screens/my/MyReview.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, {useState} from 'react'; import {View, StyleSheet, SafeAreaView, FlatList} from 'react-native'; import type {NativeStackScreenProps} from '@react-navigation/native-stack'; import {MyStackParamList} from '../../nav/MyNavigator'; @@ -8,7 +8,9 @@ import {useInfiniteQuery} from 'react-query'; import {queryKey} from '../../api/queryKey'; import {getReviewsMe} from '../../api'; import {IReviewsType} from '../../data'; -import { PhotoModal } from '../../modal'; +import {PhotoModal} from '../../modal'; +import {ReviewNo} from '../../components/ReviewNo'; +import { DesignSystem } from '../../assets/DesignSystem'; type Props = NativeStackScreenProps; @@ -19,50 +21,58 @@ export const MyReview = ({navigation}: Props) => { setReviewPhoto({uri: imageSource}); setPhotoModal(true); }; - const DataReviews = useInfiniteQuery([queryKey.REVIEWSME], getReviewsMe, { + const goBack = () => { + navigation.goBack(); + }; + + const DataReviews = useInfiniteQuery([queryKey.REVIEWSME], getReviewsMe, { getNextPageParam: (lastPage, pages) => { return pages.length; }, }); - const goBack = () => { - navigation.goBack(); - }; + // console.log(DataReviews.data?.pages.length); return ( <> - { - if (DataReviews.hasNextPage) { - DataReviews.fetchNextPage(); - } - }} - renderItem={({item}) => ( - <> - {/* {console.log('iiiiiiiiiiiiii', item.content)} */} - {item.content.map((e: any, i: number) => { - return ( - - - - ); - })} - - )} - /> + {DataReviews.data?.pages.length !== 0 ? ( //리뷰없는경우 + + + + ) : ( + { + if (DataReviews.hasNextPage) { + DataReviews.fetchNextPage(); + } + }} + renderItem={({item}) => ( + <> + {/* {console.log('iiiiiiiiiiiiii', item.content)} */} + {item.content.map((e: any, i: number) => { + return ( + + + + ); + })} + + )} + /> + )}