Skip to content

Commit

Permalink
Feat: ReviewNo
Browse files Browse the repository at this point in the history
  • Loading branch information
@yejinleee
yejinleee committed Jul 12, 2022
1 parent 8db24d9 commit 92a2f86
Show file tree
Hide file tree
Showing 6 changed files with 267 additions and 203 deletions.
173 changes: 99 additions & 74 deletions src/components/Map/MapStoreReviewList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand All @@ -47,81 +48,105 @@ export const MapStoreReviewList = ({
},
);

return (
<Animated.FlatList
onScroll={(event) => {
Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], {
useNativeDriver: false,
})(event);
}}
ListHeaderComponent={
<>
<View>
<ImageSwiper height={220} imageList={storeData?.images} />
<PhotoModal
imageUri={reviewPhoto}
visible={photoModal}
closePhotoModal={() => setPhotoModal(false)}
/>
<MapStoreInfo
storeName={storeData?.name}
storeCategory={storeData?.category}
storeStatus={storeData?.storeStatus}
storeRate={storeData?.averageRate}
storeAddress={storeData?.address.street}
/>
<View style={{backgroundColor: '#F6F6FA', height: 8}} />
</View>
<View style={[styles.reviewToggleWrap]}>
<MapReviewToggleButton
toggleReview={() => setIsReview(true)}
togglePhoto={() => setIsReview(false)}
isReview={isReview}
reviewCount={reviewCount}
/>
</View>
</>
}
data={reviewList.data?.pages}
renderItem={({item, index}) => {
return (
<View key={index}>
{item.data.result.content.map((review: IStoreReview) => (
<MapStoreReview
name={review.name}
date={review.date}
rate={review.rate}
content={review.content}
images={review.images}
reply={review.reply}
openPhotoModal={openPhotoModal}
//리뷰없는경우 ----------------------------
if (reviewCount === 0) {
return (
<>
<View>
<ImageSwiper height={220} imageList={storeData?.images} />
<PhotoModal
imageUri={reviewPhoto}
visible={photoModal}
closePhotoModal={() => setPhotoModal(false)}
/>
<MapStoreInfo
storeName={storeData?.name}
storeCategory={storeData?.category}
storeStatus={storeData?.storeStatus}
storeRate={storeData?.averageRate}
storeAddress={storeData?.address.street}
/>
<View style={{backgroundColor: '#F6F6FA', height: 8}} />
</View>
<View style={[styles.reviewToggleWrap]}>
<MapReviewToggleButton
toggleReview={() => setIsReview(true)}
togglePhoto={() => setIsReview(false)}
isReview={isReview}
reviewCount={reviewCount}
/>
</View>
<View style={[DesignSystem.centerArrange, {flex: 1}]}>
<ReviewNo isPhoto={0} />
</View>
</>
);
} else {
return (
<Animated.FlatList
onScroll={(event) => {
Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], {
useNativeDriver: false,
})(event);
}}
ListHeaderComponent={
<>
<View>
<ImageSwiper height={220} imageList={storeData?.images} />
<PhotoModal
imageUri={reviewPhoto}
visible={photoModal}
closePhotoModal={() => setPhotoModal(false)}
/>
))}
</View>
);
}}
contentContainerStyle={styles.reviewListWrap}
onEndReached={() => {
if (reviewList.hasNextPage) {
reviewList.fetchNextPage();
<MapStoreInfo
storeName={storeData?.name}
storeCategory={storeData?.category}
storeStatus={storeData?.storeStatus}
storeRate={storeData?.averageRate}
storeAddress={storeData?.address.street}
/>
<View style={{backgroundColor: '#F6F6FA', height: 8}} />
</View>
<View style={[styles.reviewToggleWrap]}>
<MapReviewToggleButton
toggleReview={() => setIsReview(true)}
togglePhoto={() => setIsReview(false)}
isReview={isReview}
reviewCount={reviewCount}
/>
</View>
</>
}
}}
ListFooterComponent={
<>{reviewList.isFetching && !reviewList.isFetchingNextPage && <ActivityIndicator />}</>
}
/>
);

// return (
// <View style={[styles.reviewListWrap]}>
// {renderedReviews(dummyReviews)}
// <PhotoModal
// imageUri={reviewPhoto}
// visible={photoModal}
// closePhotoModal={() => setPhotoModal(false)}
// />
// </View>
// );
data={reviewList.data?.pages}
renderItem={({item, index}) => {
return (
<View key={index}>
{item.data.result.content.map((review: IStoreReview) => (
<MapStoreReview
name={review.name}
date={review.date}
rate={review.rate}
content={review.content}
images={review.images}
reply={review.reply}
openPhotoModal={openPhotoModal}
/>
))}
</View>
);
}}
contentContainerStyle={styles.reviewListWrap}
onEndReached={() => {
if (reviewList.hasNextPage) {
reviewList.fetchNextPage();
}
}}
ListFooterComponent={
<>{reviewList.isFetching && !reviewList.isFetchingNextPage && <ActivityIndicator />}</>
}
/>
);
}
};

const styles = StyleSheet.create({
Expand Down
168 changes: 102 additions & 66 deletions src/components/Map/MapStoreReviewPhoto.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import {
View,
Dimensions,
TouchableOpacity,
FlatList,
Image,
Animated,
ActivityIndicator,
} from 'react-native';
Expand All @@ -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;

Expand Down Expand Up @@ -53,75 +53,111 @@ export const MapStoreReviewPhoto = ({
},
},
);

const openPhotoModal = (imageSource: string) => {
setReviewPhoto({uri: imageSource});
setPhotoModal(true);
};

return (
<Animated.FlatList
onScroll={(event) => {
Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], {
useNativeDriver: false,
})(event);
}}
ListHeaderComponent={
<>
<View>
<ImageSwiper height={220} imageList={storeData?.images} />
<PhotoModal
imageUri={reviewPhoto}
visible={photoModal}
closePhotoModal={() => setPhotoModal(false)}
/>
<MapStoreInfo
storeName={storeData?.name}
storeCategory={storeData?.category}
storeStatus={storeData?.storeStatus}
storeRate={storeData?.averageRate}
storeAddress={storeData?.address.street}
/>
<View style={{backgroundColor: '#F6F6FA', height: 8}} />
</View>
<View style={[styles.reviewToggleWrap]}>
<MapReviewToggleButton
toggleReview={() => setIsReview(true)}
togglePhoto={() => setIsReview(false)}
isReview={isReview}
reviewCount={reviewCount}
/>
</View>
</>
}
data={reviewImages.data?.pages}
renderItem={({item}) => {
return (
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{item.data.result.content.map((image: any, index: number) => (
<TouchableOpacity key={index} onPress={() => openPhotoModal(image.imageUrl)}>
<View style={{borderColor: '#FFFFFF', borderWidth: 1}}>
<FastImage
source={{uri: image.imageUrl}}
style={{height: IMAGESIZE - 2, width: IMAGESIZE - 2}}
/>
</View>
</TouchableOpacity>
))}
</View>
);
}}
contentContainerStyle={styles.reviewPhotoWrap}
onEndReached={() => {
if (reviewImages.hasNextPage) {
reviewImages.fetchNextPage();
//리뷰없는경우 ----------------------------
if (reviewCount === 0) {
return (
<>
<View>
<ImageSwiper height={220} imageList={storeData?.images} />
<PhotoModal
imageUri={reviewPhoto}
visible={photoModal}
closePhotoModal={() => setPhotoModal(false)}
/>
<MapStoreInfo
storeName={storeData?.name}
storeCategory={storeData?.category}
storeStatus={storeData?.storeStatus}
storeRate={storeData?.averageRate}
storeAddress={storeData?.address.street}
/>
<View style={{backgroundColor: '#F6F6FA', height: 8}} />
</View>
<View style={[styles.reviewToggleWrap]}>
<MapReviewToggleButton
toggleReview={() => setIsReview(true)}
togglePhoto={() => setIsReview(false)}
isReview={isReview}
reviewCount={reviewCount}
/>
</View>
<View style={[DesignSystem.centerArrange, {flex: 1}]}>
<ReviewNo isPhoto={1} />
</View>
</>
);
} else {
return (
<Animated.FlatList
onScroll={(event) => {
Animated.event([{nativeEvent: {contentOffset: {y: offset}}}], {
useNativeDriver: false,
})(event);
}}
ListHeaderComponent={
<>
<View>
<ImageSwiper height={220} imageList={storeData?.images} />
<PhotoModal
imageUri={reviewPhoto}
visible={photoModal}
closePhotoModal={() => setPhotoModal(false)}
/>
<MapStoreInfo
storeName={storeData?.name}
storeCategory={storeData?.category}
storeStatus={storeData?.storeStatus}
storeRate={storeData?.averageRate}
storeAddress={storeData?.address.street}
/>
<View style={{backgroundColor: '#F6F6FA', height: 8}} />
</View>
<View style={[styles.reviewToggleWrap]}>
<MapReviewToggleButton
toggleReview={() => setIsReview(true)}
togglePhoto={() => setIsReview(false)}
isReview={isReview}
reviewCount={reviewCount}
/>
</View>
</>
}
}}
ListFooterComponent={
<>{reviewImages.isFetching && !reviewImages.isFetchingNextPage && <ActivityIndicator />}</>
}
/>
);
data={reviewImages.data?.pages}
renderItem={({item}) => {
return (
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{item.data.result.content.map((image: any, index: number) => (
<TouchableOpacity key={index} onPress={() => openPhotoModal(image.imageUrl)}>
<View style={{borderColor: '#FFFFFF', borderWidth: 1}}>
<FastImage
source={{uri: image.imageUrl}}
style={{height: IMAGESIZE - 2, width: IMAGESIZE - 2}}
/>
</View>
</TouchableOpacity>
))}
</View>
);
}}
contentContainerStyle={styles.reviewPhotoWrap}
onEndReached={() => {
if (reviewImages.hasNextPage) {
reviewImages.fetchNextPage();
}
}}
ListFooterComponent={
<>
{reviewImages.isFetching && !reviewImages.isFetchingNextPage && <ActivityIndicator />}
</>
}
/>
);
}
};

const styles = StyleSheet.create({
Expand Down
Loading

0 comments on commit 92a2f86

Please sign in to comment.