( return ( <> - + + + + 저장중입니다. + - ); } diff --git a/src/components/base/withMessage.tsx b/src/components/base/withMessage.tsx new file mode 100644 index 00000000..c4d20e2c --- /dev/null +++ b/src/components/base/withMessage.tsx @@ -0,0 +1,79 @@ +import React, { Component, ComponentType } from 'react'; +import { Animated, SafeAreaView, StyleSheet, Text, View } from 'react-native'; +import { color } from 'src/theme'; + +export interface MessageProps { + showMessage: (message: string) => void; +} + +interface State { + message?: string; +} + +const messageHeight = 40; +const styles = StyleSheet.create({ + container: { + position: 'absolute', + bottom: 38, + left: 0, + right: 0, + alignItems: 'center', + }, + wrapper: { + paddingHorizontal: 16, + height: messageHeight, + borderRadius: messageHeight / 2, + backgroundColor: color.blue, + justifyContent: 'center', + alignItems: 'center', + }, + message: { + fontSize: 15, + color: color.white, + }, +}); + +export default function withMessage( + WrappedComponent: ComponentType +) { + return class WithMessage extends Component { + private opacity = new Animated.Value(0); + + state: State = { message: undefined }; + + showMessage = (message: string) => { + this.setState({ message }); + Animated.timing(this.opacity, { + toValue: 1, + duration: 80, + useNativeDriver: true, + }).start(); + setTimeout(() => { + Animated.timing(this.opacity, { + toValue: 0, + duration: 120, + useNativeDriver: true, + }).start(e => { + if (e.finished) this.setState({ message: undefined }); + }); + }, 1600); + }; + + render() { + const { message } = this.state; + return ( + + + {message && ( + + + {message} + + + )} + + ); + } + }; +} diff --git a/src/components/container/LabelWrapper/LabelWrapper.styles.ts b/src/components/container/LabelWrapper/LabelWrapper.styles.ts index 7d5ba39e..78e5b0ba 100644 --- a/src/components/container/LabelWrapper/LabelWrapper.styles.ts +++ b/src/components/container/LabelWrapper/LabelWrapper.styles.ts @@ -3,9 +3,9 @@ import { color, font } from 'src/theme'; export const texts = StyleSheet.create({ label: { - color: `${color.black}78`, - fontSize: font.size.small, - marginBottom: 8, + color: color.black33Opacity, + fontSize: font.size.medium, + marginBottom: 12, }, }); diff --git a/src/components/container/PageContainer/PageContainer.styles.ts b/src/components/container/PageContainer/PageContainer.styles.ts index 9903191f..94a5be0b 100644 --- a/src/components/container/PageContainer/PageContainer.styles.ts +++ b/src/components/container/PageContainer/PageContainer.styles.ts @@ -1,15 +1,14 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { color, font } from 'src/theme'; +import { color, font, size } from 'src/theme'; const { width, height } = Dimensions.get('window'); -export const horizontalSize = width * 0.064; export const views = StyleSheet.create({ container: { flex: 1 }, - contentWrapper: { flex: 1, marginHorizontal: horizontalSize }, + contentWrapper: { flex: 1, marginHorizontal: size.horizontal }, bottom: { width, - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, marginBottom: height * 0.045, }, bottomBox: { @@ -39,7 +38,7 @@ export const views = StyleSheet.create({ export const texts = StyleSheet.create({ top: { - color: color.blackOpacity, + color: color.black, fontSize: 16, }, bottomBox: { diff --git a/src/components/container/PageContainer/PageContainer.tsx b/src/components/container/PageContainer/PageContainer.tsx index e57f1697..494f9f02 100644 --- a/src/components/container/PageContainer/PageContainer.tsx +++ b/src/components/container/PageContainer/PageContainer.tsx @@ -15,6 +15,7 @@ import { View, ScrollView, Platform, + Keyboard, } from 'react-native'; interface Props { @@ -24,6 +25,8 @@ interface Props { title?: string; subtitle?: string; titleNarrow?: boolean; + titleOnScroll?: string; + alignTitleCenter?: boolean; // top left?: { navigation: NavigationScreenProp; @@ -34,7 +37,6 @@ interface Props { handlePress: () => void; }; center?: string; - showBorder?: boolean; // bottom bottom?: { view: ReactNode; @@ -46,8 +48,10 @@ interface Props { disable: boolean; }; // option + showBorder?: boolean; extraScrollHeight?: number; extraBottom?: number; + enableScroll?: boolean; } interface State { @@ -90,16 +94,21 @@ class PageContainer extends PureComponent { }; handleScroll = (evt: NativeSyntheticEvent) => { - const { center, title } = this.props; + const { center, title, titleOnScroll } = this.props; const { contentOffset } = evt.nativeEvent; this.setState(state => produce(state, draft => { - if (contentOffset && contentOffset.y > 84) { + if (contentOffset.y > 84) { if (!state.showBorder) draft.showBorder = true; - if (title && !center && !state.center) draft.center = title; + if (!center && !state.center) { + if (title) draft.center = title; + if (titleOnScroll) draft.center = titleOnScroll; + } } else { if (state.showBorder) draft.showBorder = false; - if (state.center) delete draft.center; + if ((title || titleOnScroll) && state.center) { + draft.center = undefined; + } } }) ); @@ -111,14 +120,17 @@ class PageContainer extends PureComponent { title, subtitle, titleNarrow, + alignTitleCenter, left, right, bottom, bottomBox, + enableScroll, extraBottom: extraScrollHeight = 85, } = this.props; const navLeft = left && { handlePress: () => { + Keyboard.dismiss(); if (left.routeName) left.navigation.navigate(left.routeName); else left.navigation.goBack(null); }, @@ -130,7 +142,10 @@ class PageContainer extends PureComponent { ), }; const navRight = right && { - handlePress: right.handlePress, + handlePress: () => { + Keyboard.dismiss(); + right.handlePress(); + }, view: typeof right.view === 'string' ? ( {right.view} @@ -154,17 +169,33 @@ class PageContainer extends PureComponent { style={views.contentWrapper} onScroll={this.handleScroll} scrollEventThrottle={160} - scrollEnabled={bottomBox !== undefined} + scrollEnabled={enableScroll || bottomBox !== undefined} showsVerticalScrollIndicator={false}> {title && ( - {title} - {subtitle && {subtitle}} + + {title} + + {subtitle && ( + + {subtitle} + + )} )} {children} - {bottomBox && } + {(enableScroll || bottomBox) && ( + + )} {bottom && ( {bottom.view} diff --git a/src/components/module/DateInput/DateInput.styles.ts b/src/components/module/DateInput/DateInput.styles.ts index f783a522..9344d4a3 100644 --- a/src/components/module/DateInput/DateInput.styles.ts +++ b/src/components/module/DateInput/DateInput.styles.ts @@ -5,13 +5,14 @@ export const views = StyleSheet.create({ datePicker: { // outer size width: '100%', + marginTop: 4, }, dateInput: { // border styles height: 49, borderWidth: 1, borderRadius: 5, - borderColor: color.grayDA, + borderColor: color.grayEF, paddingHorizontal: 12, }, }); diff --git a/src/components/module/DefaultImage/DefaultImage.tsx b/src/components/module/DefaultImage/DefaultImage.tsx new file mode 100644 index 00000000..2410c7c0 --- /dev/null +++ b/src/components/module/DefaultImage/DefaultImage.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Image } from 'react-native'; +import { color } from 'src/theme'; + +interface Props { + size: number; + uri?: string; + showBorder?: boolean; +} + +const DefaultImage: React.FC = ({ size, uri, showBorder }) => ( + +); + +export default DefaultImage; diff --git a/src/components/module/DefaultImage/index.ts b/src/components/module/DefaultImage/index.ts new file mode 100644 index 00000000..8d115500 --- /dev/null +++ b/src/components/module/DefaultImage/index.ts @@ -0,0 +1 @@ +export { default } from './DefaultImage'; diff --git a/src/components/module/DoubleTab/DoubleTab.tsx b/src/components/module/DoubleTab/DoubleTab.tsx new file mode 100644 index 00000000..cb4d4c15 --- /dev/null +++ b/src/components/module/DoubleTab/DoubleTab.tsx @@ -0,0 +1,36 @@ +import React, { ReactNode } from 'react'; +import { TouchableOpacity } from 'react-native'; + +interface Props { + onDoubleTab: () => void; + children: ReactNode; + delay?: number; + style?: object; +} + +class DoubleTab extends React.Component { + private lastTap?: number; + + handleDoubleTab = () => { + const { delay, onDoubleTab } = this.props; + const now = Date.now(); + if (this.lastTap && now - this.lastTap < (delay || 300)) { + onDoubleTab(); + } else { + this.lastTap = now; + } + }; + + render() { + return ( + + {this.props.children} + + ); + } +} + +export default DoubleTab; diff --git a/src/components/module/DoubleTab/index.ts b/src/components/module/DoubleTab/index.ts new file mode 100644 index 00000000..43c32510 --- /dev/null +++ b/src/components/module/DoubleTab/index.ts @@ -0,0 +1 @@ +export { default } from './DoubleTab'; diff --git a/src/components/module/EmptyList/EmptyList.tsx b/src/components/module/EmptyList/EmptyList.tsx new file mode 100644 index 00000000..a4721881 --- /dev/null +++ b/src/components/module/EmptyList/EmptyList.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Image, Text, View } from 'react-native'; +import { color, font } from 'src/theme'; + +interface Props { + source: NodeRequire; + message: string; + style?: object; +} + +const EmptyList: React.FC = ({ source, message, style }) => ( + + + + {message} + + +); + +export default EmptyList; diff --git a/src/components/module/EmptyList/index.ts b/src/components/module/EmptyList/index.ts new file mode 100644 index 00000000..279d1190 --- /dev/null +++ b/src/components/module/EmptyList/index.ts @@ -0,0 +1 @@ +export { default } from './EmptyList'; diff --git a/src/components/module/Feed/Feed.styles.ts b/src/components/module/Feed/Feed.styles.ts new file mode 100644 index 00000000..cb78b5ff --- /dev/null +++ b/src/components/module/Feed/Feed.styles.ts @@ -0,0 +1,141 @@ +import { Dimensions, StyleSheet } from 'react-native'; +import { color, font, size } from 'src/theme'; + +export const { width } = Dimensions.get('window'); +const paginateHeight = 25; + +export const views = StyleSheet.create({ + summeryWrapper: { + height: 43, + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: size.horizontal, + backgroundColor: color.grayF9, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + header: { + paddingHorizontal: size.horizontal, + height: 52, + flexDirection: 'row', + alignItems: 'center', + }, + message: { + flex: 1, + marginLeft: 4, + }, + headerButton: { + paddingLeft: 16, + height: '100%', + alignItems: 'center', + flexDirection: 'row', + }, + smallDot: { + width: 3, + height: 3, + borderRadius: 1.5, + backgroundColor: color.black33Opacity, + marginLeft: 2, + }, + image: { + width, + height: width, + resizeMode: 'contain', + backgroundColor: color.grayF9, + }, + infoWrapper: { + height: 43, + paddingHorizontal: size.horizontal, + flexDirection: 'row', + justifyContent: 'space-between', + borderTopWidth: 1, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + infoItem: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + infoIcon: { + height: 18, + resizeMode: 'contain', + }, + paginateStatus: { + position: 'absolute', + bottom: 10, + right: 9, + height: paginateHeight, + paddingHorizontal: 8, + borderRadius: paginateHeight / 2, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: color.blackOpacity, + }, + textWrapper: { + paddingHorizontal: size.horizontal, + paddingTop: 16, + paddingBottom: 20, + borderBottomWidth: 0.5, + borderColor: color.grayEF, + }, + likeInfo: { + flexDirection: 'row', + alignItems: 'center', + }, + likeAnimation: { + ...StyleSheet.absoluteFillObject, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export const texts = StyleSheet.create({ + name: { + marginLeft: 8, + color: color.black, + fontSize: 16, + fontWeight: '600', + }, + message: { + marginLeft: 4, + color: color.black33Opacity, + fontSize: 11, + }, + info: { + marginLeft: 4, + color: '#848484', + fontSize: font.size.medium, + }, + paginate: { + color: color.white, + fontSize: font.size.small, + }, + likes: { + marginLeft: 8, + color: color.black33, + fontSize: font.size.medium, + fontWeight: '700', + }, + memo: { + marginTop: 12, + color: '#484848', + fontSize: 15, + }, + summeryDate: { + flex: 1, + color: color.gray48, + fontSize: font.size.small, + }, + summeryRight: { + fontSize: font.size.small, + color: color.blackOpacity, + }, +}); + +export const icons = StyleSheet.create({ + heart: { + width: 18, + height: 16, + }, +}); diff --git a/src/components/module/Feed/Feed.tsx b/src/components/module/Feed/Feed.tsx new file mode 100644 index 00000000..7cd92618 --- /dev/null +++ b/src/components/module/Feed/Feed.tsx @@ -0,0 +1,275 @@ +import { find } from 'lodash'; +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import ActionSheet from 'react-native-actionsheet'; +import { FlatList } from 'react-native-gesture-handler'; +import { connect } from 'react-redux'; +import { rangeWithUnit, timeWithUnit } from 'src/assets/functions/print'; +import DefaultImage from 'src/components/module/DefaultImage'; +import DoubleTab from 'src/components/module/DoubleTab'; +import { ReducerState } from 'src/store/reducers'; +import { icons, texts, views } from './Feed.styles'; +import { + Animated, + Image, + Text, + TouchableOpacity, + View, + ViewToken, +} from 'react-native'; +import { + deleteFeed, + pushLike, + undoLike, + Feed as FeedInterface, +} from 'src/services/api/feed'; + +interface Props { + feed: FeedInterface; + prevFeed?: FeedInterface | null; + user: ReducerState['user']; + deleteFromList: (id: string) => void; +} + +interface State { + index: number; + pushedLike: boolean; + showAnimation: boolean; + likeCount: number; + heartSize: Animated.Value; +} + +enum Actions { + Delete, + Cancel, +} + +class Feed extends PureComponent { + private actionSheet = React.createRef(); + + state: State = { + index: 1, + pushedLike: false, + showAnimation: false, + likeCount: 0, + heartSize: new Animated.Value(0), + }; + + componentDidMount() { + const { feed, user } = this.props; + this.setState({ + pushedLike: + find(feed.likes, like => user._id === like.user) !== undefined, + likeCount: feed.likes.length, + }); + } + + toggleLike = () => { + const { _id } = this.props.feed; + const pushedLike = !this.state.pushedLike; + this.setState({ + pushedLike, + likeCount: pushedLike + ? this.state.likeCount + 1 + : this.state.likeCount - 1, + showAnimation: pushedLike, + }); + + if (pushedLike) { + pushLike({ _id }); + Animated.timing(this.state.heartSize, { + toValue: 1, + duration: 60, + useNativeDriver: true, + }).start(bigger => { + if (bigger.finished) { + setTimeout(() => { + Animated.timing(this.state.heartSize, { + toValue: 0, + duration: 120, + useNativeDriver: true, + }).start(smaller => { + if (smaller.finished) { + this.setState({ showAnimation: false }); + } + }); + }, 1600); + } + }); + } else { + undoLike({ _id }); + } + }; + + handleIndexChanged = (info: { + viewableItems: ViewToken[]; + changed: ViewToken[]; + }) => { + const index = (info.viewableItems[0].index || 0) + 1; + this.setState({ index }); + }; + + handlePressDots = () => { + const actionSheet = this.actionSheet.current; + if (actionSheet) actionSheet.show(); + }; + + handleActionSheet = async (index: number) => { + if (Actions.Delete === index) { + const { _id } = this.props.feed; + await deleteFeed({ _id }); + this.props.deleteFromList(_id); + } + }; + + renderSummery = () => { + const { feed, user, prevFeed } = this.props; + const yearMonth = moment(feed.createdAt).format('YYYY년 MM월'); + if ( + prevFeed === null || + (prevFeed && yearMonth < moment(prevFeed.createdAt).format('YYYY년 MM월')) + ) { + if (!user.repDog) return; + const summery = find( + user.repDog.histories, + history => history.yearMonth === yearMonth + ); + if (summery) { + return ( + + {summery.yearMonth} 산책 + {`${ + summery.count + }회 / ${rangeWithUnit(summery.distance)} / ${timeWithUnit( + summery.seconds + )} / ${summery.steps}걸음 / ${Math.floor( + summery.steps / 28.5 + )}kcal`} + + ); + } + } + return null; + }; + + render() { + const { feed, user } = this.props; + + return ( + + {this.renderSummery()} + + + {feed.dog.name} + + + {moment(feed.createdAt).fromNow()} + + + {user._id === feed.user && ( + + + + + + )} + + + index.toString()} + viewabilityConfig={{ + itemVisiblePercentThreshold: 50, + }} + renderItem={({ item }) => ( + + + + )} + showsHorizontalScrollIndicator={false} + onViewableItemsChanged={this.handleIndexChanged} + pagingEnabled + horizontal + /> + {this.state.showAnimation && ( + + + + )} + + {`${this.state.index} / ${ + feed.images.length + }`} + + + + {[ + { + icon: require('src/assets/icons/ic_time.png'), + value: timeWithUnit(feed.seconds), + }, + { + icon: require('src/assets/icons/ic_distance.png'), + value: rangeWithUnit(feed.distance), + }, + { + icon: require('src/assets/icons/ic_poo_gray.png'), + value: `${feed.poos}회`, + }, + { + icon: require('src/assets/icons/ic_pee_gray.png'), + value: `${feed.pees}회`, + }, + ].map((data, index) => ( + + + {data.value} + + ))} + + + + + + + {this.state.likeCount} + + {feed.memo !== undefined && ( + {feed.memo} + )} + + + + ); + } +} + +export default connect((state: ReducerState) => ({ user: state.user }))(Feed); diff --git a/src/components/module/Feed/index.ts b/src/components/module/Feed/index.ts new file mode 100644 index 00000000..5beb2fc8 --- /dev/null +++ b/src/components/module/Feed/index.ts @@ -0,0 +1 @@ +export { default } from './Feed'; diff --git a/src/components/module/FeedHeader/FeedHeader.tsx b/src/components/module/FeedHeader/FeedHeader.tsx deleted file mode 100644 index fae12dfc..00000000 --- a/src/components/module/FeedHeader/FeedHeader.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { find } from 'lodash'; -import moment from 'moment'; -import React from 'react'; -import { Image, StyleSheet, Text, View } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { UserInterface } from 'src/store/actions/user'; -import { color, font } from 'src/theme'; - -interface Props { - user: UserInterface; - updatedAt: Date; -} - -const thumbnailSize = 32; -const styles = StyleSheet.create({ - wrapper: { - paddingHorizontal: horizontalSize, - paddingBottom: 12, - flexDirection: 'row', - alignItems: 'center', - }, - thumbnail: { - width: thumbnailSize, - height: thumbnailSize, - borderRadius: thumbnailSize / 2, - borderWidth: 1, - borderColor: color.grayEF, - resizeMode: 'contain', - }, - name: { - marginLeft: 10, - color: color.black, - fontSize: 16, - }, - time: { - marginLeft: 4, - color: `${color.black}4D`, - fontSize: font.size.small, - }, -}); - -const FeedHeader: React.FC = ({ user, updatedAt }) => { - const dog = find(user.dogs, dog => dog.default); - return ( - - {dog && ( - <> - - {dog.name} - - )} - {moment(updatedAt).fromNow()} - - ); -}; - -export default FeedHeader; diff --git a/src/components/module/FeedHeader/index.ts b/src/components/module/FeedHeader/index.ts deleted file mode 100644 index 399f3a16..00000000 --- a/src/components/module/FeedHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FeedHeader'; diff --git a/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts b/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts index 147bdf97..ff366f3e 100644 --- a/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts +++ b/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts @@ -6,12 +6,13 @@ const { width } = Dimensions.get('window'); export const views = StyleSheet.create({ topWrapper: { alignItems: 'flex-end', - padding: 20, + padding: 44, }, bottomWrapper: { marginTop: 'auto', flexDirection: 'row', - padding: 20, + paddingHorizontal: 45, + paddingBottom: 30, justifyContent: 'space-between', }, item: { @@ -22,10 +23,30 @@ export const views = StyleSheet.create({ export const icons = StyleSheet.create({ logo: { - width: width * 0.4, - height: 48, + width: width * 0.309, + height: width * 0.053, resizeMode: 'contain', }, + go: { + width: 90, + height: 48, + }, + time: { + width: 19, + height: 18, + }, + distance: { + width: 14, + height: 19, + }, + poo: { + width: 18, + height: 17, + }, + pee: { + width: 11, + height: 17, + }, }); export const texts = StyleSheet.create({ @@ -34,4 +55,7 @@ export const texts = StyleSheet.create({ color: color.white, fontSize: font.size.medium, }, + black: { + color: '#242424', + }, }); diff --git a/src/components/module/ImageWithSticker/ImageWithSticker.tsx b/src/components/module/ImageWithSticker/ImageWithSticker.tsx index 55bcecd6..d9b43532 100644 --- a/src/components/module/ImageWithSticker/ImageWithSticker.tsx +++ b/src/components/module/ImageWithSticker/ImageWithSticker.tsx @@ -19,59 +19,106 @@ export interface ImageInterface { interface Props { image: ImageInterface; walk: ReducerState['walk']; + blackMode: boolean; size?: number; style?: object; } -const ImageWithSticker: React.FC = ({ image, walk, size, style }) => ( - - {image.stickers && ( - <> - {image.stickers.top && ( - - - - )} - - {image.stickers.time && ( - - - {Math.floor(walk.seconds / 60)}분 - - )} - {image.stickers.distance && ( - - - {rangeWithUnit(walk.distance)} - - )} - {image.stickers.poos && ( - - - {walk.poos}회 - - )} - {image.stickers.pees && ( - - - {walk.pees}회 +const ImageWithSticker: React.FC = ({ + image, + walk, + blackMode, + size, + style, +}) => { + const fontStyle = [texts.info, blackMode ? texts.black : null]; + return ( + + {image.stickers && ( + <> + {image.stickers.top && ( + + {image.stickers.top === 'LOGO' ? ( + + ) : ( + + )} )} - - - )} - -); + + {image.stickers.time && ( + + + {Math.floor(walk.seconds / 60)}분 + + )} + {image.stickers.distance && ( + + + {rangeWithUnit(walk.distance)} + + )} + {image.stickers.poos && ( + + + {walk.poos}회 + + )} + {image.stickers.pees && ( + + + {walk.pees}회 + + )} + + + )} + + ); +}; export default ImageWithSticker; diff --git a/src/components/module/Selector/Selector.styles.ts b/src/components/module/Selector/Selector.styles.ts index ee523b8b..dd53aadc 100644 --- a/src/components/module/Selector/Selector.styles.ts +++ b/src/components/module/Selector/Selector.styles.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { color, font } from 'src/theme'; export const views = StyleSheet.create({ boxWrapper: { @@ -6,3 +7,11 @@ export const views = StyleSheet.create({ marginHorizontal: -4, }, }); + +export const texts = StyleSheet.create({ + alert: { + color: color.red, + fontSize: font.size.small, + marginTop: 9, + }, +}); diff --git a/src/components/module/Selector/Selector.tsx b/src/components/module/Selector/Selector.tsx index 89eb27e3..9223344a 100644 --- a/src/components/module/Selector/Selector.tsx +++ b/src/components/module/Selector/Selector.tsx @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import { View } from 'react-native'; +import { Text, View } from 'react-native'; import LabelWrapper from 'src/components/container/LabelWrapper'; import { HandleChangeSelector } from './index'; -import { views } from './Selector.styles'; +import { texts, views } from './Selector.styles'; import ToggleBox from './ToggleBox'; interface Data { @@ -15,6 +15,7 @@ interface Props { name: string; list: Data[]; value?: string; + alert?: string; handleChange: (data: HandleChangeSelector) => void; } @@ -32,7 +33,7 @@ class Selector extends Component { }; render() { - const { label, list } = this.props; + const { label, list, alert } = this.props; return ( @@ -46,6 +47,7 @@ class Selector extends Component { /> ))} + {alert && {alert}} ); } diff --git a/src/components/module/Splash/Splash.tsx b/src/components/module/Splash/Splash.tsx index 90cb8611..d6b62559 100644 --- a/src/components/module/Splash/Splash.tsx +++ b/src/components/module/Splash/Splash.tsx @@ -1,16 +1,19 @@ import React from 'react'; -import { Image, StyleSheet, View } from 'react-native'; +import { Dimensions, Image, StyleSheet, View } from 'react-native'; import { color } from 'src/theme'; +const { width, height } = Dimensions.get('window'); + const styles = StyleSheet.create({ background: { - ...StyleSheet.absoluteFillObject, - paddingHorizontal: 6, - backgroundColor: color.white, + flex: 1, + backgroundColor: color.blue, + alignItems: 'center', }, image: { - width: '100%', - height: '100%', + marginTop: height * 0.285, + width: width * 0.52, + height: height * 0.05, resizeMode: 'contain', }, }); @@ -18,7 +21,7 @@ const styles = StyleSheet.create({ const Splash: React.FC<{}> = () => ( diff --git a/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts b/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts index a687c14c..3e6be76c 100644 --- a/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts +++ b/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts @@ -1,10 +1,9 @@ import { StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color } from 'src/theme'; +import { color, size } from 'src/theme'; export const texts = StyleSheet.create({ input: { - width: '100%', + flex: 1, // font styles color: color.black, fontSize: 22, @@ -13,17 +12,18 @@ export const texts = StyleSheet.create({ export const views = StyleSheet.create({ inputWrapper: { - paddingVertical: 20, - paddingHorizontal: horizontalSize, + paddingBottom: 20, + paddingHorizontal: size.horizontal, marginTop: 8, marginBottom: 2, + flexDirection: 'row', + alignItems: 'center', // border styles borderBottomWidth: 1, borderColor: color.grayDA, }, autocompleteWrapper: { - flex: 1, - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, }, }); @@ -32,4 +32,8 @@ export const icons = StyleSheet.create({ width: 15, height: 15, }, + clear: { + width: 20, + height: 20, + }, }); diff --git a/src/components/module/TextAutocomplete/TextAutocomplete.tsx b/src/components/module/TextAutocomplete/TextAutocomplete.tsx index 3b866140..c0d7877b 100644 --- a/src/components/module/TextAutocomplete/TextAutocomplete.tsx +++ b/src/components/module/TextAutocomplete/TextAutocomplete.tsx @@ -1,22 +1,29 @@ import * as Hangul from 'hangul-js'; import { sortBy } from 'lodash'; import React, { Component } from 'react'; -import { FlatList, Image, SafeAreaView, TextInput, View } from 'react-native'; import TopNavbar from 'src/components/module/TopNavbar'; import { color } from 'src/theme'; import { icons, texts, views } from './TextAutocomplete.styles'; import TextBox from './TextBox'; +import { + FlatList, + Image, + SafeAreaView, + TextInput, + View, + TouchableOpacity, +} from 'react-native'; export type Data = { name: string } & any; interface Props { placeholder: string; - list: Data[]; icon: NodeRequire; + staticList?: Data[]; defaultList?: Data[]; - handleSubmit: (data: Data) => void; - handleDismiss: () => void; - handleChange?: (keyword: string) => void; + onSubmit: (data: Data) => void; + onDismiss: () => void; + onSearch?: (keyword: string) => Promise; } interface State { @@ -24,44 +31,60 @@ interface State { autocomplete: Data[]; } +const disassemble = (value: string) => + Hangul.disassembleToString(value.replace(/\s/g, '')); + class TextAutocomplete extends Component { - state: State = { keyword: '', autocomplete: [] }; + private searchResult: Data[] | undefined; + private input = React.createRef(); + + state: State = { keyword: '', autocomplete: this.props.defaultList || [] }; - getAutocomplete = (value: string) => { - if (value.length < 2) return []; + getAutocomplete = (keyword: string, list: Data[]) => { // 한글을 분석해서 자동완성을 함 - const dValue = Hangul.disassembleToString(value.replace(/\s/g, '')); - const regex = new RegExp(dValue); - const dList = this.props.list.map((data: Data) => ({ + const regex = new RegExp(disassemble(keyword)); + return list.map((data: Data) => ({ ...data, - match: regex.exec( - Hangul.disassembleToString(data.name.replace(/\s/g, '')) - ), + match: regex.exec(disassemble(data.name)), })); - const filter = dList.filter(data => data.match !== null); - return sortBy(filter, data => 1 - Math.pow(1.4, -data.match[0].length)); }; - handleTextChange = (keyword: string) => { - const { handleChange } = this.props; - const autocomplete = this.getAutocomplete(keyword); + handleTextChange = async (keyword: string) => { + const { staticList, defaultList, onSearch } = this.props; + let autocomplete: Data[] = defaultList || []; + if (disassemble(keyword).length > 4) { + let result: Data[] = []; + if (staticList !== undefined) { + result = this.getAutocomplete(keyword, staticList); + } else if (onSearch !== undefined) { + if (this.searchResult === undefined) { + this.searchResult = await onSearch(keyword); + } + result = this.getAutocomplete(keyword, this.searchResult); + } + const filter = result.filter(data => data.match !== null); + autocomplete = sortBy( + filter, + data => 1 - Math.pow(1.4, -data.match[0].length) + ); + } else if (this.searchResult !== undefined) { + delete this.searchResult; + } this.setState({ keyword, autocomplete }); - if (handleChange) handleChange(keyword.trim()); }; - render() { - const { - placeholder, - handleDismiss, - handleSubmit, - icon, - defaultList = [], - } = this.props; - const list = - this.state.autocomplete.length > 0 - ? this.state.autocomplete - : defaultList; + handleInputSubmit = async () => { + const { onSearch } = this.props; + const { keyword } = this.state; + if (onSearch && keyword.length !== 0) { + this.searchResult = await onSearch(keyword); + const autocomplete = this.getAutocomplete(keyword, this.searchResult); + this.setState({ autocomplete }); + } + }; + render() { + const { placeholder, onDismiss, onSubmit, icon } = this.props; return ( { source={require('src/assets/icons/ic_close.png')} /> ), - handlePress: handleDismiss, + handlePress: onDismiss, }} /> + {this.state.keyword.length > 0 && ( + { + if (this.input.current) this.input.current.clear(); + }}> + + + )} index.toString()} renderItem={data => ( )} /> diff --git a/src/components/module/TextInput/TextInput.styles.ts b/src/components/module/TextInput/TextInput.styles.ts index c08355b6..461a1024 100644 --- a/src/components/module/TextInput/TextInput.styles.ts +++ b/src/components/module/TextInput/TextInput.styles.ts @@ -24,5 +24,5 @@ export const inputs = StyleSheet.create({ fontSize: font.size.medium, }, focused: { borderColor: color.blue }, - unFocused: { borderColor: color.grayDA }, + unFocused: { borderColor: color.grayEF }, }); diff --git a/src/components/module/TopNavbar/TopNavbar.tsx b/src/components/module/TopNavbar/TopNavbar.tsx index 8fe28ad1..b0503205 100644 --- a/src/components/module/TopNavbar/TopNavbar.tsx +++ b/src/components/module/TopNavbar/TopNavbar.tsx @@ -17,19 +17,19 @@ interface Props { view: ReactNode; handlePress: () => void; }; - center?: string; + center?: string | ReactNode; showBorder?: boolean; transparent?: boolean; } const { width } = Dimensions.get('window'); -export const height = 45; +export const height = 55; const styles = StyleSheet.create({ wrapper: { height, width: '100%', flexDirection: 'row', - borderBottomColor: '#70707014', + borderBottomColor: '#EBEBEB', }, button: { paddingHorizontal: width * 0.04, @@ -63,11 +63,14 @@ const TopNavbar: React.FC = ({ showBorder ? { borderBottomWidth: 1 } : null, { backgroundColor: transparent ? 'transparent' : color.white }, ]}> - {center && ( - - {center} - - )} + {center && + (typeof center === 'string' ? ( + + {center} + + ) : ( + center + ))} {left && ( void; - detail?: { + hideModal: () => void; + data?: { title: string; link: string; }; } -const Detail: React.FC = ({ hideDetail, detail }) => ( +const Detail: React.FC = ({ hideModal, data }) => ( - {detail && ( + animationType="slide" + hardwareAccelerated + onRequestClose={hideModal}> + {data && ( = ({ hideDetail, detail }) => ( /> ), }} - center={detail.title} + center={data.title} showBorder={true} /> - + )} diff --git a/src/components/module/WebModal/index.ts b/src/components/module/WebModal/index.ts new file mode 100644 index 00000000..81964fd0 --- /dev/null +++ b/src/components/module/WebModal/index.ts @@ -0,0 +1 @@ +export { default } from './WebModal'; diff --git a/src/pages/App/Profile/Profile.tsx b/src/pages/App/Profile/Profile.tsx deleted file mode 100644 index 3753e8e1..00000000 --- a/src/pages/App/Profile/Profile.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Button, View } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; -import { connect } from 'react-redux'; -import * as actions from 'src/store/actions/user'; - -interface Props extends NavigationScreenProps { - signOut: typeof actions.signOut; -} - -const Profile: React.FC = ({ navigation, signOut }) => { - function handleSignOut() { - signOut(navigation); - } - - return ( - - - - ); -}; - -export default connect( - null, - { - signOut: actions.signOut, - } -)(Profile); diff --git a/src/pages/App/Profile/index.ts b/src/pages/App/Profile/index.ts deleted file mode 100644 index 23358a23..00000000 --- a/src/pages/App/Profile/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Profile'; diff --git a/src/pages/App/Wdd/Wdd.tsx b/src/pages/App/Wdd/Wdd.tsx deleted file mode 100644 index 6c86c0b4..00000000 --- a/src/pages/App/Wdd/Wdd.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Text, View } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; - -interface Props extends NavigationScreenProps {} - -const Wdd: React.FC = ({ navigation }) => ( - - 우동댕 페이지 준비중입니다 ٩(๑❛ᴗ❛๑)۶ - -); - -export default Wdd; diff --git a/src/pages/App/index.ts b/src/pages/App/index.ts deleted file mode 100644 index 90467b05..00000000 --- a/src/pages/App/index.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { Animated, Easing } from 'react-native'; -import BottomTabbar from 'src/components/base/BottomTabbar'; -import WalkNavigator from 'src/pages/Walk'; -import MapScreen from './Map'; -import ProfileScreen from './Profile'; -import WddScreen from './Wdd'; -import { - MapNavigator as PlaceMapNavigator, - SearchNavigator as PlaceSearchNavigator, -} from 'src/pages/Place'; -import { - createBottomTabNavigator, - createStackNavigator, - NavigationActions, -} from 'react-navigation'; - -const MapNavigator = createStackNavigator( - { - map: MapScreen, - walk: WalkNavigator, - placeMap: PlaceMapNavigator, - placeSearch: PlaceSearchNavigator, - }, - { - initialRouteName: 'map', - headerMode: 'none', - transitionConfig: () => ({ - transitionSpec: { - duration: 0, - timing: Animated.timing, - easing: Easing.step0, - }, - }), - } -); - -MapNavigator.navigationOptions = ({ navigation }: any) => ({ - tabBarVisible: navigation.state.index === 0, -}); - -export default createBottomTabNavigator( - { - map: { - screen: MapNavigator, - params: { - tab: { - icon: require('src/assets/icons/logo_img.png'), - navigate: NavigationActions.navigate({ routeName: 'map' }), - }, - stack: { - icon: require('src/assets/icons/ic_footprint.png'), - navigate: NavigationActions.navigate({ routeName: 'walk' }), - }, - }, - }, - wdd: { - screen: WddScreen, - params: { - icon: require('src/assets/icons/ic_wdd.png'), - label: '우동댕', - }, - }, - profile: { - screen: ProfileScreen, - params: { - icon: require('src/assets/icons/ic_profile.png'), - label: '내 프로필', - }, - }, - }, - { - initialRouteName: 'map', - tabBarComponent: BottomTabbar, - } -); diff --git a/src/pages/Walk/Edit/Edit.styles.ts b/src/pages/Map/Edit/Edit.styles.ts similarity index 63% rename from src/pages/Walk/Edit/Edit.styles.ts rename to src/pages/Map/Edit/Edit.styles.ts index 64797e0a..7603f5bc 100644 --- a/src/pages/Walk/Edit/Edit.styles.ts +++ b/src/pages/Map/Edit/Edit.styles.ts @@ -1,23 +1,14 @@ import { Dimensions, StyleSheet } from 'react-native'; import { color, font } from 'src/theme'; -const padding = 20; -const CARDS_IN_SINGLE_ROW = 4; const { width } = Dimensions.get('window'); const cardSize = 68; -const space = - (width - padding * 2 - cardSize * CARDS_IN_SINGLE_ROW) / - (CARDS_IN_SINGLE_ROW - 1); +const space = (width - cardSize * 4) / 5; export const views = StyleSheet.create({ buttonContainer: { - paddingHorizontal: padding, - paddingVertical: padding / 2, - }, - buttonRow: { - paddingVertical: padding / 2, - marginHorizontal: -space / 2, - flexDirection: 'row', + marginTop: space, + paddingHorizontal: space / 2, }, button: { marginHorizontal: space / 2, @@ -36,11 +27,6 @@ export const icons = StyleSheet.create({ width: 16, height: 18, }, - button: { - height: 28, - width: 42, - resizeMode: 'contain', - }, }); export const texts = StyleSheet.create({ diff --git a/src/pages/Walk/Edit/Edit.tsx b/src/pages/Map/Edit/Edit.tsx similarity index 53% rename from src/pages/Walk/Edit/Edit.tsx rename to src/pages/Map/Edit/Edit.tsx index c17e1b6c..e3424bb0 100644 --- a/src/pages/Walk/Edit/Edit.tsx +++ b/src/pages/Map/Edit/Edit.tsx @@ -1,7 +1,7 @@ import produce from 'immer'; import React, { PureComponent } from 'react'; import ViewShot from 'react-native-view-shot'; -import { NavigationScreenProps } from 'react-navigation'; +import { FlatList, NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import ImageWithSticker from 'src/components/module/ImageWithSticker'; import { ImageInterface } from 'src/components/module/ImageWithSticker/ImageWithSticker'; @@ -13,8 +13,9 @@ import { Image, SafeAreaView, Text, - View, TouchableOpacity, + CameraRoll, + Alert, } from 'react-native'; interface Props extends NavigationScreenProps { @@ -34,6 +35,15 @@ class Edit extends PureComponent { image: this.props.navigation.getParam('image'), }; + handleDownload = async () => { + const snapshot = this.snapshot.current; + if (snapshot) { + const uri = await (snapshot as any).capture(); + await CameraRoll.saveToCameraRoll(`file://${uri}`); + Alert.alert('저장되었습니다.'); + } + }; + handleClear = () => { this.setState(state => produce(state, draft => { @@ -82,14 +92,8 @@ class Edit extends PureComponent { } }; - renderButton = (onPress: () => void, icon: NodeRequire) => ( - - - - ); - render() { - const { walk } = this.props; + const { walk, navigation } = this.props; return ( { style={icons.save} /> ), - handlePress: () => {}, + handlePress: this.handleDownload, }} center="이미지 편집" right={{ @@ -110,37 +114,63 @@ class Edit extends PureComponent { showBorder /> - + - - - - 없음 + this.handleToggle('time'), + icon: require('src/assets/icons/ic_time_black.png'), + style: { width: 32, height: 30 }, + }, + { + handlePress: () => this.handleToggle('distance'), + icon: require('src/assets/icons/ic_km.png'), + style: { width: 41, height: 33 }, + }, + { + handlePress: () => this.handleToggle('poos'), + icon: require('src/assets/icons/ic_poo_black.png'), + style: { width: 28, height: 27 }, + }, + { + handlePress: () => this.handleToggle('pees'), + icon: require('src/assets/icons/ic_pee_black.png'), + style: { width: 18, height: 28 }, + }, + { + handlePress: () => this.handleLogo('GO'), + icon: require('src/assets/icons/ic_go_black.png'), + style: { width: 48, height: 26 }, + }, + { + handlePress: () => this.handleLogo('LOGO'), + icon: require('src/assets/icons/logo_text_black.png'), + style: { width: 58, height: 10 }, + }, + ]} + showsVerticalScrollIndicator={false} + showsHorizontalScrollIndicator={false} + columnWrapperStyle={views.buttonContainer} + numColumns={4} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item }) => ( + + {item.icon && } + {item.text && {item.text}} - {this.renderButton( - () => this.handleToggle('time'), - require('src/assets/icons/ic_time_black.png') - )} - {this.renderButton( - () => this.handleToggle('distance'), - require('src/assets/icons/ic_distance.png') - )} - {this.renderButton( - () => this.handleToggle('poos'), - require('src/assets/icons/ic_poo_gray.png') - )} - - - {this.renderButton( - () => this.handleToggle('pees'), - require('src/assets/icons/ic_pee_gray.png') - )} - {this.renderButton( - () => this.handleLogo('LOGO'), - require('src/assets/icons/logo_text.png') - )} - - + )} + /> ); } diff --git a/src/pages/Walk/Edit/index.ts b/src/pages/Map/Edit/index.ts similarity index 100% rename from src/pages/Walk/Edit/index.ts rename to src/pages/Map/Edit/index.ts diff --git a/src/pages/Walk/Finish/Finish.styles.ts b/src/pages/Map/Finish/Finish.styles.ts similarity index 83% rename from src/pages/Walk/Finish/Finish.styles.ts rename to src/pages/Map/Finish/Finish.styles.ts index 1c2453ae..a60bbcb4 100644 --- a/src/pages/Walk/Finish/Finish.styles.ts +++ b/src/pages/Map/Finish/Finish.styles.ts @@ -1,6 +1,5 @@ import { StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color, font } from 'src/theme'; +import { color, font, size } from 'src/theme'; export const views = StyleSheet.create({ dashboard: { @@ -12,7 +11,7 @@ export const views = StyleSheet.create({ borderColor: '#00000014', }, info: { - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, paddingTop: 20, paddingBottom: 44, backgroundColor: color.white, diff --git a/src/pages/Walk/Finish/Finish.tsx b/src/pages/Map/Finish/Finish.tsx similarity index 80% rename from src/pages/Walk/Finish/Finish.tsx rename to src/pages/Map/Finish/Finish.tsx index 6b0e1484..8f000714 100644 --- a/src/pages/Walk/Finish/Finish.tsx +++ b/src/pages/Map/Finish/Finish.tsx @@ -25,10 +25,13 @@ import { StyleSheet, Text, View, + ImageEditor, + Alert, } from 'react-native'; interface Props extends NavigationScreenProps { walk: ReducerState['walk']; + user: ReducerState['user']; updateStatus: typeof actions.updateStatus; updateCount: typeof actions.updateCount; } @@ -43,6 +46,7 @@ interface State { const CENTER = { x: 0.5, y: 0.5 }; class Finish extends PureComponent { + private mapWrapper = createRef(); private map = createRef(); state: State = { @@ -74,24 +78,40 @@ class Finish extends PureComponent { handleDismiss = () => { const { navigation, updateStatus } = this.props; - updateStatus('READY'); navigation.popToTop(); + updateStatus('READY'); }; - handleUpload = async () => { + handleUpload = () => { const { navigation } = this.props; const map = this.map.current; - if (!map) return; - const snapshot = await map.takeSnapshot({ - width: 800, - height: 800, - format: 'png', - quality: 0.8, - result: 'file', - }); - navigation.navigate('upload', { - snapshot, - handleDismiss: this.handleDismiss, + const mapWrapper = this.mapWrapper.current; + if (!map || !mapWrapper) return; + + mapWrapper.measure(async (x, y, width, height) => { + const snapshot = await map.takeSnapshot({ + width, + height, + format: 'png', + }); + Image.getSize( + snapshot, + (imgWidth, imgHeight) => { + const options = { + offset: { x: 0, y: (imgHeight - imgWidth) / 2 }, + size: { width: imgWidth, height: imgWidth }, + }; + ImageEditor.cropImage( + snapshot, + options, + uri => { + navigation.navigate('upload', { snapshot: uri }); + }, + err => {} + ); + }, + err => {} + ); }); }; @@ -113,12 +133,12 @@ class Finish extends PureComponent { }; render() { - const { walk } = this.props; + const { walk, user } = this.props; const { pees, poos, start, end } = this.state; return ( - + { {moment(walk.createdAt).format('YYYY년 MM월 DD일 dddd')} - - 내 피드 올리기 - + {user.email.length !== 0 && ( + + 내 피드 올리기 + + )} ); @@ -206,6 +228,6 @@ class Finish extends PureComponent { } export default connect( - ({ walk }: ReducerState) => ({ walk }), + (state: ReducerState) => ({ walk: state.walk, user: state.user }), { updateStatus: actions.updateStatus, updateCount: actions.updateCount } )(Finish); diff --git a/src/pages/Walk/Finish/ImageMarker/ImageMarker.tsx b/src/pages/Map/Finish/ImageMarker/ImageMarker.tsx similarity index 100% rename from src/pages/Walk/Finish/ImageMarker/ImageMarker.tsx rename to src/pages/Map/Finish/ImageMarker/ImageMarker.tsx diff --git a/src/pages/Walk/Finish/ImageMarker/index.ts b/src/pages/Map/Finish/ImageMarker/index.ts similarity index 100% rename from src/pages/Walk/Finish/ImageMarker/index.ts rename to src/pages/Map/Finish/ImageMarker/index.ts diff --git a/src/pages/Walk/Finish/InfoCard/InfoCard.tsx b/src/pages/Map/Finish/InfoCard/InfoCard.tsx similarity index 100% rename from src/pages/Walk/Finish/InfoCard/InfoCard.tsx rename to src/pages/Map/Finish/InfoCard/InfoCard.tsx diff --git a/src/pages/Walk/Finish/InfoCard/index.ts b/src/pages/Map/Finish/InfoCard/index.ts similarity index 100% rename from src/pages/Walk/Finish/InfoCard/index.ts rename to src/pages/Map/Finish/InfoCard/index.ts diff --git a/src/pages/Walk/Finish/TextMarker/TextMarker.tsx b/src/pages/Map/Finish/TextMarker/TextMarker.tsx similarity index 100% rename from src/pages/Walk/Finish/TextMarker/TextMarker.tsx rename to src/pages/Map/Finish/TextMarker/TextMarker.tsx diff --git a/src/pages/Walk/Finish/TextMarker/index.ts b/src/pages/Map/Finish/TextMarker/index.ts similarity index 100% rename from src/pages/Walk/Finish/TextMarker/index.ts rename to src/pages/Map/Finish/TextMarker/index.ts diff --git a/src/pages/Walk/Finish/index.ts b/src/pages/Map/Finish/index.ts similarity index 100% rename from src/pages/Walk/Finish/index.ts rename to src/pages/Map/Finish/index.ts diff --git a/src/pages/App/Map/Header/Header.styles.ts b/src/pages/Map/Map/Header/Header.styles.ts similarity index 100% rename from src/pages/App/Map/Header/Header.styles.ts rename to src/pages/Map/Map/Header/Header.styles.ts diff --git a/src/pages/App/Map/Header/Header.tsx b/src/pages/Map/Map/Header/Header.tsx similarity index 100% rename from src/pages/App/Map/Header/Header.tsx rename to src/pages/Map/Map/Header/Header.tsx diff --git a/src/pages/App/Map/Header/index.ts b/src/pages/Map/Map/Header/index.ts similarity index 100% rename from src/pages/App/Map/Header/index.ts rename to src/pages/Map/Map/Header/index.ts diff --git a/src/pages/App/Map/Map.tsx b/src/pages/Map/Map/Map.tsx similarity index 52% rename from src/pages/App/Map/Map.tsx rename to src/pages/Map/Map/Map.tsx index e4d323e2..52945a72 100644 --- a/src/pages/App/Map/Map.tsx +++ b/src/pages/Map/Map/Map.tsx @@ -1,30 +1,32 @@ import produce from 'immer'; import { pick } from 'lodash'; import React, { Component, createRef } from 'react'; -import { Dimensions, SafeAreaView, StyleSheet } from 'react-native'; +import { Alert, Dimensions, SafeAreaView, StyleSheet } from 'react-native'; import Geolocation from 'react-native-geolocation-service'; import MapView, { LatLng, PROVIDER_GOOGLE } from 'react-native-maps'; import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import { calcDistance } from 'src/assets/functions/calcutate'; -import * as actions from 'src/store/actions/walk'; +import * as userActions from 'src/store/actions/user'; +import * as walkActions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; import Header from './Header'; import TrackUser from './TrackUser'; +import { + LOCATION_PERMISSIONS, + checkPermission, +} from 'src/assets/functions/validate'; interface Props extends NavigationScreenProps { - pushPin: typeof actions.pushPin; + pushPin: typeof walkActions.pushPin; + updateLocation: typeof userActions.updateLocation; walk: ReducerState['walk']; } interface State { trackUser: boolean; statusChanged: boolean; - current: { - latitude: number; - longitude: number; - speed: number; - }; + snapLocation: LatLng; } const { width, height } = Dimensions.get('window'); @@ -39,7 +41,7 @@ class Map extends Component { state: State = { trackUser: true, statusChanged: true, - current: { ...LOCATION, speed: 0 }, + snapLocation: LOCATION, }; componentDidUpdate(prevProps: Props) { @@ -48,49 +50,57 @@ class Map extends Component { } } - componentDidMount() { - this.watchLocation = Geolocation.watchPosition( - ({ coords }) => { - const { pushPin, walk } = this.props; - const { latitude, longitude, speed } = coords; - const current = { latitude, longitude, speed: speed || 0 }; + async componentDidMount() { + const { pushPin, updateLocation } = this.props; + if (await checkPermission(LOCATION_PERMISSIONS)) { + this.watchLocation = Geolocation.watchPosition( + ({ coords }) => { + const { walk } = this.props; + const current = pick(coords, ['latitude', 'longitude']); - this.setState(state => - produce(state, draft => { - if (walk.status === 'WALKING') { - const pinLength = walk.pins.length; - const pinInfo: actions.UpdateWalkInterface = { - ...current, - addDistance: 0, - }; - if (state.statusChanged) { - pushPin(pinInfo); - draft.statusChanged = false; - } else { - const previous = walk.pins[pinLength - 1]; - pinInfo.addDistance = calcDistance( - pick(previous, ['latitude', 'longitude']), - pick(current, ['latitude', 'longitude']) - ); - if (pinInfo.addDistance > 0.0098) pushPin(pinInfo); + this.setState(state => + produce(state, draft => { + // Update Walk Store + if (walk.status === 'WALKING') { + const pinInfo: walkActions.UpdateWalkInterface = { + ...current, + speed: coords.speed || 0, + addDistance: 0, + }; + if (state.statusChanged) { + pushPin(pinInfo); + draft.statusChanged = false; + } else { + const previous = walk.pins[walk.pins.length - 1]; + pinInfo.addDistance = calcDistance( + pick(previous, ['latitude', 'longitude']), + current + ); + if (pinInfo.addDistance > 0.0098) pushPin(pinInfo); + } } - } - this.moveCameraToUser( - pick(current, ['latitude', 'longitude']), - state.trackUser - ); - draft.current = current; - }) - ); - }, - () => {}, - { - enableHighAccuracy: true, - distanceFilter: 2, // Listen moving on every 2m - interval: 5000, - fastestInterval: 2000, - } - ); + // Default Actions + this.moveCameraToUser(current, state.trackUser); + if (calcDistance(current, draft.snapLocation) > 0.05) { + updateLocation(current); + draft.snapLocation = current; + } + }) + ); + }, + err => { + if (err.PERMISSION_DENIED) { + Alert.alert('위치정보 요청이 거부되었습니다.'); + } + }, + { + enableHighAccuracy: true, + distanceFilter: 2, // Listen moving on every 2m + interval: 5000, + fastestInterval: 2000, + } + ); + } } componentWillUnmount() { @@ -111,7 +121,7 @@ class Map extends Component { handlePressTrackButton = () => { this.setState(state => produce(state, draft => { - const { latitude, longitude } = state.current; + const { latitude, longitude } = state.snapLocation; draft.trackUser = !state.trackUser; this.moveCameraToUser({ latitude, longitude }, draft.trackUser); }) @@ -143,5 +153,5 @@ class Map extends Component { export default connect( (state: ReducerState) => ({ walk: state.walk }), - { pushPin: actions.pushPin } + { pushPin: walkActions.pushPin, updateLocation: userActions.updateLocation } )(Map); diff --git a/src/pages/App/Map/TrackUser/TrackUser.tsx b/src/pages/Map/Map/TrackUser/TrackUser.tsx similarity index 81% rename from src/pages/App/Map/TrackUser/TrackUser.tsx rename to src/pages/Map/Map/TrackUser/TrackUser.tsx index c25c831b..24befe06 100644 --- a/src/pages/App/Map/TrackUser/TrackUser.tsx +++ b/src/pages/Map/Map/TrackUser/TrackUser.tsx @@ -7,7 +7,7 @@ interface Props { active: boolean; } -const trackUserSize = 56; +const trackUserSize = 50; const styles = StyleSheet.create({ button: { @@ -36,8 +36,12 @@ const TrackUser: React.FC = ({ handlePress, active }) => ( activeOpacity={1} onPress={handlePress}> ); diff --git a/src/pages/App/Map/TrackUser/index.ts b/src/pages/Map/Map/TrackUser/index.ts similarity index 100% rename from src/pages/App/Map/TrackUser/index.ts rename to src/pages/Map/Map/TrackUser/index.ts diff --git a/src/pages/App/Map/index.ts b/src/pages/Map/Map/index.ts similarity index 100% rename from src/pages/App/Map/index.ts rename to src/pages/Map/Map/index.ts diff --git a/src/pages/Walk/Upload/ImageCard/ImageCard.styles.ts b/src/pages/Map/Upload/ImageCard/ImageCard.styles.ts similarity index 78% rename from src/pages/Walk/Upload/ImageCard/ImageCard.styles.ts rename to src/pages/Map/Upload/ImageCard/ImageCard.styles.ts index 2de24821..4eab03b9 100644 --- a/src/pages/Walk/Upload/ImageCard/ImageCard.styles.ts +++ b/src/pages/Map/Upload/ImageCard/ImageCard.styles.ts @@ -27,12 +27,6 @@ export const views = StyleSheet.create({ right: -deleteSize / 2, width: deleteSize, height: deleteSize, - borderRadius: deleteSize / 2, - backgroundColor: color.white, - borderWidth: 1, - borderColor: color.grayDA, - justifyContent: 'center', - alignItems: 'center', }, }); @@ -42,7 +36,7 @@ export const icons = StyleSheet.create({ height: 23.6, }, delete: { - width: 9, - height: 9, + width: '100%', + height: '100%', }, }); diff --git a/src/pages/Walk/Upload/ImageCard/ImageCard.tsx b/src/pages/Map/Upload/ImageCard/ImageCard.tsx similarity index 73% rename from src/pages/Walk/Upload/ImageCard/ImageCard.tsx rename to src/pages/Map/Upload/ImageCard/ImageCard.tsx index 5e21a105..0c252c78 100644 --- a/src/pages/Walk/Upload/ImageCard/ImageCard.tsx +++ b/src/pages/Map/Upload/ImageCard/ImageCard.tsx @@ -4,6 +4,10 @@ import ImagePicker from 'react-native-image-picker'; import { NavigationScreenProp } from 'react-navigation'; import { ImageInterface } from 'src/components/module/ImageWithSticker/ImageWithSticker'; import { icons, views } from './ImageCard.styles'; +import { + checkPermission, + PICTURE_PERMISSIONS, +} from 'src/assets/functions/validate'; const ImageWrapper: React.FC<{ onPress: () => void; @@ -20,7 +24,7 @@ const ImageWrapper: React.FC<{ {onPressDelete && ( @@ -33,15 +37,20 @@ interface AddProps { } export const AddImageCard: React.FC = ({ handleLoad }) => { - const showImagePicker = () => { + const showImagePicker = async () => { const options = { title: '산책 사진 선택', + takePhotoButtonTitle: '사진 찍기', + chooseFromLibraryButtonTitle: '앨범에서 사진 선택', + cancelButtonTitle: '취소', storageOptions: { skipBackup: true, path: 'images' }, }; - ImagePicker.showImagePicker(options, res => { - if (res.didCancel || res.error) return; - handleLoad({ uri: res.uri }); - }); + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.showImagePicker(options, res => { + if (res.didCancel || res.error) return; + handleLoad({ uri: res.uri }); + }); + } }; return ( @@ -73,7 +82,13 @@ const ImageCard: React.FC = ({ }; return ( navigate('edit', { image, handleEdit })} + onPress={() => + navigate('edit', { + image, + handleEdit, + blackMode: /^rct-image-store|woodongdang/g.test(image.uri), + }) + } onPressDelete={() => handleDelete(index)}> diff --git a/src/pages/Walk/Upload/ImageCard/index.ts b/src/pages/Map/Upload/ImageCard/index.ts similarity index 100% rename from src/pages/Walk/Upload/ImageCard/index.ts rename to src/pages/Map/Upload/ImageCard/index.ts diff --git a/src/pages/Walk/Upload/Upload.styles.ts b/src/pages/Map/Upload/Upload.styles.ts similarity index 54% rename from src/pages/Walk/Upload/Upload.styles.ts rename to src/pages/Map/Upload/Upload.styles.ts index d46c619c..af23e912 100644 --- a/src/pages/Walk/Upload/Upload.styles.ts +++ b/src/pages/Map/Upload/Upload.styles.ts @@ -1,19 +1,23 @@ import { StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color, font } from 'src/theme'; +import { color, font, size } from 'src/theme'; export const views = StyleSheet.create({ input: { flex: 1, }, listView: { - paddingHorizontal: horizontalSize - 8, + paddingHorizontal: size.horizontal - 8, + }, + bottom: { + paddingHorizontal: 0, + marginBottom: size.horizontal, + flexDirection: 'row', }, }); export const texts = StyleSheet.create({ input: { - marginTop: 20, + marginTop: 18, color: color.black, fontSize: font.size.large, }, diff --git a/src/pages/Walk/Upload/Upload.tsx b/src/pages/Map/Upload/Upload.tsx similarity index 72% rename from src/pages/Walk/Upload/Upload.tsx rename to src/pages/Map/Upload/Upload.tsx index 87754351..af837ca2 100644 --- a/src/pages/Walk/Upload/Upload.tsx +++ b/src/pages/Map/Upload/Upload.tsx @@ -1,22 +1,29 @@ import produce from 'immer'; import { pick } from 'lodash'; import React, { PureComponent } from 'react'; -import { TextInput } from 'react-native'; +import { Alert, TextInput } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; -import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import withLoading, { LoadingProps } from 'src/components/base/withLoading'; import PageContainer from 'src/components/container/PageContainer'; import { ImageInterface } from 'src/components/module/ImageWithSticker/ImageWithSticker'; -import { Body, createFeed } from 'src/services/api/feed'; +import { createFeed } from 'src/services/api/feed'; import { uploadImages } from 'src/services/aws/s3'; +import * as userActions from 'src/store/actions/user'; +import * as walkActions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; import ImageCard, { AddImageCard } from './ImageCard'; import { texts, views } from './Upload.styles'; +import { + NavigationScreenProps, + NavigationActions, + StackActions, +} from 'react-navigation'; interface Props extends LoadingProps, NavigationScreenProps { - user: ReducerState['user']; walk: ReducerState['walk']; + updateStatus: typeof walkActions.updateStatus; + getUser: typeof userActions.getUser; } interface State { @@ -31,14 +38,22 @@ class Upload extends PureComponent { }; handleSave = async () => { - const { navigation, user, walk, toggleLoading } = this.props; - const now = new Date(); + const { + navigation, + walk, + toggleLoading, + getUser, + updateStatus, + } = this.props; + if (this.state.images.length === 0) { + Alert.alert('사진을 1장 이상 업로드 해주세요.'); + return; + } const uris = this.state.images.map(image => image.nextUri || image.uri); const images = await uploadImages({ uris, - email: user.email, table: 'feeds', - name: now.toUTCString(), + name: JSON.stringify(walk.pins[0]), })(toggleLoading); await createFeed({ images, @@ -46,8 +61,13 @@ class Upload extends PureComponent { pins: JSON.stringify(walk.pins), ...pick(walk, ['seconds', 'distance', 'steps', 'pees', 'poos']), }); - navigation.popToTop(); - navigation.getParam('handleDismiss')(); + await getUser(); + updateStatus('READY'); + const action = StackActions.reset({ + index: 0, + actions: [NavigationActions.navigate({ routeName: 'map' })], + }); + navigation.dispatch(action); }; handleChangeMemo = (memo: string) => { @@ -57,7 +77,7 @@ class Upload extends PureComponent { handleAddImage = (image: ImageInterface) => { this.setState(state => produce(state, draft => { - draft.images.push(image); + draft.images = [image, ...state.images]; }) ); }; @@ -105,13 +125,13 @@ class Upload extends PureComponent { ))} ), - styles: { paddingHorizontal: 0, flexDirection: 'row' }, + styles: views.bottom, }} showBorder> { } } -export default connect((state: ReducerState) => ({ - user: state.user, - walk: state.walk, -}))(withLoading(Upload)); +export default connect( + (state: ReducerState) => ({ + walk: state.walk, + }), + { + updateStatus: walkActions.updateStatus, + getUser: userActions.getUser, + } +)(withLoading(Upload)); diff --git a/src/pages/Walk/Upload/index.ts b/src/pages/Map/Upload/index.ts similarity index 100% rename from src/pages/Walk/Upload/index.ts rename to src/pages/Map/Upload/index.ts diff --git a/src/pages/Walk/Walk/MarkerButton/MarkerButton.tsx b/src/pages/Map/Walk/MarkerButton/MarkerButton.tsx similarity index 95% rename from src/pages/Walk/Walk/MarkerButton/MarkerButton.tsx rename to src/pages/Map/Walk/MarkerButton/MarkerButton.tsx index 6e36565b..54e00e83 100644 --- a/src/pages/Walk/Walk/MarkerButton/MarkerButton.tsx +++ b/src/pages/Map/Walk/MarkerButton/MarkerButton.tsx @@ -17,7 +17,7 @@ const styles = StyleSheet.create({ height: btnSize, marginTop: width * 0.088 - btnSize / 2, borderRadius: btnSize / 2, - backgroundColor: color.bluePastel, + backgroundColor: color.blue, justifyContent: 'center', alignItems: 'center', ...shadow.shallow, diff --git a/src/pages/Walk/Walk/MarkerButton/index.ts b/src/pages/Map/Walk/MarkerButton/index.ts similarity index 100% rename from src/pages/Walk/Walk/MarkerButton/index.ts rename to src/pages/Map/Walk/MarkerButton/index.ts diff --git a/src/pages/Map/Walk/Prepare/Prepare.tsx b/src/pages/Map/Walk/Prepare/Prepare.tsx new file mode 100644 index 00000000..0c432fbf --- /dev/null +++ b/src/pages/Map/Walk/Prepare/Prepare.tsx @@ -0,0 +1,110 @@ +import React, { PureComponent } from 'react'; +import { + Dimensions, + View, + FlatList, + Image, + SafeAreaView, + StyleSheet, +} from 'react-native'; + +interface ImageInterface { + ic_num: NodeRequire; + img_prepare: NodeRequire; +} + +interface Props { + onFinish: () => void; +} + +interface State { + index: number; +} + +const images: ImageInterface[] = [ + { + ic_num: require('src/assets/icons/ic_num_3.png'), + img_prepare: require('src/assets/images/img_prepare_3.png'), + }, + { + ic_num: require('src/assets/icons/ic_num_2.png'), + img_prepare: require('src/assets/images/img_prepare_2.png'), + }, + { + ic_num: require('src/assets/icons/ic_num_1.png'), + img_prepare: require('src/assets/images/img_prepare_1.png'), + }, + { + ic_num: require('src/assets/icons/ic_go.png'), + img_prepare: require('src/assets/images/img_prepare_go.png'), + }, +]; + +const { width, height } = Dimensions.get('window'); +const wrapperWidth = width * 0.802; +const iconHeight = height * 0.135; +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + iconWrapper: { + width: wrapperWidth, + height: iconHeight, + }, + icon: { + width: '100%', + height: iconHeight, + resizeMode: 'contain', + }, + image: { + marginTop: height * 0.057, + width: wrapperWidth, + height: height * 0.519, + resizeMode: 'contain', + }, +}); + +class Prepare extends PureComponent { + private scroll = React.createRef>(); + state: State = { index: 0 }; + + componentDidMount() { + const scroll = this.scroll.current; + const interval = setInterval(() => { + const index = this.state.index + 1; + if (index === images.length) { + clearInterval(interval); + this.props.onFinish(); + } else { + this.setState({ index }); + if (scroll) scroll.scrollToIndex({ index, animated: true }); + } + }, 1000); + } + + render() { + const { index } = this.state; + return ( + + + {}} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item }) => ( + + )} + /> + + + + ); + } +} + +export default Prepare; diff --git a/src/pages/Map/Walk/Prepare/index.ts b/src/pages/Map/Walk/Prepare/index.ts new file mode 100644 index 00000000..061edb72 --- /dev/null +++ b/src/pages/Map/Walk/Prepare/index.ts @@ -0,0 +1 @@ +export { default } from './Prepare'; diff --git a/src/pages/Walk/Walk/StatusButton/StatusButton.tsx b/src/pages/Map/Walk/StatusButton/StatusButton.tsx similarity index 90% rename from src/pages/Walk/Walk/StatusButton/StatusButton.tsx rename to src/pages/Map/Walk/StatusButton/StatusButton.tsx index 03405e7e..72c92d0d 100644 --- a/src/pages/Walk/Walk/StatusButton/StatusButton.tsx +++ b/src/pages/Map/Walk/StatusButton/StatusButton.tsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import { NavigationScreenProps, withNavigation } from 'react-navigation'; import * as actions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; -import { color } from 'src/theme'; +import { color, font } from 'src/theme'; import { statusBtn } from '../Walk.styles'; import { TouchableOpacity, @@ -10,6 +10,7 @@ import { StyleSheet, Animated, View, + Text, } from 'react-native'; interface Props extends NavigationScreenProps { @@ -71,6 +72,19 @@ const styles = StyleSheet.create({ right: 0, backgroundColor: '#FF6A67', }, + actionIndicator: { + position: 'absolute', + left: 0, + bottom: -25, + right: 0, + width: statusBtn, + alignItems: 'center', + }, + indicatorText: { + fontSize: 13, + fontFamily: font.family.NanumSquareRoundB, + color: color.gray48, + }, }); class StatusButton extends PureComponent { @@ -180,6 +194,11 @@ class StatusButton extends PureComponent { /> )} + {status === 'WALKING' && ( + + 길게 눌러서 종료 + + )} Math.ceil(size * scale); export const views = StyleSheet.create({ container: { @@ -43,7 +51,7 @@ export const views = StyleSheet.create({ }, gpsInfoWrapper: { width: '100%', - marginTop: height * 0.045, + marginTop: 50, paddingHorizontal: '11.5%', flexDirection: 'row', justifyContent: 'space-between', @@ -78,7 +86,7 @@ export const fonts = StyleSheet.create({ marginTop: 'auto', marginBottom: 12, color: color.blue, - fontSize: 68, + fontSize: scaledSize(68), fontFamily: font.family.NanumSquareRoundEB, letterSpacing: -4, }, diff --git a/src/pages/Walk/Walk/Walk.tsx b/src/pages/Map/Walk/Walk.tsx similarity index 80% rename from src/pages/Walk/Walk/Walk.tsx rename to src/pages/Map/Walk/Walk.tsx index e0f4482c..d6bdb5f0 100644 --- a/src/pages/Walk/Walk/Walk.tsx +++ b/src/pages/Map/Walk/Walk.tsx @@ -1,18 +1,30 @@ import React, { Component } from 'react'; -import { Image, SafeAreaView, Text, View } from 'react-native'; import BackgroundTimer from 'react-native-background-timer'; +import ImagePicker from 'react-native-image-picker'; import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import TopNavbar from 'src/components/module/TopNavbar'; import * as actions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; import MarkerButton from './MarkerButton'; +import Prepare from './Prepare'; import StatusButton from './StatusButton'; -import Trailor from './Trailor'; import { fonts, icons, views } from './Walk.styles'; +import { + CameraRoll, + Image, + SafeAreaView, + Text, + View, + Platform, +} from 'react-native'; import Pedometer, { PedometerInterface, } from '@JWWon/react-native-universal-pedometer'; +import { + checkPermission, + PICTURE_PERMISSIONS, +} from 'src/assets/functions/validate'; interface WalkInfoInterface { unit: 'Km' | '걸음' | 'Kcal'; @@ -65,7 +77,22 @@ class Walk extends Component { } } - trailorWillUnmount = () => { + launchCamera = async () => { + const options = { + cameraType: 'back' as 'back', + mediaType: 'photo' as 'photo', + storageOptions: { + cameraRoll: Platform.OS === 'ios', + skipBackup: true, + waitUntilSaved: true, + }, + }; + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.launchCamera(options, res => {}); + } + }; + + onPrepareWillUnmount = () => { const { updateStatus } = this.props; updateStatus('WALKING'); }; @@ -77,7 +104,7 @@ class Walk extends Component { render() { const { updateLatestPin } = this.props; - const { distance, status, seconds, steps } = this.props.walk; + const { distance, status, seconds, steps, speed } = this.props.walk; const gpsInfoList: WalkInfoInterface[] = [ { value: distance, unit: 'Km' }, { value: steps, unit: '걸음' }, @@ -87,7 +114,7 @@ class Walk extends Component { return ( {status === 'READY' ? ( - + ) : ( <> @@ -102,7 +129,7 @@ class Walk extends Component { ), }} right={{ - handlePress: () => {}, + handlePress: this.launchCamera, view: ( { /> 1.11 + ? require('src/assets/images/img_running.gif') + : require('src/assets/images/img_walking.gif') + : require('src/assets/images/img_standing.jpg') + } /> {convertSecToTime(seconds)} diff --git a/src/pages/Walk/Walk/index.ts b/src/pages/Map/Walk/index.ts similarity index 100% rename from src/pages/Walk/Walk/index.ts rename to src/pages/Map/Walk/index.ts diff --git a/src/pages/Map/index.ts b/src/pages/Map/index.ts new file mode 100644 index 00000000..58b35ba8 --- /dev/null +++ b/src/pages/Map/index.ts @@ -0,0 +1,60 @@ +import { Animated, Easing } from 'react-native'; +import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; +import EditScreen from './Edit'; +import FinishScreen from './Finish'; +import MapScreen from './Map'; +import UploadScreen from './Upload'; +import WalkScreen from './Walk'; +import { + MapListNavigator as PlaceMapNavigator, + SearchNavigator as PlaceSearchNavigator, +} from 'src/pages/Place'; + +const FinishNavigator = createStackNavigator( + { + finish: FinishScreen, + upload: UploadScreen, + edit: EditScreen, + }, + { + initialRouteName: 'finish', + headerMode: 'none', + } +); + +const WalkNavigator = createSwitchNavigator( + { + walk: WalkScreen, + finish: FinishNavigator, + }, + { + initialRouteName: 'walk', + backBehavior: 'initialRoute', + } +); + +const MapNavigator = createStackNavigator( + { + map: MapScreen, + walk: WalkNavigator, + placeMap: PlaceMapNavigator, + placeSearch: PlaceSearchNavigator, + }, + { + initialRouteName: 'map', + headerMode: 'none', + transitionConfig: () => ({ + transitionSpec: { + duration: 0, + timing: Animated.timing, + easing: Easing.step0, + }, + }), + } +); + +MapNavigator.navigationOptions = ({ navigation }: any) => ({ + tabBarVisible: navigation.state.index === 0, +}); + +export default MapNavigator; diff --git a/src/pages/Place/Detail/Detail.styles.ts b/src/pages/Place/Detail/Detail.styles.ts index 2606fd2c..dcb9b5a9 100644 --- a/src/pages/Place/Detail/Detail.styles.ts +++ b/src/pages/Place/Detail/Detail.styles.ts @@ -1,9 +1,8 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { cardHeight } from 'src/pages/Place/Map/Card'; -import { color, shadow } from 'src/theme'; +import { color, size } from 'src/theme'; const { height } = Dimensions.get('window'); +const cardMarginTop = 56; const paddingVertical = 20; export const views = StyleSheet.create({ @@ -14,34 +13,39 @@ export const views = StyleSheet.create({ right: 0, }, headerWrapper: { - height: height * 0.41, + height: height * 0.253, }, headerFilter: { flex: 1, backgroundColor: `${color.black}78`, }, + headerCheat: { + marginTop: 'auto', + marginLeft: 'auto', + width: size.horizontal + 60, + height: cardMarginTop, + }, infoHover: { - marginTop: -(cardHeight / 2 + paddingVertical), + marginTop: -cardMarginTop, marginBottom: 10, - height: cardHeight, - borderRadius: 5, - backgroundColor: color.white, - ...shadow.shallow, }, infoWrapper: { paddingVertical, - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, backgroundColor: color.white, - borderTopWidth: 10, - borderColor: color.grayEF, + }, + hr: { + height: 10, + backgroundColor: color.grayEF, }, rowWrapper: { - marginVertical: 6, + marginVertical: 2, flexDirection: 'row', + flexWrap: 'wrap', }, imageWrapper: { - marginTop: 4, - paddingHorizontal: horizontalSize, + marginTop: 10, + paddingHorizontal: size.horizontal, }, image: { width: 140, @@ -64,15 +68,30 @@ export const icons = StyleSheet.create({ }); export const texts = StyleSheet.create({ - blackOpacity: { - flexBasis: 58, - lineHeight: 24, + label: { + flexBasis: 62, color: color.blackOpacity, + fontSize: 15, + alignSelf: 'flex-start', + }, + content: { + flex: 1, + color: color.gray48, + fontSize: 15, + }, + phone: { + textDecorationStyle: 'solid', + textDecorationColor: color.blue, + textDecorationLine: 'underline', + color: color.blue, + fontSize: 15, + }, + title: { fontSize: 16, + color: color.black, + paddingHorizontal: size.horizontal, }, - black: { + lineHeight: { lineHeight: 24, - color: color.black, - fontSize: 16, }, }); diff --git a/src/pages/Place/Detail/Detail.tsx b/src/pages/Place/Detail/Detail.tsx index 6749cf75..1c5f2f7c 100644 --- a/src/pages/Place/Detail/Detail.tsx +++ b/src/pages/Place/Detail/Detail.tsx @@ -1,15 +1,18 @@ +import { find, findIndex } from 'lodash'; import React, { PureComponent } from 'react'; import { NavigationScreenProps } from 'react-navigation'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; +import { connect } from 'react-redux'; +import { call } from 'src/assets/functions/link'; +import withMessage, { MessageProps } from 'src/components/base/withMessage'; import Rating from 'src/components/module/Rating'; import TopNavbar from 'src/components/module/TopNavbar'; -import Card from 'src/pages/Place/Map/Card'; -import { Place } from 'src/services/api/place'; -import { getReivews, Review } from 'src/services/api/review'; +import Card from 'src/pages/Place/MapList/Card'; +import { getReviews, Review } from 'src/services/api/review'; +import * as actions from 'src/store/actions/place'; +import { ReducerState } from 'src/store/reducers'; import { icons, texts, views } from './Detail.styles'; import ReviewCard from './ReviewCard'; import { - Alert, Image, ImageBackground, ScrollView, @@ -17,12 +20,22 @@ import { View, SafeAreaView, FlatList, + TouchableOpacity, + Platform, } from 'react-native'; +interface Props extends NavigationScreenProps, MessageProps { + user: ReducerState['user']; + scrap: typeof actions.scrap; + unScrap: typeof actions.unScrap; +} + interface State { + isScrap: boolean; reviews: Review[]; } +// Helpers function showOfficeHour(officeHour: { default: string; weekend?: string; @@ -37,31 +50,62 @@ function showOfficeHour(officeHour: { return message; } -class Detail extends PureComponent { - place: Place = this.props.navigation.getParam('place'); +const isPhoneNumber = (value: string) => + /(^0[0-9]{1,2}-)?[0-9]{3,4}-[0-9]{4}$/g.test(value); + +class Detail extends PureComponent { + place: actions.Place = this.props.navigation.getParam('place'); - state: State = { reviews: [] }; + state: State = { + isScrap: + find(this.props.user.places, place => place === this.place._id) !== + undefined, + reviews: [], + }; async componentDidMount() { - this.setState({ reviews: await getReivews({ place: this.place._id }) }); + const reviews = await getReviews({ place: this.place._id }); + this.setState({ reviews }); } - renderRow = (label: string, data: string) => ( - - {label} - {data} - - ); + handleToggleScrap = async () => { + const { scrap, unScrap, showMessage } = this.props; + if (this.state.isScrap) { + await unScrap({ id: this.place._id }); + this.setState({ isScrap: false }); + showMessage('내 상점에서 삭제했습니다.'); + } else { + await scrap({ id: this.place._id }); + this.setState({ isScrap: true }); + showMessage('내 상점에 추가되었습니다.'); + } + }; handleCreateReview = (review: Review) => { this.setState({ reviews: [...this.state.reviews, review] }); }; + handleUpdateReview = (review: Review) => { + const index = findIndex( + this.state.reviews, + item => item._id === review._id + ); + const reviews = [...this.state.reviews]; + reviews[index] = review; + this.setState({ reviews }); + }; + + handleDeleteReview = (id: string) => { + const reviews = this.state.reviews.filter(review => review._id !== id); + this.setState({ reviews }); + }; + handleRatingChange = (rating: number) => { const { navigation } = this.props; navigation.navigate('review', { rating, - place: this.place, + place: this.place._id, + title: this.place.name, handleAddReview: this.handleCreateReview, }); }; @@ -73,59 +117,131 @@ class Detail extends PureComponent { - + {thumbnail ? ( + + {Platform.OS === 'android' && ( + + )} + + ) : ( + Platform.OS === 'android' && ( + + ) + )} - + { - Alert.alert('저장했습니다.'); - }} + handlePress={this.handleToggleScrap} + width="100%" icon={ } + softShadow /> - {this.renderRow('장소', this.place.address)} - {this.place.officeHour && - this.renderRow('시간', showOfficeHour(this.place.officeHour))} - {this.place.contact && this.renderRow('문의', this.place.contact)} - - - - 사진 - - {images && ( - index.toString()} - renderItem={image => ( - - )} - showsHorizontalScrollIndicator={false} - horizontal - /> - )} + index.toString()} + renderItem={({ item }) => + item.value ? ( + + + {item.label} + + {isPhoneNumber(item.value) ? ( + + await call({ number: item.value as string }) + }> + {item.value} + + ) : ( + + {item.value} + + )} + + ) : null + } + /> + + {images && images.length > 0 && ( + <> + + 사진 + index.toString()} + renderItem={image => ( + + )} + showsHorizontalScrollIndicator={false} + horizontal + /> + + + + )} - 이 장소에 대한 평점을 남겨주세요. + 이 장소에 대한 평점을 남겨주세요. - - {this.state.reviews.map((review, index) => ( - - ))} - + + index.toString()} + renderItem={({ item }) => ( + + )} + /> { } } -export default Detail; +export default connect( + (state: ReducerState) => ({ + user: state.user, + }), + { scrap: actions.scrap, unScrap: actions.unScrap } +)(withMessage(Detail)); diff --git a/src/pages/Place/Detail/Header/Header.tsx b/src/pages/Place/Detail/Header/Header.tsx deleted file mode 100644 index 0991ff2f..00000000 --- a/src/pages/Place/Detail/Header/Header.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'; -import { NavigationScreenProp } from 'react-navigation'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color } from 'src/theme'; - -interface Props { - thumbnail: string; - navigation: NavigationScreenProp; -} - -const { height } = Dimensions.get('window'); - -const styles = StyleSheet.create({ - container: { - height: height * 0.41, - }, - filter: { - flex: 1, - backgroundColor: `${color.black}78`, - }, - button: { - paddingLeft: horizontalSize, - paddingVertical: 14, - }, - icon: { - width: 18, - height: 16, - }, -}); - -const Header: React.FC = ({ thumbnail, navigation }) => ( - - - -); - -export default Header; diff --git a/src/pages/Place/Detail/Header/index.ts b/src/pages/Place/Detail/Header/index.ts deleted file mode 100644 index 579f1ac2..00000000 --- a/src/pages/Place/Detail/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Header'; diff --git a/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx b/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx index 8f4aedc6..27df6fa5 100644 --- a/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx +++ b/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx @@ -1,13 +1,22 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import FeedHeader from 'src/components/module/FeedHeader'; -import { Rating } from 'src/pages/Place/Map/Card/Card'; -import { Review } from 'src/services/api/review'; -import { color } from 'src/theme'; - -interface Props { +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import ActionSheet from 'react-native-actionsheet'; +import { NavigationScreenProps, withNavigation } from 'react-navigation'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { Rating } from 'src/pages/Place/MapList/Card/Card'; +import { deleteReview, reportReview, Review } from 'src/services/api/review'; +import { color, font, size } from 'src/theme'; + +interface Props extends NavigationScreenProps { review: Review; + onDelete: (id: string) => void; + onUpdate: (review: Review) => void; + isWriter: boolean; +} + +interface State { + options: string[]; } const styles = StyleSheet.create({ @@ -21,25 +30,120 @@ const styles = StyleSheet.create({ alignItems: 'center', }, contentWrapper: { - paddingLeft: horizontalSize + 42, - paddingRight: horizontalSize, + paddingLeft: size.horizontal + 42, + paddingRight: size.horizontal, }, description: { - marginTop: 6, + marginTop: 9, + color: '#484848', + }, + header: { + paddingHorizontal: size.horizontal, + paddingBottom: 12, + flexDirection: 'row', + alignItems: 'center', + }, + userName: { + marginLeft: 10, color: color.black, + fontSize: 16, + }, + time: { + flex: 1, + marginLeft: 4, + color: `${color.black}4D`, + fontSize: font.size.small, + }, + headerButton: { + paddingLeft: 16, + justifyContent: 'center', + alignItems: 'flex-end', + }, + smallDot: { + width: 3, + height: 3, + borderRadius: 1.5, + backgroundColor: '#2626267F', + marginVertical: 1, }, }); -const ReviewCard: React.FC = ({ review }) => { - return ( - - - - - {review.description} +class ReviewCard extends PureComponent { + private actionSheet = React.createRef(); + constructor(props: Props) { + super(props); + const options: string[] = props.isWriter ? ['수정', '삭제'] : ['신고']; + options.push('취소'); + this.state = { options }; + } + + handlePressDots = () => { + const actionSheet = this.actionSheet.current; + if (actionSheet) actionSheet.show(); + }; + + handleActionSheet = async (index: number) => { + const { review, isWriter, onDelete, onUpdate, navigation } = this.props; + if (isWriter) { + switch (index) { + case 0: + navigation.navigate('review', { + _id: review._id, + rating: review.rating, + place: review.place, + description: review.description, + title: '리뷰 수정하기', + handleUpdateReview: onUpdate, + }); + break; + case 1: + await deleteReview(review._id); + onDelete(review._id); + break; + } + } else { + if (index === 0) await reportReview(review._id); + } + }; + + render() { + const { review } = this.props; + + return ( + + + {review.user.repDog && ( + <> + + {review.user.repDog.name} + + )} + + {moment(review.updatedAt).fromNow()} + + + + + + + + + + {review.description} + + - - ); -}; + ); + } +} -export default ReviewCard; +export default withNavigation(ReviewCard); diff --git a/src/pages/Place/Map/Card/index.ts b/src/pages/Place/Map/Card/index.ts deleted file mode 100644 index 038d3d08..00000000 --- a/src/pages/Place/Map/Card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default, cardWidth, cardHeight } from './Card'; diff --git a/src/pages/Place/Map/index.ts b/src/pages/Place/Map/index.ts deleted file mode 100644 index 84bebe9d..00000000 --- a/src/pages/Place/Map/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Map'; diff --git a/src/pages/Place/Map/Card/Card.tsx b/src/pages/Place/MapList/Card/Card.tsx similarity index 73% rename from src/pages/Place/Map/Card/Card.tsx rename to src/pages/Place/MapList/Card/Card.tsx index e2c4ab25..a1907c7d 100644 --- a/src/pages/Place/Map/Card/Card.tsx +++ b/src/pages/Place/MapList/Card/Card.tsx @@ -1,48 +1,42 @@ import React from 'react'; import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; -import { Place } from 'src/services/api/place'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { Place } from 'src/store/actions/place'; import { color, font, shadow } from 'src/theme'; interface Props { place: Place; handlePress: () => void; icon: React.ReactNode; + width?: number | string; + softShadow?: boolean; } export const cardWidth = 327; -export const cardHeight = 104; -const thumbnailSize = 50; const styles = StyleSheet.create({ wrapper: { width: cardWidth, padding: 16, - height: cardHeight, borderRadius: 5, flexDirection: 'row', backgroundColor: color.white, ...shadow.deep, }, - placeIcon: { - width: thumbnailSize, - height: thumbnailSize, - borderRadius: thumbnailSize / 2, - borderWidth: 1, - borderColor: `${color.black}14`, - }, infoWrapper: { flex: 1, marginLeft: 12, marginTop: 4, }, name: { - fontSize: 16, + fontSize: font.size.large, color: color.black, - fontWeight: '500', + fontWeight: '600', }, describe: { fontSize: font.size.medium, - marginTop: 2, + marginTop: 4, + marginBottom: 10, color: color.blackOpacity, lineHeight: 16, }, @@ -87,16 +81,25 @@ export const Rating: React.FC<{ rating: number }> = ({ rating }) => { ); }; -const Info: React.FC = ({ place, handlePress, icon }) => { - const placeIcon = place.icon - ? { uri: place.icon } - : require('src/assets/icons/ic_place_default.png'); - +const Info: React.FC = ({ + place, + handlePress, + icon, + width, + softShadow, +}) => { return ( - - + + - {place.name} + + {place.name.trim()} + {place.label} diff --git a/src/pages/Place/MapList/Card/index.ts b/src/pages/Place/MapList/Card/index.ts new file mode 100644 index 00000000..f0061683 --- /dev/null +++ b/src/pages/Place/MapList/Card/index.ts @@ -0,0 +1 @@ +export { default, cardWidth } from './Card'; diff --git a/src/pages/Place/MapList/Label/Label.tsx b/src/pages/Place/MapList/Label/Label.tsx new file mode 100644 index 00000000..5eb293ca --- /dev/null +++ b/src/pages/Place/MapList/Label/Label.tsx @@ -0,0 +1,109 @@ +import React, { PureComponent } from 'react'; +import { FlatList } from 'react-native-gesture-handler'; +import { Label as LabelType } from 'src/store/actions/place'; +import { color } from 'src/theme'; +import { + NativeScrollEvent, + NativeSyntheticEvent, + StyleSheet, + Text, + TouchableOpacity, +} from 'react-native'; + +interface Props { + onChange: (label?: LabelType) => void; +} + +interface State { + isScroll: boolean; + label?: LabelType; +} + +const height = 30; +const styles = StyleSheet.create({ + container: { + flex: 1, + marginLeft: 10, + }, + listWrapper: { + paddingRight: 12, + }, + borderLeft: { + borderLeftWidth: 1, + borderColor: color.grayDA, + }, + itemWrapper: { + height, + marginLeft: 8, + paddingHorizontal: 12, + borderRadius: height / 2, + borderWidth: 1, + borderColor: color.grayDA, + backgroundColor: color.white, + justifyContent: 'center', + }, + text: { + color: color.black, + fontSize: 15, + }, +}); + +class Label extends PureComponent { + state: State = { isScroll: false, label: undefined }; + + handleChange = (label?: LabelType) => { + this.props.onChange(label); + this.setState({ label }); + }; + + handleScroll = (e: NativeSyntheticEvent) => { + const { contentOffset } = e.nativeEvent; + const { isScroll } = this.state; + if (contentOffset.x > 0) { + if (!isScroll) this.setState({ isScroll: true }); + } else { + if (isScroll) this.setState({ isScroll: false }); + } + }; + + render() { + const label = this.state.label || '전체'; + return ( + item} + style={[ + styles.container, + this.state.isScroll ? styles.borderLeft : null, + ]} + onScroll={this.handleScroll} + contentContainerStyle={styles.listWrapper} + renderItem={({ item, index }) => ( + + index === 0 ? this.handleChange() : this.handleChange(item) + }> + + {item} + + + )} + horizontal + showsHorizontalScrollIndicator={false} + /> + ); + } +} + +export default Label; diff --git a/src/pages/Place/MapList/Label/index.ts b/src/pages/Place/MapList/Label/index.ts new file mode 100644 index 00000000..a1e5f51f --- /dev/null +++ b/src/pages/Place/MapList/Label/index.ts @@ -0,0 +1 @@ +export { default } from './Label'; diff --git a/src/pages/Place/Map/Map.styles.ts b/src/pages/Place/MapList/MapList.styles.ts similarity index 50% rename from src/pages/Place/Map/Map.styles.ts rename to src/pages/Place/MapList/MapList.styles.ts index 5fccfdeb..335053ea 100644 --- a/src/pages/Place/Map/Map.styles.ts +++ b/src/pages/Place/MapList/MapList.styles.ts @@ -1,24 +1,23 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color, font, shadow } from 'src/theme'; +import { color, font, size } from 'src/theme'; export const { width, height } = Dimensions.get('window'); export const filterHeight = 49; +const searchHeight = 38; export const views = StyleSheet.create({ container: { flex: 1, - justifyContent: 'flex-end', + justifyContent: 'space-between', }, filterWrapper: { height: filterHeight, - paddingHorizontal: horizontalSize, + paddingLeft: size.horizontal, backgroundColor: color.grayF9, flexDirection: 'row', alignItems: 'center', - borderTopWidth: 1, - borderBottomWidth: 1, - borderColor: color.grayB1, + borderBottomWidth: 0.5, + borderColor: '#DADCDF', }, map: { ...StyleSheet.absoluteFillObject, @@ -27,6 +26,20 @@ export const views = StyleSheet.create({ height: '100%', paddingRight: 20, }, + carousel: { + marginBottom: 20, + }, + reSearch: { + marginTop: 16, + alignSelf: 'center', + height: searchHeight, + borderWidth: 0.5, + borderColor: '#0000002e', + borderRadius: searchHeight / 2, + justifyContent: 'center', + paddingHorizontal: 12, + backgroundColor: color.white, + }, }); export const icons = StyleSheet.create({ @@ -40,3 +53,10 @@ export const icons = StyleSheet.create({ height: 40, }, }); + +export const texts = StyleSheet.create({ + reSearch: { + color: color.blue, + fontSize: font.size.medium, + }, +}); diff --git a/src/pages/Place/Map/Map.tsx b/src/pages/Place/MapList/MapList.tsx similarity index 68% rename from src/pages/Place/Map/Map.tsx rename to src/pages/Place/MapList/MapList.tsx index be08a259..9eb1f181 100644 --- a/src/pages/Place/Map/Map.tsx +++ b/src/pages/Place/MapList/MapList.tsx @@ -1,25 +1,32 @@ import produce from 'immer'; import { pick } from 'lodash'; import React, { PureComponent } from 'react'; -import { Image, SafeAreaView, ScrollViewProps, View } from 'react-native'; +import Carousel, { CarouselStatic } from 'react-native-snap-carousel'; import { NavigationScreenProps } from 'react-navigation'; import TopNavbar from 'src/components/module/TopNavbar'; -import TrackUser from 'src/pages/App/Map/TrackUser'; -import { Params, Place, searchPlace } from 'src/services/api/place'; +import TrackUser from 'src/pages/Map/Map/TrackUser'; +import { SearchParams, searchPlace } from 'src/services/api/place'; +import { Label as LabelType, Place } from 'src/store/actions/place'; import Card, { cardWidth } from './Card'; -import { height, icons, views, width } from './Map.styles'; +import Label from './Label'; +import { height, icons, texts, views, width } from './MapList.styles'; import MarkerView from './MarkerView'; import Range from './Range'; -import Carousel, { - CarouselStatic, - AdditionalParallaxProps, -} from 'react-native-snap-carousel'; +import { + Image, + SafeAreaView, + ScrollViewProps, + View, + Text, + TouchableOpacity, +} from 'react-native'; import MapView, { + EventUserLocation, LatLng, Marker, MapEvent, PROVIDER_GOOGLE, - EventUserLocation, + Region, } from 'react-native-maps'; const ASPECT_RATIO = width / height; @@ -30,9 +37,10 @@ interface State { places: Place[]; curPlace: number; trackUser: boolean; + showSearch: boolean; userCoord: LatLng; mapCoord: LatLng; - filter: { keyword?: string; range: number }; + filter: { range: number; label?: LabelType }; } interface Item { @@ -44,7 +52,7 @@ type CarouselInterface = Carousel & CarouselStatic & ScrollViewProps; -class Map extends PureComponent { +class MapList extends PureComponent { private map = React.createRef(); private carousel = React.createRef(); private loadUserLocation = false; @@ -53,6 +61,7 @@ class Map extends PureComponent { places: [], curPlace: 0, trackUser: false, + showSearch: false, userCoord: LOCATION, mapCoord: LOCATION, filter: { @@ -60,14 +69,17 @@ class Map extends PureComponent { }, }; - search = async (params: Params) => { + search = async (params: SearchParams) => { const places = await searchPlace(params); + const carousel = this.carousel.current; this.setState(state => produce(state, draft => { draft.places = places; draft.curPlace = 0; + if (state.showSearch) draft.showSearch = false; if (places.length > 0) { this.moveCameraToLocation(places[draft.curPlace].location); + if (carousel) carousel.snapToItem(draft.curPlace); } }) ); @@ -86,7 +98,12 @@ class Map extends PureComponent { }; stopTrackUser = () => { - if (this.state.trackUser) this.setState({ trackUser: false }); + this.setState(state => + produce(state, draft => { + if (state.trackUser) draft.trackUser = false; + if (!state.showSearch) draft.showSearch = true; + }) + ); }; handlePressTrackButton = () => { @@ -114,7 +131,7 @@ class Map extends PureComponent { const { id, coordinate } = e.nativeEvent; const curPlace = parseInt(id, 10); this.moveCameraToLocation(coordinate); - this.setState({ curPlace }); + this.setState({ curPlace, showSearch: false }); if (this.carousel.current) { this.carousel.current.snapToItem(curPlace); } @@ -124,21 +141,43 @@ class Map extends PureComponent { this.setState(state => produce(state, draft => { draft.filter.range = range; + if (state.showSearch) draft.showSearch = false; + this.search({ location: state.userCoord, ...draft.filter }); + }) + ); + }; + + handleLabelChange = (label?: LabelType) => { + this.setState(state => + produce(state, draft => { + if (label) draft.filter.label = label; + else delete draft.filter.label; + if (state.showSearch) draft.showSearch = false; this.search({ location: state.userCoord, ...draft.filter }); }) ); }; + handleMapLocationSerach = () => { + const { mapCoord, filter } = this.state; + this.search({ location: mapCoord, ...filter }); + }; + + handleRegionChange = (region: Region) => { + this.setState({ mapCoord: pick(region, ['latitude', 'longitude']) }); + }; + handleSnap = (index: number) => { this.setState(state => produce(state, draft => { draft.curPlace = index; + if (state.showSearch) draft.showSearch = false; this.moveCameraToLocation(state.places[draft.curPlace].location); }) ); }; - renderItem = ({ item }: Item, parallaxProps?: AdditionalParallaxProps) => ( + renderItem = ({ item }: Item) => ( this.moveToDetail(item)} @@ -167,9 +206,11 @@ class Map extends PureComponent { ), handlePress: () => this.props.navigation.goBack(null), }} + showBorder /> + @@ -183,6 +224,7 @@ class Map extends PureComponent { showsUserLocation={true} onTouchStart={this.stopTrackUser} onUserLocationChange={this.handleLocationChange} + onRegionChangeComplete={this.handleRegionChange} onMarkerPress={this.handleMarkerPress}> {places && places.map((place, index) => ( @@ -194,6 +236,15 @@ class Map extends PureComponent { ))} + + {this.state.showSearch && ( + + 여기서 재탐색 + + )} + { @@ -215,4 +270,4 @@ class Map extends PureComponent { } } -export default Map; +export default MapList; diff --git a/src/pages/Place/Map/MarkerView/MarkerView.tsx b/src/pages/Place/MapList/MarkerView/MarkerView.tsx similarity index 71% rename from src/pages/Place/Map/MarkerView/MarkerView.tsx rename to src/pages/Place/MapList/MarkerView/MarkerView.tsx index bb4c186e..a092c151 100644 --- a/src/pages/Place/Map/MarkerView/MarkerView.tsx +++ b/src/pages/Place/MapList/MarkerView/MarkerView.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Image, StyleSheet, View } from 'react-native'; -import { Place } from 'src/services/api/place'; +import { Place } from 'src/store/actions/place'; interface Props { place: Place; @@ -15,12 +15,12 @@ const styles = StyleSheet.create({ alignItems: 'center', }, pin: { - width: 20, - height: 20, + width: 24, + height: 32, }, place: { - width: 33.5, - height: 43.7, + width: 33, + height: 44, }, }); @@ -29,8 +29,8 @@ const MarkerView: React.FC = ({ place, selected }) => ( diff --git a/src/pages/Place/Map/MarkerView/index.ts b/src/pages/Place/MapList/MarkerView/index.ts similarity index 100% rename from src/pages/Place/Map/MarkerView/index.ts rename to src/pages/Place/MapList/MarkerView/index.ts diff --git a/src/pages/Place/Map/Range/Range.tsx b/src/pages/Place/MapList/Range/Range.tsx similarity index 68% rename from src/pages/Place/Map/Range/Range.tsx rename to src/pages/Place/MapList/Range/Range.tsx index 931aca89..5002a4f3 100644 --- a/src/pages/Place/Map/Range/Range.tsx +++ b/src/pages/Place/MapList/Range/Range.tsx @@ -1,10 +1,9 @@ import produce from 'immer'; import React, { PureComponent } from 'react'; import { rangeWithUnit } from 'src/assets/functions/print'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; import { height as navHeight } from 'src/components/module/TopNavbar/TopNavbar'; -import { color } from 'src/theme'; -import { filterHeight as resultHeight } from '../Map.styles'; +import { color, size } from 'src/theme'; +import { filterHeight as resultHeight } from '../MapList.styles'; import { Image, Modal, @@ -33,23 +32,21 @@ const styles = StyleSheet.create({ backgroundColor: color.black33Opacity, }, box: { - width: 80, + width: 72, backgroundColor: color.white, - marginTop: navHeight + resultHeight + 8, - marginLeft: horizontalSize, - borderWidth: 1, + marginTop: navHeight + resultHeight - 10, + paddingVertical: 7, + marginLeft: size.horizontal, borderRadius: 5, - paddingHorizontal: 8, - borderColor: color.grayB1, + alignItems: 'center', }, optionWrapper: { - height: 48, - justifyContent: 'center', + paddingVertical: 9, alignItems: 'center', }, - borderTop: { - borderTopWidth: 1, - borderColor: color.grayEF, + label: { + fontSize: 16, + color: color.black, }, }); @@ -73,37 +70,44 @@ class Range extends PureComponent { }; render() { - const { range } = this.props; - + const curRange = this.props.range; return ( <> - {rangeWithUnit(range)} + {rangeWithUnit(curRange, true)} - + - {RANGES.map((range, index) => ( + {RANGES.map(range => ( 0 ? styles.borderTop : null) }, - ]} + style={styles.optionWrapper} activeOpacity={0.7} onPress={() => this.handleChange(range)} key={range}> - {rangeWithUnit(range)} + + {rangeWithUnit(range, true)} + ))} diff --git a/src/pages/Place/Map/Range/index.ts b/src/pages/Place/MapList/Range/index.ts similarity index 100% rename from src/pages/Place/Map/Range/index.ts rename to src/pages/Place/MapList/Range/index.ts diff --git a/src/pages/Place/MapList/index.ts b/src/pages/Place/MapList/index.ts new file mode 100644 index 00000000..61feb387 --- /dev/null +++ b/src/pages/Place/MapList/index.ts @@ -0,0 +1 @@ +export { default } from './MapList'; diff --git a/src/pages/Place/Review/Review.styles.ts b/src/pages/Place/Review/Review.styles.ts index b30b2fe2..bc9b1f56 100644 --- a/src/pages/Place/Review/Review.styles.ts +++ b/src/pages/Place/Review/Review.styles.ts @@ -4,7 +4,7 @@ import { color } from 'src/theme'; export const views = StyleSheet.create({ header: { paddingTop: 20, - paddingBottom: 4, + paddingBottom: 12, alignItems: 'center', flexDirection: 'row', borderBottomWidth: 1, diff --git a/src/pages/Place/Review/Review.tsx b/src/pages/Place/Review/Review.tsx index ee19a8f5..02781101 100644 --- a/src/pages/Place/Review/Review.tsx +++ b/src/pages/Place/Review/Review.tsx @@ -3,7 +3,7 @@ import { Alert, Text, TextInput, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; import Rating from 'src/components/module/Rating'; -import { createReview } from 'src/services/api/review'; +import { createReview, updateReview } from 'src/services/api/review'; import { color } from 'src/theme'; import { texts, views } from './Review.styles'; @@ -12,21 +12,49 @@ interface State { description: string; } +/** + * params + * { + * place: string; + * rating: number; + * name: string; + * id: string; + * description?: string; + * handleAddReview?: (review: Review) => void; + * handleUpdateReview?: (review: Review) => void; + * } + */ class Review extends PureComponent { state: State = { rating: this.props.navigation.getParam('rating'), - description: '', + description: this.props.navigation.getParam('description') || '', }; handleSubmit = async () => { const { navigation } = this.props; - const place = navigation.getParam('place')._id; - const review = await createReview({ place, ...this.state }); - if (review) { - navigation.getParam('handleAddReview')(review); - Alert.alert('리뷰가 작성되었습니다.'); + const place = navigation.getParam('place'); + const _id = navigation.getParam('_id'); + try { + if (_id) { + const review = await updateReview({ _id, place, ...this.state }); + if (review) { + navigation.getParam('handleUpdateReview')(review); + Alert.alert('리뷰가 수정되었습니다.'); + navigation.goBack(null); + } + } else { + const review = await createReview({ place, ...this.state }); + if (review) { + navigation.getParam('handleAddReview')(review); + Alert.alert('리뷰가 작성되었습니다.'); + navigation.goBack(null); + } + } + } catch (e) { + if (e.response.data.statusCode === 409) { + Alert.alert(e.response.data.message); + } } - navigation.goBack(null); }; handleChange = (description: string) => { @@ -43,7 +71,7 @@ class Review extends PureComponent { return ( @@ -59,6 +87,7 @@ class Review extends PureComponent { multiline={true} onChangeText={this.handleChange} onSubmitEditing={this.handleSubmit} + autoFocus={true} returnKeyType="done" autoCapitalize="none" autoCorrect={false} diff --git a/src/pages/Place/Search/Search.tsx b/src/pages/Place/Search/Search.tsx index ecfa498b..379192b0 100644 --- a/src/pages/Place/Search/Search.tsx +++ b/src/pages/Place/Search/Search.tsx @@ -1,28 +1,42 @@ import { pick } from 'lodash'; -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; +import { Alert } from 'react-native'; import Geolocation from 'react-native-geolocation-service'; import { NavigationScreenProps } from 'react-navigation'; import TextAutocomplete from 'src/components/module/TextAutocomplete'; -import { Place, searchPlace } from 'src/services/api/place'; +import { searchPlace } from 'src/services/api/place'; +import { Place } from 'src/store/actions/place'; +import { + LOCATION_PERMISSIONS, + checkPermission, +} from 'src/assets/functions/validate'; interface State { - places: Place[]; + location: { latitude: number; longitude: number }; } -class Search extends PureComponent { - state: State = { - places: [], - }; +class Search extends Component { + state: State = { location: { latitude: 0, longitude: 0 } }; - handleChange = (keyword: string) => { - const { places } = this.state; - if (places.length === 0 && keyword.length > 1) { - Geolocation.getCurrentPosition(async ({ coords }) => { - const location = pick(coords, ['latitude', 'longitude']); - const places = await searchPlace({ location, keyword, range: 100 }); - this.setState({ places }); - }); + async componentDidMount() { + if (await checkPermission(LOCATION_PERMISSIONS)) { + Geolocation.getCurrentPosition( + async ({ coords }) => { + this.setState({ location: pick(coords, ['latitude', 'longitude']) }); + }, + err => { + if (err.PERMISSION_DENIED) { + Alert.alert('위치정보 요청이 거부되었습니다.'); + } + } + ); } + } + + handleSearch = async (keyword: string) => { + const { location } = this.state; + const places = await searchPlace({ location, keyword }); + return places; }; handleSubmit = (place: Place) => { @@ -31,16 +45,13 @@ class Search extends PureComponent { }; render() { - const { places } = this.state; - return ( this.props.navigation.goBack(null)} + onSubmit={this.handleSubmit} + onSearch={this.handleSearch} + onDismiss={() => this.props.navigation.goBack(null)} /> ); } diff --git a/src/pages/Place/index.ts b/src/pages/Place/index.ts index 725678a5..4252cf25 100644 --- a/src/pages/Place/index.ts +++ b/src/pages/Place/index.ts @@ -1,6 +1,6 @@ -import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; +import { createStackNavigator } from 'react-navigation'; import DetailScreen from './Detail'; -import MapScreen from './Map'; +import MapListScreen from './MapList'; import ReviewScreen from './Review'; import SearchScreen from './Search'; @@ -19,9 +19,9 @@ export const SearchNavigator = createStackNavigator( } ); -export const MapNavigator = createStackNavigator( +export const MapListNavigator = createStackNavigator( { - default: MapScreen, + default: MapListScreen, detail: DetailScreen, review: ReviewScreen, }, diff --git a/src/pages/Profile/Edit/Edit.styles.ts b/src/pages/Profile/Edit/Edit.styles.ts new file mode 100644 index 00000000..0018e41b --- /dev/null +++ b/src/pages/Profile/Edit/Edit.styles.ts @@ -0,0 +1,22 @@ +import { StyleSheet } from 'react-native'; + +const thumbnailEditSize = 26; + +export const views = StyleSheet.create({ + thumbnailWrapper: { + marginTop: 30, + marginBottom: 24, + alignItems: 'center', + }, +}); + +export const icons = StyleSheet.create({ + edit: { + position: 'absolute', + bottom: 0, + right: 0, + width: thumbnailEditSize, + height: thumbnailEditSize, + resizeMode: 'contain', + }, +}); diff --git a/src/pages/Profile/Edit/Edit.tsx b/src/pages/Profile/Edit/Edit.tsx new file mode 100644 index 00000000..6ae632b9 --- /dev/null +++ b/src/pages/Profile/Edit/Edit.tsx @@ -0,0 +1,278 @@ +import produce from 'immer'; +import { pick } from 'lodash'; +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import { TouchableOpacity } from 'react-native-gesture-handler'; +import ImagePicker from 'react-native-image-picker'; +import { NavigationScreenProps } from 'react-navigation'; +import { connect } from 'react-redux'; +import breeds from 'src/assets/consts/breeds.json'; +import withLoading, { LoadingProps } from 'src/components/base/withLoading'; +import PageContainer from 'src/components/container/PageContainer'; +import DateInput, { HandleChangeDate } from 'src/components/module/DateInput'; +import DefaultImage from 'src/components/module/DefaultImage'; +import Selector, { HandleChangeSelector } from 'src/components/module/Selector'; +import TextAutocomplete from 'src/components/module/TextAutocomplete'; +import TextInput, { HandleChangeText } from 'src/components/module/TextInput'; +import { uploadImage } from 'src/services/aws/s3'; +import * as dogActions from 'src/store/actions/dog'; +import { ReducerState } from 'src/store/reducers'; +import { icons, views } from './Edit.styles'; +import { + Image, + Modal, + TextInput as Input, + View, + Dimensions, +} from 'react-native'; +import { + checkPermission, + PICTURE_PERMISSIONS, +} from 'src/assets/functions/validate'; + +interface Props extends LoadingProps, NavigationScreenProps { + user: ReducerState['user']; + createDog: typeof dogActions.createDog; + updateDog: typeof dogActions.updateDog; +} + +interface State + extends Pick< + dogActions.UpdateDog, + Exclude + > { + showModal: boolean; + birth?: Date; + error: { + name?: string; + breed?: string; + gender?: string; + }; +} + +const { height } = Dimensions.get('window'); + +class Edit extends PureComponent { + private create: boolean = this.props.navigation.getParam('createMode'); + private inputs = { + name: React.createRef(), + breed: React.createRef(), + gender: React.createRef(), + weight: React.createRef(), + info: React.createRef(), + }; + + state: State = { + _id: '', + name: '', + breed: '', + gender: '', + error: {}, + showModal: false, + }; + + componentDidMount() { + const { user } = this.props; + if (!this.create && user.repDog) { + this.setState({ + ...this.state, + ...pick(user.repDog, [ + '_id', + 'name', + 'breed', + 'gender', + 'thumbnail', + 'weight', + 'info', + ]), + birth: user.repDog.birth + ? moment(user.repDog.birth.split('.')).toDate() + : undefined, + }); + } + } + + toggleModal = () => { + this.setState({ showModal: !this.state.showModal }); + }; + + handleChange = ({ + name, + value, + }: HandleChangeText | HandleChangeSelector | HandleChangeDate) => { + this.setState(state => { + const error = { ...state.error }; + if (name === 'name' || name === 'gender') { + delete error[name]; + } + return { ...state, error, [name]: value }; + }); + }; + + handleBreedChange = ({ name }: { name: string }) => { + this.setState(state => + produce(state, draft => { + draft.breed = name; + delete draft.error.breed; + }) + ); + this.toggleModal(); + }; + + handleImagePicker = async () => { + const options = { + title: '프로필 선택', + takePhotoButtonTitle: '사진 찍기', + chooseFromLibraryButtonTitle: '앨범에서 사진 선택', + customButtons: [{ name: 'default', title: '우동댕 기본 이미지' }], + cancelButtonTitle: '취소', + storageOptions: { skipBackup: true, path: 'images' }, + }; + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.showImagePicker(options, res => { + if (res.didCancel || res.error) return; + this.setState({ thumbnail: res.customButton ? '' : res.uri }); + }); + } + }; + + validate = async () => { + await this.setState(state => + produce(state, draft => { + if (!state.name) draft.error.name = '반려견의 이름을 입력해주세요.'; + if (!state.breed) draft.error.breed = '반려견의 품종을 입력해주세요.'; + if (!state.gender) draft.error.gender = '반려견의 성별을 입력해주세요.'; + }) + ); + }; + + handleSubmit = async () => { + const { + createDog, + updateDog, + navigation, + user, + toggleLoading, + } = this.props; + await this.validate(); + const { showModal, error, birth: prevBirth, _id, ...state } = this.state; + if (Object.keys(error).length === 0) { + let birth: string | undefined = undefined; + // Parse state data + if (state.thumbnail !== undefined) { + const url = await uploadImage({ + table: 'dogs', + label: user.email, + name: state.name, + uri: state.thumbnail, + })(toggleLoading); + state.thumbnail = url; + } + if (prevBirth !== undefined) { + birth = moment(prevBirth).format('YYYY.MM.DD'); + } + if (state.weight) { + state.weight = parseFloat((state.weight as any) as string); + } + // Call reducer + if (_id) await updateDog({ ...state, birth, _id }); + else await createDog({ ...state, birth }); + navigation.goBack(null); + } + }; + + render() { + const { navigation } = this.props; + + return ( + + + + + + + + + null} + handleFocus={this.toggleModal} + /> + + + + + + + + + ); + } +} + +export default connect( + (state: ReducerState) => ({ user: state.user }), + { createDog: dogActions.createDog, updateDog: dogActions.updateDog } +)(withLoading(Edit)); diff --git a/src/pages/Profile/Edit/index.ts b/src/pages/Profile/Edit/index.ts new file mode 100644 index 00000000..f9b9fcdc --- /dev/null +++ b/src/pages/Profile/Edit/index.ts @@ -0,0 +1 @@ +export { default } from './Edit'; diff --git a/src/pages/Profile/Home/Badges/Badges.tsx b/src/pages/Profile/Home/Badges/Badges.tsx new file mode 100644 index 00000000..afd240c7 --- /dev/null +++ b/src/pages/Profile/Home/Badges/Badges.tsx @@ -0,0 +1,196 @@ +import { find } from 'lodash'; +import React from 'react'; +import { ReducerState } from 'src/store/reducers'; +import { font } from 'src/theme'; +import { + FlatList, + Image, + StyleSheet, + Text, + View, + Dimensions, +} from 'react-native'; + +const { width } = Dimensions.get('window'); +const badgeSize = 78; +const space = (width - badgeSize * 4) / 5; + +const styles = StyleSheet.create({ + container: { + marginTop: 23, + }, + wrapper: { + width: badgeSize, + marginHorizontal: space / 2, + alignItems: 'center', + }, + icon: { + width: 64, + height: 53, + resizeMode: 'contain', + }, + label: { + marginTop: 10, + color: '#484848', + fontSize: font.size.small, + }, +}); + +const Badges: React.FC<{ user: ReducerState['user'] }> = ({ user }) => { + let distance = 0; + let feedLength = 0; + let scrapLength = 0; + let firstPee = false; + let firstPoo = false; + if (user.repDog) { + feedLength = user.repDog.feeds.length; + scrapLength = user.places.length; + user.repDog.histories.forEach(history => { + distance += history.distance; + if (!firstPee && history.pees > 0) firstPee = true; + if (!firstPoo && history.poos > 0) firstPoo = true; + }); + } + + return ( + <> + + = 1, + }, + { + label: '3km', + name: '3km', + iconOn: require('src/assets/badges/badge_3km_on.png'), + iconOff: require('src/assets/badges/badge_3km_off.png'), + achieve: distance >= 3, + }, + { + label: '5km', + name: '5km', + iconOn: require('src/assets/badges/badge_5km_on.png'), + iconOff: require('src/assets/badges/badge_5km_off.png'), + achieve: distance >= 5, + }, + { + label: '10km', + name: '10km', + iconOn: require('src/assets/badges/badge_10km_on.png'), + iconOff: require('src/assets/badges/badge_10km_off.png'), + achieve: distance >= 10, + }, + { + label: '산책 1회', + name: 'walk_1', + iconOn: require('src/assets/badges/badge_walk_1_on.png'), + iconOff: require('src/assets/badges/badge_walk_1_off.png'), + achieve: feedLength > 0, + }, + { + label: '산책 3회', + name: 'walk_3', + iconOn: require('src/assets/badges/badge_walk_3_on.png'), + iconOff: require('src/assets/badges/badge_walk_3_off.png'), + achieve: feedLength > 2, + }, + { + label: '산책 5회', + name: 'walk_5', + iconOn: require('src/assets/badges/badge_walk_5_on.png'), + iconOff: require('src/assets/badges/badge_walk_5_off.png'), + achieve: feedLength > 4, + }, + { + label: '산책 10회', + name: 'walk_10', + iconOn: require('src/assets/badges/badge_walk_10_on.png'), + iconOff: require('src/assets/badges/badge_walk_10_off.png'), + achieve: feedLength > 9, + }, + { + label: '스크랩 1회', + name: 'scrap_1', + iconOn: require('src/assets/badges/badge_scrap_1_on.png'), + iconOff: require('src/assets/badges/badge_scrap_1_off.png'), + achieve: scrapLength > 0, + }, + { + label: '스크랩 3회', + name: 'scrap_3', + iconOn: require('src/assets/badges/badge_scrap_3_on.png'), + iconOff: require('src/assets/badges/badge_scrap_3_off.png'), + achieve: scrapLength > 2, + }, + { + label: '스크랩 5회', + name: 'scrap_5', + iconOn: require('src/assets/badges/badge_scrap_5_on.png'), + iconOff: require('src/assets/badges/badge_scrap_5_off.png'), + achieve: scrapLength > 4, + }, + { + label: '스크랩 10회', + name: 'scrap_10', + iconOn: require('src/assets/badges/badge_scrap_10_on.png'), + iconOff: require('src/assets/badges/badge_scrap_10_off.png'), + achieve: scrapLength > 9, + }, + ]} + showsVerticalScrollIndicator={false} + showsHorizontalScrollIndicator={false} + numColumns={4} + keyExtractor={(i, index) => index.toString()} + style={{ flex: 1, paddingHorizontal: space / 2, marginTop: -8 }} + columnWrapperStyle={styles.container} + renderItem={({ item }) => ( + + + {item.label} + + )} + /> + + ); +}; + +export default Badges; diff --git a/src/pages/Profile/Home/Badges/index.ts b/src/pages/Profile/Home/Badges/index.ts new file mode 100644 index 00000000..677493ec --- /dev/null +++ b/src/pages/Profile/Home/Badges/index.ts @@ -0,0 +1 @@ +export { default } from './Badges'; diff --git a/src/pages/Profile/Home/Home.styles.ts b/src/pages/Profile/Home/Home.styles.ts new file mode 100644 index 00000000..a3bf05ad --- /dev/null +++ b/src/pages/Profile/Home/Home.styles.ts @@ -0,0 +1,152 @@ +import { Dimensions, StyleSheet } from 'react-native'; +import { color, font, size } from 'src/theme'; + +const { height } = Dimensions.get('window'); + +export const views = StyleSheet.create({ + container: { + flex: 1, + }, + header: { + paddingBottom: 32, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: color.white, + paddingHorizontal: size.horizontal, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + infoWrapper: { + marginLeft: 20, + flex: 1, + justifyContent: 'center', + }, + selectDog: { + flexDirection: 'row', + alignItems: 'center', + }, + updateProfile: { + width: 80, + alignItems: 'center', + borderWidth: 1, + borderColor: color.grayDA, + borderRadius: 2, + paddingVertical: 6, + }, + modalBackground: { + height, + backgroundColor: color.black33Opacity, + }, + modal: { + marginTop: 'auto', + borderTopLeftRadius: 6, + borderTopRightRadius: 6, + paddingTop: 20, + backgroundColor: color.white, + }, + dogListWrapper: { + paddingHorizontal: size.horizontal, + marginBottom: 10, + }, + dogSelectWrapper: { + paddingVertical: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + dogSelectButton: { + justifyContent: 'center', + }, + addDogButton: { + borderTopWidth: 1, + borderColor: color.grayEF, + height: 64, + paddingHorizontal: size.horizontal, + alignItems: 'center', + flexDirection: 'row', + }, + listContainer: { + paddingHorizontal: size.horizontal, + paddingTop: 11.5, + }, + listSpace: { + paddingBottom: height * 0.1, + }, + signInMessage: { + marginTop: height * 0.22, + alignItems: 'center', + }, + topWrapper: { + ...StyleSheet.absoluteFillObject, + justifyContent: 'center', + alignItems: 'center', + }, + centerButton: { + flexDirection: 'row', + alignItems: 'center', + }, + emptyListTop: { + marginTop: height * 0.1, + }, +}); + +export const icons = StyleSheet.create({ + setting: { + width: 20, + height: 20, + }, + dropDown: { + marginLeft: 8, + width: 8, + height: 4, + }, + check: { + marginLeft: 'auto', + width: 24, + height: 24, + }, + add: { + width: 20, + height: 20, + }, +}); + +export const texts = StyleSheet.create({ + name: { + color: '#242424', + fontSize: 24, + fontWeight: '700', + }, + updateProfile: { + fontSize: font.size.small, + color: '#606269', + }, + selectDogName: { + marginLeft: 12, + color: color.black, + fontSize: 16, + }, + addDog: { + marginLeft: 22, + color: color.black, + fontSize: font.size.medium, + }, + likeInfo: { + marginTop: 8, + color: '#484848', + fontSize: font.size.medium, + }, + signIn: { + fontSize: font.size.large, + color: color.grayB1, + }, + underline: { + textDecorationColor: color.grayB1, + textDecorationStyle: 'solid', + textDecorationLine: 'underline', + }, + center: { + fontSize: font.size.large, + color: color.black, + }, +}); diff --git a/src/pages/Profile/Home/Home.tsx b/src/pages/Profile/Home/Home.tsx new file mode 100644 index 00000000..ef41389d --- /dev/null +++ b/src/pages/Profile/Home/Home.tsx @@ -0,0 +1,379 @@ +import { isEqual } from 'lodash'; +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import ExtraDimensions from 'react-native-extra-dimensions-android'; +import { NavigationScreenProps, SafeAreaView } from 'react-navigation'; +import { connect } from 'react-redux'; +import DefaultImage from 'src/components/module/DefaultImage'; +import EmptyList from 'src/components/module/EmptyList'; +import FeedComponent from 'src/components/module/Feed'; +import TopNavbar from 'src/components/module/TopNavbar'; +import { LinkedLike, searchDogs } from 'src/services/api/dog'; +import { Feed, getFeeds } from 'src/services/api/feed'; +import { getScraps } from 'src/services/api/place'; +import * as dogActions from 'src/store/actions/dog'; +import { Place as Scrap } from 'src/store/actions/place'; +import { ReducerState } from 'src/store/reducers'; +import Badges from './Badges'; +import { icons, texts, views } from './Home.styles'; +import Like from './Like'; +import Place from './Place'; +import TabBar from './Tabbar'; +import { + Image, + Modal, + Text, + View, + TouchableOpacity, + NativeSyntheticEvent, + NativeScrollEvent, + ScrollView, + FlatList, + Platform, +} from 'react-native'; + +interface Props extends NavigationScreenProps { + user: ReducerState['user']; + selectDog: typeof dogActions.selectDog; +} + +interface State { + showSelectDog: boolean; + showCenter: boolean; + currentTab: string; + feeds: Feed[]; + scraps: Scrap[]; + likes: LinkedLike[]; +} + +class Home extends PureComponent { + signedIn = this.props.user.email.length > 0; + + state: State = { + showSelectDog: false, + showCenter: false, + currentTab: 'feeds', + feeds: [], + scraps: [], + likes: [], + }; + + componentDidMount() { + this.props.navigation.addListener('willFocus', () => { + this.loadingDataByTab(this.state.currentTab); + }); + } + + componentDidUpdate(prevProps: Props, prevState: State) { + if ( + prevState.currentTab === 'feeds' && + !isEqual(prevProps.user.repDog, this.props.user.repDog) + ) { + this.loadingDataByTab(prevState.currentTab); + } + } + + toggleModal = () => { + this.setState({ showSelectDog: !this.state.showSelectDog }); + }; + + loadingDataByTab = async (tab: string) => { + const { repDog, places } = this.props.user; + const { feeds, scraps, likes } = this.state; + switch (tab) { + case 'feeds': { + if ( + repDog && + !isEqual(repDog.feeds.sort(), feeds.map(like => like._id).sort()) + ) { + this.setState({ feeds: await getFeeds({ feeds: repDog.feeds }) }); + } + return; + } + case 'scrap': { + if (!isEqual(places.sort(), scraps.map(scrap => scrap._id).sort())) { + this.setState({ scraps: await getScraps({ places }) }); + } + return; + } + case 'likes': { + if ( + repDog && + !isEqual( + repDog.likes.map(like => like.dog), + likes.map(like => like._id) + ) + ) { + this.setState({ likes: await searchDogs({ likes: repDog.likes }) }); + } + return; + } + } + }; + + navToSignIn = () => { + const { navigate } = this.props.navigation; + navigate('session'); + navigate('signIn'); + }; + + handleSelectDog = async (_id: string) => { + const { selectDog } = this.props; + await selectDog({ _id }); + this.toggleModal(); + }; + + handleSwitchTab = (currentTab: string) => { + this.setState({ currentTab }); + if (this.signedIn) this.loadingDataByTab(currentTab); + }; + + handleRemoveFeed = async (id: string) => { + const feeds = this.state.feeds.filter(feed => feed._id !== id); + this.setState({ feeds }); + }; + + handleScroll = async (e: NativeSyntheticEvent) => { + const { contentOffset } = e.nativeEvent; + const { showCenter } = this.state; + if (contentOffset.y > 152) { + if (!showCenter) this.setState({ showCenter: true }); + } else { + if (showCenter) this.setState({ showCenter: false }); + } + }; + + renderSelectDog = (item: { _id: string; name: string }) => ( + this.handleSelectDog(item._id)}> + + {item.name} + + + ); + + renderModal = () => { + const dogsList = Object.keys(this.props.user.dogs).map(_id => ({ + _id, + name: this.props.user.dogs[_id], + })); + return ( + + + + index.toString()} + renderItem={({ item }) => this.renderSelectDog(item)} + /> + { + this.toggleModal(); + this.props.navigation.navigate('create'); + }}> + + 반려견 추가 + + {Platform.OS === 'ios' ? ( + + ) : ( + + )} + + + + ); + }; + + render() { + const { user, navigation } = this.props; + const { currentTab } = this.state; + const name = user.repDog ? user.repDog.name : '댕댕이 선택'; + + return ( + + + ), + handlePress: () => navigation.navigate('setting'), + }} + center={ + this.state.showCenter ? ( + + + {name} + + + + ) : null + } + showBorder={this.state.showCenter} + /> + + + + + {this.signedIn ? ( + <> + + + {name} + + + + + 킁킁{' '} + + {user.repDog ? user.repDog.likes.length : 0} + + + + ) : ( + + + 로그인 하기 + + + )} + + {this.signedIn && user.repDog && ( + navigation.navigate('edit')}> + 프로필 수정 + + )} + + + {currentTab === 'feeds' && + (this.state.feeds.length !== 0 ? ( + index.toString()} + contentContainerStyle={views.listSpace} + renderItem={({ item, index }) => ( + 0 ? this.state.feeds[index - 1] : null} + deleteFromList={this.handleRemoveFeed} + /> + )} + /> + ) : ( + + ))} + {currentTab === 'scrap' && + (this.state.scraps.length !== 0 ? ( + index.toString()} + contentContainerStyle={[views.listContainer, views.listSpace]} + renderItem={({ item }) => ( + + navigation.navigate('place', { place: item }) + } + name={item.name} + label={item.label} + icon={item.icon} + description={item.description} + /> + )} + /> + ) : ( + + ))} + {currentTab === 'badge' && } + {currentTab === 'likes' && + (this.state.likes.length !== 0 ? ( + index.toString()} + contentContainerStyle={[views.listContainer, views.listSpace]} + renderItem={({ item, index }) => ( + + )} + /> + ) : ( + + ))} + + {this.renderModal()} + + ); + } +} + +export default connect( + (state: ReducerState) => ({ user: state.user }), + { selectDog: dogActions.selectDog } +)(Home); diff --git a/src/pages/Profile/Home/Like/Like.tsx b/src/pages/Profile/Home/Like/Like.tsx new file mode 100644 index 00000000..69a6059f --- /dev/null +++ b/src/pages/Profile/Home/Like/Like.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { color, font } from 'src/theme'; + +interface Props { + onPress?: () => void; + thumbnail?: string; + index: number; + name: string; + message: string; +} + +const thumbnailSize = 56; +const verticalSize = 8; +const styles = StyleSheet.create({ + wrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + textWrapper: { + flex: 1, + height: thumbnailSize + verticalSize * 2, + marginLeft: 12, + justifyContent: 'center', + }, + name: { + color: color.black, + fontSize: font.size.medium, + }, + message: { + marginTop: 3, + color: '#999999', + fontSize: 13, + }, +}); + +const ListItem: React.FC = ({ + onPress, + thumbnail, + index, + name, + message, +}) => ( + + + + {name} + {message} + + +); + +export default ListItem; diff --git a/src/pages/Profile/Home/Like/index.ts b/src/pages/Profile/Home/Like/index.ts new file mode 100644 index 00000000..a9248d0c --- /dev/null +++ b/src/pages/Profile/Home/Like/index.ts @@ -0,0 +1 @@ +export { default } from './Like'; diff --git a/src/pages/Profile/Home/Place/Place.tsx b/src/pages/Profile/Home/Place/Place.tsx new file mode 100644 index 00000000..b76908b9 --- /dev/null +++ b/src/pages/Profile/Home/Place/Place.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { color, font } from 'src/theme'; + +interface Props { + onPress?: () => void; + name: string; + label: string; + icon?: string; + description?: string; +} + +const thumbnailSize = 56; +const verticalSize = 8; +const styles = StyleSheet.create({ + wrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + textWrapper: { + flex: 1, + height: thumbnailSize + verticalSize * 2, + marginLeft: 12, + justifyContent: 'center', + }, + headWrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + name: { + color: color.black, + fontSize: 16, + fontWeight: '600', + }, + label: { + color: '#999999', + fontSize: font.size.small, + marginLeft: 8, + }, + description: { + marginTop: 8, + color: '#999999', + fontSize: 13, + }, +}); + +const Place: React.FC = ({ + onPress, + icon, + name, + label, + description, +}) => ( + + + + + {name.trim()} + {label} + + + {description || '상세설명이 없습니다.'} + + + +); + +export default Place; diff --git a/src/pages/Profile/Home/Place/index.ts b/src/pages/Profile/Home/Place/index.ts new file mode 100644 index 00000000..11ec3b74 --- /dev/null +++ b/src/pages/Profile/Home/Place/index.ts @@ -0,0 +1 @@ +export { default } from './Place'; diff --git a/src/pages/Profile/Home/Tabbar/Tabbar.tsx b/src/pages/Profile/Home/Tabbar/Tabbar.tsx new file mode 100644 index 00000000..a9b5853c --- /dev/null +++ b/src/pages/Profile/Home/Tabbar/Tabbar.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { color } from 'src/theme'; + +interface Props { + onSwitch: (name: string) => void; + currentTab: string; +} + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + itemWrapper: { + flex: 1, + paddingVertical: 16, + }, + border: { + width: '100%', + height: 20, + borderLeftWidth: 1, + borderColor: color.grayEF, + justifyContent: 'center', + alignItems: 'center', + }, + text: { + color: color.gray48, + fontSize: 16, + }, + focus: { + color: color.blue, + fontWeight: '600', + }, +}); + +const Tabbar: React.FC = ({ onSwitch, currentTab }) => ( + + {[ + { label: '게시물', name: 'feeds' }, + { label: '내 상점', name: 'scrap' }, + { label: '뱃지', name: 'badge' }, + { label: '킁킁', name: 'likes' }, + ].map((item, index) => ( + onSwitch(item.name)}> + + + {item.label} + + + + ))} + +); + +export default Tabbar; diff --git a/src/pages/Profile/Home/Tabbar/index.ts b/src/pages/Profile/Home/Tabbar/index.ts new file mode 100644 index 00000000..cb49e26d --- /dev/null +++ b/src/pages/Profile/Home/Tabbar/index.ts @@ -0,0 +1 @@ +export { default } from './Tabbar'; diff --git a/src/pages/Profile/Home/index.ts b/src/pages/Profile/Home/index.ts new file mode 100644 index 00000000..41e08eef --- /dev/null +++ b/src/pages/Profile/Home/index.ts @@ -0,0 +1 @@ +export { default } from './Home'; diff --git a/src/pages/Profile/Setting/RowItem/RowItem.tsx b/src/pages/Profile/Setting/RowItem/RowItem.tsx new file mode 100644 index 00000000..d8962937 --- /dev/null +++ b/src/pages/Profile/Setting/RowItem/RowItem.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { color } from 'src/theme'; +import { + Image, + StyleSheet, + Text, + TouchableOpacity, + View, + Switch, +} from 'react-native'; + +interface Props { + item: { + label: string; + value?: boolean; + handleValueChange?: (value: boolean) => void; + handlePress?: () => void; + }; + index: number; +} + +const styles = StyleSheet.create({ + wrapper: { + width: '100%', + height: 50, + borderTopWidth: 1, + borderColor: color.grayEF, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + label: { + color: color.black, + fontSize: 16, + }, + arrow: { + width: 5, + height: 10, + }, + buttonWrapper: { + flex: 1, + alignItems: 'flex-end', + }, + toggle: { + transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }], + }, +}); + +const RowItem: React.FC = ({ item, index }) => + item.handleValueChange ? ( + + {item.label} + + + ) : ( + + {item.label} + + + ); + +export default RowItem; diff --git a/src/pages/Profile/Setting/RowItem/index.ts b/src/pages/Profile/Setting/RowItem/index.ts new file mode 100644 index 00000000..1fa335d9 --- /dev/null +++ b/src/pages/Profile/Setting/RowItem/index.ts @@ -0,0 +1 @@ +export { default } from './RowItem'; diff --git a/src/pages/Profile/Setting/Setting.styles.ts b/src/pages/Profile/Setting/Setting.styles.ts new file mode 100644 index 00000000..049539a4 --- /dev/null +++ b/src/pages/Profile/Setting/Setting.styles.ts @@ -0,0 +1,25 @@ +import { StyleSheet } from 'react-native'; +import { color, font, size } from 'src/theme'; + +export const views = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F5F5F5', + }, + boxWrapper: { + marginTop: 20, + paddingHorizontal: size.horizontal, + backgroundColor: color.white, + borderTopWidth: 1, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, +}); + +export const icons = StyleSheet.create({ + back: { + width: 18, + height: 16, + resizeMode: 'contain', + }, +}); diff --git a/src/pages/Profile/Setting/Setting.tsx b/src/pages/Profile/Setting/Setting.tsx new file mode 100644 index 00000000..6a96d21d --- /dev/null +++ b/src/pages/Profile/Setting/Setting.tsx @@ -0,0 +1,160 @@ +import React, { PureComponent } from 'react'; +import { Image, SafeAreaView, ScrollView } from 'react-native'; +import { FlatList, NavigationScreenProps } from 'react-navigation'; +import { connect } from 'react-redux'; +import { email, web } from 'src/assets/functions/link'; +import TopNavbar from 'src/components/module/TopNavbar'; +import WebModal from 'src/components/module/WebModal'; +import * as userActions from 'src/store/actions/user'; +import { ReducerState } from 'src/store/reducers'; +import RowItem from './RowItem'; +import { icons, views } from './Setting.styles'; + +interface Props extends NavigationScreenProps { + user: ReducerState['user']; + signOut: typeof userActions.signOut; + terminate: typeof userActions.terminate; +} + +interface State { + pushNotif: boolean; + showMyFeed: boolean; + web?: { + title: string; + link: string; + }; +} + +// tslint:disable:max-line-length +class Setting extends PureComponent { + state: State = { + pushNotif: false, + showMyFeed: true, + }; + + hideModal = () => { + this.setState({ web: undefined }); + }; + + render() { + const { navigation, signOut, terminate, user } = this.props; + const { pushNotif, showMyFeed } = this.state; + + return ( + + + ), + handlePress: () => navigation.goBack(null), + }} + showBorder + /> + + { + this.setState({ pushNotif }); + }, + }, + { + label: '내 산책여부 표시', + value: showMyFeed, + handleValueChange: (showMyFeed: boolean) => { + this.setState({ showMyFeed }); + }, + }, + ]} + contentContainerStyle={[ + views.boxWrapper, + { marginTop: 0, borderTopWidth: 0 }, + ]} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item, index }) => ( + + )} + /> + {} }, + { + label: '서비스 약관', + handlePress: () => { + this.setState({ + web: { + title: '서비스 약관', + link: 'http://policy.woodongdang.com/', + }, + }); + }, + }, + // { label: '개인정보 이용 약관', handlePress: () => {} }, + { + label: '고객센터', + handlePress: async () => + await email({ + receiver: 'info@woodongdang.com', + subject: `서비스 문의 | ${user.email || '비로그인'}`, + }), + }, + { + label: '장소등록 및 수정 요청', + handlePress: async () => + await web({ + link: + 'https://docs.google.com/forms/d/1GrcHIpFtpihf8eZMna0wWLMfX423aOGPEaKs9VbIbHI/edit', + }), + }, + ]} + contentContainerStyle={views.boxWrapper} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item, index }) => ( + + )} + /> + + signOut(navigation), + }, + { + label: '탈퇴하기', + handlePress: () => terminate(navigation), + }, + ] + : [ + { + label: '로그인', + handlePress: () => navigation.navigate('session'), + }, + ] + } + contentContainerStyle={views.boxWrapper} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item, index }) => ( + + )} + /> + + + + ); + } +} + +export default connect( + (state: ReducerState) => ({ user: state.user }), + { signOut: userActions.signOut, terminate: userActions.terminate } +)(Setting); diff --git a/src/pages/Profile/Setting/index.ts b/src/pages/Profile/Setting/index.ts new file mode 100644 index 00000000..11b0d2f0 --- /dev/null +++ b/src/pages/Profile/Setting/index.ts @@ -0,0 +1 @@ +export { default } from './Setting'; diff --git a/src/pages/Profile/index.ts b/src/pages/Profile/index.ts new file mode 100644 index 00000000..821e4052 --- /dev/null +++ b/src/pages/Profile/index.ts @@ -0,0 +1,30 @@ +import { createStackNavigator } from 'react-navigation'; +import PlaceScreen from 'src/pages/Place/Detail'; +import ReviewScreen from 'src/pages/Place/Review'; +import EditScreen from './Edit'; +import HomeScreen from './Home'; +import SettingScreen from './Setting'; + +const ProfileNavigator = createStackNavigator( + { + home: HomeScreen, + setting: SettingScreen, + edit: EditScreen, + create: { + screen: EditScreen, + params: { createMode: true }, + }, + place: PlaceScreen, + review: ReviewScreen, + }, + { + initialRouteName: 'home', + headerMode: 'none', + } +); + +ProfileNavigator.navigationOptions = ({ navigation }: any) => ({ + tabBarVisible: navigation.state.index === 0, +}); + +export default ProfileNavigator; diff --git a/src/pages/Router.ts b/src/pages/Router.ts index bdabf161..be88dd22 100644 --- a/src/pages/Router.ts +++ b/src/pages/Router.ts @@ -1,7 +1,61 @@ -import { createAppContainer, createSwitchNavigator } from 'react-navigation'; +import BottomTabbar from 'src/components/base/BottomTabbar'; import CoreScreen from 'src/components/base/Core'; -import AppNavigator from './App'; +import MapNavigator from 'src/pages/Map'; +import ProfileNavigator from 'src/pages/Profile'; +import WddScreen from 'src/pages/Wdd'; import SessionNavigator from './Session'; +import { + createAppContainer, + createSwitchNavigator, + createBottomTabNavigator, + NavigationActions, +} from 'react-navigation'; + +export enum NavigationTabs { + MAP, + WDD, + PROFILE, +} + +const AppNavigator = createBottomTabNavigator( + { + map: { + screen: MapNavigator, + params: { + tab: { + icon: require('src/assets/icons/ic_map_page.png'), + navigate: NavigationActions.navigate({ routeName: 'map' }), + }, + stack: { + icon: require('src/assets/icons/ic_footprint.png'), + navigate: NavigationActions.navigate({ routeName: 'walk' }), + }, + }, + }, + wdd: { + screen: WddScreen, + params: { + iconOn: require('src/assets/icons/ic_wdd_on.png'), + iconOff: require('src/assets/icons/ic_wdd_off.png'), + label: '우동댕', + }, + }, + profile: { + screen: ProfileNavigator, + params: { + iconOn: require('src/assets/icons/ic_profile_on.png'), + iconOff: require('src/assets/icons/ic_profile_off.png'), + label: '내 댕댕이', + }, + }, + }, + { + initialRouteName: 'map', + tabBarComponent: BottomTabbar, + swipeEnabled: false, + animationEnabled: false, + } +); export default createAppContainer( createSwitchNavigator( diff --git a/src/pages/Session/Agreement/Agreement.tsx b/src/pages/Session/Agreement/Agreement.tsx index 1a9ac27e..8a007fca 100644 --- a/src/pages/Session/Agreement/Agreement.tsx +++ b/src/pages/Session/Agreement/Agreement.tsx @@ -3,8 +3,8 @@ import React, { Component } from 'react'; import { Image, Text, TouchableOpacity, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; +import WebModal from 'src/components/module/WebModal'; import { icons, texts, views } from './Agreement.styles'; -import Detail from './Detail'; interface Term { title: string; @@ -20,7 +20,7 @@ interface RenderTermInterface extends Term { interface State { checkAll: boolean; terms: Term[]; - detail?: { + web?: { title: string; link: string; }; @@ -36,21 +36,16 @@ class Agreement extends Component { agree: false, link: 'http://policy.woodongdang.com/', }, - { - title: '개인정보 이용 약관', - agree: false, - link: '', - }, ], }; - hideDetail = () => { - this.setState({ detail: undefined }); + hideModal = () => { + this.setState({ web: undefined }); }; - showDetail = (detail: State['detail']) => { - if (detail && !this.state.detail) { - this.setState({ detail }); + showWebModal = (web: State['web']) => { + if (web && !this.state.web) { + this.setState({ web }); } }; @@ -99,7 +94,7 @@ class Agreement extends Component { this.showDetail({ title, link })}> + onPress={() => this.showWebModal({ title, link })}> { /> {terms.map((term, index) => this.renderTerm({ ...term, index }))} - + ); } diff --git a/src/pages/Session/Agreement/Detail/index.ts b/src/pages/Session/Agreement/Detail/index.ts deleted file mode 100644 index d0c62f9c..00000000 --- a/src/pages/Session/Agreement/Detail/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Detail'; diff --git a/src/pages/Session/CreateDog/CreateDog.styles.ts b/src/pages/Session/CreateDog/CreateDog.styles.ts index 7c076148..a8b2baa8 100644 --- a/src/pages/Session/CreateDog/CreateDog.styles.ts +++ b/src/pages/Session/CreateDog/CreateDog.styles.ts @@ -1,7 +1,6 @@ import { StyleSheet } from 'react-native'; import { color, font } from 'src/theme'; -const thumbnailSize = 100; const thumbnailEditSize = 28; export const views = StyleSheet.create({ @@ -9,14 +8,6 @@ export const views = StyleSheet.create({ marginVertical: 40, alignItems: 'center', }, - thumbnail: { - width: thumbnailSize, - height: thumbnailSize, - borderRadius: thumbnailSize / 2, - resizeMode: 'cover', - borderWidth: 1.5, - borderColor: `${color.black}14`, - }, edit: { position: 'absolute', bottom: 0, diff --git a/src/pages/Session/CreateDog/CreateDog.tsx b/src/pages/Session/CreateDog/CreateDog.tsx index 0af54856..97025a8e 100644 --- a/src/pages/Session/CreateDog/CreateDog.tsx +++ b/src/pages/Session/CreateDog/CreateDog.tsx @@ -1,4 +1,4 @@ -import produce from 'immer'; +import { pick } from 'lodash'; import React, { Component } from 'react'; import ImagePicker from 'react-native-image-picker'; import { NavigationScreenProps } from 'react-navigation'; @@ -6,6 +6,7 @@ import { connect } from 'react-redux'; import breeds from 'src/assets/consts/breeds.json'; import withLoading, { LoadingProps } from 'src/components/base/withLoading'; import PageContainer from 'src/components/container/PageContainer'; +import DefaultImage from 'src/components/module/DefaultImage'; import Selector, { HandleChangeSelector } from 'src/components/module/Selector'; import TextAutocomplete from 'src/components/module/TextAutocomplete'; import TextInput, { HandleChangeText } from 'src/components/module/TextInput'; @@ -13,6 +14,10 @@ import { uploadImage } from 'src/services/aws/s3'; import * as actions from 'src/store/actions/dog'; import { ReducerState } from 'src/store/reducers'; import { texts, views } from './CreateDog.styles'; +import { + PICTURE_PERMISSIONS, + checkPermission, +} from 'src/assets/functions/validate'; import { Image, Text, @@ -20,6 +25,8 @@ import { TouchableOpacity, View, Modal, + Keyboard, + Dimensions, } from 'react-native'; interface Props extends LoadingProps, NavigationScreenProps { @@ -27,18 +34,21 @@ interface Props extends LoadingProps, NavigationScreenProps { email: ReducerState['user']['email']; } -interface State extends actions.CreateDogInterface { +interface State extends actions.DogBase { showModal: boolean; + thumbnailHeight: number; } +const { height } = Dimensions.get('window'); + class CreateDog extends Component { private inputs = { name: React.createRef(), - breed: React.createRef(), }; state: State = { showModal: false, + thumbnailHeight: 0, name: '', breed: '', gender: '', @@ -57,47 +67,37 @@ class CreateDog extends Component { this.toggleModal(); }; - handleImagePicker = () => { + handleImagePicker = async () => { const options = { title: '프로필 선택', - customButtons: [{ name: 'default', title: '기본 이미지' }], - storageOptions: { - skipBackup: true, - path: 'images', - }, + takePhotoButtonTitle: '사진 찍기', + chooseFromLibraryButtonTitle: '앨범에서 사진 선택', + customButtons: [{ name: 'default', title: '우동댕 기본 이미지' }], + cancelButtonTitle: '취소', + storageOptions: { skipBackup: true, path: 'images' }, }; - - ImagePicker.showImagePicker(options, res => { - if (res.didCancel || res.error) return; - if (res.customButton) { - this.setState(state => - produce(state, draft => { - draft.thumbnail = ''; - }) - ); - } - - this.setState(state => - produce(state, draft => { - draft.thumbnail = res.uri; - }) - ); - }); + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.showImagePicker(options, res => { + if (res.didCancel || res.error) return; + this.setState({ thumbnail: res.customButton ? '' : res.uri }); + }); + } }; handleSubmit = async () => { const { createDog, email, navigation, toggleLoading } = this.props; - const { name, ...others } = this.state; - let thumbnail = undefined; - if (this.state.thumbnail) { - thumbnail = await uploadImage({ - name, - email, + const state = pick(this.state, ['name', 'thumbnail', 'breed', 'gender']); + Keyboard.dismiss(); + if (state.thumbnail) { + const url = await uploadImage({ table: 'dogs', - uri: this.state.thumbnail, + label: email, + name: state.name, + uri: state.thumbnail, })(toggleLoading); + state.thumbnail = url; } - await createDog({ name, thumbnail, ...others }, navigation); + await createDog(state, navigation); }; render() { @@ -116,19 +116,14 @@ class CreateDog extends Component { handlePress: this.handleSubmit, disable: !name || !breed || !gender, }} - extraScrollHeight={200}> + titleOnScroll="댕댕이 정보 입력" + extraScrollHeight={height * 0.25} + extraBottom={height * 0.32}> - + { + onRequestClose={this.toggleModal} + visible={this.state.showModal} + hardwareAccelerated> diff --git a/src/pages/Session/CreateMeta/CreateMeta.tsx b/src/pages/Session/CreateMeta/CreateMeta.tsx index 8b936b5e..ce9d22eb 100644 --- a/src/pages/Session/CreateMeta/CreateMeta.tsx +++ b/src/pages/Session/CreateMeta/CreateMeta.tsx @@ -36,6 +36,10 @@ class CreateMeta extends PureComponent { return null; } + handleChange = ({ name, value }: HandleChangeSelector | HandleChangeDate) => { + this.setState(state => ({ ...state, [name]: value })); + }; + handleSubmit = () => { const { createMeta, navigation } = this.props; const { birth, gender } = this.state; @@ -48,14 +52,6 @@ class CreateMeta extends PureComponent { } }; - handleGenderChange = ({ name, value }: HandleChangeSelector) => { - this.setState(state => ({ ...state, [name]: value })); - }; - - handleDateChange = ({ name, value }: HandleChangeDate) => { - this.setState(state => ({ ...state, [name]: value })); - }; - render() { const { gender, birth } = this.state; const { navigation } = this.props; @@ -81,13 +77,13 @@ class CreateMeta extends PureComponent { label="성별" value={gender} list={[{ name: 'M', label: '남자' }, { name: 'F', label: '여자' }]} - handleChange={this.handleGenderChange} + handleChange={this.handleChange} /> ); diff --git a/src/pages/Session/Select/Select.styles.ts b/src/pages/Session/Select/Select.styles.ts index edaef2e8..be6b90c7 100644 --- a/src/pages/Session/Select/Select.styles.ts +++ b/src/pages/Session/Select/Select.styles.ts @@ -43,6 +43,16 @@ export const views = StyleSheet.create({ backgroundColor: `${color.black}1A`, marginHorizontal: 12, }, + background: { + ...StyleSheet.absoluteFillObject, + paddingHorizontal: 6, + backgroundColor: color.white, + }, + image: { + width: '100%', + height: '100%', + resizeMode: 'contain', + }, }); export const texts = StyleSheet.create({ diff --git a/src/pages/Session/Select/Select.tsx b/src/pages/Session/Select/Select.tsx index 655a09c1..b7e43049 100644 --- a/src/pages/Session/Select/Select.tsx +++ b/src/pages/Session/Select/Select.tsx @@ -2,33 +2,32 @@ import React from 'react'; import { Image, Text, TouchableOpacity, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; -import Splash from 'src/components/module/Splash'; -import { checkPermission } from 'src/store/sagas/user'; import { texts, views } from './Select.styles'; -const BottomButtons: React.FC = ({ navigation }) => { - const navToApp = async () => { - if (await checkPermission()) navigation.navigate('app'); - }; - - return ( - - - 비회원으로 시작하기 - - - navigation.navigate('signUp')}> - 회원가입 - - - ); -}; +const BottomButtons: React.FC = ({ navigation }) => ( + + navigation.navigate('app')}> + 비회원으로 시작하기 + + + navigation.navigate('signUp')}> + 회원가입 + + +); const Select: React.FC = ({ navigation }) => ( - <> - + + + + , @@ -47,7 +46,7 @@ const Select: React.FC = ({ navigation }) => ( - + ); export default Select; diff --git a/src/pages/Session/SendEmail/SendEmail.tsx b/src/pages/Session/SendEmail/SendEmail.tsx index 34adb2cf..bb730b77 100644 --- a/src/pages/Session/SendEmail/SendEmail.tsx +++ b/src/pages/Session/SendEmail/SendEmail.tsx @@ -1,22 +1,24 @@ import React from 'react'; -import { Dimensions, Image, View } from 'react-native'; +import { Image, Keyboard, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; -const { height } = Dimensions.get('window'); - -const SendEmail: React.FC = ({ navigation }) => ( - navigation.popToTop() }}> - - - - -); +const SendEmail: React.FC = ({ navigation }) => { + Keyboard.dismiss(); + return ( + navigation.popToTop() }} + alignTitleCenter> + + + + + ); +}; export default SendEmail; diff --git a/src/pages/Session/SignUp/SignUp.tsx b/src/pages/Session/SignUp/SignUp.tsx index c0582cc4..d78ee2ba 100644 --- a/src/pages/Session/SignUp/SignUp.tsx +++ b/src/pages/Session/SignUp/SignUp.tsx @@ -1,6 +1,6 @@ import produce from 'immer'; import React, { Component } from 'react'; -import { TextInput as Input } from 'react-native'; +import { Keyboard, TextInput as Input } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import { validateEmail, validatePassword } from 'src/assets/functions/validate'; @@ -93,6 +93,7 @@ class SignUp extends Component { const { name, email, password, passwordCheck } = this.state; if (name.valid && email.valid && password.valid && passwordCheck.valid) { + Keyboard.dismiss(); signUp( { name: name.value, diff --git a/src/pages/Walk/Walk/Trailor/Trailor.tsx b/src/pages/Walk/Walk/Trailor/Trailor.tsx deleted file mode 100644 index e21e715f..00000000 --- a/src/pages/Walk/Walk/Trailor/Trailor.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { PureComponent } from 'react'; -import { Animated, Easing } from 'react-native'; - -interface Props { - onFinish: () => void; -} - -interface State { - opacity: Animated.Value; - index: number; -} - -class Trailor extends PureComponent { - private images = [ - require('src/assets/images/img_count_3.jpg'), - require('src/assets/images/img_count_2.jpg'), - require('src/assets/images/img_count_1.jpg'), - require('src/assets/images/img_count_0.jpg'), - ]; - - state: State = { - opacity: new Animated.Value(1), - index: 0, - }; - - animateImage = () => { - const { index, opacity } = this.state; - - Animated.timing(opacity, { - toValue: 0, - duration: 800, - easing: Easing.bezier(0.48, 0, 1, 1), - }).start(c => { - if (c.finished) { - opacity.setValue(1); - if (index === this.images.length - 1) this.props.onFinish(); - else this.setState({ index: index + 1 }); - } - }); - }; - - render() { - const { opacity, index } = this.state; - return ( - - ); - } -} - -export default Trailor; diff --git a/src/pages/Walk/Walk/Trailor/index.ts b/src/pages/Walk/Walk/Trailor/index.ts deleted file mode 100644 index 783229ab..00000000 --- a/src/pages/Walk/Walk/Trailor/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Trailor'; diff --git a/src/pages/Walk/index.ts b/src/pages/Walk/index.ts deleted file mode 100644 index 91c42d83..00000000 --- a/src/pages/Walk/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; -import EditScreen from './Edit'; -import FinishScreen from './Finish'; -import UploadScreen from './Upload'; -import WalkScreen from './Walk'; - -const FinishNavigator = createStackNavigator( - { - finish: FinishScreen, - upload: UploadScreen, - edit: EditScreen, - }, - { - initialRouteName: 'finish', - headerMode: 'none', - } -); - -export default createSwitchNavigator( - { - walk: WalkScreen, - finish: FinishNavigator, - }, - { - initialRouteName: 'walk', - backBehavior: 'initialRoute', - } -); diff --git a/src/pages/Wdd/Wdd.styles.ts b/src/pages/Wdd/Wdd.styles.ts new file mode 100644 index 00000000..610d0c91 --- /dev/null +++ b/src/pages/Wdd/Wdd.styles.ts @@ -0,0 +1,136 @@ +import { Dimensions, StyleSheet } from 'react-native'; +import { height as navHeight } from 'src/components/module/TopNavbar/TopNavbar'; +import { color, font, shadow, size } from 'src/theme'; + +const dogItemSpace = 10; +const { width, height } = Dimensions.get('window'); + +export const views = StyleSheet.create({ + header: { + height: navHeight, + justifyContent: 'center', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + dogsWrapper: { + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + dogsListWrapper: { + paddingHorizontal: size.horizontal - dogItemSpace, + }, + dogItem: { + paddingVertical: 16, + paddingHorizontal: dogItemSpace, + }, + modalBackground: { + width, + height, + backgroundColor: color.black33Opacity, + alignItems: 'center', + justifyContent: 'center', + }, + modal: { + width: width * 0.7, + backgroundColor: color.white, + paddingHorizontal: 20, + paddingBottom: 20, + borderRadius: 8, + alignItems: 'center', + ...shadow.center, + }, + closeWrapper: { + alignSelf: 'flex-end', + paddingTop: 10, + marginRight: -20, + paddingHorizontal: 10, + }, + topRowWrapper: { + marginTop: 8, + flexDirection: 'row', + justifyContent: 'center', + }, + itemWrapper: { + paddingHorizontal: 8, + justifyContent: 'center', + }, + vr: { + borderLeftWidth: 1, + borderColor: '#dadcdf7f', + }, + bottomRowWrapper: { + marginTop: 24, + width: '100%', + flexDirection: 'row', + }, + bottomItem: { + flex: 1, + alignItems: 'center', + }, + likeButton: { + marginTop: 30, + width: '100%', + height: 46, + backgroundColor: color.blue, + borderRadius: 8, + justifyContent: 'center', + alignItems: 'center', + }, + infoWrapper: { + marginTop: 10, + width: '100%', + paddingVertical: 12, + paddingHorizontal: 10, + backgroundColor: color.grayEF, + borderRadius: 5, + }, + emptyListMargin: { + marginTop: height * 0.18, + }, +}); + +export const icons = StyleSheet.create({ + logo: { + width: 160, + height: 18, + resizeMode: 'contain', + }, + close: { + width: 20, + height: 20, + }, +}); + +export const texts = StyleSheet.create({ + name: { + marginTop: 10, + color: color.black, + fontSize: 20, + fontWeight: '600', + }, + spec: { + color: color.blackOpacity, + fontSize: font.size.small, + }, + info: { + color: '#484848', + fontSize: font.size.medium, + textAlign: 'center', + }, + bottomLabel: { + color: color.black, + fontSize: font.size.medium, + fontWeight: '600', + }, + bottomValue: { + marginTop: 4, + color: color.black, + fontSize: 26, + fontWeight: '600', + }, + like: { + fontSize: font.size.large, + color: color.white, + }, +}); diff --git a/src/pages/Wdd/Wdd.tsx b/src/pages/Wdd/Wdd.tsx new file mode 100644 index 00000000..2eaac19c --- /dev/null +++ b/src/pages/Wdd/Wdd.tsx @@ -0,0 +1,245 @@ +import produce from 'immer'; +import { findIndex, flatten } from 'lodash'; +import React, { PureComponent } from 'react'; +import { FlatList, NavigationScreenProps } from 'react-navigation'; +import { connect } from 'react-redux'; +import DefaultImage from 'src/components/module/DefaultImage'; +import EmptyList from 'src/components/module/EmptyList'; +import Feed from 'src/components/module/Feed'; +import { pushLike } from 'src/services/api/dog'; +import { Feed as FeedInterface, getFeeds } from 'src/services/api/feed'; +import { searchUsers } from 'src/services/api/user'; +import { Dog } from 'src/store/actions/dog'; +import { ReducerState } from 'src/store/reducers'; +import { icons, texts, views } from './Wdd.styles'; +import { + Image, + SafeAreaView, + TouchableOpacity, + ScrollView, + View, + Modal, + Text, + RefreshControl, + Alert, +} from 'react-native'; + +interface Props extends NavigationScreenProps { + user: ReducerState['user']; +} + +interface State { + dogs: Dog[]; + feeds: FeedInterface[]; + selectDog?: Dog; + refresh: boolean; +} + +// helper +function mapGender(gender: 'M' | 'F' | 'N' | '') { + switch (gender) { + case 'M': + return '수컷'; + case 'F': + return '암컷'; + case 'N': + return '중성화'; + default: + return ''; + } +} + +class Wdd extends PureComponent { + state: State = { dogs: [], feeds: [], refresh: false }; + + componentDidMount() { + this.getDataFromServer(); + } + + handleRefresh = async () => { + await this.setState({ refresh: true }); + await this.getDataFromServer(); + this.setState({ refresh: false }); + }; + + handleDelete = (id: string) => { + const feeds = this.state.feeds.filter(feed => feed._id !== id); + this.setState({ feeds }); + }; + + handlePressLike = async (_id: string) => { + const { user } = this.props; + const data = await pushLike({ _id }); + if (data) { + Alert.alert(data.message); + this.setState(state => + produce(state, draft => { + if (user.repDog && draft.selectDog) { + const pushData = { + dog: user.repDog._id, + createdAt: new Date(), + }; + + const index = findIndex(this.state.dogs, dog => dog._id === _id); + draft.dogs[index].likes.push(pushData); + draft.selectDog.likes.push(pushData); + } + }) + ); + } + }; + + getDataFromServer = async () => { + const { coordinates } = this.props.user.location; + const users = await searchUsers({ coordinates }); + const feeds = await getFeeds({ + dogs: flatten(users.map(user => Object.keys(user.dogs))), + }); + const dogs = users + .filter(user => user.repDog !== undefined) + .map(user => user.repDog) as Dog[]; + await this.setState({ feeds, dogs }); + }; + + selectDog = (selectDog: Dog) => { + this.setState({ selectDog }); + }; + + dismissModal = () => { + this.setState({ selectDog: undefined }); + }; + + renderModal = () => { + const { selectDog: dog } = this.state; + const signedIn = this.props.user.email.length > 0; + + return ( + + + {dog && ( + {}}> + + + + + + {dog.name} + + + {dog.breed} + + + {mapGender(dog.gender)} + + {dog.weight && ( + + {dog.weight}kg + + )} + + {dog.info && ( + + {dog.info} + + )} + + {[ + { label: '킁킁', value: dog.likes.length }, + { label: '산책횟수', value: dog.feeds.length }, + ].map((data, index) => ( + + {data.label} + {data.value} + + ))} + + {signedIn && dog.user !== this.props.user._id && ( + this.handlePressLike(dog._id)}> + 킁킁 보내기 + + )} + + + )} + + + ); + }; + + render() { + return ( + + + + + + }> + {this.state.dogs ? ( + <> + index.toString()} + contentContainerStyle={views.dogsListWrapper} + showsHorizontalScrollIndicator={false} + renderItem={({ item }) => ( + this.selectDog(item)}> + + + )} + horizontal + /> + index.toString()} + showsVerticalScrollIndicator={false} + renderItem={({ item }) => ( + + )} + /> + + ) : ( + + )} + + {this.renderModal()} + + ); + } +} + +export default connect((state: ReducerState) => ({ user: state.user }))(Wdd); diff --git a/src/pages/App/Wdd/index.ts b/src/pages/Wdd/index.ts similarity index 100% rename from src/pages/App/Wdd/index.ts rename to src/pages/Wdd/index.ts diff --git a/src/services/api/dog.ts b/src/services/api/dog.ts index 89cc1049..f5d08858 100644 --- a/src/services/api/dog.ts +++ b/src/services/api/dog.ts @@ -1,27 +1,44 @@ import axios, { AxiosResponse } from 'axios'; -import { - CreateDogInterface, - UpdateDogInterface, - DogInterface, -} from 'src/store/actions/dog'; +import { Alert } from 'react-native'; +import { Dog, DogBase, Like, UpdateDog } from 'src/store/actions/dog'; + +export type LinkedLike = Dog & { createdAt: Date }; export const selectDog = async (params: { _id: string }) => { - const response: AxiosResponse = await axios.put( - `/dogs/${params._id}` - ); + const response: AxiosResponse = await axios.put(`/dogs/${params._id}`); return response.data; }; -export const createDog = async (body: CreateDogInterface) => { - const response: AxiosResponse = await axios.post('/dogs', body); +export const searchDogs = async (params: { likes: Like[] }) => { + const dogs = params.likes.map(like => like.dog); + const response: AxiosResponse = await axios.get('/dogs', { + params: { dogs: JSON.stringify(dogs) }, + }); + const data: LinkedLike[] = response.data.map((dog, index) => ({ + ...dog, + createdAt: params.likes[index].createdAt, + })); + return data; +}; + +export const createDog = async (body: DogBase) => { + const response: AxiosResponse = await axios.post('/dogs', body); return response.data; }; -export const updateDog = async (body: UpdateDogInterface) => { +export const updateDog = async (body: UpdateDog) => { const { _id, ...data } = body; - const response: AxiosResponse = await axios.patch( - `/dogs/${_id}`, - data - ); + const response: AxiosResponse = await axios.patch(`/dogs/${_id}`, data); return response.data; }; + +export const pushLike = async (params: { _id: string }) => { + try { + const response: AxiosResponse<{ message: string }> = await axios.patch( + `/dogs/${params._id}/like` + ); + return response.data; + } catch (err) { + Alert.alert(err.response.data.message); + } +}; diff --git a/src/services/api/feed.ts b/src/services/api/feed.ts index 96489ee4..b6dedbf5 100644 --- a/src/services/api/feed.ts +++ b/src/services/api/feed.ts @@ -1,9 +1,11 @@ import axios, { AxiosResponse } from 'axios'; +import { Alert } from 'react-native'; +import { Dog } from 'src/store/actions/dog'; -interface Feed { +export interface Feed { _id: string; user: string; - dog: string; + dog: Dog; pins: string; // JSON.stringify(pins) seconds: number; distance: number; // km @@ -12,16 +14,21 @@ interface Feed { poos: number; images: string[]; memo?: string; + likes: { user: string; createdAt: Date }[]; createdAt: Date; } -export type Body = Pick< - Feed, - Exclude ->; +export interface Body + extends Pick< + Feed, + Exclude + > { + steps: number; +} export interface Params { - user?: string; + dogs?: string[]; + feeds?: string[]; } export const createFeed = async (params: Body) => { @@ -29,7 +36,32 @@ export const createFeed = async (params: Body) => { return response.data; }; -export const getFeeds = async (params?: Params) => { +export const getFeeds = async (p: Params) => { + const params: { dogs?: string; feeds?: string } = {}; + if (p.dogs) params.dogs = JSON.stringify(p.dogs); + if (p.feeds) params.feeds = JSON.stringify(p.feeds); const response: AxiosResponse = await axios.get('/feeds', { params }); return response.data; }; + +export const deleteFeed = async (body: { _id: string }) => { + const response: AxiosResponse<{ message: string }> = await axios.delete( + `/feeds/${body._id}` + ); + Alert.alert('피드가 삭제되었습니다.'); + return response.data; +}; + +export const pushLike = async (params: { _id: string }) => { + const response: AxiosResponse = await axios.patch( + `/feeds/${params._id}/like` + ); + return response.data; +}; + +export const undoLike = async (params: { _id: string }) => { + const response: AxiosResponse = await axios.delete( + `/feeds/${params._id}/like` + ); + return response.data; +}; diff --git a/src/services/api/place.ts b/src/services/api/place.ts index 195b3801..b636a311 100644 --- a/src/services/api/place.ts +++ b/src/services/api/place.ts @@ -1,60 +1,68 @@ import axios, { AxiosResponse } from 'axios'; import { sortBy } from 'lodash'; import { LatLng } from 'react-native-maps'; +import { Label, Place, PlaceResponse } from 'src/store/actions/place'; -export interface Params { +export interface SearchParams { keyword?: string; - label?: '카페' | '용품' | '병원' | '기타'; + label?: Label; location?: LatLng; range?: number; // km } -export interface Place - extends Pick> { - location: LatLng; -} - -interface GeoJSON { - type: string; - coordinates: [number, number]; -} - -interface Response { - _id: string; - name: string; - location: GeoJSON; - address: string; - label: '카페' | '용품' | '병원' | '기타'; - rating: number; - contact: string; - thumbnail: string; - icon?: string; - images?: string[]; - officeHour?: { - default: string; - weekend?: string; - dayoff?: string; - }; - likes?: string[]; - distance: number; // km -} +const clientToAPI = ({ location, ...params }: SearchParams) => { + const payload: any = { ...params }; + if (location !== undefined) { + payload.coordinates = JSON.stringify([ + location.longitude, + location.latitude, + ]); + } + return payload; +}; -const geoToLatLng = ({ coordinates }: GeoJSON) => +const apiToClient = (place: PlaceResponse) => ({ - latitude: coordinates[1], - longitude: coordinates[0], - } as LatLng); + ...place, + location: { + latitude: place.location.coordinates[1], + longitude: place.location.coordinates[0], + }, + } as Place); -export const searchPlace = async (params?: Params) => { - const response: AxiosResponse = await axios.get('/places', { - params, +export const searchPlace = async (p: SearchParams) => { + const response: AxiosResponse = await axios.get('/places', { + params: clientToAPI(p), }); - const places: Place[] = response.data.map(place => ({ - ...place, - location: geoToLatLng(place.location), - })); + const places = response.data.map(apiToClient); return sortBy( places, (place: Place) => -(place.rating / 5 + Math.pow(0.5, place.distance)) ); }; + +export const getScraps = async (params: { places: string[] }) => { + const response: AxiosResponse = await axios.get('/places', { + params: { places: JSON.stringify(params.places) }, + }); + const places = response.data.map(apiToClient); + return places; +}; + +interface Query { + id: string; +} + +export const scrap = async ({ id }: Query) => { + const response: AxiosResponse = await axios.patch( + `/places/${id}/scrap` + ); + return apiToClient(response.data); +}; + +export const unScrap = async ({ id }: Query) => { + const response: AxiosResponse = await axios.delete( + `/places/${id}/scrap` + ); + return apiToClient(response.data); +}; diff --git a/src/services/api/review.ts b/src/services/api/review.ts index 69495925..78a3822d 100644 --- a/src/services/api/review.ts +++ b/src/services/api/review.ts @@ -14,6 +14,7 @@ interface Params { } export interface Review extends Body { + _id: string; user: UserInterface; createdAt: Date; updatedAt: Date; @@ -28,9 +29,34 @@ export const createReview = async (body: Body) => { return response.data; }; -export const getReivews = async (params?: Params) => { +export const getReviews = async (params?: Params) => { const response: AxiosResponse = await axios.get('/reviews', { params, }); return response.data; }; + +export const updateReview = async (body: Body & { _id: string }) => { + const { _id, ...data } = body; + const response: AxiosResponse = await axios.patch( + `/reviews/${_id}`, + data + ); + return response.data; +}; + +export const deleteReview = async (id: string) => { + const response: AxiosResponse<{ message: string }> = await axios.delete( + `/reviews/${id}` + ); + Alert.alert('리뷰가 삭제되었습니다.'); + return response.data; +}; + +export const reportReview = async (id: string) => { + const response: AxiosResponse<{ message: string }> = await axios.post( + `/reviews/${id}/report` + ); + Alert.alert('신고가 접수되었습니다.'); + return response.data; +}; diff --git a/src/services/api/user.ts b/src/services/api/user.ts index 6f0e704e..1cd272eb 100644 --- a/src/services/api/user.ts +++ b/src/services/api/user.ts @@ -1,6 +1,10 @@ import axios, { AxiosResponse } from 'axios'; import * as actions from 'src/store/actions/user'; +export interface SearchParams { + coordinates: number[]; +} + export const getUser = async () => { // *** Set token on headers before call const response: AxiosResponse = await axios.get( @@ -25,6 +29,14 @@ export const signUp = async (body: actions.SignUpInterface) => { return response.data; }; +export const terminate = async () => { + // *** Set token on headers before call + const response: AxiosResponse<{ message: string }> = await axios.delete( + '/user' + ); + return response.data; +}; + export const updateUser = async (body: actions.UpdateInterface) => { // *** Set token on headers before call const response: AxiosResponse = await axios.patch( @@ -41,3 +53,11 @@ export const forgotPassword = async (body: { email: string }) => { ); return response.data; }; + +export const searchUsers = async (params: SearchParams) => { + const response: AxiosResponse = await axios.get( + '/users', + { params: { coordinates: JSON.stringify(params.coordinates) } } + ); + return response.data; +}; diff --git a/src/services/aws/s3.ts b/src/services/aws/s3.ts index fde0149d..aa22611c 100644 --- a/src/services/aws/s3.ts +++ b/src/services/aws/s3.ts @@ -1,59 +1,59 @@ import { Storage } from 'aws-amplify'; +import moment from 'moment'; +import awsmobile from 'src/aws-exports'; -interface UploadImage { +interface Base { table: 'dogs' | 'places' | 'feeds'; - email?: string; + label?: string; name: string; +} + +interface UploadImage extends Base { uri: string; } -interface UploadImages { - table: 'places' | 'feeds'; - email?: string; - name: string; +interface UploadImages extends Base { uris: string[]; } type S3ResponseType = { key: string }; type ToggleLoading = () => void; -export const uploadImage = ({ table, email, name, uri }: UploadImage) => async ( +const uploadToS3 = async ({ table, label, name, uri }: UploadImage) => { + const markDev = __DEV__ ? '__DEV__/' : ''; + const response = await fetch(uri); + const data = await response.blob(); + const key = `${markDev}${table}/${label || + moment().format('YYYY.MM.DD')}/${name}.png`; + const S3Response = (await Storage.put(key, data, { + level: 'public', + contentType: 'image/png', + })) as S3ResponseType; + return `https://s3.ap-northeast-2.amazonaws.com/${ + awsmobile.aws_user_files_s3_bucket + }/public/${S3Response.key}`; +}; + +export const uploadImage = (data: UploadImage) => async ( toggleLoading: ToggleLoading ) => { await toggleLoading(); - const response = await fetch(uri); - const data = await response.blob(); - const S3Response = (await Storage.put( - `${__DEV__ ? '__DEV__/' : ''}${table}/${ - email ? `${email}/` : '' - }${name}.png`, - data, - { level: 'public', contentType: 'image/png' } - )) as S3ResponseType; + const url = await uploadToS3(data); await toggleLoading(); - return S3Response.key; + return url; }; export const uploadImages = ({ table, - email, + label, name, uris, }: UploadImages) => async (toggleLoading: ToggleLoading) => { await toggleLoading(); const uriList: string[] = await Promise.all( - uris.map(async (uri, index) => { - const response = await fetch(uri); - const data = await response.blob(); - const S3Response = (await Storage.put( - `${__DEV__ ? '__DEV__/' : ''}${table}/${ - email ? `${email}/` : '' - }${name}_${index}.png`, - data, - { level: 'public', contentType: 'image/png' } - )) as S3ResponseType; - return S3Response.key; - }) + uris.map(async (uri, index) => + uploadToS3({ uri, table, label, name: `${name}_${index}` }) + ) ); await toggleLoading(); return uriList; diff --git a/src/store/actions/dog.ts b/src/store/actions/dog.ts index 95656475..fccf63b0 100644 --- a/src/store/actions/dog.ts +++ b/src/store/actions/dog.ts @@ -1,32 +1,44 @@ import { NavigationScreenProp } from 'react-navigation'; +export interface Like { + dog: string; + createdAt: Date; +} + +export interface History { + yearMonth: string; + count: number; + seconds: number; + steps: number; + distance: number; + pees: number; + poos: number; +} + // *** INTERFACES -export interface CreateDogInterface { +export interface DogBase { name: string; thumbnail?: string; breed: string; gender: 'M' | 'F' | 'N' | ''; - birth?: string; // YYYY.MM.DD + birth?: string; weight?: number; info?: string; - feeds: string[]; - likes: string[]; } -export interface UpdateDogInterface { +export interface UpdateDog extends DogBase { _id: string; - name?: string; - thumbnail?: string; - breed?: string; - gender?: 'M' | 'F' | 'N'; - birth?: string; // YYYY.MM.DD - weight?: number; - info?: string; } -export interface DogInterface extends CreateDogInterface { +export interface Dog extends DogBase { _id: string; user: string; + badges: { + firstLike: boolean; + }; + feeds: string[]; + likes: Like[]; + histories: History[]; } // *** CONSTS @@ -45,20 +57,20 @@ export const selectDog = (payload: { _id: string }) => ({ type: SELECT_DOG, }); export const createDog = ( - payload: CreateDogInterface, + payload: DogBase, navigation?: NavigationScreenProp ) => ({ payload, navigation, type: CREATE_DOG, }); -export const updateDog = (payload: UpdateDogInterface) => ({ +export const updateDog = (payload: UpdateDog) => ({ payload, type: UPDATE_DOG, }); export const setDogRequest = () => ({ type: SET_DOG_REQUEST }); -export const setDogSuccess = (payload: DogInterface) => ({ +export const setDogSuccess = (payload: Dog) => ({ payload, type: SET_DOG_SUCCESS, }); diff --git a/src/store/actions/place.ts b/src/store/actions/place.ts new file mode 100644 index 00000000..d29f5e22 --- /dev/null +++ b/src/store/actions/place.ts @@ -0,0 +1,60 @@ +import { LatLng } from 'react-native-maps'; + +export interface GeoJSON { + type: string; + coordinates: [number, number]; +} + +export type Label = '카페' | '식당' | '병원' | '용품' | '술집' | '기타'; + +// *** INTERFACES +export interface Place + extends Pick> { + location: LatLng; +} +export interface PlaceResponse { + _id: string; + name: string; + location: GeoJSON; + address: string; + label: Label; + rating: number; + thumbnail?: string; + contact?: string; + icon?: string; + description?: string; + images?: string[]; + officeHour?: { + default: string; + weekend?: string; + dayoff?: string; + }; + likes?: string[]; + distance: number; // km + scraps: { user: string; createdAt: Date }[]; +} + +// *** CONSTS +export const SCRAP = 'place/SCRAP'; +export const UN_SCRAP = 'place/UN_SCRAP'; + +export const SET_PLACE_REQUEST = 'place/SET_PLACE_REQUEST'; +export const SET_PLACE_SUCCESS = 'place/SET_PLACE_SUCCESS'; +export const SET_PLACE_FAILURE = 'place/SET_PLACE_FAILURE'; + +// *** FUNCTIONS +export const scrap = (payload: { id: string }) => ({ payload, type: SCRAP }); +export const unScrap = (payload: { id: string }) => ({ + payload, + type: UN_SCRAP, +}); + +export const setPlaceRequest = () => ({ type: SET_PLACE_REQUEST }); +export const setPlaceSuccess = (payload: string[]) => ({ + payload, + type: SET_PLACE_SUCCESS, +}); +export const setPlaceFailure = (payload: Response) => ({ + payload, + type: SET_PLACE_FAILURE, +}); diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 9557660c..6dabae1e 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,5 +1,6 @@ +import { LatLng } from 'react-native-maps'; import { NavigationScreenProp } from 'react-navigation'; -import { DogInterface } from './dog'; +import { Dog } from './dog'; // *** INTERFACES export interface UserInterface { @@ -11,7 +12,9 @@ export interface UserInterface { gender: string; // 'M' | 'F' status: 'ACTIVE' | 'PAUSED' | 'TERMINATED'; dogs: { [_id: string]: string }; - repDog?: DogInterface; + location: { type: string; coordinates: number[] }; + places: string[]; + repDog?: Dog; } export interface UpdateInterface { @@ -20,6 +23,8 @@ export interface UpdateInterface { birth?: string; gender?: string; // 'M' | 'F' status?: 'ACTIVE' | 'PAUSED' | 'TERMINATED'; + location?: { type: string; coordinates: number[] }; + repDog?: Dog; } export interface SignInInterface { @@ -32,23 +37,28 @@ export interface SignUpInterface extends SignInInterface { } // *** CONSTS +export const GET_USER = 'user/GET_USER'; export const AUTO_SIGNIN = 'user/AUTO_SIGNIN'; export const SIGNIN = 'user/SIGNIN'; export const SIGNUP = 'user/SIGNUP'; export const SIGNOUT = 'user/SIGNOUT'; +export const TERMINATE = 'user/TERMINATE'; export const CREATE_META = 'user/CREATE_META'; export const FORGOT_PASSWORD = 'user/FORGOT_PASSWORD'; export const CHANGE_PASSWORD = 'user/CHANGE_PASSWORD'; +export const UPDATE_LOCATION = 'user/UPDATE_LOCATION'; export const SET_USER_REQUEST = 'user/SET_USER_REQUEST'; export const SET_USER_SUCCESS = 'user/SET_USER_SUCCESS'; export const SET_USER_FAILURE = 'user/SET_USER_FAILURE'; +export const UPDATE_LOCAL = 'user/UPDATE_LOCAL'; export const REMOVE_USER = 'user/REMOVE_USER'; // *** FUNCTIONS type Navigation = NavigationScreenProp; +export const getUser = () => ({ type: GET_USER }); export const autoSignIn = (navigation: Navigation) => ({ navigation, type: AUTO_SIGNIN, @@ -67,6 +77,10 @@ export const signOut = (navigation: Navigation) => ({ navigation, type: SIGNOUT, }); +export const terminate = (navigation: Navigation) => ({ + navigation, + type: TERMINATE, +}); export const createMeta = ( payload: { birth: string; gender: string }, navigation: Navigation @@ -83,6 +97,10 @@ export const changePassword = ( payload: { password: string; token: string }, navigation: Navigation ) => ({ payload, navigation, type: CHANGE_PASSWORD }); +export const updateLocation = (payload: LatLng) => ({ + payload, + type: UPDATE_LOCATION, +}); export const setUserRequest = () => ({ type: SET_USER_REQUEST }); export const setUserSuccess = (payload: UserInterface) => ({ @@ -94,4 +112,8 @@ export const setUserFailure = (payload: Response) => ({ type: SET_USER_FAILURE, }); +export const updateLocal = (payload: UpdateInterface) => ({ + payload, + type: UPDATE_LOCAL, +}); export const removeUser = () => ({ type: REMOVE_USER }); diff --git a/src/store/reducers/user.ts b/src/store/reducers/user.ts index ccc3ee0e..05bcccde 100644 --- a/src/store/reducers/user.ts +++ b/src/store/reducers/user.ts @@ -1,22 +1,19 @@ import { AxiosResponse } from 'axios'; import produce from 'immer'; -import { pick } from 'lodash'; import { handleActions } from 'redux-actions'; import { removeHeader } from 'src/services/api/axios'; import { removeUserStorage } from 'src/services/storage/user'; import * as dogActions from 'src/store/actions/dog'; +import * as placeActions from 'src/store/actions/place'; import * as actions from 'src/store/actions/user'; -export interface UserState - extends Pick< - actions.UserInterface, - Exclude - > { +export interface UserState extends actions.UserInterface { error?: AxiosResponse; dogError?: AxiosResponse; } const initialState: UserState = { + _id: '', email: '', lastLogin: new Date(), name: '', @@ -24,6 +21,8 @@ const initialState: UserState = { gender: '', status: 'TERMINATED', dogs: {}, + location: { type: 'Point', coordinates: [0, 0] }, + places: [], }; export default handleActions( @@ -46,6 +45,10 @@ export default handleActions( draft.error = action.payload; }); }, + [actions.UPDATE_LOCAL]: (state, action) => ({ + ...state, + ...action.payload, + }), [actions.REMOVE_USER]: (state, action) => initialState, // *** HANDLE DOG ACTIONS [dogActions.SET_DOG_REQUEST]: (state, action) => @@ -54,7 +57,7 @@ export default handleActions( }), [dogActions.SET_DOG_SUCCESS]: (state, action) => produce(state, draft => { - const dog = action.payload as dogActions.DogInterface; + const dog = action.payload as dogActions.Dog; draft.repDog = dog; draft.dogs[dog._id] = dog.name; }), @@ -69,6 +72,19 @@ export default handleActions( */ draft.dogError = action.payload; }), + // *** HANDLE PLACE ACTIONS + [placeActions.SET_PLACE_REQUEST]: (state, action) => + produce(state, draft => { + delete draft.error; + }), + [placeActions.SET_PLACE_SUCCESS]: (state, action) => + produce(state, draft => { + draft.places = action.payload; + }), + [placeActions.SET_PLACE_FAILURE]: (state, action) => + produce(state, draft => { + draft.error = action.payload; + }), }, initialState ); diff --git a/src/store/sagas/dog.ts b/src/store/sagas/dog.ts index 0d55c9c7..462490ee 100644 --- a/src/store/sagas/dog.ts +++ b/src/store/sagas/dog.ts @@ -2,7 +2,6 @@ import { call, put, takeEvery } from 'redux-saga/effects'; import * as api from 'src/services/api/dog'; import { removeNextStep } from 'src/services/storage/user'; import * as actions from 'src/store/actions/dog'; -import { navigateToApp } from './user'; function* selectDog(action: ReturnType) { try { @@ -22,7 +21,7 @@ function* createDog(action: ReturnType) { yield put(actions.setDogSuccess(data)); yield call(removeNextStep); // *** NAVIGATE - if (action.navigation) yield call(navigateToApp, action.navigation); + if (action.navigation) yield call(action.navigation.navigate, 'app'); } catch (e) { yield put(actions.setDogFailure(e.response)); } diff --git a/src/store/sagas/index.ts b/src/store/sagas/index.ts index 908ebc2a..02417740 100644 --- a/src/store/sagas/index.ts +++ b/src/store/sagas/index.ts @@ -1,8 +1,9 @@ import { all, fork } from 'redux-saga/effects'; import dogRoot from './dog'; +import placeRoot from './place'; import userRoot from './user'; import walkRoot from './walk'; export default function* root() { - yield all([fork(userRoot), fork(dogRoot), fork(walkRoot)]); + yield all([fork(userRoot), fork(dogRoot), fork(walkRoot), fork(placeRoot)]); } diff --git a/src/store/sagas/place.ts b/src/store/sagas/place.ts new file mode 100644 index 00000000..968f46d1 --- /dev/null +++ b/src/store/sagas/place.ts @@ -0,0 +1,36 @@ +import { findIndex } from 'lodash'; +import { call, put, select, takeEvery } from 'redux-saga/effects'; +import * as api from 'src/services/api/place'; +import * as actions from 'src/store/actions/place'; +import { ReducerState } from 'src/store/reducers'; + +const getUser = (state: ReducerState) => state.user; + +function* scrapPlace(action: ReturnType) { + try { + yield put(actions.setPlaceRequest()); + const data: actions.PlaceResponse = yield call(api.scrap, action.payload); + const { places }: ReturnType = yield select(getUser); + places.push(data._id); + yield put(actions.setPlaceSuccess(places)); + } catch (e) { + yield put(actions.setPlaceFailure(e.response)); + } +} + +function* unScrapPlace(action: ReturnType) { + try { + yield put(actions.setPlaceRequest()); + const data: actions.PlaceResponse = yield call(api.unScrap, action.payload); + const { places }: ReturnType = yield select(getUser); + places.splice(findIndex(places, place => place === data._id), 1); + yield put(actions.setPlaceSuccess(places)); + } catch (e) { + yield put(actions.setPlaceFailure(e.response)); + } +} + +export default function* root() { + yield takeEvery(actions.SCRAP, scrapPlace); + yield takeEvery(actions.UN_SCRAP, unScrapPlace); +} diff --git a/src/store/sagas/user.ts b/src/store/sagas/user.ts index 415d67f7..8ac9f327 100644 --- a/src/store/sagas/user.ts +++ b/src/store/sagas/user.ts @@ -1,9 +1,9 @@ -import { Alert, PermissionsAndroid, Platform } from 'react-native'; -import { NavigationActions, NavigationScreenProp } from 'react-navigation'; -import { call, put, takeEvery } from 'redux-saga/effects'; +import { Alert } from 'react-native'; +import { call, put, select, takeEvery } from 'redux-saga/effects'; import { removeHeader, setHeader } from 'src/services/api/axios'; import * as api from 'src/services/api/user'; import * as actions from 'src/store/actions/user'; +import { ReducerState } from 'src/store/reducers'; import { getUserStorage, @@ -12,38 +12,20 @@ import { removeUserStorage, } from 'src/services/storage/user'; -const permissions = [ - PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, - PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION, - PermissionsAndroid.PERMISSIONS.CAMERA, - PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, - PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, -]; - // HELPERS -export async function checkPermission() { - if ( - Platform.OS === 'ios' || - (Platform.OS === 'android' && Platform.Version < 23) - ) { - return true; - } - permissions.forEach(async permission => { - if (!(await PermissionsAndroid.check(permission))) { - const response = await PermissionsAndroid.requestMultiple(permissions); - permissions.forEach(perm => { - if (response[perm] !== PermissionsAndroid.RESULTS.GRANTED) return false; - }); - } - }); - return true; -} +const getUserFromStore = (state: ReducerState) => state.user; -export function* navigateToApp(navigation: NavigationScreenProp) { - if (checkPermission()) yield call(navigation.navigate, 'app'); +// SAGAS +function* getUser() { + try { + yield put(actions.setUserRequest()); + const data = yield call(api.getUser); + yield put(actions.setUserSuccess(data)); + } catch (e) { + yield put(actions.setUserFailure(e)); + } } -// SAGAS function* autoSignIn(action: ReturnType) { try { // *** GET TOKEN FROM STORAGE @@ -55,24 +37,22 @@ function* autoSignIn(action: ReturnType) { yield put(actions.setUserSuccess(data)); // *** NAVIGATE if (!nextStep) { - yield call(navigateToApp, action.navigation); + yield call(action.navigation.navigate, 'app'); } else { Alert.alert('회원가입이 진행중입니다.', '이어서 하시겠습니까?', [ { text: '예', onPress: () => { - action.navigation.navigate({ - routeName: 'session', - action: NavigationActions.navigate({ - routeName: 'signUp', - action: NavigationActions.navigate({ routeName: nextStep }), - }), - }); + action.navigation.navigate('session'); + action.navigation.navigate('signUp'); + action.navigation.navigate(nextStep); }, }, { text: '나중에', - onPress: () => action.navigation.navigate('app'), + onPress: async () => { + action.navigation.navigate('app'); + }, style: 'cancel', }, ]); @@ -99,7 +79,7 @@ function* signIn(action: ReturnType) { yield call(setHeader, token); yield call(setUserStorage, { token }); // *** NAVIGATE - yield call(navigateToApp, action.navigation); + yield call(action.navigation.navigate, 'app'); } catch (e) { yield put(actions.setUserFailure(e.response)); } @@ -132,6 +112,33 @@ function* signOut(action: ReturnType) { yield call(action.navigation.navigate, 'session'); } +function* terminate(action: ReturnType) { + function* handlePress() { + yield put(actions.setUserRequest()); + yield call(api.terminate); + yield put(actions.removeUser()); + yield call(removeHeader); + yield call(removeUserStorage); + // *** NAVIGATE + yield call(action.navigation.navigate, 'session'); + } + + try { + Alert.alert('탈퇴 후에는 되돌릴 수 없습니다.', '정말 탈퇴하시겠습니까?', [ + { + text: '예', + onPress: handlePress, + }, + { + text: '나중에', + style: 'cancel', + }, + ]); + } catch (e) { + yield put(actions.setUserFailure(e.response)); + } +} + function* createMeta(action: ReturnType) { try { // *** API @@ -170,18 +177,40 @@ function* changePassword(action: ReturnType) { const data = yield call(api.updateUser, action.payload); yield put(actions.setUserSuccess(data)); // *** NAVIGATE - yield call(navigateToApp, action.navigation); + yield call(action.navigation.navigate, 'app'); + } catch (e) { + yield put(actions.setUserFailure(e.response)); + } +} + +function* updateLocation(action: ReturnType) { + const location = { + type: 'Point', + coordinates: [action.payload.longitude, action.payload.latitude], + }; + try { + yield put(actions.setUserRequest()); + const user: ReturnType = yield select( + getUserFromStore + ); + if (!user.email) throw 'NOT_SIGN_IN'; + const data = yield call(api.updateUser, { location }); + yield put(actions.setUserSuccess(data)); } catch (e) { yield put(actions.setUserFailure(e.response)); + yield put(actions.updateLocal({ location })); } } export default function* root() { + yield takeEvery(actions.GET_USER, getUser); yield takeEvery(actions.AUTO_SIGNIN, autoSignIn); yield takeEvery(actions.SIGNIN, signIn); yield takeEvery(actions.SIGNUP, signUp); yield takeEvery(actions.SIGNOUT, signOut); + yield takeEvery(actions.TERMINATE, terminate); yield takeEvery(actions.CREATE_META, createMeta); yield takeEvery(actions.FORGOT_PASSWORD, forgotPassword); yield takeEvery(actions.CHANGE_PASSWORD, changePassword); + yield takeEvery(actions.UPDATE_LOCATION, updateLocation); } diff --git a/src/theme/color.ts b/src/theme/color.ts index 7a691894..461f6db7 100644 --- a/src/theme/color.ts +++ b/src/theme/color.ts @@ -8,7 +8,7 @@ export default { red: '#FF6060', redLight: '#FF615E', // gray - gary55: '#555555', + gray48: '#484848', gray66: '#666666', gray84: '#848484', grayDA: '#DADCDF', @@ -17,5 +17,4 @@ export default { grayF9: '#F9F9F9', // signature blue: '#127EFF', - bluePastel: '#5887F9', }; diff --git a/src/theme/index.ts b/src/theme/index.ts index 3bd2c934..e1109c4d 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,3 +1,4 @@ export { default as color } from './color'; export { default as font } from './font'; export { default as shadow } from './shadow'; +export { default as size } from './size'; diff --git a/src/theme/shadow.ts b/src/theme/shadow.ts index 34a74697..5e78096c 100644 --- a/src/theme/shadow.ts +++ b/src/theme/shadow.ts @@ -1,16 +1,29 @@ export default { deep: { - elevation: 2, + elevation: 8, shadowOffset: { width: 0, height: 6 }, shadowRadius: 12, shadowColor: '#000', shadowOpacity: 0.18, }, + center: { + elevation: 6, + shadowRadius: 12, + shadowColor: '#000', + shadowOpacity: 0.18, + }, shallow: { - elevation: 1, + elevation: 4, shadowOffset: { width: 0, height: 3 }, shadowRadius: 6, shadowColor: '#000', shadowOpacity: 0.12, }, + soft: { + elevation: 8, + shadowOffset: { width: 0, height: 4 }, + shadowRadius: 12, + shadowColor: '#000', + shadowOpacity: 0.09, + }, }; diff --git a/src/theme/size.ts b/src/theme/size.ts new file mode 100644 index 00000000..c41f1b4d --- /dev/null +++ b/src/theme/size.ts @@ -0,0 +1,7 @@ +import { Dimensions } from 'react-native'; + +const { width } = Dimensions.get('window'); + +export default { + horizontal: width * 0.064, +}; diff --git a/src/types/ActionSheet.d.ts b/src/types/ActionSheet.d.ts new file mode 100644 index 00000000..8472855e --- /dev/null +++ b/src/types/ActionSheet.d.ts @@ -0,0 +1,20 @@ +declare module 'react-native-actionsheet' { + import { Component } from 'react'; + + interface Props { + options: (string | React.ReactNode)[]; + onPress: (index: number) => void; + title?: string; + message?: string; + tintColor?: string; + cancelButtonIndex?: number; + destructiveButtonIndex?: number; + styles?: object; + } + + class ActionSheet extends Component { + public show: () => void; + } + + export default ActionSheet; +} diff --git a/src/types/ExtraDimentionsAndroid.d.ts b/src/types/ExtraDimentionsAndroid.d.ts new file mode 100644 index 00000000..32d23509 --- /dev/null +++ b/src/types/ExtraDimentionsAndroid.d.ts @@ -0,0 +1,21 @@ +declare type Dimensions = + | 'REAL_WINDOW_HEIGHT' + | 'REAL_WINDOW_WIDTH' + | 'STATUS_BAR_HEIGHT' + | 'SOFT_MENU_BAR_HEIGHT' + | 'SMART_BAR_HEIGHT'; + +declare interface ExtraDimensions { + get: (dim: Dimensions) => number; + getRealWindowHeight: () => number; + getRealWindowWidth: () => number; + getStatusBarHeight: () => number; + getSoftMenuBarHeight: () => number; + getSmartBarHeight: () => number; + isSoftMenuBarEnabled: () => number; +} + +declare module 'react-native-extra-dimensions-android' { + const instance: ExtraDimensions; + export = instance; +}
( + WrappedComponent: ComponentType
+) { + return class WithMessage extends Component { + private opacity = new Animated.Value(0); + + state: State = { message: undefined }; + + showMessage = (message: string) => { + this.setState({ message }); + Animated.timing(this.opacity, { + toValue: 1, + duration: 80, + useNativeDriver: true, + }).start(); + setTimeout(() => { + Animated.timing(this.opacity, { + toValue: 0, + duration: 120, + useNativeDriver: true, + }).start(e => { + if (e.finished) this.setState({ message: undefined }); + }); + }, 1600); + }; + + render() { + const { message } = this.state; + return ( + + + {message && ( + + + {message} + + + )} + + ); + } + }; +} diff --git a/src/components/container/LabelWrapper/LabelWrapper.styles.ts b/src/components/container/LabelWrapper/LabelWrapper.styles.ts index 7d5ba39e..78e5b0ba 100644 --- a/src/components/container/LabelWrapper/LabelWrapper.styles.ts +++ b/src/components/container/LabelWrapper/LabelWrapper.styles.ts @@ -3,9 +3,9 @@ import { color, font } from 'src/theme'; export const texts = StyleSheet.create({ label: { - color: `${color.black}78`, - fontSize: font.size.small, - marginBottom: 8, + color: color.black33Opacity, + fontSize: font.size.medium, + marginBottom: 12, }, }); diff --git a/src/components/container/PageContainer/PageContainer.styles.ts b/src/components/container/PageContainer/PageContainer.styles.ts index 9903191f..94a5be0b 100644 --- a/src/components/container/PageContainer/PageContainer.styles.ts +++ b/src/components/container/PageContainer/PageContainer.styles.ts @@ -1,15 +1,14 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { color, font } from 'src/theme'; +import { color, font, size } from 'src/theme'; const { width, height } = Dimensions.get('window'); -export const horizontalSize = width * 0.064; export const views = StyleSheet.create({ container: { flex: 1 }, - contentWrapper: { flex: 1, marginHorizontal: horizontalSize }, + contentWrapper: { flex: 1, marginHorizontal: size.horizontal }, bottom: { width, - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, marginBottom: height * 0.045, }, bottomBox: { @@ -39,7 +38,7 @@ export const views = StyleSheet.create({ export const texts = StyleSheet.create({ top: { - color: color.blackOpacity, + color: color.black, fontSize: 16, }, bottomBox: { diff --git a/src/components/container/PageContainer/PageContainer.tsx b/src/components/container/PageContainer/PageContainer.tsx index e57f1697..494f9f02 100644 --- a/src/components/container/PageContainer/PageContainer.tsx +++ b/src/components/container/PageContainer/PageContainer.tsx @@ -15,6 +15,7 @@ import { View, ScrollView, Platform, + Keyboard, } from 'react-native'; interface Props { @@ -24,6 +25,8 @@ interface Props { title?: string; subtitle?: string; titleNarrow?: boolean; + titleOnScroll?: string; + alignTitleCenter?: boolean; // top left?: { navigation: NavigationScreenProp; @@ -34,7 +37,6 @@ interface Props { handlePress: () => void; }; center?: string; - showBorder?: boolean; // bottom bottom?: { view: ReactNode; @@ -46,8 +48,10 @@ interface Props { disable: boolean; }; // option + showBorder?: boolean; extraScrollHeight?: number; extraBottom?: number; + enableScroll?: boolean; } interface State { @@ -90,16 +94,21 @@ class PageContainer extends PureComponent { }; handleScroll = (evt: NativeSyntheticEvent) => { - const { center, title } = this.props; + const { center, title, titleOnScroll } = this.props; const { contentOffset } = evt.nativeEvent; this.setState(state => produce(state, draft => { - if (contentOffset && contentOffset.y > 84) { + if (contentOffset.y > 84) { if (!state.showBorder) draft.showBorder = true; - if (title && !center && !state.center) draft.center = title; + if (!center && !state.center) { + if (title) draft.center = title; + if (titleOnScroll) draft.center = titleOnScroll; + } } else { if (state.showBorder) draft.showBorder = false; - if (state.center) delete draft.center; + if ((title || titleOnScroll) && state.center) { + draft.center = undefined; + } } }) ); @@ -111,14 +120,17 @@ class PageContainer extends PureComponent { title, subtitle, titleNarrow, + alignTitleCenter, left, right, bottom, bottomBox, + enableScroll, extraBottom: extraScrollHeight = 85, } = this.props; const navLeft = left && { handlePress: () => { + Keyboard.dismiss(); if (left.routeName) left.navigation.navigate(left.routeName); else left.navigation.goBack(null); }, @@ -130,7 +142,10 @@ class PageContainer extends PureComponent { ), }; const navRight = right && { - handlePress: right.handlePress, + handlePress: () => { + Keyboard.dismiss(); + right.handlePress(); + }, view: typeof right.view === 'string' ? ( {right.view} @@ -154,17 +169,33 @@ class PageContainer extends PureComponent { style={views.contentWrapper} onScroll={this.handleScroll} scrollEventThrottle={160} - scrollEnabled={bottomBox !== undefined} + scrollEnabled={enableScroll || bottomBox !== undefined} showsVerticalScrollIndicator={false}> {title && ( - {title} - {subtitle && {subtitle}} + + {title} + + {subtitle && ( + + {subtitle} + + )} )} {children} - {bottomBox && } + {(enableScroll || bottomBox) && ( + + )} {bottom && ( {bottom.view} diff --git a/src/components/module/DateInput/DateInput.styles.ts b/src/components/module/DateInput/DateInput.styles.ts index f783a522..9344d4a3 100644 --- a/src/components/module/DateInput/DateInput.styles.ts +++ b/src/components/module/DateInput/DateInput.styles.ts @@ -5,13 +5,14 @@ export const views = StyleSheet.create({ datePicker: { // outer size width: '100%', + marginTop: 4, }, dateInput: { // border styles height: 49, borderWidth: 1, borderRadius: 5, - borderColor: color.grayDA, + borderColor: color.grayEF, paddingHorizontal: 12, }, }); diff --git a/src/components/module/DefaultImage/DefaultImage.tsx b/src/components/module/DefaultImage/DefaultImage.tsx new file mode 100644 index 00000000..2410c7c0 --- /dev/null +++ b/src/components/module/DefaultImage/DefaultImage.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Image } from 'react-native'; +import { color } from 'src/theme'; + +interface Props { + size: number; + uri?: string; + showBorder?: boolean; +} + +const DefaultImage: React.FC = ({ size, uri, showBorder }) => ( + +); + +export default DefaultImage; diff --git a/src/components/module/DefaultImage/index.ts b/src/components/module/DefaultImage/index.ts new file mode 100644 index 00000000..8d115500 --- /dev/null +++ b/src/components/module/DefaultImage/index.ts @@ -0,0 +1 @@ +export { default } from './DefaultImage'; diff --git a/src/components/module/DoubleTab/DoubleTab.tsx b/src/components/module/DoubleTab/DoubleTab.tsx new file mode 100644 index 00000000..cb4d4c15 --- /dev/null +++ b/src/components/module/DoubleTab/DoubleTab.tsx @@ -0,0 +1,36 @@ +import React, { ReactNode } from 'react'; +import { TouchableOpacity } from 'react-native'; + +interface Props { + onDoubleTab: () => void; + children: ReactNode; + delay?: number; + style?: object; +} + +class DoubleTab extends React.Component { + private lastTap?: number; + + handleDoubleTab = () => { + const { delay, onDoubleTab } = this.props; + const now = Date.now(); + if (this.lastTap && now - this.lastTap < (delay || 300)) { + onDoubleTab(); + } else { + this.lastTap = now; + } + }; + + render() { + return ( + + {this.props.children} + + ); + } +} + +export default DoubleTab; diff --git a/src/components/module/DoubleTab/index.ts b/src/components/module/DoubleTab/index.ts new file mode 100644 index 00000000..43c32510 --- /dev/null +++ b/src/components/module/DoubleTab/index.ts @@ -0,0 +1 @@ +export { default } from './DoubleTab'; diff --git a/src/components/module/EmptyList/EmptyList.tsx b/src/components/module/EmptyList/EmptyList.tsx new file mode 100644 index 00000000..a4721881 --- /dev/null +++ b/src/components/module/EmptyList/EmptyList.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Image, Text, View } from 'react-native'; +import { color, font } from 'src/theme'; + +interface Props { + source: NodeRequire; + message: string; + style?: object; +} + +const EmptyList: React.FC = ({ source, message, style }) => ( + + + + {message} + + +); + +export default EmptyList; diff --git a/src/components/module/EmptyList/index.ts b/src/components/module/EmptyList/index.ts new file mode 100644 index 00000000..279d1190 --- /dev/null +++ b/src/components/module/EmptyList/index.ts @@ -0,0 +1 @@ +export { default } from './EmptyList'; diff --git a/src/components/module/Feed/Feed.styles.ts b/src/components/module/Feed/Feed.styles.ts new file mode 100644 index 00000000..cb78b5ff --- /dev/null +++ b/src/components/module/Feed/Feed.styles.ts @@ -0,0 +1,141 @@ +import { Dimensions, StyleSheet } from 'react-native'; +import { color, font, size } from 'src/theme'; + +export const { width } = Dimensions.get('window'); +const paginateHeight = 25; + +export const views = StyleSheet.create({ + summeryWrapper: { + height: 43, + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: size.horizontal, + backgroundColor: color.grayF9, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + header: { + paddingHorizontal: size.horizontal, + height: 52, + flexDirection: 'row', + alignItems: 'center', + }, + message: { + flex: 1, + marginLeft: 4, + }, + headerButton: { + paddingLeft: 16, + height: '100%', + alignItems: 'center', + flexDirection: 'row', + }, + smallDot: { + width: 3, + height: 3, + borderRadius: 1.5, + backgroundColor: color.black33Opacity, + marginLeft: 2, + }, + image: { + width, + height: width, + resizeMode: 'contain', + backgroundColor: color.grayF9, + }, + infoWrapper: { + height: 43, + paddingHorizontal: size.horizontal, + flexDirection: 'row', + justifyContent: 'space-between', + borderTopWidth: 1, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + infoItem: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + infoIcon: { + height: 18, + resizeMode: 'contain', + }, + paginateStatus: { + position: 'absolute', + bottom: 10, + right: 9, + height: paginateHeight, + paddingHorizontal: 8, + borderRadius: paginateHeight / 2, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: color.blackOpacity, + }, + textWrapper: { + paddingHorizontal: size.horizontal, + paddingTop: 16, + paddingBottom: 20, + borderBottomWidth: 0.5, + borderColor: color.grayEF, + }, + likeInfo: { + flexDirection: 'row', + alignItems: 'center', + }, + likeAnimation: { + ...StyleSheet.absoluteFillObject, + justifyContent: 'center', + alignItems: 'center', + }, +}); + +export const texts = StyleSheet.create({ + name: { + marginLeft: 8, + color: color.black, + fontSize: 16, + fontWeight: '600', + }, + message: { + marginLeft: 4, + color: color.black33Opacity, + fontSize: 11, + }, + info: { + marginLeft: 4, + color: '#848484', + fontSize: font.size.medium, + }, + paginate: { + color: color.white, + fontSize: font.size.small, + }, + likes: { + marginLeft: 8, + color: color.black33, + fontSize: font.size.medium, + fontWeight: '700', + }, + memo: { + marginTop: 12, + color: '#484848', + fontSize: 15, + }, + summeryDate: { + flex: 1, + color: color.gray48, + fontSize: font.size.small, + }, + summeryRight: { + fontSize: font.size.small, + color: color.blackOpacity, + }, +}); + +export const icons = StyleSheet.create({ + heart: { + width: 18, + height: 16, + }, +}); diff --git a/src/components/module/Feed/Feed.tsx b/src/components/module/Feed/Feed.tsx new file mode 100644 index 00000000..7cd92618 --- /dev/null +++ b/src/components/module/Feed/Feed.tsx @@ -0,0 +1,275 @@ +import { find } from 'lodash'; +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import ActionSheet from 'react-native-actionsheet'; +import { FlatList } from 'react-native-gesture-handler'; +import { connect } from 'react-redux'; +import { rangeWithUnit, timeWithUnit } from 'src/assets/functions/print'; +import DefaultImage from 'src/components/module/DefaultImage'; +import DoubleTab from 'src/components/module/DoubleTab'; +import { ReducerState } from 'src/store/reducers'; +import { icons, texts, views } from './Feed.styles'; +import { + Animated, + Image, + Text, + TouchableOpacity, + View, + ViewToken, +} from 'react-native'; +import { + deleteFeed, + pushLike, + undoLike, + Feed as FeedInterface, +} from 'src/services/api/feed'; + +interface Props { + feed: FeedInterface; + prevFeed?: FeedInterface | null; + user: ReducerState['user']; + deleteFromList: (id: string) => void; +} + +interface State { + index: number; + pushedLike: boolean; + showAnimation: boolean; + likeCount: number; + heartSize: Animated.Value; +} + +enum Actions { + Delete, + Cancel, +} + +class Feed extends PureComponent { + private actionSheet = React.createRef(); + + state: State = { + index: 1, + pushedLike: false, + showAnimation: false, + likeCount: 0, + heartSize: new Animated.Value(0), + }; + + componentDidMount() { + const { feed, user } = this.props; + this.setState({ + pushedLike: + find(feed.likes, like => user._id === like.user) !== undefined, + likeCount: feed.likes.length, + }); + } + + toggleLike = () => { + const { _id } = this.props.feed; + const pushedLike = !this.state.pushedLike; + this.setState({ + pushedLike, + likeCount: pushedLike + ? this.state.likeCount + 1 + : this.state.likeCount - 1, + showAnimation: pushedLike, + }); + + if (pushedLike) { + pushLike({ _id }); + Animated.timing(this.state.heartSize, { + toValue: 1, + duration: 60, + useNativeDriver: true, + }).start(bigger => { + if (bigger.finished) { + setTimeout(() => { + Animated.timing(this.state.heartSize, { + toValue: 0, + duration: 120, + useNativeDriver: true, + }).start(smaller => { + if (smaller.finished) { + this.setState({ showAnimation: false }); + } + }); + }, 1600); + } + }); + } else { + undoLike({ _id }); + } + }; + + handleIndexChanged = (info: { + viewableItems: ViewToken[]; + changed: ViewToken[]; + }) => { + const index = (info.viewableItems[0].index || 0) + 1; + this.setState({ index }); + }; + + handlePressDots = () => { + const actionSheet = this.actionSheet.current; + if (actionSheet) actionSheet.show(); + }; + + handleActionSheet = async (index: number) => { + if (Actions.Delete === index) { + const { _id } = this.props.feed; + await deleteFeed({ _id }); + this.props.deleteFromList(_id); + } + }; + + renderSummery = () => { + const { feed, user, prevFeed } = this.props; + const yearMonth = moment(feed.createdAt).format('YYYY년 MM월'); + if ( + prevFeed === null || + (prevFeed && yearMonth < moment(prevFeed.createdAt).format('YYYY년 MM월')) + ) { + if (!user.repDog) return; + const summery = find( + user.repDog.histories, + history => history.yearMonth === yearMonth + ); + if (summery) { + return ( + + {summery.yearMonth} 산책 + {`${ + summery.count + }회 / ${rangeWithUnit(summery.distance)} / ${timeWithUnit( + summery.seconds + )} / ${summery.steps}걸음 / ${Math.floor( + summery.steps / 28.5 + )}kcal`} + + ); + } + } + return null; + }; + + render() { + const { feed, user } = this.props; + + return ( + + {this.renderSummery()} + + + {feed.dog.name} + + + {moment(feed.createdAt).fromNow()} + + + {user._id === feed.user && ( + + + + + + )} + + + index.toString()} + viewabilityConfig={{ + itemVisiblePercentThreshold: 50, + }} + renderItem={({ item }) => ( + + + + )} + showsHorizontalScrollIndicator={false} + onViewableItemsChanged={this.handleIndexChanged} + pagingEnabled + horizontal + /> + {this.state.showAnimation && ( + + + + )} + + {`${this.state.index} / ${ + feed.images.length + }`} + + + + {[ + { + icon: require('src/assets/icons/ic_time.png'), + value: timeWithUnit(feed.seconds), + }, + { + icon: require('src/assets/icons/ic_distance.png'), + value: rangeWithUnit(feed.distance), + }, + { + icon: require('src/assets/icons/ic_poo_gray.png'), + value: `${feed.poos}회`, + }, + { + icon: require('src/assets/icons/ic_pee_gray.png'), + value: `${feed.pees}회`, + }, + ].map((data, index) => ( + + + {data.value} + + ))} + + + + + + + {this.state.likeCount} + + {feed.memo !== undefined && ( + {feed.memo} + )} + + + + ); + } +} + +export default connect((state: ReducerState) => ({ user: state.user }))(Feed); diff --git a/src/components/module/Feed/index.ts b/src/components/module/Feed/index.ts new file mode 100644 index 00000000..5beb2fc8 --- /dev/null +++ b/src/components/module/Feed/index.ts @@ -0,0 +1 @@ +export { default } from './Feed'; diff --git a/src/components/module/FeedHeader/FeedHeader.tsx b/src/components/module/FeedHeader/FeedHeader.tsx deleted file mode 100644 index fae12dfc..00000000 --- a/src/components/module/FeedHeader/FeedHeader.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import { find } from 'lodash'; -import moment from 'moment'; -import React from 'react'; -import { Image, StyleSheet, Text, View } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { UserInterface } from 'src/store/actions/user'; -import { color, font } from 'src/theme'; - -interface Props { - user: UserInterface; - updatedAt: Date; -} - -const thumbnailSize = 32; -const styles = StyleSheet.create({ - wrapper: { - paddingHorizontal: horizontalSize, - paddingBottom: 12, - flexDirection: 'row', - alignItems: 'center', - }, - thumbnail: { - width: thumbnailSize, - height: thumbnailSize, - borderRadius: thumbnailSize / 2, - borderWidth: 1, - borderColor: color.grayEF, - resizeMode: 'contain', - }, - name: { - marginLeft: 10, - color: color.black, - fontSize: 16, - }, - time: { - marginLeft: 4, - color: `${color.black}4D`, - fontSize: font.size.small, - }, -}); - -const FeedHeader: React.FC = ({ user, updatedAt }) => { - const dog = find(user.dogs, dog => dog.default); - return ( - - {dog && ( - <> - - {dog.name} - - )} - {moment(updatedAt).fromNow()} - - ); -}; - -export default FeedHeader; diff --git a/src/components/module/FeedHeader/index.ts b/src/components/module/FeedHeader/index.ts deleted file mode 100644 index 399f3a16..00000000 --- a/src/components/module/FeedHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FeedHeader'; diff --git a/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts b/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts index 147bdf97..ff366f3e 100644 --- a/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts +++ b/src/components/module/ImageWithSticker/ImageWithSticker.styles.ts @@ -6,12 +6,13 @@ const { width } = Dimensions.get('window'); export const views = StyleSheet.create({ topWrapper: { alignItems: 'flex-end', - padding: 20, + padding: 44, }, bottomWrapper: { marginTop: 'auto', flexDirection: 'row', - padding: 20, + paddingHorizontal: 45, + paddingBottom: 30, justifyContent: 'space-between', }, item: { @@ -22,10 +23,30 @@ export const views = StyleSheet.create({ export const icons = StyleSheet.create({ logo: { - width: width * 0.4, - height: 48, + width: width * 0.309, + height: width * 0.053, resizeMode: 'contain', }, + go: { + width: 90, + height: 48, + }, + time: { + width: 19, + height: 18, + }, + distance: { + width: 14, + height: 19, + }, + poo: { + width: 18, + height: 17, + }, + pee: { + width: 11, + height: 17, + }, }); export const texts = StyleSheet.create({ @@ -34,4 +55,7 @@ export const texts = StyleSheet.create({ color: color.white, fontSize: font.size.medium, }, + black: { + color: '#242424', + }, }); diff --git a/src/components/module/ImageWithSticker/ImageWithSticker.tsx b/src/components/module/ImageWithSticker/ImageWithSticker.tsx index 55bcecd6..d9b43532 100644 --- a/src/components/module/ImageWithSticker/ImageWithSticker.tsx +++ b/src/components/module/ImageWithSticker/ImageWithSticker.tsx @@ -19,59 +19,106 @@ export interface ImageInterface { interface Props { image: ImageInterface; walk: ReducerState['walk']; + blackMode: boolean; size?: number; style?: object; } -const ImageWithSticker: React.FC = ({ image, walk, size, style }) => ( - - {image.stickers && ( - <> - {image.stickers.top && ( - - - - )} - - {image.stickers.time && ( - - - {Math.floor(walk.seconds / 60)}분 - - )} - {image.stickers.distance && ( - - - {rangeWithUnit(walk.distance)} - - )} - {image.stickers.poos && ( - - - {walk.poos}회 - - )} - {image.stickers.pees && ( - - - {walk.pees}회 +const ImageWithSticker: React.FC = ({ + image, + walk, + blackMode, + size, + style, +}) => { + const fontStyle = [texts.info, blackMode ? texts.black : null]; + return ( + + {image.stickers && ( + <> + {image.stickers.top && ( + + {image.stickers.top === 'LOGO' ? ( + + ) : ( + + )} )} - - - )} - -); + + {image.stickers.time && ( + + + {Math.floor(walk.seconds / 60)}분 + + )} + {image.stickers.distance && ( + + + {rangeWithUnit(walk.distance)} + + )} + {image.stickers.poos && ( + + + {walk.poos}회 + + )} + {image.stickers.pees && ( + + + {walk.pees}회 + + )} + + + )} + + ); +}; export default ImageWithSticker; diff --git a/src/components/module/Selector/Selector.styles.ts b/src/components/module/Selector/Selector.styles.ts index ee523b8b..dd53aadc 100644 --- a/src/components/module/Selector/Selector.styles.ts +++ b/src/components/module/Selector/Selector.styles.ts @@ -1,4 +1,5 @@ import { StyleSheet } from 'react-native'; +import { color, font } from 'src/theme'; export const views = StyleSheet.create({ boxWrapper: { @@ -6,3 +7,11 @@ export const views = StyleSheet.create({ marginHorizontal: -4, }, }); + +export const texts = StyleSheet.create({ + alert: { + color: color.red, + fontSize: font.size.small, + marginTop: 9, + }, +}); diff --git a/src/components/module/Selector/Selector.tsx b/src/components/module/Selector/Selector.tsx index 89eb27e3..9223344a 100644 --- a/src/components/module/Selector/Selector.tsx +++ b/src/components/module/Selector/Selector.tsx @@ -1,8 +1,8 @@ import React, { Component } from 'react'; -import { View } from 'react-native'; +import { Text, View } from 'react-native'; import LabelWrapper from 'src/components/container/LabelWrapper'; import { HandleChangeSelector } from './index'; -import { views } from './Selector.styles'; +import { texts, views } from './Selector.styles'; import ToggleBox from './ToggleBox'; interface Data { @@ -15,6 +15,7 @@ interface Props { name: string; list: Data[]; value?: string; + alert?: string; handleChange: (data: HandleChangeSelector) => void; } @@ -32,7 +33,7 @@ class Selector extends Component { }; render() { - const { label, list } = this.props; + const { label, list, alert } = this.props; return ( @@ -46,6 +47,7 @@ class Selector extends Component { /> ))} + {alert && {alert}} ); } diff --git a/src/components/module/Splash/Splash.tsx b/src/components/module/Splash/Splash.tsx index 90cb8611..d6b62559 100644 --- a/src/components/module/Splash/Splash.tsx +++ b/src/components/module/Splash/Splash.tsx @@ -1,16 +1,19 @@ import React from 'react'; -import { Image, StyleSheet, View } from 'react-native'; +import { Dimensions, Image, StyleSheet, View } from 'react-native'; import { color } from 'src/theme'; +const { width, height } = Dimensions.get('window'); + const styles = StyleSheet.create({ background: { - ...StyleSheet.absoluteFillObject, - paddingHorizontal: 6, - backgroundColor: color.white, + flex: 1, + backgroundColor: color.blue, + alignItems: 'center', }, image: { - width: '100%', - height: '100%', + marginTop: height * 0.285, + width: width * 0.52, + height: height * 0.05, resizeMode: 'contain', }, }); @@ -18,7 +21,7 @@ const styles = StyleSheet.create({ const Splash: React.FC<{}> = () => ( diff --git a/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts b/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts index a687c14c..3e6be76c 100644 --- a/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts +++ b/src/components/module/TextAutocomplete/TextAutocomplete.styles.ts @@ -1,10 +1,9 @@ import { StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color } from 'src/theme'; +import { color, size } from 'src/theme'; export const texts = StyleSheet.create({ input: { - width: '100%', + flex: 1, // font styles color: color.black, fontSize: 22, @@ -13,17 +12,18 @@ export const texts = StyleSheet.create({ export const views = StyleSheet.create({ inputWrapper: { - paddingVertical: 20, - paddingHorizontal: horizontalSize, + paddingBottom: 20, + paddingHorizontal: size.horizontal, marginTop: 8, marginBottom: 2, + flexDirection: 'row', + alignItems: 'center', // border styles borderBottomWidth: 1, borderColor: color.grayDA, }, autocompleteWrapper: { - flex: 1, - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, }, }); @@ -32,4 +32,8 @@ export const icons = StyleSheet.create({ width: 15, height: 15, }, + clear: { + width: 20, + height: 20, + }, }); diff --git a/src/components/module/TextAutocomplete/TextAutocomplete.tsx b/src/components/module/TextAutocomplete/TextAutocomplete.tsx index 3b866140..c0d7877b 100644 --- a/src/components/module/TextAutocomplete/TextAutocomplete.tsx +++ b/src/components/module/TextAutocomplete/TextAutocomplete.tsx @@ -1,22 +1,29 @@ import * as Hangul from 'hangul-js'; import { sortBy } from 'lodash'; import React, { Component } from 'react'; -import { FlatList, Image, SafeAreaView, TextInput, View } from 'react-native'; import TopNavbar from 'src/components/module/TopNavbar'; import { color } from 'src/theme'; import { icons, texts, views } from './TextAutocomplete.styles'; import TextBox from './TextBox'; +import { + FlatList, + Image, + SafeAreaView, + TextInput, + View, + TouchableOpacity, +} from 'react-native'; export type Data = { name: string } & any; interface Props { placeholder: string; - list: Data[]; icon: NodeRequire; + staticList?: Data[]; defaultList?: Data[]; - handleSubmit: (data: Data) => void; - handleDismiss: () => void; - handleChange?: (keyword: string) => void; + onSubmit: (data: Data) => void; + onDismiss: () => void; + onSearch?: (keyword: string) => Promise; } interface State { @@ -24,44 +31,60 @@ interface State { autocomplete: Data[]; } +const disassemble = (value: string) => + Hangul.disassembleToString(value.replace(/\s/g, '')); + class TextAutocomplete extends Component { - state: State = { keyword: '', autocomplete: [] }; + private searchResult: Data[] | undefined; + private input = React.createRef(); + + state: State = { keyword: '', autocomplete: this.props.defaultList || [] }; - getAutocomplete = (value: string) => { - if (value.length < 2) return []; + getAutocomplete = (keyword: string, list: Data[]) => { // 한글을 분석해서 자동완성을 함 - const dValue = Hangul.disassembleToString(value.replace(/\s/g, '')); - const regex = new RegExp(dValue); - const dList = this.props.list.map((data: Data) => ({ + const regex = new RegExp(disassemble(keyword)); + return list.map((data: Data) => ({ ...data, - match: regex.exec( - Hangul.disassembleToString(data.name.replace(/\s/g, '')) - ), + match: regex.exec(disassemble(data.name)), })); - const filter = dList.filter(data => data.match !== null); - return sortBy(filter, data => 1 - Math.pow(1.4, -data.match[0].length)); }; - handleTextChange = (keyword: string) => { - const { handleChange } = this.props; - const autocomplete = this.getAutocomplete(keyword); + handleTextChange = async (keyword: string) => { + const { staticList, defaultList, onSearch } = this.props; + let autocomplete: Data[] = defaultList || []; + if (disassemble(keyword).length > 4) { + let result: Data[] = []; + if (staticList !== undefined) { + result = this.getAutocomplete(keyword, staticList); + } else if (onSearch !== undefined) { + if (this.searchResult === undefined) { + this.searchResult = await onSearch(keyword); + } + result = this.getAutocomplete(keyword, this.searchResult); + } + const filter = result.filter(data => data.match !== null); + autocomplete = sortBy( + filter, + data => 1 - Math.pow(1.4, -data.match[0].length) + ); + } else if (this.searchResult !== undefined) { + delete this.searchResult; + } this.setState({ keyword, autocomplete }); - if (handleChange) handleChange(keyword.trim()); }; - render() { - const { - placeholder, - handleDismiss, - handleSubmit, - icon, - defaultList = [], - } = this.props; - const list = - this.state.autocomplete.length > 0 - ? this.state.autocomplete - : defaultList; + handleInputSubmit = async () => { + const { onSearch } = this.props; + const { keyword } = this.state; + if (onSearch && keyword.length !== 0) { + this.searchResult = await onSearch(keyword); + const autocomplete = this.getAutocomplete(keyword, this.searchResult); + this.setState({ autocomplete }); + } + }; + render() { + const { placeholder, onDismiss, onSubmit, icon } = this.props; return ( { source={require('src/assets/icons/ic_close.png')} /> ), - handlePress: handleDismiss, + handlePress: onDismiss, }} /> + {this.state.keyword.length > 0 && ( + { + if (this.input.current) this.input.current.clear(); + }}> + + + )} index.toString()} renderItem={data => ( )} /> diff --git a/src/components/module/TextInput/TextInput.styles.ts b/src/components/module/TextInput/TextInput.styles.ts index c08355b6..461a1024 100644 --- a/src/components/module/TextInput/TextInput.styles.ts +++ b/src/components/module/TextInput/TextInput.styles.ts @@ -24,5 +24,5 @@ export const inputs = StyleSheet.create({ fontSize: font.size.medium, }, focused: { borderColor: color.blue }, - unFocused: { borderColor: color.grayDA }, + unFocused: { borderColor: color.grayEF }, }); diff --git a/src/components/module/TopNavbar/TopNavbar.tsx b/src/components/module/TopNavbar/TopNavbar.tsx index 8fe28ad1..b0503205 100644 --- a/src/components/module/TopNavbar/TopNavbar.tsx +++ b/src/components/module/TopNavbar/TopNavbar.tsx @@ -17,19 +17,19 @@ interface Props { view: ReactNode; handlePress: () => void; }; - center?: string; + center?: string | ReactNode; showBorder?: boolean; transparent?: boolean; } const { width } = Dimensions.get('window'); -export const height = 45; +export const height = 55; const styles = StyleSheet.create({ wrapper: { height, width: '100%', flexDirection: 'row', - borderBottomColor: '#70707014', + borderBottomColor: '#EBEBEB', }, button: { paddingHorizontal: width * 0.04, @@ -63,11 +63,14 @@ const TopNavbar: React.FC = ({ showBorder ? { borderBottomWidth: 1 } : null, { backgroundColor: transparent ? 'transparent' : color.white }, ]}> - {center && ( - - {center} - - )} + {center && + (typeof center === 'string' ? ( + + {center} + + ) : ( + center + ))} {left && ( void; - detail?: { + hideModal: () => void; + data?: { title: string; link: string; }; } -const Detail: React.FC = ({ hideDetail, detail }) => ( +const Detail: React.FC = ({ hideModal, data }) => ( - {detail && ( + animationType="slide" + hardwareAccelerated + onRequestClose={hideModal}> + {data && ( = ({ hideDetail, detail }) => ( /> ), }} - center={detail.title} + center={data.title} showBorder={true} /> - + )} diff --git a/src/components/module/WebModal/index.ts b/src/components/module/WebModal/index.ts new file mode 100644 index 00000000..81964fd0 --- /dev/null +++ b/src/components/module/WebModal/index.ts @@ -0,0 +1 @@ +export { default } from './WebModal'; diff --git a/src/pages/App/Profile/Profile.tsx b/src/pages/App/Profile/Profile.tsx deleted file mode 100644 index 3753e8e1..00000000 --- a/src/pages/App/Profile/Profile.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Button, View } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; -import { connect } from 'react-redux'; -import * as actions from 'src/store/actions/user'; - -interface Props extends NavigationScreenProps { - signOut: typeof actions.signOut; -} - -const Profile: React.FC = ({ navigation, signOut }) => { - function handleSignOut() { - signOut(navigation); - } - - return ( - - - - ); -}; - -export default connect( - null, - { - signOut: actions.signOut, - } -)(Profile); diff --git a/src/pages/App/Profile/index.ts b/src/pages/App/Profile/index.ts deleted file mode 100644 index 23358a23..00000000 --- a/src/pages/App/Profile/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Profile'; diff --git a/src/pages/App/Wdd/Wdd.tsx b/src/pages/App/Wdd/Wdd.tsx deleted file mode 100644 index 6c86c0b4..00000000 --- a/src/pages/App/Wdd/Wdd.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import { Text, View } from 'react-native'; -import { NavigationScreenProps } from 'react-navigation'; - -interface Props extends NavigationScreenProps {} - -const Wdd: React.FC = ({ navigation }) => ( - - 우동댕 페이지 준비중입니다 ٩(๑❛ᴗ❛๑)۶ - -); - -export default Wdd; diff --git a/src/pages/App/index.ts b/src/pages/App/index.ts deleted file mode 100644 index 90467b05..00000000 --- a/src/pages/App/index.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { Animated, Easing } from 'react-native'; -import BottomTabbar from 'src/components/base/BottomTabbar'; -import WalkNavigator from 'src/pages/Walk'; -import MapScreen from './Map'; -import ProfileScreen from './Profile'; -import WddScreen from './Wdd'; -import { - MapNavigator as PlaceMapNavigator, - SearchNavigator as PlaceSearchNavigator, -} from 'src/pages/Place'; -import { - createBottomTabNavigator, - createStackNavigator, - NavigationActions, -} from 'react-navigation'; - -const MapNavigator = createStackNavigator( - { - map: MapScreen, - walk: WalkNavigator, - placeMap: PlaceMapNavigator, - placeSearch: PlaceSearchNavigator, - }, - { - initialRouteName: 'map', - headerMode: 'none', - transitionConfig: () => ({ - transitionSpec: { - duration: 0, - timing: Animated.timing, - easing: Easing.step0, - }, - }), - } -); - -MapNavigator.navigationOptions = ({ navigation }: any) => ({ - tabBarVisible: navigation.state.index === 0, -}); - -export default createBottomTabNavigator( - { - map: { - screen: MapNavigator, - params: { - tab: { - icon: require('src/assets/icons/logo_img.png'), - navigate: NavigationActions.navigate({ routeName: 'map' }), - }, - stack: { - icon: require('src/assets/icons/ic_footprint.png'), - navigate: NavigationActions.navigate({ routeName: 'walk' }), - }, - }, - }, - wdd: { - screen: WddScreen, - params: { - icon: require('src/assets/icons/ic_wdd.png'), - label: '우동댕', - }, - }, - profile: { - screen: ProfileScreen, - params: { - icon: require('src/assets/icons/ic_profile.png'), - label: '내 프로필', - }, - }, - }, - { - initialRouteName: 'map', - tabBarComponent: BottomTabbar, - } -); diff --git a/src/pages/Walk/Edit/Edit.styles.ts b/src/pages/Map/Edit/Edit.styles.ts similarity index 63% rename from src/pages/Walk/Edit/Edit.styles.ts rename to src/pages/Map/Edit/Edit.styles.ts index 64797e0a..7603f5bc 100644 --- a/src/pages/Walk/Edit/Edit.styles.ts +++ b/src/pages/Map/Edit/Edit.styles.ts @@ -1,23 +1,14 @@ import { Dimensions, StyleSheet } from 'react-native'; import { color, font } from 'src/theme'; -const padding = 20; -const CARDS_IN_SINGLE_ROW = 4; const { width } = Dimensions.get('window'); const cardSize = 68; -const space = - (width - padding * 2 - cardSize * CARDS_IN_SINGLE_ROW) / - (CARDS_IN_SINGLE_ROW - 1); +const space = (width - cardSize * 4) / 5; export const views = StyleSheet.create({ buttonContainer: { - paddingHorizontal: padding, - paddingVertical: padding / 2, - }, - buttonRow: { - paddingVertical: padding / 2, - marginHorizontal: -space / 2, - flexDirection: 'row', + marginTop: space, + paddingHorizontal: space / 2, }, button: { marginHorizontal: space / 2, @@ -36,11 +27,6 @@ export const icons = StyleSheet.create({ width: 16, height: 18, }, - button: { - height: 28, - width: 42, - resizeMode: 'contain', - }, }); export const texts = StyleSheet.create({ diff --git a/src/pages/Walk/Edit/Edit.tsx b/src/pages/Map/Edit/Edit.tsx similarity index 53% rename from src/pages/Walk/Edit/Edit.tsx rename to src/pages/Map/Edit/Edit.tsx index c17e1b6c..e3424bb0 100644 --- a/src/pages/Walk/Edit/Edit.tsx +++ b/src/pages/Map/Edit/Edit.tsx @@ -1,7 +1,7 @@ import produce from 'immer'; import React, { PureComponent } from 'react'; import ViewShot from 'react-native-view-shot'; -import { NavigationScreenProps } from 'react-navigation'; +import { FlatList, NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import ImageWithSticker from 'src/components/module/ImageWithSticker'; import { ImageInterface } from 'src/components/module/ImageWithSticker/ImageWithSticker'; @@ -13,8 +13,9 @@ import { Image, SafeAreaView, Text, - View, TouchableOpacity, + CameraRoll, + Alert, } from 'react-native'; interface Props extends NavigationScreenProps { @@ -34,6 +35,15 @@ class Edit extends PureComponent { image: this.props.navigation.getParam('image'), }; + handleDownload = async () => { + const snapshot = this.snapshot.current; + if (snapshot) { + const uri = await (snapshot as any).capture(); + await CameraRoll.saveToCameraRoll(`file://${uri}`); + Alert.alert('저장되었습니다.'); + } + }; + handleClear = () => { this.setState(state => produce(state, draft => { @@ -82,14 +92,8 @@ class Edit extends PureComponent { } }; - renderButton = (onPress: () => void, icon: NodeRequire) => ( - - - - ); - render() { - const { walk } = this.props; + const { walk, navigation } = this.props; return ( { style={icons.save} /> ), - handlePress: () => {}, + handlePress: this.handleDownload, }} center="이미지 편집" right={{ @@ -110,37 +114,63 @@ class Edit extends PureComponent { showBorder /> - + - - - - 없음 + this.handleToggle('time'), + icon: require('src/assets/icons/ic_time_black.png'), + style: { width: 32, height: 30 }, + }, + { + handlePress: () => this.handleToggle('distance'), + icon: require('src/assets/icons/ic_km.png'), + style: { width: 41, height: 33 }, + }, + { + handlePress: () => this.handleToggle('poos'), + icon: require('src/assets/icons/ic_poo_black.png'), + style: { width: 28, height: 27 }, + }, + { + handlePress: () => this.handleToggle('pees'), + icon: require('src/assets/icons/ic_pee_black.png'), + style: { width: 18, height: 28 }, + }, + { + handlePress: () => this.handleLogo('GO'), + icon: require('src/assets/icons/ic_go_black.png'), + style: { width: 48, height: 26 }, + }, + { + handlePress: () => this.handleLogo('LOGO'), + icon: require('src/assets/icons/logo_text_black.png'), + style: { width: 58, height: 10 }, + }, + ]} + showsVerticalScrollIndicator={false} + showsHorizontalScrollIndicator={false} + columnWrapperStyle={views.buttonContainer} + numColumns={4} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item }) => ( + + {item.icon && } + {item.text && {item.text}} - {this.renderButton( - () => this.handleToggle('time'), - require('src/assets/icons/ic_time_black.png') - )} - {this.renderButton( - () => this.handleToggle('distance'), - require('src/assets/icons/ic_distance.png') - )} - {this.renderButton( - () => this.handleToggle('poos'), - require('src/assets/icons/ic_poo_gray.png') - )} - - - {this.renderButton( - () => this.handleToggle('pees'), - require('src/assets/icons/ic_pee_gray.png') - )} - {this.renderButton( - () => this.handleLogo('LOGO'), - require('src/assets/icons/logo_text.png') - )} - - + )} + /> ); } diff --git a/src/pages/Walk/Edit/index.ts b/src/pages/Map/Edit/index.ts similarity index 100% rename from src/pages/Walk/Edit/index.ts rename to src/pages/Map/Edit/index.ts diff --git a/src/pages/Walk/Finish/Finish.styles.ts b/src/pages/Map/Finish/Finish.styles.ts similarity index 83% rename from src/pages/Walk/Finish/Finish.styles.ts rename to src/pages/Map/Finish/Finish.styles.ts index 1c2453ae..a60bbcb4 100644 --- a/src/pages/Walk/Finish/Finish.styles.ts +++ b/src/pages/Map/Finish/Finish.styles.ts @@ -1,6 +1,5 @@ import { StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color, font } from 'src/theme'; +import { color, font, size } from 'src/theme'; export const views = StyleSheet.create({ dashboard: { @@ -12,7 +11,7 @@ export const views = StyleSheet.create({ borderColor: '#00000014', }, info: { - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, paddingTop: 20, paddingBottom: 44, backgroundColor: color.white, diff --git a/src/pages/Walk/Finish/Finish.tsx b/src/pages/Map/Finish/Finish.tsx similarity index 80% rename from src/pages/Walk/Finish/Finish.tsx rename to src/pages/Map/Finish/Finish.tsx index 6b0e1484..8f000714 100644 --- a/src/pages/Walk/Finish/Finish.tsx +++ b/src/pages/Map/Finish/Finish.tsx @@ -25,10 +25,13 @@ import { StyleSheet, Text, View, + ImageEditor, + Alert, } from 'react-native'; interface Props extends NavigationScreenProps { walk: ReducerState['walk']; + user: ReducerState['user']; updateStatus: typeof actions.updateStatus; updateCount: typeof actions.updateCount; } @@ -43,6 +46,7 @@ interface State { const CENTER = { x: 0.5, y: 0.5 }; class Finish extends PureComponent { + private mapWrapper = createRef(); private map = createRef(); state: State = { @@ -74,24 +78,40 @@ class Finish extends PureComponent { handleDismiss = () => { const { navigation, updateStatus } = this.props; - updateStatus('READY'); navigation.popToTop(); + updateStatus('READY'); }; - handleUpload = async () => { + handleUpload = () => { const { navigation } = this.props; const map = this.map.current; - if (!map) return; - const snapshot = await map.takeSnapshot({ - width: 800, - height: 800, - format: 'png', - quality: 0.8, - result: 'file', - }); - navigation.navigate('upload', { - snapshot, - handleDismiss: this.handleDismiss, + const mapWrapper = this.mapWrapper.current; + if (!map || !mapWrapper) return; + + mapWrapper.measure(async (x, y, width, height) => { + const snapshot = await map.takeSnapshot({ + width, + height, + format: 'png', + }); + Image.getSize( + snapshot, + (imgWidth, imgHeight) => { + const options = { + offset: { x: 0, y: (imgHeight - imgWidth) / 2 }, + size: { width: imgWidth, height: imgWidth }, + }; + ImageEditor.cropImage( + snapshot, + options, + uri => { + navigation.navigate('upload', { snapshot: uri }); + }, + err => {} + ); + }, + err => {} + ); }); }; @@ -113,12 +133,12 @@ class Finish extends PureComponent { }; render() { - const { walk } = this.props; + const { walk, user } = this.props; const { pees, poos, start, end } = this.state; return ( - + { {moment(walk.createdAt).format('YYYY년 MM월 DD일 dddd')} - - 내 피드 올리기 - + {user.email.length !== 0 && ( + + 내 피드 올리기 + + )} ); @@ -206,6 +228,6 @@ class Finish extends PureComponent { } export default connect( - ({ walk }: ReducerState) => ({ walk }), + (state: ReducerState) => ({ walk: state.walk, user: state.user }), { updateStatus: actions.updateStatus, updateCount: actions.updateCount } )(Finish); diff --git a/src/pages/Walk/Finish/ImageMarker/ImageMarker.tsx b/src/pages/Map/Finish/ImageMarker/ImageMarker.tsx similarity index 100% rename from src/pages/Walk/Finish/ImageMarker/ImageMarker.tsx rename to src/pages/Map/Finish/ImageMarker/ImageMarker.tsx diff --git a/src/pages/Walk/Finish/ImageMarker/index.ts b/src/pages/Map/Finish/ImageMarker/index.ts similarity index 100% rename from src/pages/Walk/Finish/ImageMarker/index.ts rename to src/pages/Map/Finish/ImageMarker/index.ts diff --git a/src/pages/Walk/Finish/InfoCard/InfoCard.tsx b/src/pages/Map/Finish/InfoCard/InfoCard.tsx similarity index 100% rename from src/pages/Walk/Finish/InfoCard/InfoCard.tsx rename to src/pages/Map/Finish/InfoCard/InfoCard.tsx diff --git a/src/pages/Walk/Finish/InfoCard/index.ts b/src/pages/Map/Finish/InfoCard/index.ts similarity index 100% rename from src/pages/Walk/Finish/InfoCard/index.ts rename to src/pages/Map/Finish/InfoCard/index.ts diff --git a/src/pages/Walk/Finish/TextMarker/TextMarker.tsx b/src/pages/Map/Finish/TextMarker/TextMarker.tsx similarity index 100% rename from src/pages/Walk/Finish/TextMarker/TextMarker.tsx rename to src/pages/Map/Finish/TextMarker/TextMarker.tsx diff --git a/src/pages/Walk/Finish/TextMarker/index.ts b/src/pages/Map/Finish/TextMarker/index.ts similarity index 100% rename from src/pages/Walk/Finish/TextMarker/index.ts rename to src/pages/Map/Finish/TextMarker/index.ts diff --git a/src/pages/Walk/Finish/index.ts b/src/pages/Map/Finish/index.ts similarity index 100% rename from src/pages/Walk/Finish/index.ts rename to src/pages/Map/Finish/index.ts diff --git a/src/pages/App/Map/Header/Header.styles.ts b/src/pages/Map/Map/Header/Header.styles.ts similarity index 100% rename from src/pages/App/Map/Header/Header.styles.ts rename to src/pages/Map/Map/Header/Header.styles.ts diff --git a/src/pages/App/Map/Header/Header.tsx b/src/pages/Map/Map/Header/Header.tsx similarity index 100% rename from src/pages/App/Map/Header/Header.tsx rename to src/pages/Map/Map/Header/Header.tsx diff --git a/src/pages/App/Map/Header/index.ts b/src/pages/Map/Map/Header/index.ts similarity index 100% rename from src/pages/App/Map/Header/index.ts rename to src/pages/Map/Map/Header/index.ts diff --git a/src/pages/App/Map/Map.tsx b/src/pages/Map/Map/Map.tsx similarity index 52% rename from src/pages/App/Map/Map.tsx rename to src/pages/Map/Map/Map.tsx index e4d323e2..52945a72 100644 --- a/src/pages/App/Map/Map.tsx +++ b/src/pages/Map/Map/Map.tsx @@ -1,30 +1,32 @@ import produce from 'immer'; import { pick } from 'lodash'; import React, { Component, createRef } from 'react'; -import { Dimensions, SafeAreaView, StyleSheet } from 'react-native'; +import { Alert, Dimensions, SafeAreaView, StyleSheet } from 'react-native'; import Geolocation from 'react-native-geolocation-service'; import MapView, { LatLng, PROVIDER_GOOGLE } from 'react-native-maps'; import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import { calcDistance } from 'src/assets/functions/calcutate'; -import * as actions from 'src/store/actions/walk'; +import * as userActions from 'src/store/actions/user'; +import * as walkActions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; import Header from './Header'; import TrackUser from './TrackUser'; +import { + LOCATION_PERMISSIONS, + checkPermission, +} from 'src/assets/functions/validate'; interface Props extends NavigationScreenProps { - pushPin: typeof actions.pushPin; + pushPin: typeof walkActions.pushPin; + updateLocation: typeof userActions.updateLocation; walk: ReducerState['walk']; } interface State { trackUser: boolean; statusChanged: boolean; - current: { - latitude: number; - longitude: number; - speed: number; - }; + snapLocation: LatLng; } const { width, height } = Dimensions.get('window'); @@ -39,7 +41,7 @@ class Map extends Component { state: State = { trackUser: true, statusChanged: true, - current: { ...LOCATION, speed: 0 }, + snapLocation: LOCATION, }; componentDidUpdate(prevProps: Props) { @@ -48,49 +50,57 @@ class Map extends Component { } } - componentDidMount() { - this.watchLocation = Geolocation.watchPosition( - ({ coords }) => { - const { pushPin, walk } = this.props; - const { latitude, longitude, speed } = coords; - const current = { latitude, longitude, speed: speed || 0 }; + async componentDidMount() { + const { pushPin, updateLocation } = this.props; + if (await checkPermission(LOCATION_PERMISSIONS)) { + this.watchLocation = Geolocation.watchPosition( + ({ coords }) => { + const { walk } = this.props; + const current = pick(coords, ['latitude', 'longitude']); - this.setState(state => - produce(state, draft => { - if (walk.status === 'WALKING') { - const pinLength = walk.pins.length; - const pinInfo: actions.UpdateWalkInterface = { - ...current, - addDistance: 0, - }; - if (state.statusChanged) { - pushPin(pinInfo); - draft.statusChanged = false; - } else { - const previous = walk.pins[pinLength - 1]; - pinInfo.addDistance = calcDistance( - pick(previous, ['latitude', 'longitude']), - pick(current, ['latitude', 'longitude']) - ); - if (pinInfo.addDistance > 0.0098) pushPin(pinInfo); + this.setState(state => + produce(state, draft => { + // Update Walk Store + if (walk.status === 'WALKING') { + const pinInfo: walkActions.UpdateWalkInterface = { + ...current, + speed: coords.speed || 0, + addDistance: 0, + }; + if (state.statusChanged) { + pushPin(pinInfo); + draft.statusChanged = false; + } else { + const previous = walk.pins[walk.pins.length - 1]; + pinInfo.addDistance = calcDistance( + pick(previous, ['latitude', 'longitude']), + current + ); + if (pinInfo.addDistance > 0.0098) pushPin(pinInfo); + } } - } - this.moveCameraToUser( - pick(current, ['latitude', 'longitude']), - state.trackUser - ); - draft.current = current; - }) - ); - }, - () => {}, - { - enableHighAccuracy: true, - distanceFilter: 2, // Listen moving on every 2m - interval: 5000, - fastestInterval: 2000, - } - ); + // Default Actions + this.moveCameraToUser(current, state.trackUser); + if (calcDistance(current, draft.snapLocation) > 0.05) { + updateLocation(current); + draft.snapLocation = current; + } + }) + ); + }, + err => { + if (err.PERMISSION_DENIED) { + Alert.alert('위치정보 요청이 거부되었습니다.'); + } + }, + { + enableHighAccuracy: true, + distanceFilter: 2, // Listen moving on every 2m + interval: 5000, + fastestInterval: 2000, + } + ); + } } componentWillUnmount() { @@ -111,7 +121,7 @@ class Map extends Component { handlePressTrackButton = () => { this.setState(state => produce(state, draft => { - const { latitude, longitude } = state.current; + const { latitude, longitude } = state.snapLocation; draft.trackUser = !state.trackUser; this.moveCameraToUser({ latitude, longitude }, draft.trackUser); }) @@ -143,5 +153,5 @@ class Map extends Component { export default connect( (state: ReducerState) => ({ walk: state.walk }), - { pushPin: actions.pushPin } + { pushPin: walkActions.pushPin, updateLocation: userActions.updateLocation } )(Map); diff --git a/src/pages/App/Map/TrackUser/TrackUser.tsx b/src/pages/Map/Map/TrackUser/TrackUser.tsx similarity index 81% rename from src/pages/App/Map/TrackUser/TrackUser.tsx rename to src/pages/Map/Map/TrackUser/TrackUser.tsx index c25c831b..24befe06 100644 --- a/src/pages/App/Map/TrackUser/TrackUser.tsx +++ b/src/pages/Map/Map/TrackUser/TrackUser.tsx @@ -7,7 +7,7 @@ interface Props { active: boolean; } -const trackUserSize = 56; +const trackUserSize = 50; const styles = StyleSheet.create({ button: { @@ -36,8 +36,12 @@ const TrackUser: React.FC = ({ handlePress, active }) => ( activeOpacity={1} onPress={handlePress}> ); diff --git a/src/pages/App/Map/TrackUser/index.ts b/src/pages/Map/Map/TrackUser/index.ts similarity index 100% rename from src/pages/App/Map/TrackUser/index.ts rename to src/pages/Map/Map/TrackUser/index.ts diff --git a/src/pages/App/Map/index.ts b/src/pages/Map/Map/index.ts similarity index 100% rename from src/pages/App/Map/index.ts rename to src/pages/Map/Map/index.ts diff --git a/src/pages/Walk/Upload/ImageCard/ImageCard.styles.ts b/src/pages/Map/Upload/ImageCard/ImageCard.styles.ts similarity index 78% rename from src/pages/Walk/Upload/ImageCard/ImageCard.styles.ts rename to src/pages/Map/Upload/ImageCard/ImageCard.styles.ts index 2de24821..4eab03b9 100644 --- a/src/pages/Walk/Upload/ImageCard/ImageCard.styles.ts +++ b/src/pages/Map/Upload/ImageCard/ImageCard.styles.ts @@ -27,12 +27,6 @@ export const views = StyleSheet.create({ right: -deleteSize / 2, width: deleteSize, height: deleteSize, - borderRadius: deleteSize / 2, - backgroundColor: color.white, - borderWidth: 1, - borderColor: color.grayDA, - justifyContent: 'center', - alignItems: 'center', }, }); @@ -42,7 +36,7 @@ export const icons = StyleSheet.create({ height: 23.6, }, delete: { - width: 9, - height: 9, + width: '100%', + height: '100%', }, }); diff --git a/src/pages/Walk/Upload/ImageCard/ImageCard.tsx b/src/pages/Map/Upload/ImageCard/ImageCard.tsx similarity index 73% rename from src/pages/Walk/Upload/ImageCard/ImageCard.tsx rename to src/pages/Map/Upload/ImageCard/ImageCard.tsx index 5e21a105..0c252c78 100644 --- a/src/pages/Walk/Upload/ImageCard/ImageCard.tsx +++ b/src/pages/Map/Upload/ImageCard/ImageCard.tsx @@ -4,6 +4,10 @@ import ImagePicker from 'react-native-image-picker'; import { NavigationScreenProp } from 'react-navigation'; import { ImageInterface } from 'src/components/module/ImageWithSticker/ImageWithSticker'; import { icons, views } from './ImageCard.styles'; +import { + checkPermission, + PICTURE_PERMISSIONS, +} from 'src/assets/functions/validate'; const ImageWrapper: React.FC<{ onPress: () => void; @@ -20,7 +24,7 @@ const ImageWrapper: React.FC<{ {onPressDelete && ( @@ -33,15 +37,20 @@ interface AddProps { } export const AddImageCard: React.FC = ({ handleLoad }) => { - const showImagePicker = () => { + const showImagePicker = async () => { const options = { title: '산책 사진 선택', + takePhotoButtonTitle: '사진 찍기', + chooseFromLibraryButtonTitle: '앨범에서 사진 선택', + cancelButtonTitle: '취소', storageOptions: { skipBackup: true, path: 'images' }, }; - ImagePicker.showImagePicker(options, res => { - if (res.didCancel || res.error) return; - handleLoad({ uri: res.uri }); - }); + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.showImagePicker(options, res => { + if (res.didCancel || res.error) return; + handleLoad({ uri: res.uri }); + }); + } }; return ( @@ -73,7 +82,13 @@ const ImageCard: React.FC = ({ }; return ( navigate('edit', { image, handleEdit })} + onPress={() => + navigate('edit', { + image, + handleEdit, + blackMode: /^rct-image-store|woodongdang/g.test(image.uri), + }) + } onPressDelete={() => handleDelete(index)}> diff --git a/src/pages/Walk/Upload/ImageCard/index.ts b/src/pages/Map/Upload/ImageCard/index.ts similarity index 100% rename from src/pages/Walk/Upload/ImageCard/index.ts rename to src/pages/Map/Upload/ImageCard/index.ts diff --git a/src/pages/Walk/Upload/Upload.styles.ts b/src/pages/Map/Upload/Upload.styles.ts similarity index 54% rename from src/pages/Walk/Upload/Upload.styles.ts rename to src/pages/Map/Upload/Upload.styles.ts index d46c619c..af23e912 100644 --- a/src/pages/Walk/Upload/Upload.styles.ts +++ b/src/pages/Map/Upload/Upload.styles.ts @@ -1,19 +1,23 @@ import { StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color, font } from 'src/theme'; +import { color, font, size } from 'src/theme'; export const views = StyleSheet.create({ input: { flex: 1, }, listView: { - paddingHorizontal: horizontalSize - 8, + paddingHorizontal: size.horizontal - 8, + }, + bottom: { + paddingHorizontal: 0, + marginBottom: size.horizontal, + flexDirection: 'row', }, }); export const texts = StyleSheet.create({ input: { - marginTop: 20, + marginTop: 18, color: color.black, fontSize: font.size.large, }, diff --git a/src/pages/Walk/Upload/Upload.tsx b/src/pages/Map/Upload/Upload.tsx similarity index 72% rename from src/pages/Walk/Upload/Upload.tsx rename to src/pages/Map/Upload/Upload.tsx index 87754351..af837ca2 100644 --- a/src/pages/Walk/Upload/Upload.tsx +++ b/src/pages/Map/Upload/Upload.tsx @@ -1,22 +1,29 @@ import produce from 'immer'; import { pick } from 'lodash'; import React, { PureComponent } from 'react'; -import { TextInput } from 'react-native'; +import { Alert, TextInput } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; -import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import withLoading, { LoadingProps } from 'src/components/base/withLoading'; import PageContainer from 'src/components/container/PageContainer'; import { ImageInterface } from 'src/components/module/ImageWithSticker/ImageWithSticker'; -import { Body, createFeed } from 'src/services/api/feed'; +import { createFeed } from 'src/services/api/feed'; import { uploadImages } from 'src/services/aws/s3'; +import * as userActions from 'src/store/actions/user'; +import * as walkActions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; import ImageCard, { AddImageCard } from './ImageCard'; import { texts, views } from './Upload.styles'; +import { + NavigationScreenProps, + NavigationActions, + StackActions, +} from 'react-navigation'; interface Props extends LoadingProps, NavigationScreenProps { - user: ReducerState['user']; walk: ReducerState['walk']; + updateStatus: typeof walkActions.updateStatus; + getUser: typeof userActions.getUser; } interface State { @@ -31,14 +38,22 @@ class Upload extends PureComponent { }; handleSave = async () => { - const { navigation, user, walk, toggleLoading } = this.props; - const now = new Date(); + const { + navigation, + walk, + toggleLoading, + getUser, + updateStatus, + } = this.props; + if (this.state.images.length === 0) { + Alert.alert('사진을 1장 이상 업로드 해주세요.'); + return; + } const uris = this.state.images.map(image => image.nextUri || image.uri); const images = await uploadImages({ uris, - email: user.email, table: 'feeds', - name: now.toUTCString(), + name: JSON.stringify(walk.pins[0]), })(toggleLoading); await createFeed({ images, @@ -46,8 +61,13 @@ class Upload extends PureComponent { pins: JSON.stringify(walk.pins), ...pick(walk, ['seconds', 'distance', 'steps', 'pees', 'poos']), }); - navigation.popToTop(); - navigation.getParam('handleDismiss')(); + await getUser(); + updateStatus('READY'); + const action = StackActions.reset({ + index: 0, + actions: [NavigationActions.navigate({ routeName: 'map' })], + }); + navigation.dispatch(action); }; handleChangeMemo = (memo: string) => { @@ -57,7 +77,7 @@ class Upload extends PureComponent { handleAddImage = (image: ImageInterface) => { this.setState(state => produce(state, draft => { - draft.images.push(image); + draft.images = [image, ...state.images]; }) ); }; @@ -105,13 +125,13 @@ class Upload extends PureComponent { ))} ), - styles: { paddingHorizontal: 0, flexDirection: 'row' }, + styles: views.bottom, }} showBorder> { } } -export default connect((state: ReducerState) => ({ - user: state.user, - walk: state.walk, -}))(withLoading(Upload)); +export default connect( + (state: ReducerState) => ({ + walk: state.walk, + }), + { + updateStatus: walkActions.updateStatus, + getUser: userActions.getUser, + } +)(withLoading(Upload)); diff --git a/src/pages/Walk/Upload/index.ts b/src/pages/Map/Upload/index.ts similarity index 100% rename from src/pages/Walk/Upload/index.ts rename to src/pages/Map/Upload/index.ts diff --git a/src/pages/Walk/Walk/MarkerButton/MarkerButton.tsx b/src/pages/Map/Walk/MarkerButton/MarkerButton.tsx similarity index 95% rename from src/pages/Walk/Walk/MarkerButton/MarkerButton.tsx rename to src/pages/Map/Walk/MarkerButton/MarkerButton.tsx index 6e36565b..54e00e83 100644 --- a/src/pages/Walk/Walk/MarkerButton/MarkerButton.tsx +++ b/src/pages/Map/Walk/MarkerButton/MarkerButton.tsx @@ -17,7 +17,7 @@ const styles = StyleSheet.create({ height: btnSize, marginTop: width * 0.088 - btnSize / 2, borderRadius: btnSize / 2, - backgroundColor: color.bluePastel, + backgroundColor: color.blue, justifyContent: 'center', alignItems: 'center', ...shadow.shallow, diff --git a/src/pages/Walk/Walk/MarkerButton/index.ts b/src/pages/Map/Walk/MarkerButton/index.ts similarity index 100% rename from src/pages/Walk/Walk/MarkerButton/index.ts rename to src/pages/Map/Walk/MarkerButton/index.ts diff --git a/src/pages/Map/Walk/Prepare/Prepare.tsx b/src/pages/Map/Walk/Prepare/Prepare.tsx new file mode 100644 index 00000000..0c432fbf --- /dev/null +++ b/src/pages/Map/Walk/Prepare/Prepare.tsx @@ -0,0 +1,110 @@ +import React, { PureComponent } from 'react'; +import { + Dimensions, + View, + FlatList, + Image, + SafeAreaView, + StyleSheet, +} from 'react-native'; + +interface ImageInterface { + ic_num: NodeRequire; + img_prepare: NodeRequire; +} + +interface Props { + onFinish: () => void; +} + +interface State { + index: number; +} + +const images: ImageInterface[] = [ + { + ic_num: require('src/assets/icons/ic_num_3.png'), + img_prepare: require('src/assets/images/img_prepare_3.png'), + }, + { + ic_num: require('src/assets/icons/ic_num_2.png'), + img_prepare: require('src/assets/images/img_prepare_2.png'), + }, + { + ic_num: require('src/assets/icons/ic_num_1.png'), + img_prepare: require('src/assets/images/img_prepare_1.png'), + }, + { + ic_num: require('src/assets/icons/ic_go.png'), + img_prepare: require('src/assets/images/img_prepare_go.png'), + }, +]; + +const { width, height } = Dimensions.get('window'); +const wrapperWidth = width * 0.802; +const iconHeight = height * 0.135; +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + }, + iconWrapper: { + width: wrapperWidth, + height: iconHeight, + }, + icon: { + width: '100%', + height: iconHeight, + resizeMode: 'contain', + }, + image: { + marginTop: height * 0.057, + width: wrapperWidth, + height: height * 0.519, + resizeMode: 'contain', + }, +}); + +class Prepare extends PureComponent { + private scroll = React.createRef>(); + state: State = { index: 0 }; + + componentDidMount() { + const scroll = this.scroll.current; + const interval = setInterval(() => { + const index = this.state.index + 1; + if (index === images.length) { + clearInterval(interval); + this.props.onFinish(); + } else { + this.setState({ index }); + if (scroll) scroll.scrollToIndex({ index, animated: true }); + } + }, 1000); + } + + render() { + const { index } = this.state; + return ( + + + {}} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item }) => ( + + )} + /> + + + + ); + } +} + +export default Prepare; diff --git a/src/pages/Map/Walk/Prepare/index.ts b/src/pages/Map/Walk/Prepare/index.ts new file mode 100644 index 00000000..061edb72 --- /dev/null +++ b/src/pages/Map/Walk/Prepare/index.ts @@ -0,0 +1 @@ +export { default } from './Prepare'; diff --git a/src/pages/Walk/Walk/StatusButton/StatusButton.tsx b/src/pages/Map/Walk/StatusButton/StatusButton.tsx similarity index 90% rename from src/pages/Walk/Walk/StatusButton/StatusButton.tsx rename to src/pages/Map/Walk/StatusButton/StatusButton.tsx index 03405e7e..72c92d0d 100644 --- a/src/pages/Walk/Walk/StatusButton/StatusButton.tsx +++ b/src/pages/Map/Walk/StatusButton/StatusButton.tsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import { NavigationScreenProps, withNavigation } from 'react-navigation'; import * as actions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; -import { color } from 'src/theme'; +import { color, font } from 'src/theme'; import { statusBtn } from '../Walk.styles'; import { TouchableOpacity, @@ -10,6 +10,7 @@ import { StyleSheet, Animated, View, + Text, } from 'react-native'; interface Props extends NavigationScreenProps { @@ -71,6 +72,19 @@ const styles = StyleSheet.create({ right: 0, backgroundColor: '#FF6A67', }, + actionIndicator: { + position: 'absolute', + left: 0, + bottom: -25, + right: 0, + width: statusBtn, + alignItems: 'center', + }, + indicatorText: { + fontSize: 13, + fontFamily: font.family.NanumSquareRoundB, + color: color.gray48, + }, }); class StatusButton extends PureComponent { @@ -180,6 +194,11 @@ class StatusButton extends PureComponent { /> )} + {status === 'WALKING' && ( + + 길게 눌러서 종료 + + )} Math.ceil(size * scale); export const views = StyleSheet.create({ container: { @@ -43,7 +51,7 @@ export const views = StyleSheet.create({ }, gpsInfoWrapper: { width: '100%', - marginTop: height * 0.045, + marginTop: 50, paddingHorizontal: '11.5%', flexDirection: 'row', justifyContent: 'space-between', @@ -78,7 +86,7 @@ export const fonts = StyleSheet.create({ marginTop: 'auto', marginBottom: 12, color: color.blue, - fontSize: 68, + fontSize: scaledSize(68), fontFamily: font.family.NanumSquareRoundEB, letterSpacing: -4, }, diff --git a/src/pages/Walk/Walk/Walk.tsx b/src/pages/Map/Walk/Walk.tsx similarity index 80% rename from src/pages/Walk/Walk/Walk.tsx rename to src/pages/Map/Walk/Walk.tsx index e0f4482c..d6bdb5f0 100644 --- a/src/pages/Walk/Walk/Walk.tsx +++ b/src/pages/Map/Walk/Walk.tsx @@ -1,18 +1,30 @@ import React, { Component } from 'react'; -import { Image, SafeAreaView, Text, View } from 'react-native'; import BackgroundTimer from 'react-native-background-timer'; +import ImagePicker from 'react-native-image-picker'; import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import TopNavbar from 'src/components/module/TopNavbar'; import * as actions from 'src/store/actions/walk'; import { ReducerState } from 'src/store/reducers'; import MarkerButton from './MarkerButton'; +import Prepare from './Prepare'; import StatusButton from './StatusButton'; -import Trailor from './Trailor'; import { fonts, icons, views } from './Walk.styles'; +import { + CameraRoll, + Image, + SafeAreaView, + Text, + View, + Platform, +} from 'react-native'; import Pedometer, { PedometerInterface, } from '@JWWon/react-native-universal-pedometer'; +import { + checkPermission, + PICTURE_PERMISSIONS, +} from 'src/assets/functions/validate'; interface WalkInfoInterface { unit: 'Km' | '걸음' | 'Kcal'; @@ -65,7 +77,22 @@ class Walk extends Component { } } - trailorWillUnmount = () => { + launchCamera = async () => { + const options = { + cameraType: 'back' as 'back', + mediaType: 'photo' as 'photo', + storageOptions: { + cameraRoll: Platform.OS === 'ios', + skipBackup: true, + waitUntilSaved: true, + }, + }; + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.launchCamera(options, res => {}); + } + }; + + onPrepareWillUnmount = () => { const { updateStatus } = this.props; updateStatus('WALKING'); }; @@ -77,7 +104,7 @@ class Walk extends Component { render() { const { updateLatestPin } = this.props; - const { distance, status, seconds, steps } = this.props.walk; + const { distance, status, seconds, steps, speed } = this.props.walk; const gpsInfoList: WalkInfoInterface[] = [ { value: distance, unit: 'Km' }, { value: steps, unit: '걸음' }, @@ -87,7 +114,7 @@ class Walk extends Component { return ( {status === 'READY' ? ( - + ) : ( <> @@ -102,7 +129,7 @@ class Walk extends Component { ), }} right={{ - handlePress: () => {}, + handlePress: this.launchCamera, view: ( { /> 1.11 + ? require('src/assets/images/img_running.gif') + : require('src/assets/images/img_walking.gif') + : require('src/assets/images/img_standing.jpg') + } /> {convertSecToTime(seconds)} diff --git a/src/pages/Walk/Walk/index.ts b/src/pages/Map/Walk/index.ts similarity index 100% rename from src/pages/Walk/Walk/index.ts rename to src/pages/Map/Walk/index.ts diff --git a/src/pages/Map/index.ts b/src/pages/Map/index.ts new file mode 100644 index 00000000..58b35ba8 --- /dev/null +++ b/src/pages/Map/index.ts @@ -0,0 +1,60 @@ +import { Animated, Easing } from 'react-native'; +import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; +import EditScreen from './Edit'; +import FinishScreen from './Finish'; +import MapScreen from './Map'; +import UploadScreen from './Upload'; +import WalkScreen from './Walk'; +import { + MapListNavigator as PlaceMapNavigator, + SearchNavigator as PlaceSearchNavigator, +} from 'src/pages/Place'; + +const FinishNavigator = createStackNavigator( + { + finish: FinishScreen, + upload: UploadScreen, + edit: EditScreen, + }, + { + initialRouteName: 'finish', + headerMode: 'none', + } +); + +const WalkNavigator = createSwitchNavigator( + { + walk: WalkScreen, + finish: FinishNavigator, + }, + { + initialRouteName: 'walk', + backBehavior: 'initialRoute', + } +); + +const MapNavigator = createStackNavigator( + { + map: MapScreen, + walk: WalkNavigator, + placeMap: PlaceMapNavigator, + placeSearch: PlaceSearchNavigator, + }, + { + initialRouteName: 'map', + headerMode: 'none', + transitionConfig: () => ({ + transitionSpec: { + duration: 0, + timing: Animated.timing, + easing: Easing.step0, + }, + }), + } +); + +MapNavigator.navigationOptions = ({ navigation }: any) => ({ + tabBarVisible: navigation.state.index === 0, +}); + +export default MapNavigator; diff --git a/src/pages/Place/Detail/Detail.styles.ts b/src/pages/Place/Detail/Detail.styles.ts index 2606fd2c..dcb9b5a9 100644 --- a/src/pages/Place/Detail/Detail.styles.ts +++ b/src/pages/Place/Detail/Detail.styles.ts @@ -1,9 +1,8 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { cardHeight } from 'src/pages/Place/Map/Card'; -import { color, shadow } from 'src/theme'; +import { color, size } from 'src/theme'; const { height } = Dimensions.get('window'); +const cardMarginTop = 56; const paddingVertical = 20; export const views = StyleSheet.create({ @@ -14,34 +13,39 @@ export const views = StyleSheet.create({ right: 0, }, headerWrapper: { - height: height * 0.41, + height: height * 0.253, }, headerFilter: { flex: 1, backgroundColor: `${color.black}78`, }, + headerCheat: { + marginTop: 'auto', + marginLeft: 'auto', + width: size.horizontal + 60, + height: cardMarginTop, + }, infoHover: { - marginTop: -(cardHeight / 2 + paddingVertical), + marginTop: -cardMarginTop, marginBottom: 10, - height: cardHeight, - borderRadius: 5, - backgroundColor: color.white, - ...shadow.shallow, }, infoWrapper: { paddingVertical, - paddingHorizontal: horizontalSize, + paddingHorizontal: size.horizontal, backgroundColor: color.white, - borderTopWidth: 10, - borderColor: color.grayEF, + }, + hr: { + height: 10, + backgroundColor: color.grayEF, }, rowWrapper: { - marginVertical: 6, + marginVertical: 2, flexDirection: 'row', + flexWrap: 'wrap', }, imageWrapper: { - marginTop: 4, - paddingHorizontal: horizontalSize, + marginTop: 10, + paddingHorizontal: size.horizontal, }, image: { width: 140, @@ -64,15 +68,30 @@ export const icons = StyleSheet.create({ }); export const texts = StyleSheet.create({ - blackOpacity: { - flexBasis: 58, - lineHeight: 24, + label: { + flexBasis: 62, color: color.blackOpacity, + fontSize: 15, + alignSelf: 'flex-start', + }, + content: { + flex: 1, + color: color.gray48, + fontSize: 15, + }, + phone: { + textDecorationStyle: 'solid', + textDecorationColor: color.blue, + textDecorationLine: 'underline', + color: color.blue, + fontSize: 15, + }, + title: { fontSize: 16, + color: color.black, + paddingHorizontal: size.horizontal, }, - black: { + lineHeight: { lineHeight: 24, - color: color.black, - fontSize: 16, }, }); diff --git a/src/pages/Place/Detail/Detail.tsx b/src/pages/Place/Detail/Detail.tsx index 6749cf75..1c5f2f7c 100644 --- a/src/pages/Place/Detail/Detail.tsx +++ b/src/pages/Place/Detail/Detail.tsx @@ -1,15 +1,18 @@ +import { find, findIndex } from 'lodash'; import React, { PureComponent } from 'react'; import { NavigationScreenProps } from 'react-navigation'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; +import { connect } from 'react-redux'; +import { call } from 'src/assets/functions/link'; +import withMessage, { MessageProps } from 'src/components/base/withMessage'; import Rating from 'src/components/module/Rating'; import TopNavbar from 'src/components/module/TopNavbar'; -import Card from 'src/pages/Place/Map/Card'; -import { Place } from 'src/services/api/place'; -import { getReivews, Review } from 'src/services/api/review'; +import Card from 'src/pages/Place/MapList/Card'; +import { getReviews, Review } from 'src/services/api/review'; +import * as actions from 'src/store/actions/place'; +import { ReducerState } from 'src/store/reducers'; import { icons, texts, views } from './Detail.styles'; import ReviewCard from './ReviewCard'; import { - Alert, Image, ImageBackground, ScrollView, @@ -17,12 +20,22 @@ import { View, SafeAreaView, FlatList, + TouchableOpacity, + Platform, } from 'react-native'; +interface Props extends NavigationScreenProps, MessageProps { + user: ReducerState['user']; + scrap: typeof actions.scrap; + unScrap: typeof actions.unScrap; +} + interface State { + isScrap: boolean; reviews: Review[]; } +// Helpers function showOfficeHour(officeHour: { default: string; weekend?: string; @@ -37,31 +50,62 @@ function showOfficeHour(officeHour: { return message; } -class Detail extends PureComponent { - place: Place = this.props.navigation.getParam('place'); +const isPhoneNumber = (value: string) => + /(^0[0-9]{1,2}-)?[0-9]{3,4}-[0-9]{4}$/g.test(value); + +class Detail extends PureComponent { + place: actions.Place = this.props.navigation.getParam('place'); - state: State = { reviews: [] }; + state: State = { + isScrap: + find(this.props.user.places, place => place === this.place._id) !== + undefined, + reviews: [], + }; async componentDidMount() { - this.setState({ reviews: await getReivews({ place: this.place._id }) }); + const reviews = await getReviews({ place: this.place._id }); + this.setState({ reviews }); } - renderRow = (label: string, data: string) => ( - - {label} - {data} - - ); + handleToggleScrap = async () => { + const { scrap, unScrap, showMessage } = this.props; + if (this.state.isScrap) { + await unScrap({ id: this.place._id }); + this.setState({ isScrap: false }); + showMessage('내 상점에서 삭제했습니다.'); + } else { + await scrap({ id: this.place._id }); + this.setState({ isScrap: true }); + showMessage('내 상점에 추가되었습니다.'); + } + }; handleCreateReview = (review: Review) => { this.setState({ reviews: [...this.state.reviews, review] }); }; + handleUpdateReview = (review: Review) => { + const index = findIndex( + this.state.reviews, + item => item._id === review._id + ); + const reviews = [...this.state.reviews]; + reviews[index] = review; + this.setState({ reviews }); + }; + + handleDeleteReview = (id: string) => { + const reviews = this.state.reviews.filter(review => review._id !== id); + this.setState({ reviews }); + }; + handleRatingChange = (rating: number) => { const { navigation } = this.props; navigation.navigate('review', { rating, - place: this.place, + place: this.place._id, + title: this.place.name, handleAddReview: this.handleCreateReview, }); }; @@ -73,59 +117,131 @@ class Detail extends PureComponent { - + {thumbnail ? ( + + {Platform.OS === 'android' && ( + + )} + + ) : ( + Platform.OS === 'android' && ( + + ) + )} - + { - Alert.alert('저장했습니다.'); - }} + handlePress={this.handleToggleScrap} + width="100%" icon={ } + softShadow /> - {this.renderRow('장소', this.place.address)} - {this.place.officeHour && - this.renderRow('시간', showOfficeHour(this.place.officeHour))} - {this.place.contact && this.renderRow('문의', this.place.contact)} - - - - 사진 - - {images && ( - index.toString()} - renderItem={image => ( - - )} - showsHorizontalScrollIndicator={false} - horizontal - /> - )} + index.toString()} + renderItem={({ item }) => + item.value ? ( + + + {item.label} + + {isPhoneNumber(item.value) ? ( + + await call({ number: item.value as string }) + }> + {item.value} + + ) : ( + + {item.value} + + )} + + ) : null + } + /> + + {images && images.length > 0 && ( + <> + + 사진 + index.toString()} + renderItem={image => ( + + )} + showsHorizontalScrollIndicator={false} + horizontal + /> + + + + )} - 이 장소에 대한 평점을 남겨주세요. + 이 장소에 대한 평점을 남겨주세요. - - {this.state.reviews.map((review, index) => ( - - ))} - + + index.toString()} + renderItem={({ item }) => ( + + )} + /> { } } -export default Detail; +export default connect( + (state: ReducerState) => ({ + user: state.user, + }), + { scrap: actions.scrap, unScrap: actions.unScrap } +)(withMessage(Detail)); diff --git a/src/pages/Place/Detail/Header/Header.tsx b/src/pages/Place/Detail/Header/Header.tsx deleted file mode 100644 index 0991ff2f..00000000 --- a/src/pages/Place/Detail/Header/Header.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { Dimensions, ImageBackground, StyleSheet, View } from 'react-native'; -import { NavigationScreenProp } from 'react-navigation'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color } from 'src/theme'; - -interface Props { - thumbnail: string; - navigation: NavigationScreenProp; -} - -const { height } = Dimensions.get('window'); - -const styles = StyleSheet.create({ - container: { - height: height * 0.41, - }, - filter: { - flex: 1, - backgroundColor: `${color.black}78`, - }, - button: { - paddingLeft: horizontalSize, - paddingVertical: 14, - }, - icon: { - width: 18, - height: 16, - }, -}); - -const Header: React.FC = ({ thumbnail, navigation }) => ( - - - -); - -export default Header; diff --git a/src/pages/Place/Detail/Header/index.ts b/src/pages/Place/Detail/Header/index.ts deleted file mode 100644 index 579f1ac2..00000000 --- a/src/pages/Place/Detail/Header/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Header'; diff --git a/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx b/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx index 8f4aedc6..27df6fa5 100644 --- a/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx +++ b/src/pages/Place/Detail/ReviewCard/ReviewCard.tsx @@ -1,13 +1,22 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import FeedHeader from 'src/components/module/FeedHeader'; -import { Rating } from 'src/pages/Place/Map/Card/Card'; -import { Review } from 'src/services/api/review'; -import { color } from 'src/theme'; - -interface Props { +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import ActionSheet from 'react-native-actionsheet'; +import { NavigationScreenProps, withNavigation } from 'react-navigation'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { Rating } from 'src/pages/Place/MapList/Card/Card'; +import { deleteReview, reportReview, Review } from 'src/services/api/review'; +import { color, font, size } from 'src/theme'; + +interface Props extends NavigationScreenProps { review: Review; + onDelete: (id: string) => void; + onUpdate: (review: Review) => void; + isWriter: boolean; +} + +interface State { + options: string[]; } const styles = StyleSheet.create({ @@ -21,25 +30,120 @@ const styles = StyleSheet.create({ alignItems: 'center', }, contentWrapper: { - paddingLeft: horizontalSize + 42, - paddingRight: horizontalSize, + paddingLeft: size.horizontal + 42, + paddingRight: size.horizontal, }, description: { - marginTop: 6, + marginTop: 9, + color: '#484848', + }, + header: { + paddingHorizontal: size.horizontal, + paddingBottom: 12, + flexDirection: 'row', + alignItems: 'center', + }, + userName: { + marginLeft: 10, color: color.black, + fontSize: 16, + }, + time: { + flex: 1, + marginLeft: 4, + color: `${color.black}4D`, + fontSize: font.size.small, + }, + headerButton: { + paddingLeft: 16, + justifyContent: 'center', + alignItems: 'flex-end', + }, + smallDot: { + width: 3, + height: 3, + borderRadius: 1.5, + backgroundColor: '#2626267F', + marginVertical: 1, }, }); -const ReviewCard: React.FC = ({ review }) => { - return ( - - - - - {review.description} +class ReviewCard extends PureComponent { + private actionSheet = React.createRef(); + constructor(props: Props) { + super(props); + const options: string[] = props.isWriter ? ['수정', '삭제'] : ['신고']; + options.push('취소'); + this.state = { options }; + } + + handlePressDots = () => { + const actionSheet = this.actionSheet.current; + if (actionSheet) actionSheet.show(); + }; + + handleActionSheet = async (index: number) => { + const { review, isWriter, onDelete, onUpdate, navigation } = this.props; + if (isWriter) { + switch (index) { + case 0: + navigation.navigate('review', { + _id: review._id, + rating: review.rating, + place: review.place, + description: review.description, + title: '리뷰 수정하기', + handleUpdateReview: onUpdate, + }); + break; + case 1: + await deleteReview(review._id); + onDelete(review._id); + break; + } + } else { + if (index === 0) await reportReview(review._id); + } + }; + + render() { + const { review } = this.props; + + return ( + + + {review.user.repDog && ( + <> + + {review.user.repDog.name} + + )} + + {moment(review.updatedAt).fromNow()} + + + + + + + + + + {review.description} + + - - ); -}; + ); + } +} -export default ReviewCard; +export default withNavigation(ReviewCard); diff --git a/src/pages/Place/Map/Card/index.ts b/src/pages/Place/Map/Card/index.ts deleted file mode 100644 index 038d3d08..00000000 --- a/src/pages/Place/Map/Card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default, cardWidth, cardHeight } from './Card'; diff --git a/src/pages/Place/Map/index.ts b/src/pages/Place/Map/index.ts deleted file mode 100644 index 84bebe9d..00000000 --- a/src/pages/Place/Map/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Map'; diff --git a/src/pages/Place/Map/Card/Card.tsx b/src/pages/Place/MapList/Card/Card.tsx similarity index 73% rename from src/pages/Place/Map/Card/Card.tsx rename to src/pages/Place/MapList/Card/Card.tsx index e2c4ab25..a1907c7d 100644 --- a/src/pages/Place/Map/Card/Card.tsx +++ b/src/pages/Place/MapList/Card/Card.tsx @@ -1,48 +1,42 @@ import React from 'react'; import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; -import { Place } from 'src/services/api/place'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { Place } from 'src/store/actions/place'; import { color, font, shadow } from 'src/theme'; interface Props { place: Place; handlePress: () => void; icon: React.ReactNode; + width?: number | string; + softShadow?: boolean; } export const cardWidth = 327; -export const cardHeight = 104; -const thumbnailSize = 50; const styles = StyleSheet.create({ wrapper: { width: cardWidth, padding: 16, - height: cardHeight, borderRadius: 5, flexDirection: 'row', backgroundColor: color.white, ...shadow.deep, }, - placeIcon: { - width: thumbnailSize, - height: thumbnailSize, - borderRadius: thumbnailSize / 2, - borderWidth: 1, - borderColor: `${color.black}14`, - }, infoWrapper: { flex: 1, marginLeft: 12, marginTop: 4, }, name: { - fontSize: 16, + fontSize: font.size.large, color: color.black, - fontWeight: '500', + fontWeight: '600', }, describe: { fontSize: font.size.medium, - marginTop: 2, + marginTop: 4, + marginBottom: 10, color: color.blackOpacity, lineHeight: 16, }, @@ -87,16 +81,25 @@ export const Rating: React.FC<{ rating: number }> = ({ rating }) => { ); }; -const Info: React.FC = ({ place, handlePress, icon }) => { - const placeIcon = place.icon - ? { uri: place.icon } - : require('src/assets/icons/ic_place_default.png'); - +const Info: React.FC = ({ + place, + handlePress, + icon, + width, + softShadow, +}) => { return ( - - + + - {place.name} + + {place.name.trim()} + {place.label} diff --git a/src/pages/Place/MapList/Card/index.ts b/src/pages/Place/MapList/Card/index.ts new file mode 100644 index 00000000..f0061683 --- /dev/null +++ b/src/pages/Place/MapList/Card/index.ts @@ -0,0 +1 @@ +export { default, cardWidth } from './Card'; diff --git a/src/pages/Place/MapList/Label/Label.tsx b/src/pages/Place/MapList/Label/Label.tsx new file mode 100644 index 00000000..5eb293ca --- /dev/null +++ b/src/pages/Place/MapList/Label/Label.tsx @@ -0,0 +1,109 @@ +import React, { PureComponent } from 'react'; +import { FlatList } from 'react-native-gesture-handler'; +import { Label as LabelType } from 'src/store/actions/place'; +import { color } from 'src/theme'; +import { + NativeScrollEvent, + NativeSyntheticEvent, + StyleSheet, + Text, + TouchableOpacity, +} from 'react-native'; + +interface Props { + onChange: (label?: LabelType) => void; +} + +interface State { + isScroll: boolean; + label?: LabelType; +} + +const height = 30; +const styles = StyleSheet.create({ + container: { + flex: 1, + marginLeft: 10, + }, + listWrapper: { + paddingRight: 12, + }, + borderLeft: { + borderLeftWidth: 1, + borderColor: color.grayDA, + }, + itemWrapper: { + height, + marginLeft: 8, + paddingHorizontal: 12, + borderRadius: height / 2, + borderWidth: 1, + borderColor: color.grayDA, + backgroundColor: color.white, + justifyContent: 'center', + }, + text: { + color: color.black, + fontSize: 15, + }, +}); + +class Label extends PureComponent { + state: State = { isScroll: false, label: undefined }; + + handleChange = (label?: LabelType) => { + this.props.onChange(label); + this.setState({ label }); + }; + + handleScroll = (e: NativeSyntheticEvent) => { + const { contentOffset } = e.nativeEvent; + const { isScroll } = this.state; + if (contentOffset.x > 0) { + if (!isScroll) this.setState({ isScroll: true }); + } else { + if (isScroll) this.setState({ isScroll: false }); + } + }; + + render() { + const label = this.state.label || '전체'; + return ( + item} + style={[ + styles.container, + this.state.isScroll ? styles.borderLeft : null, + ]} + onScroll={this.handleScroll} + contentContainerStyle={styles.listWrapper} + renderItem={({ item, index }) => ( + + index === 0 ? this.handleChange() : this.handleChange(item) + }> + + {item} + + + )} + horizontal + showsHorizontalScrollIndicator={false} + /> + ); + } +} + +export default Label; diff --git a/src/pages/Place/MapList/Label/index.ts b/src/pages/Place/MapList/Label/index.ts new file mode 100644 index 00000000..a1e5f51f --- /dev/null +++ b/src/pages/Place/MapList/Label/index.ts @@ -0,0 +1 @@ +export { default } from './Label'; diff --git a/src/pages/Place/Map/Map.styles.ts b/src/pages/Place/MapList/MapList.styles.ts similarity index 50% rename from src/pages/Place/Map/Map.styles.ts rename to src/pages/Place/MapList/MapList.styles.ts index 5fccfdeb..335053ea 100644 --- a/src/pages/Place/Map/Map.styles.ts +++ b/src/pages/Place/MapList/MapList.styles.ts @@ -1,24 +1,23 @@ import { Dimensions, StyleSheet } from 'react-native'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; -import { color, font, shadow } from 'src/theme'; +import { color, font, size } from 'src/theme'; export const { width, height } = Dimensions.get('window'); export const filterHeight = 49; +const searchHeight = 38; export const views = StyleSheet.create({ container: { flex: 1, - justifyContent: 'flex-end', + justifyContent: 'space-between', }, filterWrapper: { height: filterHeight, - paddingHorizontal: horizontalSize, + paddingLeft: size.horizontal, backgroundColor: color.grayF9, flexDirection: 'row', alignItems: 'center', - borderTopWidth: 1, - borderBottomWidth: 1, - borderColor: color.grayB1, + borderBottomWidth: 0.5, + borderColor: '#DADCDF', }, map: { ...StyleSheet.absoluteFillObject, @@ -27,6 +26,20 @@ export const views = StyleSheet.create({ height: '100%', paddingRight: 20, }, + carousel: { + marginBottom: 20, + }, + reSearch: { + marginTop: 16, + alignSelf: 'center', + height: searchHeight, + borderWidth: 0.5, + borderColor: '#0000002e', + borderRadius: searchHeight / 2, + justifyContent: 'center', + paddingHorizontal: 12, + backgroundColor: color.white, + }, }); export const icons = StyleSheet.create({ @@ -40,3 +53,10 @@ export const icons = StyleSheet.create({ height: 40, }, }); + +export const texts = StyleSheet.create({ + reSearch: { + color: color.blue, + fontSize: font.size.medium, + }, +}); diff --git a/src/pages/Place/Map/Map.tsx b/src/pages/Place/MapList/MapList.tsx similarity index 68% rename from src/pages/Place/Map/Map.tsx rename to src/pages/Place/MapList/MapList.tsx index be08a259..9eb1f181 100644 --- a/src/pages/Place/Map/Map.tsx +++ b/src/pages/Place/MapList/MapList.tsx @@ -1,25 +1,32 @@ import produce from 'immer'; import { pick } from 'lodash'; import React, { PureComponent } from 'react'; -import { Image, SafeAreaView, ScrollViewProps, View } from 'react-native'; +import Carousel, { CarouselStatic } from 'react-native-snap-carousel'; import { NavigationScreenProps } from 'react-navigation'; import TopNavbar from 'src/components/module/TopNavbar'; -import TrackUser from 'src/pages/App/Map/TrackUser'; -import { Params, Place, searchPlace } from 'src/services/api/place'; +import TrackUser from 'src/pages/Map/Map/TrackUser'; +import { SearchParams, searchPlace } from 'src/services/api/place'; +import { Label as LabelType, Place } from 'src/store/actions/place'; import Card, { cardWidth } from './Card'; -import { height, icons, views, width } from './Map.styles'; +import Label from './Label'; +import { height, icons, texts, views, width } from './MapList.styles'; import MarkerView from './MarkerView'; import Range from './Range'; -import Carousel, { - CarouselStatic, - AdditionalParallaxProps, -} from 'react-native-snap-carousel'; +import { + Image, + SafeAreaView, + ScrollViewProps, + View, + Text, + TouchableOpacity, +} from 'react-native'; import MapView, { + EventUserLocation, LatLng, Marker, MapEvent, PROVIDER_GOOGLE, - EventUserLocation, + Region, } from 'react-native-maps'; const ASPECT_RATIO = width / height; @@ -30,9 +37,10 @@ interface State { places: Place[]; curPlace: number; trackUser: boolean; + showSearch: boolean; userCoord: LatLng; mapCoord: LatLng; - filter: { keyword?: string; range: number }; + filter: { range: number; label?: LabelType }; } interface Item { @@ -44,7 +52,7 @@ type CarouselInterface = Carousel & CarouselStatic & ScrollViewProps; -class Map extends PureComponent { +class MapList extends PureComponent { private map = React.createRef(); private carousel = React.createRef(); private loadUserLocation = false; @@ -53,6 +61,7 @@ class Map extends PureComponent { places: [], curPlace: 0, trackUser: false, + showSearch: false, userCoord: LOCATION, mapCoord: LOCATION, filter: { @@ -60,14 +69,17 @@ class Map extends PureComponent { }, }; - search = async (params: Params) => { + search = async (params: SearchParams) => { const places = await searchPlace(params); + const carousel = this.carousel.current; this.setState(state => produce(state, draft => { draft.places = places; draft.curPlace = 0; + if (state.showSearch) draft.showSearch = false; if (places.length > 0) { this.moveCameraToLocation(places[draft.curPlace].location); + if (carousel) carousel.snapToItem(draft.curPlace); } }) ); @@ -86,7 +98,12 @@ class Map extends PureComponent { }; stopTrackUser = () => { - if (this.state.trackUser) this.setState({ trackUser: false }); + this.setState(state => + produce(state, draft => { + if (state.trackUser) draft.trackUser = false; + if (!state.showSearch) draft.showSearch = true; + }) + ); }; handlePressTrackButton = () => { @@ -114,7 +131,7 @@ class Map extends PureComponent { const { id, coordinate } = e.nativeEvent; const curPlace = parseInt(id, 10); this.moveCameraToLocation(coordinate); - this.setState({ curPlace }); + this.setState({ curPlace, showSearch: false }); if (this.carousel.current) { this.carousel.current.snapToItem(curPlace); } @@ -124,21 +141,43 @@ class Map extends PureComponent { this.setState(state => produce(state, draft => { draft.filter.range = range; + if (state.showSearch) draft.showSearch = false; + this.search({ location: state.userCoord, ...draft.filter }); + }) + ); + }; + + handleLabelChange = (label?: LabelType) => { + this.setState(state => + produce(state, draft => { + if (label) draft.filter.label = label; + else delete draft.filter.label; + if (state.showSearch) draft.showSearch = false; this.search({ location: state.userCoord, ...draft.filter }); }) ); }; + handleMapLocationSerach = () => { + const { mapCoord, filter } = this.state; + this.search({ location: mapCoord, ...filter }); + }; + + handleRegionChange = (region: Region) => { + this.setState({ mapCoord: pick(region, ['latitude', 'longitude']) }); + }; + handleSnap = (index: number) => { this.setState(state => produce(state, draft => { draft.curPlace = index; + if (state.showSearch) draft.showSearch = false; this.moveCameraToLocation(state.places[draft.curPlace].location); }) ); }; - renderItem = ({ item }: Item, parallaxProps?: AdditionalParallaxProps) => ( + renderItem = ({ item }: Item) => ( this.moveToDetail(item)} @@ -167,9 +206,11 @@ class Map extends PureComponent { ), handlePress: () => this.props.navigation.goBack(null), }} + showBorder /> + @@ -183,6 +224,7 @@ class Map extends PureComponent { showsUserLocation={true} onTouchStart={this.stopTrackUser} onUserLocationChange={this.handleLocationChange} + onRegionChangeComplete={this.handleRegionChange} onMarkerPress={this.handleMarkerPress}> {places && places.map((place, index) => ( @@ -194,6 +236,15 @@ class Map extends PureComponent { ))} + + {this.state.showSearch && ( + + 여기서 재탐색 + + )} + { @@ -215,4 +270,4 @@ class Map extends PureComponent { } } -export default Map; +export default MapList; diff --git a/src/pages/Place/Map/MarkerView/MarkerView.tsx b/src/pages/Place/MapList/MarkerView/MarkerView.tsx similarity index 71% rename from src/pages/Place/Map/MarkerView/MarkerView.tsx rename to src/pages/Place/MapList/MarkerView/MarkerView.tsx index bb4c186e..a092c151 100644 --- a/src/pages/Place/Map/MarkerView/MarkerView.tsx +++ b/src/pages/Place/MapList/MarkerView/MarkerView.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Image, StyleSheet, View } from 'react-native'; -import { Place } from 'src/services/api/place'; +import { Place } from 'src/store/actions/place'; interface Props { place: Place; @@ -15,12 +15,12 @@ const styles = StyleSheet.create({ alignItems: 'center', }, pin: { - width: 20, - height: 20, + width: 24, + height: 32, }, place: { - width: 33.5, - height: 43.7, + width: 33, + height: 44, }, }); @@ -29,8 +29,8 @@ const MarkerView: React.FC = ({ place, selected }) => ( diff --git a/src/pages/Place/Map/MarkerView/index.ts b/src/pages/Place/MapList/MarkerView/index.ts similarity index 100% rename from src/pages/Place/Map/MarkerView/index.ts rename to src/pages/Place/MapList/MarkerView/index.ts diff --git a/src/pages/Place/Map/Range/Range.tsx b/src/pages/Place/MapList/Range/Range.tsx similarity index 68% rename from src/pages/Place/Map/Range/Range.tsx rename to src/pages/Place/MapList/Range/Range.tsx index 931aca89..5002a4f3 100644 --- a/src/pages/Place/Map/Range/Range.tsx +++ b/src/pages/Place/MapList/Range/Range.tsx @@ -1,10 +1,9 @@ import produce from 'immer'; import React, { PureComponent } from 'react'; import { rangeWithUnit } from 'src/assets/functions/print'; -import { horizontalSize } from 'src/components/container/PageContainer/PageContainer.styles'; import { height as navHeight } from 'src/components/module/TopNavbar/TopNavbar'; -import { color } from 'src/theme'; -import { filterHeight as resultHeight } from '../Map.styles'; +import { color, size } from 'src/theme'; +import { filterHeight as resultHeight } from '../MapList.styles'; import { Image, Modal, @@ -33,23 +32,21 @@ const styles = StyleSheet.create({ backgroundColor: color.black33Opacity, }, box: { - width: 80, + width: 72, backgroundColor: color.white, - marginTop: navHeight + resultHeight + 8, - marginLeft: horizontalSize, - borderWidth: 1, + marginTop: navHeight + resultHeight - 10, + paddingVertical: 7, + marginLeft: size.horizontal, borderRadius: 5, - paddingHorizontal: 8, - borderColor: color.grayB1, + alignItems: 'center', }, optionWrapper: { - height: 48, - justifyContent: 'center', + paddingVertical: 9, alignItems: 'center', }, - borderTop: { - borderTopWidth: 1, - borderColor: color.grayEF, + label: { + fontSize: 16, + color: color.black, }, }); @@ -73,37 +70,44 @@ class Range extends PureComponent { }; render() { - const { range } = this.props; - + const curRange = this.props.range; return ( <> - {rangeWithUnit(range)} + {rangeWithUnit(curRange, true)} - + - {RANGES.map((range, index) => ( + {RANGES.map(range => ( 0 ? styles.borderTop : null) }, - ]} + style={styles.optionWrapper} activeOpacity={0.7} onPress={() => this.handleChange(range)} key={range}> - {rangeWithUnit(range)} + + {rangeWithUnit(range, true)} + ))} diff --git a/src/pages/Place/Map/Range/index.ts b/src/pages/Place/MapList/Range/index.ts similarity index 100% rename from src/pages/Place/Map/Range/index.ts rename to src/pages/Place/MapList/Range/index.ts diff --git a/src/pages/Place/MapList/index.ts b/src/pages/Place/MapList/index.ts new file mode 100644 index 00000000..61feb387 --- /dev/null +++ b/src/pages/Place/MapList/index.ts @@ -0,0 +1 @@ +export { default } from './MapList'; diff --git a/src/pages/Place/Review/Review.styles.ts b/src/pages/Place/Review/Review.styles.ts index b30b2fe2..bc9b1f56 100644 --- a/src/pages/Place/Review/Review.styles.ts +++ b/src/pages/Place/Review/Review.styles.ts @@ -4,7 +4,7 @@ import { color } from 'src/theme'; export const views = StyleSheet.create({ header: { paddingTop: 20, - paddingBottom: 4, + paddingBottom: 12, alignItems: 'center', flexDirection: 'row', borderBottomWidth: 1, diff --git a/src/pages/Place/Review/Review.tsx b/src/pages/Place/Review/Review.tsx index ee19a8f5..02781101 100644 --- a/src/pages/Place/Review/Review.tsx +++ b/src/pages/Place/Review/Review.tsx @@ -3,7 +3,7 @@ import { Alert, Text, TextInput, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; import Rating from 'src/components/module/Rating'; -import { createReview } from 'src/services/api/review'; +import { createReview, updateReview } from 'src/services/api/review'; import { color } from 'src/theme'; import { texts, views } from './Review.styles'; @@ -12,21 +12,49 @@ interface State { description: string; } +/** + * params + * { + * place: string; + * rating: number; + * name: string; + * id: string; + * description?: string; + * handleAddReview?: (review: Review) => void; + * handleUpdateReview?: (review: Review) => void; + * } + */ class Review extends PureComponent { state: State = { rating: this.props.navigation.getParam('rating'), - description: '', + description: this.props.navigation.getParam('description') || '', }; handleSubmit = async () => { const { navigation } = this.props; - const place = navigation.getParam('place')._id; - const review = await createReview({ place, ...this.state }); - if (review) { - navigation.getParam('handleAddReview')(review); - Alert.alert('리뷰가 작성되었습니다.'); + const place = navigation.getParam('place'); + const _id = navigation.getParam('_id'); + try { + if (_id) { + const review = await updateReview({ _id, place, ...this.state }); + if (review) { + navigation.getParam('handleUpdateReview')(review); + Alert.alert('리뷰가 수정되었습니다.'); + navigation.goBack(null); + } + } else { + const review = await createReview({ place, ...this.state }); + if (review) { + navigation.getParam('handleAddReview')(review); + Alert.alert('리뷰가 작성되었습니다.'); + navigation.goBack(null); + } + } + } catch (e) { + if (e.response.data.statusCode === 409) { + Alert.alert(e.response.data.message); + } } - navigation.goBack(null); }; handleChange = (description: string) => { @@ -43,7 +71,7 @@ class Review extends PureComponent { return ( @@ -59,6 +87,7 @@ class Review extends PureComponent { multiline={true} onChangeText={this.handleChange} onSubmitEditing={this.handleSubmit} + autoFocus={true} returnKeyType="done" autoCapitalize="none" autoCorrect={false} diff --git a/src/pages/Place/Search/Search.tsx b/src/pages/Place/Search/Search.tsx index ecfa498b..379192b0 100644 --- a/src/pages/Place/Search/Search.tsx +++ b/src/pages/Place/Search/Search.tsx @@ -1,28 +1,42 @@ import { pick } from 'lodash'; -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; +import { Alert } from 'react-native'; import Geolocation from 'react-native-geolocation-service'; import { NavigationScreenProps } from 'react-navigation'; import TextAutocomplete from 'src/components/module/TextAutocomplete'; -import { Place, searchPlace } from 'src/services/api/place'; +import { searchPlace } from 'src/services/api/place'; +import { Place } from 'src/store/actions/place'; +import { + LOCATION_PERMISSIONS, + checkPermission, +} from 'src/assets/functions/validate'; interface State { - places: Place[]; + location: { latitude: number; longitude: number }; } -class Search extends PureComponent { - state: State = { - places: [], - }; +class Search extends Component { + state: State = { location: { latitude: 0, longitude: 0 } }; - handleChange = (keyword: string) => { - const { places } = this.state; - if (places.length === 0 && keyword.length > 1) { - Geolocation.getCurrentPosition(async ({ coords }) => { - const location = pick(coords, ['latitude', 'longitude']); - const places = await searchPlace({ location, keyword, range: 100 }); - this.setState({ places }); - }); + async componentDidMount() { + if (await checkPermission(LOCATION_PERMISSIONS)) { + Geolocation.getCurrentPosition( + async ({ coords }) => { + this.setState({ location: pick(coords, ['latitude', 'longitude']) }); + }, + err => { + if (err.PERMISSION_DENIED) { + Alert.alert('위치정보 요청이 거부되었습니다.'); + } + } + ); } + } + + handleSearch = async (keyword: string) => { + const { location } = this.state; + const places = await searchPlace({ location, keyword }); + return places; }; handleSubmit = (place: Place) => { @@ -31,16 +45,13 @@ class Search extends PureComponent { }; render() { - const { places } = this.state; - return ( this.props.navigation.goBack(null)} + onSubmit={this.handleSubmit} + onSearch={this.handleSearch} + onDismiss={() => this.props.navigation.goBack(null)} /> ); } diff --git a/src/pages/Place/index.ts b/src/pages/Place/index.ts index 725678a5..4252cf25 100644 --- a/src/pages/Place/index.ts +++ b/src/pages/Place/index.ts @@ -1,6 +1,6 @@ -import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; +import { createStackNavigator } from 'react-navigation'; import DetailScreen from './Detail'; -import MapScreen from './Map'; +import MapListScreen from './MapList'; import ReviewScreen from './Review'; import SearchScreen from './Search'; @@ -19,9 +19,9 @@ export const SearchNavigator = createStackNavigator( } ); -export const MapNavigator = createStackNavigator( +export const MapListNavigator = createStackNavigator( { - default: MapScreen, + default: MapListScreen, detail: DetailScreen, review: ReviewScreen, }, diff --git a/src/pages/Profile/Edit/Edit.styles.ts b/src/pages/Profile/Edit/Edit.styles.ts new file mode 100644 index 00000000..0018e41b --- /dev/null +++ b/src/pages/Profile/Edit/Edit.styles.ts @@ -0,0 +1,22 @@ +import { StyleSheet } from 'react-native'; + +const thumbnailEditSize = 26; + +export const views = StyleSheet.create({ + thumbnailWrapper: { + marginTop: 30, + marginBottom: 24, + alignItems: 'center', + }, +}); + +export const icons = StyleSheet.create({ + edit: { + position: 'absolute', + bottom: 0, + right: 0, + width: thumbnailEditSize, + height: thumbnailEditSize, + resizeMode: 'contain', + }, +}); diff --git a/src/pages/Profile/Edit/Edit.tsx b/src/pages/Profile/Edit/Edit.tsx new file mode 100644 index 00000000..6ae632b9 --- /dev/null +++ b/src/pages/Profile/Edit/Edit.tsx @@ -0,0 +1,278 @@ +import produce from 'immer'; +import { pick } from 'lodash'; +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import { TouchableOpacity } from 'react-native-gesture-handler'; +import ImagePicker from 'react-native-image-picker'; +import { NavigationScreenProps } from 'react-navigation'; +import { connect } from 'react-redux'; +import breeds from 'src/assets/consts/breeds.json'; +import withLoading, { LoadingProps } from 'src/components/base/withLoading'; +import PageContainer from 'src/components/container/PageContainer'; +import DateInput, { HandleChangeDate } from 'src/components/module/DateInput'; +import DefaultImage from 'src/components/module/DefaultImage'; +import Selector, { HandleChangeSelector } from 'src/components/module/Selector'; +import TextAutocomplete from 'src/components/module/TextAutocomplete'; +import TextInput, { HandleChangeText } from 'src/components/module/TextInput'; +import { uploadImage } from 'src/services/aws/s3'; +import * as dogActions from 'src/store/actions/dog'; +import { ReducerState } from 'src/store/reducers'; +import { icons, views } from './Edit.styles'; +import { + Image, + Modal, + TextInput as Input, + View, + Dimensions, +} from 'react-native'; +import { + checkPermission, + PICTURE_PERMISSIONS, +} from 'src/assets/functions/validate'; + +interface Props extends LoadingProps, NavigationScreenProps { + user: ReducerState['user']; + createDog: typeof dogActions.createDog; + updateDog: typeof dogActions.updateDog; +} + +interface State + extends Pick< + dogActions.UpdateDog, + Exclude + > { + showModal: boolean; + birth?: Date; + error: { + name?: string; + breed?: string; + gender?: string; + }; +} + +const { height } = Dimensions.get('window'); + +class Edit extends PureComponent { + private create: boolean = this.props.navigation.getParam('createMode'); + private inputs = { + name: React.createRef(), + breed: React.createRef(), + gender: React.createRef(), + weight: React.createRef(), + info: React.createRef(), + }; + + state: State = { + _id: '', + name: '', + breed: '', + gender: '', + error: {}, + showModal: false, + }; + + componentDidMount() { + const { user } = this.props; + if (!this.create && user.repDog) { + this.setState({ + ...this.state, + ...pick(user.repDog, [ + '_id', + 'name', + 'breed', + 'gender', + 'thumbnail', + 'weight', + 'info', + ]), + birth: user.repDog.birth + ? moment(user.repDog.birth.split('.')).toDate() + : undefined, + }); + } + } + + toggleModal = () => { + this.setState({ showModal: !this.state.showModal }); + }; + + handleChange = ({ + name, + value, + }: HandleChangeText | HandleChangeSelector | HandleChangeDate) => { + this.setState(state => { + const error = { ...state.error }; + if (name === 'name' || name === 'gender') { + delete error[name]; + } + return { ...state, error, [name]: value }; + }); + }; + + handleBreedChange = ({ name }: { name: string }) => { + this.setState(state => + produce(state, draft => { + draft.breed = name; + delete draft.error.breed; + }) + ); + this.toggleModal(); + }; + + handleImagePicker = async () => { + const options = { + title: '프로필 선택', + takePhotoButtonTitle: '사진 찍기', + chooseFromLibraryButtonTitle: '앨범에서 사진 선택', + customButtons: [{ name: 'default', title: '우동댕 기본 이미지' }], + cancelButtonTitle: '취소', + storageOptions: { skipBackup: true, path: 'images' }, + }; + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.showImagePicker(options, res => { + if (res.didCancel || res.error) return; + this.setState({ thumbnail: res.customButton ? '' : res.uri }); + }); + } + }; + + validate = async () => { + await this.setState(state => + produce(state, draft => { + if (!state.name) draft.error.name = '반려견의 이름을 입력해주세요.'; + if (!state.breed) draft.error.breed = '반려견의 품종을 입력해주세요.'; + if (!state.gender) draft.error.gender = '반려견의 성별을 입력해주세요.'; + }) + ); + }; + + handleSubmit = async () => { + const { + createDog, + updateDog, + navigation, + user, + toggleLoading, + } = this.props; + await this.validate(); + const { showModal, error, birth: prevBirth, _id, ...state } = this.state; + if (Object.keys(error).length === 0) { + let birth: string | undefined = undefined; + // Parse state data + if (state.thumbnail !== undefined) { + const url = await uploadImage({ + table: 'dogs', + label: user.email, + name: state.name, + uri: state.thumbnail, + })(toggleLoading); + state.thumbnail = url; + } + if (prevBirth !== undefined) { + birth = moment(prevBirth).format('YYYY.MM.DD'); + } + if (state.weight) { + state.weight = parseFloat((state.weight as any) as string); + } + // Call reducer + if (_id) await updateDog({ ...state, birth, _id }); + else await createDog({ ...state, birth }); + navigation.goBack(null); + } + }; + + render() { + const { navigation } = this.props; + + return ( + + + + + + + + + null} + handleFocus={this.toggleModal} + /> + + + + + + + + + ); + } +} + +export default connect( + (state: ReducerState) => ({ user: state.user }), + { createDog: dogActions.createDog, updateDog: dogActions.updateDog } +)(withLoading(Edit)); diff --git a/src/pages/Profile/Edit/index.ts b/src/pages/Profile/Edit/index.ts new file mode 100644 index 00000000..f9b9fcdc --- /dev/null +++ b/src/pages/Profile/Edit/index.ts @@ -0,0 +1 @@ +export { default } from './Edit'; diff --git a/src/pages/Profile/Home/Badges/Badges.tsx b/src/pages/Profile/Home/Badges/Badges.tsx new file mode 100644 index 00000000..afd240c7 --- /dev/null +++ b/src/pages/Profile/Home/Badges/Badges.tsx @@ -0,0 +1,196 @@ +import { find } from 'lodash'; +import React from 'react'; +import { ReducerState } from 'src/store/reducers'; +import { font } from 'src/theme'; +import { + FlatList, + Image, + StyleSheet, + Text, + View, + Dimensions, +} from 'react-native'; + +const { width } = Dimensions.get('window'); +const badgeSize = 78; +const space = (width - badgeSize * 4) / 5; + +const styles = StyleSheet.create({ + container: { + marginTop: 23, + }, + wrapper: { + width: badgeSize, + marginHorizontal: space / 2, + alignItems: 'center', + }, + icon: { + width: 64, + height: 53, + resizeMode: 'contain', + }, + label: { + marginTop: 10, + color: '#484848', + fontSize: font.size.small, + }, +}); + +const Badges: React.FC<{ user: ReducerState['user'] }> = ({ user }) => { + let distance = 0; + let feedLength = 0; + let scrapLength = 0; + let firstPee = false; + let firstPoo = false; + if (user.repDog) { + feedLength = user.repDog.feeds.length; + scrapLength = user.places.length; + user.repDog.histories.forEach(history => { + distance += history.distance; + if (!firstPee && history.pees > 0) firstPee = true; + if (!firstPoo && history.poos > 0) firstPoo = true; + }); + } + + return ( + <> + + = 1, + }, + { + label: '3km', + name: '3km', + iconOn: require('src/assets/badges/badge_3km_on.png'), + iconOff: require('src/assets/badges/badge_3km_off.png'), + achieve: distance >= 3, + }, + { + label: '5km', + name: '5km', + iconOn: require('src/assets/badges/badge_5km_on.png'), + iconOff: require('src/assets/badges/badge_5km_off.png'), + achieve: distance >= 5, + }, + { + label: '10km', + name: '10km', + iconOn: require('src/assets/badges/badge_10km_on.png'), + iconOff: require('src/assets/badges/badge_10km_off.png'), + achieve: distance >= 10, + }, + { + label: '산책 1회', + name: 'walk_1', + iconOn: require('src/assets/badges/badge_walk_1_on.png'), + iconOff: require('src/assets/badges/badge_walk_1_off.png'), + achieve: feedLength > 0, + }, + { + label: '산책 3회', + name: 'walk_3', + iconOn: require('src/assets/badges/badge_walk_3_on.png'), + iconOff: require('src/assets/badges/badge_walk_3_off.png'), + achieve: feedLength > 2, + }, + { + label: '산책 5회', + name: 'walk_5', + iconOn: require('src/assets/badges/badge_walk_5_on.png'), + iconOff: require('src/assets/badges/badge_walk_5_off.png'), + achieve: feedLength > 4, + }, + { + label: '산책 10회', + name: 'walk_10', + iconOn: require('src/assets/badges/badge_walk_10_on.png'), + iconOff: require('src/assets/badges/badge_walk_10_off.png'), + achieve: feedLength > 9, + }, + { + label: '스크랩 1회', + name: 'scrap_1', + iconOn: require('src/assets/badges/badge_scrap_1_on.png'), + iconOff: require('src/assets/badges/badge_scrap_1_off.png'), + achieve: scrapLength > 0, + }, + { + label: '스크랩 3회', + name: 'scrap_3', + iconOn: require('src/assets/badges/badge_scrap_3_on.png'), + iconOff: require('src/assets/badges/badge_scrap_3_off.png'), + achieve: scrapLength > 2, + }, + { + label: '스크랩 5회', + name: 'scrap_5', + iconOn: require('src/assets/badges/badge_scrap_5_on.png'), + iconOff: require('src/assets/badges/badge_scrap_5_off.png'), + achieve: scrapLength > 4, + }, + { + label: '스크랩 10회', + name: 'scrap_10', + iconOn: require('src/assets/badges/badge_scrap_10_on.png'), + iconOff: require('src/assets/badges/badge_scrap_10_off.png'), + achieve: scrapLength > 9, + }, + ]} + showsVerticalScrollIndicator={false} + showsHorizontalScrollIndicator={false} + numColumns={4} + keyExtractor={(i, index) => index.toString()} + style={{ flex: 1, paddingHorizontal: space / 2, marginTop: -8 }} + columnWrapperStyle={styles.container} + renderItem={({ item }) => ( + + + {item.label} + + )} + /> + + ); +}; + +export default Badges; diff --git a/src/pages/Profile/Home/Badges/index.ts b/src/pages/Profile/Home/Badges/index.ts new file mode 100644 index 00000000..677493ec --- /dev/null +++ b/src/pages/Profile/Home/Badges/index.ts @@ -0,0 +1 @@ +export { default } from './Badges'; diff --git a/src/pages/Profile/Home/Home.styles.ts b/src/pages/Profile/Home/Home.styles.ts new file mode 100644 index 00000000..a3bf05ad --- /dev/null +++ b/src/pages/Profile/Home/Home.styles.ts @@ -0,0 +1,152 @@ +import { Dimensions, StyleSheet } from 'react-native'; +import { color, font, size } from 'src/theme'; + +const { height } = Dimensions.get('window'); + +export const views = StyleSheet.create({ + container: { + flex: 1, + }, + header: { + paddingBottom: 32, + flexDirection: 'row', + alignItems: 'center', + backgroundColor: color.white, + paddingHorizontal: size.horizontal, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + infoWrapper: { + marginLeft: 20, + flex: 1, + justifyContent: 'center', + }, + selectDog: { + flexDirection: 'row', + alignItems: 'center', + }, + updateProfile: { + width: 80, + alignItems: 'center', + borderWidth: 1, + borderColor: color.grayDA, + borderRadius: 2, + paddingVertical: 6, + }, + modalBackground: { + height, + backgroundColor: color.black33Opacity, + }, + modal: { + marginTop: 'auto', + borderTopLeftRadius: 6, + borderTopRightRadius: 6, + paddingTop: 20, + backgroundColor: color.white, + }, + dogListWrapper: { + paddingHorizontal: size.horizontal, + marginBottom: 10, + }, + dogSelectWrapper: { + paddingVertical: 10, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + dogSelectButton: { + justifyContent: 'center', + }, + addDogButton: { + borderTopWidth: 1, + borderColor: color.grayEF, + height: 64, + paddingHorizontal: size.horizontal, + alignItems: 'center', + flexDirection: 'row', + }, + listContainer: { + paddingHorizontal: size.horizontal, + paddingTop: 11.5, + }, + listSpace: { + paddingBottom: height * 0.1, + }, + signInMessage: { + marginTop: height * 0.22, + alignItems: 'center', + }, + topWrapper: { + ...StyleSheet.absoluteFillObject, + justifyContent: 'center', + alignItems: 'center', + }, + centerButton: { + flexDirection: 'row', + alignItems: 'center', + }, + emptyListTop: { + marginTop: height * 0.1, + }, +}); + +export const icons = StyleSheet.create({ + setting: { + width: 20, + height: 20, + }, + dropDown: { + marginLeft: 8, + width: 8, + height: 4, + }, + check: { + marginLeft: 'auto', + width: 24, + height: 24, + }, + add: { + width: 20, + height: 20, + }, +}); + +export const texts = StyleSheet.create({ + name: { + color: '#242424', + fontSize: 24, + fontWeight: '700', + }, + updateProfile: { + fontSize: font.size.small, + color: '#606269', + }, + selectDogName: { + marginLeft: 12, + color: color.black, + fontSize: 16, + }, + addDog: { + marginLeft: 22, + color: color.black, + fontSize: font.size.medium, + }, + likeInfo: { + marginTop: 8, + color: '#484848', + fontSize: font.size.medium, + }, + signIn: { + fontSize: font.size.large, + color: color.grayB1, + }, + underline: { + textDecorationColor: color.grayB1, + textDecorationStyle: 'solid', + textDecorationLine: 'underline', + }, + center: { + fontSize: font.size.large, + color: color.black, + }, +}); diff --git a/src/pages/Profile/Home/Home.tsx b/src/pages/Profile/Home/Home.tsx new file mode 100644 index 00000000..ef41389d --- /dev/null +++ b/src/pages/Profile/Home/Home.tsx @@ -0,0 +1,379 @@ +import { isEqual } from 'lodash'; +import moment from 'moment'; +import React, { PureComponent } from 'react'; +import ExtraDimensions from 'react-native-extra-dimensions-android'; +import { NavigationScreenProps, SafeAreaView } from 'react-navigation'; +import { connect } from 'react-redux'; +import DefaultImage from 'src/components/module/DefaultImage'; +import EmptyList from 'src/components/module/EmptyList'; +import FeedComponent from 'src/components/module/Feed'; +import TopNavbar from 'src/components/module/TopNavbar'; +import { LinkedLike, searchDogs } from 'src/services/api/dog'; +import { Feed, getFeeds } from 'src/services/api/feed'; +import { getScraps } from 'src/services/api/place'; +import * as dogActions from 'src/store/actions/dog'; +import { Place as Scrap } from 'src/store/actions/place'; +import { ReducerState } from 'src/store/reducers'; +import Badges from './Badges'; +import { icons, texts, views } from './Home.styles'; +import Like from './Like'; +import Place from './Place'; +import TabBar from './Tabbar'; +import { + Image, + Modal, + Text, + View, + TouchableOpacity, + NativeSyntheticEvent, + NativeScrollEvent, + ScrollView, + FlatList, + Platform, +} from 'react-native'; + +interface Props extends NavigationScreenProps { + user: ReducerState['user']; + selectDog: typeof dogActions.selectDog; +} + +interface State { + showSelectDog: boolean; + showCenter: boolean; + currentTab: string; + feeds: Feed[]; + scraps: Scrap[]; + likes: LinkedLike[]; +} + +class Home extends PureComponent { + signedIn = this.props.user.email.length > 0; + + state: State = { + showSelectDog: false, + showCenter: false, + currentTab: 'feeds', + feeds: [], + scraps: [], + likes: [], + }; + + componentDidMount() { + this.props.navigation.addListener('willFocus', () => { + this.loadingDataByTab(this.state.currentTab); + }); + } + + componentDidUpdate(prevProps: Props, prevState: State) { + if ( + prevState.currentTab === 'feeds' && + !isEqual(prevProps.user.repDog, this.props.user.repDog) + ) { + this.loadingDataByTab(prevState.currentTab); + } + } + + toggleModal = () => { + this.setState({ showSelectDog: !this.state.showSelectDog }); + }; + + loadingDataByTab = async (tab: string) => { + const { repDog, places } = this.props.user; + const { feeds, scraps, likes } = this.state; + switch (tab) { + case 'feeds': { + if ( + repDog && + !isEqual(repDog.feeds.sort(), feeds.map(like => like._id).sort()) + ) { + this.setState({ feeds: await getFeeds({ feeds: repDog.feeds }) }); + } + return; + } + case 'scrap': { + if (!isEqual(places.sort(), scraps.map(scrap => scrap._id).sort())) { + this.setState({ scraps: await getScraps({ places }) }); + } + return; + } + case 'likes': { + if ( + repDog && + !isEqual( + repDog.likes.map(like => like.dog), + likes.map(like => like._id) + ) + ) { + this.setState({ likes: await searchDogs({ likes: repDog.likes }) }); + } + return; + } + } + }; + + navToSignIn = () => { + const { navigate } = this.props.navigation; + navigate('session'); + navigate('signIn'); + }; + + handleSelectDog = async (_id: string) => { + const { selectDog } = this.props; + await selectDog({ _id }); + this.toggleModal(); + }; + + handleSwitchTab = (currentTab: string) => { + this.setState({ currentTab }); + if (this.signedIn) this.loadingDataByTab(currentTab); + }; + + handleRemoveFeed = async (id: string) => { + const feeds = this.state.feeds.filter(feed => feed._id !== id); + this.setState({ feeds }); + }; + + handleScroll = async (e: NativeSyntheticEvent) => { + const { contentOffset } = e.nativeEvent; + const { showCenter } = this.state; + if (contentOffset.y > 152) { + if (!showCenter) this.setState({ showCenter: true }); + } else { + if (showCenter) this.setState({ showCenter: false }); + } + }; + + renderSelectDog = (item: { _id: string; name: string }) => ( + this.handleSelectDog(item._id)}> + + {item.name} + + + ); + + renderModal = () => { + const dogsList = Object.keys(this.props.user.dogs).map(_id => ({ + _id, + name: this.props.user.dogs[_id], + })); + return ( + + + + index.toString()} + renderItem={({ item }) => this.renderSelectDog(item)} + /> + { + this.toggleModal(); + this.props.navigation.navigate('create'); + }}> + + 반려견 추가 + + {Platform.OS === 'ios' ? ( + + ) : ( + + )} + + + + ); + }; + + render() { + const { user, navigation } = this.props; + const { currentTab } = this.state; + const name = user.repDog ? user.repDog.name : '댕댕이 선택'; + + return ( + + + ), + handlePress: () => navigation.navigate('setting'), + }} + center={ + this.state.showCenter ? ( + + + {name} + + + + ) : null + } + showBorder={this.state.showCenter} + /> + + + + + {this.signedIn ? ( + <> + + + {name} + + + + + 킁킁{' '} + + {user.repDog ? user.repDog.likes.length : 0} + + + + ) : ( + + + 로그인 하기 + + + )} + + {this.signedIn && user.repDog && ( + navigation.navigate('edit')}> + 프로필 수정 + + )} + + + {currentTab === 'feeds' && + (this.state.feeds.length !== 0 ? ( + index.toString()} + contentContainerStyle={views.listSpace} + renderItem={({ item, index }) => ( + 0 ? this.state.feeds[index - 1] : null} + deleteFromList={this.handleRemoveFeed} + /> + )} + /> + ) : ( + + ))} + {currentTab === 'scrap' && + (this.state.scraps.length !== 0 ? ( + index.toString()} + contentContainerStyle={[views.listContainer, views.listSpace]} + renderItem={({ item }) => ( + + navigation.navigate('place', { place: item }) + } + name={item.name} + label={item.label} + icon={item.icon} + description={item.description} + /> + )} + /> + ) : ( + + ))} + {currentTab === 'badge' && } + {currentTab === 'likes' && + (this.state.likes.length !== 0 ? ( + index.toString()} + contentContainerStyle={[views.listContainer, views.listSpace]} + renderItem={({ item, index }) => ( + + )} + /> + ) : ( + + ))} + + {this.renderModal()} + + ); + } +} + +export default connect( + (state: ReducerState) => ({ user: state.user }), + { selectDog: dogActions.selectDog } +)(Home); diff --git a/src/pages/Profile/Home/Like/Like.tsx b/src/pages/Profile/Home/Like/Like.tsx new file mode 100644 index 00000000..69a6059f --- /dev/null +++ b/src/pages/Profile/Home/Like/Like.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { color, font } from 'src/theme'; + +interface Props { + onPress?: () => void; + thumbnail?: string; + index: number; + name: string; + message: string; +} + +const thumbnailSize = 56; +const verticalSize = 8; +const styles = StyleSheet.create({ + wrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + textWrapper: { + flex: 1, + height: thumbnailSize + verticalSize * 2, + marginLeft: 12, + justifyContent: 'center', + }, + name: { + color: color.black, + fontSize: font.size.medium, + }, + message: { + marginTop: 3, + color: '#999999', + fontSize: 13, + }, +}); + +const ListItem: React.FC = ({ + onPress, + thumbnail, + index, + name, + message, +}) => ( + + + + {name} + {message} + + +); + +export default ListItem; diff --git a/src/pages/Profile/Home/Like/index.ts b/src/pages/Profile/Home/Like/index.ts new file mode 100644 index 00000000..a9248d0c --- /dev/null +++ b/src/pages/Profile/Home/Like/index.ts @@ -0,0 +1 @@ +export { default } from './Like'; diff --git a/src/pages/Profile/Home/Place/Place.tsx b/src/pages/Profile/Home/Place/Place.tsx new file mode 100644 index 00000000..b76908b9 --- /dev/null +++ b/src/pages/Profile/Home/Place/Place.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import DefaultImage from 'src/components/module/DefaultImage'; +import { color, font } from 'src/theme'; + +interface Props { + onPress?: () => void; + name: string; + label: string; + icon?: string; + description?: string; +} + +const thumbnailSize = 56; +const verticalSize = 8; +const styles = StyleSheet.create({ + wrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + textWrapper: { + flex: 1, + height: thumbnailSize + verticalSize * 2, + marginLeft: 12, + justifyContent: 'center', + }, + headWrapper: { + flexDirection: 'row', + alignItems: 'center', + }, + name: { + color: color.black, + fontSize: 16, + fontWeight: '600', + }, + label: { + color: '#999999', + fontSize: font.size.small, + marginLeft: 8, + }, + description: { + marginTop: 8, + color: '#999999', + fontSize: 13, + }, +}); + +const Place: React.FC = ({ + onPress, + icon, + name, + label, + description, +}) => ( + + + + + {name.trim()} + {label} + + + {description || '상세설명이 없습니다.'} + + + +); + +export default Place; diff --git a/src/pages/Profile/Home/Place/index.ts b/src/pages/Profile/Home/Place/index.ts new file mode 100644 index 00000000..11ec3b74 --- /dev/null +++ b/src/pages/Profile/Home/Place/index.ts @@ -0,0 +1 @@ +export { default } from './Place'; diff --git a/src/pages/Profile/Home/Tabbar/Tabbar.tsx b/src/pages/Profile/Home/Tabbar/Tabbar.tsx new file mode 100644 index 00000000..a9b5853c --- /dev/null +++ b/src/pages/Profile/Home/Tabbar/Tabbar.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { color } from 'src/theme'; + +interface Props { + onSwitch: (name: string) => void; + currentTab: string; +} + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + itemWrapper: { + flex: 1, + paddingVertical: 16, + }, + border: { + width: '100%', + height: 20, + borderLeftWidth: 1, + borderColor: color.grayEF, + justifyContent: 'center', + alignItems: 'center', + }, + text: { + color: color.gray48, + fontSize: 16, + }, + focus: { + color: color.blue, + fontWeight: '600', + }, +}); + +const Tabbar: React.FC = ({ onSwitch, currentTab }) => ( + + {[ + { label: '게시물', name: 'feeds' }, + { label: '내 상점', name: 'scrap' }, + { label: '뱃지', name: 'badge' }, + { label: '킁킁', name: 'likes' }, + ].map((item, index) => ( + onSwitch(item.name)}> + + + {item.label} + + + + ))} + +); + +export default Tabbar; diff --git a/src/pages/Profile/Home/Tabbar/index.ts b/src/pages/Profile/Home/Tabbar/index.ts new file mode 100644 index 00000000..cb49e26d --- /dev/null +++ b/src/pages/Profile/Home/Tabbar/index.ts @@ -0,0 +1 @@ +export { default } from './Tabbar'; diff --git a/src/pages/Profile/Home/index.ts b/src/pages/Profile/Home/index.ts new file mode 100644 index 00000000..41e08eef --- /dev/null +++ b/src/pages/Profile/Home/index.ts @@ -0,0 +1 @@ +export { default } from './Home'; diff --git a/src/pages/Profile/Setting/RowItem/RowItem.tsx b/src/pages/Profile/Setting/RowItem/RowItem.tsx new file mode 100644 index 00000000..d8962937 --- /dev/null +++ b/src/pages/Profile/Setting/RowItem/RowItem.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { color } from 'src/theme'; +import { + Image, + StyleSheet, + Text, + TouchableOpacity, + View, + Switch, +} from 'react-native'; + +interface Props { + item: { + label: string; + value?: boolean; + handleValueChange?: (value: boolean) => void; + handlePress?: () => void; + }; + index: number; +} + +const styles = StyleSheet.create({ + wrapper: { + width: '100%', + height: 50, + borderTopWidth: 1, + borderColor: color.grayEF, + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + label: { + color: color.black, + fontSize: 16, + }, + arrow: { + width: 5, + height: 10, + }, + buttonWrapper: { + flex: 1, + alignItems: 'flex-end', + }, + toggle: { + transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }], + }, +}); + +const RowItem: React.FC = ({ item, index }) => + item.handleValueChange ? ( + + {item.label} + + + ) : ( + + {item.label} + + + ); + +export default RowItem; diff --git a/src/pages/Profile/Setting/RowItem/index.ts b/src/pages/Profile/Setting/RowItem/index.ts new file mode 100644 index 00000000..1fa335d9 --- /dev/null +++ b/src/pages/Profile/Setting/RowItem/index.ts @@ -0,0 +1 @@ +export { default } from './RowItem'; diff --git a/src/pages/Profile/Setting/Setting.styles.ts b/src/pages/Profile/Setting/Setting.styles.ts new file mode 100644 index 00000000..049539a4 --- /dev/null +++ b/src/pages/Profile/Setting/Setting.styles.ts @@ -0,0 +1,25 @@ +import { StyleSheet } from 'react-native'; +import { color, font, size } from 'src/theme'; + +export const views = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#F5F5F5', + }, + boxWrapper: { + marginTop: 20, + paddingHorizontal: size.horizontal, + backgroundColor: color.white, + borderTopWidth: 1, + borderBottomWidth: 1, + borderColor: color.grayEF, + }, +}); + +export const icons = StyleSheet.create({ + back: { + width: 18, + height: 16, + resizeMode: 'contain', + }, +}); diff --git a/src/pages/Profile/Setting/Setting.tsx b/src/pages/Profile/Setting/Setting.tsx new file mode 100644 index 00000000..6a96d21d --- /dev/null +++ b/src/pages/Profile/Setting/Setting.tsx @@ -0,0 +1,160 @@ +import React, { PureComponent } from 'react'; +import { Image, SafeAreaView, ScrollView } from 'react-native'; +import { FlatList, NavigationScreenProps } from 'react-navigation'; +import { connect } from 'react-redux'; +import { email, web } from 'src/assets/functions/link'; +import TopNavbar from 'src/components/module/TopNavbar'; +import WebModal from 'src/components/module/WebModal'; +import * as userActions from 'src/store/actions/user'; +import { ReducerState } from 'src/store/reducers'; +import RowItem from './RowItem'; +import { icons, views } from './Setting.styles'; + +interface Props extends NavigationScreenProps { + user: ReducerState['user']; + signOut: typeof userActions.signOut; + terminate: typeof userActions.terminate; +} + +interface State { + pushNotif: boolean; + showMyFeed: boolean; + web?: { + title: string; + link: string; + }; +} + +// tslint:disable:max-line-length +class Setting extends PureComponent { + state: State = { + pushNotif: false, + showMyFeed: true, + }; + + hideModal = () => { + this.setState({ web: undefined }); + }; + + render() { + const { navigation, signOut, terminate, user } = this.props; + const { pushNotif, showMyFeed } = this.state; + + return ( + + + ), + handlePress: () => navigation.goBack(null), + }} + showBorder + /> + + { + this.setState({ pushNotif }); + }, + }, + { + label: '내 산책여부 표시', + value: showMyFeed, + handleValueChange: (showMyFeed: boolean) => { + this.setState({ showMyFeed }); + }, + }, + ]} + contentContainerStyle={[ + views.boxWrapper, + { marginTop: 0, borderTopWidth: 0 }, + ]} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item, index }) => ( + + )} + /> + {} }, + { + label: '서비스 약관', + handlePress: () => { + this.setState({ + web: { + title: '서비스 약관', + link: 'http://policy.woodongdang.com/', + }, + }); + }, + }, + // { label: '개인정보 이용 약관', handlePress: () => {} }, + { + label: '고객센터', + handlePress: async () => + await email({ + receiver: 'info@woodongdang.com', + subject: `서비스 문의 | ${user.email || '비로그인'}`, + }), + }, + { + label: '장소등록 및 수정 요청', + handlePress: async () => + await web({ + link: + 'https://docs.google.com/forms/d/1GrcHIpFtpihf8eZMna0wWLMfX423aOGPEaKs9VbIbHI/edit', + }), + }, + ]} + contentContainerStyle={views.boxWrapper} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item, index }) => ( + + )} + /> + + signOut(navigation), + }, + { + label: '탈퇴하기', + handlePress: () => terminate(navigation), + }, + ] + : [ + { + label: '로그인', + handlePress: () => navigation.navigate('session'), + }, + ] + } + contentContainerStyle={views.boxWrapper} + keyExtractor={(i, index) => index.toString()} + renderItem={({ item, index }) => ( + + )} + /> + + + + ); + } +} + +export default connect( + (state: ReducerState) => ({ user: state.user }), + { signOut: userActions.signOut, terminate: userActions.terminate } +)(Setting); diff --git a/src/pages/Profile/Setting/index.ts b/src/pages/Profile/Setting/index.ts new file mode 100644 index 00000000..11b0d2f0 --- /dev/null +++ b/src/pages/Profile/Setting/index.ts @@ -0,0 +1 @@ +export { default } from './Setting'; diff --git a/src/pages/Profile/index.ts b/src/pages/Profile/index.ts new file mode 100644 index 00000000..821e4052 --- /dev/null +++ b/src/pages/Profile/index.ts @@ -0,0 +1,30 @@ +import { createStackNavigator } from 'react-navigation'; +import PlaceScreen from 'src/pages/Place/Detail'; +import ReviewScreen from 'src/pages/Place/Review'; +import EditScreen from './Edit'; +import HomeScreen from './Home'; +import SettingScreen from './Setting'; + +const ProfileNavigator = createStackNavigator( + { + home: HomeScreen, + setting: SettingScreen, + edit: EditScreen, + create: { + screen: EditScreen, + params: { createMode: true }, + }, + place: PlaceScreen, + review: ReviewScreen, + }, + { + initialRouteName: 'home', + headerMode: 'none', + } +); + +ProfileNavigator.navigationOptions = ({ navigation }: any) => ({ + tabBarVisible: navigation.state.index === 0, +}); + +export default ProfileNavigator; diff --git a/src/pages/Router.ts b/src/pages/Router.ts index bdabf161..be88dd22 100644 --- a/src/pages/Router.ts +++ b/src/pages/Router.ts @@ -1,7 +1,61 @@ -import { createAppContainer, createSwitchNavigator } from 'react-navigation'; +import BottomTabbar from 'src/components/base/BottomTabbar'; import CoreScreen from 'src/components/base/Core'; -import AppNavigator from './App'; +import MapNavigator from 'src/pages/Map'; +import ProfileNavigator from 'src/pages/Profile'; +import WddScreen from 'src/pages/Wdd'; import SessionNavigator from './Session'; +import { + createAppContainer, + createSwitchNavigator, + createBottomTabNavigator, + NavigationActions, +} from 'react-navigation'; + +export enum NavigationTabs { + MAP, + WDD, + PROFILE, +} + +const AppNavigator = createBottomTabNavigator( + { + map: { + screen: MapNavigator, + params: { + tab: { + icon: require('src/assets/icons/ic_map_page.png'), + navigate: NavigationActions.navigate({ routeName: 'map' }), + }, + stack: { + icon: require('src/assets/icons/ic_footprint.png'), + navigate: NavigationActions.navigate({ routeName: 'walk' }), + }, + }, + }, + wdd: { + screen: WddScreen, + params: { + iconOn: require('src/assets/icons/ic_wdd_on.png'), + iconOff: require('src/assets/icons/ic_wdd_off.png'), + label: '우동댕', + }, + }, + profile: { + screen: ProfileNavigator, + params: { + iconOn: require('src/assets/icons/ic_profile_on.png'), + iconOff: require('src/assets/icons/ic_profile_off.png'), + label: '내 댕댕이', + }, + }, + }, + { + initialRouteName: 'map', + tabBarComponent: BottomTabbar, + swipeEnabled: false, + animationEnabled: false, + } +); export default createAppContainer( createSwitchNavigator( diff --git a/src/pages/Session/Agreement/Agreement.tsx b/src/pages/Session/Agreement/Agreement.tsx index 1a9ac27e..8a007fca 100644 --- a/src/pages/Session/Agreement/Agreement.tsx +++ b/src/pages/Session/Agreement/Agreement.tsx @@ -3,8 +3,8 @@ import React, { Component } from 'react'; import { Image, Text, TouchableOpacity, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; +import WebModal from 'src/components/module/WebModal'; import { icons, texts, views } from './Agreement.styles'; -import Detail from './Detail'; interface Term { title: string; @@ -20,7 +20,7 @@ interface RenderTermInterface extends Term { interface State { checkAll: boolean; terms: Term[]; - detail?: { + web?: { title: string; link: string; }; @@ -36,21 +36,16 @@ class Agreement extends Component { agree: false, link: 'http://policy.woodongdang.com/', }, - { - title: '개인정보 이용 약관', - agree: false, - link: '', - }, ], }; - hideDetail = () => { - this.setState({ detail: undefined }); + hideModal = () => { + this.setState({ web: undefined }); }; - showDetail = (detail: State['detail']) => { - if (detail && !this.state.detail) { - this.setState({ detail }); + showWebModal = (web: State['web']) => { + if (web && !this.state.web) { + this.setState({ web }); } }; @@ -99,7 +94,7 @@ class Agreement extends Component { this.showDetail({ title, link })}> + onPress={() => this.showWebModal({ title, link })}> { /> {terms.map((term, index) => this.renderTerm({ ...term, index }))} - + ); } diff --git a/src/pages/Session/Agreement/Detail/index.ts b/src/pages/Session/Agreement/Detail/index.ts deleted file mode 100644 index d0c62f9c..00000000 --- a/src/pages/Session/Agreement/Detail/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Detail'; diff --git a/src/pages/Session/CreateDog/CreateDog.styles.ts b/src/pages/Session/CreateDog/CreateDog.styles.ts index 7c076148..a8b2baa8 100644 --- a/src/pages/Session/CreateDog/CreateDog.styles.ts +++ b/src/pages/Session/CreateDog/CreateDog.styles.ts @@ -1,7 +1,6 @@ import { StyleSheet } from 'react-native'; import { color, font } from 'src/theme'; -const thumbnailSize = 100; const thumbnailEditSize = 28; export const views = StyleSheet.create({ @@ -9,14 +8,6 @@ export const views = StyleSheet.create({ marginVertical: 40, alignItems: 'center', }, - thumbnail: { - width: thumbnailSize, - height: thumbnailSize, - borderRadius: thumbnailSize / 2, - resizeMode: 'cover', - borderWidth: 1.5, - borderColor: `${color.black}14`, - }, edit: { position: 'absolute', bottom: 0, diff --git a/src/pages/Session/CreateDog/CreateDog.tsx b/src/pages/Session/CreateDog/CreateDog.tsx index 0af54856..97025a8e 100644 --- a/src/pages/Session/CreateDog/CreateDog.tsx +++ b/src/pages/Session/CreateDog/CreateDog.tsx @@ -1,4 +1,4 @@ -import produce from 'immer'; +import { pick } from 'lodash'; import React, { Component } from 'react'; import ImagePicker from 'react-native-image-picker'; import { NavigationScreenProps } from 'react-navigation'; @@ -6,6 +6,7 @@ import { connect } from 'react-redux'; import breeds from 'src/assets/consts/breeds.json'; import withLoading, { LoadingProps } from 'src/components/base/withLoading'; import PageContainer from 'src/components/container/PageContainer'; +import DefaultImage from 'src/components/module/DefaultImage'; import Selector, { HandleChangeSelector } from 'src/components/module/Selector'; import TextAutocomplete from 'src/components/module/TextAutocomplete'; import TextInput, { HandleChangeText } from 'src/components/module/TextInput'; @@ -13,6 +14,10 @@ import { uploadImage } from 'src/services/aws/s3'; import * as actions from 'src/store/actions/dog'; import { ReducerState } from 'src/store/reducers'; import { texts, views } from './CreateDog.styles'; +import { + PICTURE_PERMISSIONS, + checkPermission, +} from 'src/assets/functions/validate'; import { Image, Text, @@ -20,6 +25,8 @@ import { TouchableOpacity, View, Modal, + Keyboard, + Dimensions, } from 'react-native'; interface Props extends LoadingProps, NavigationScreenProps { @@ -27,18 +34,21 @@ interface Props extends LoadingProps, NavigationScreenProps { email: ReducerState['user']['email']; } -interface State extends actions.CreateDogInterface { +interface State extends actions.DogBase { showModal: boolean; + thumbnailHeight: number; } +const { height } = Dimensions.get('window'); + class CreateDog extends Component { private inputs = { name: React.createRef(), - breed: React.createRef(), }; state: State = { showModal: false, + thumbnailHeight: 0, name: '', breed: '', gender: '', @@ -57,47 +67,37 @@ class CreateDog extends Component { this.toggleModal(); }; - handleImagePicker = () => { + handleImagePicker = async () => { const options = { title: '프로필 선택', - customButtons: [{ name: 'default', title: '기본 이미지' }], - storageOptions: { - skipBackup: true, - path: 'images', - }, + takePhotoButtonTitle: '사진 찍기', + chooseFromLibraryButtonTitle: '앨범에서 사진 선택', + customButtons: [{ name: 'default', title: '우동댕 기본 이미지' }], + cancelButtonTitle: '취소', + storageOptions: { skipBackup: true, path: 'images' }, }; - - ImagePicker.showImagePicker(options, res => { - if (res.didCancel || res.error) return; - if (res.customButton) { - this.setState(state => - produce(state, draft => { - draft.thumbnail = ''; - }) - ); - } - - this.setState(state => - produce(state, draft => { - draft.thumbnail = res.uri; - }) - ); - }); + if (await checkPermission(PICTURE_PERMISSIONS)) { + ImagePicker.showImagePicker(options, res => { + if (res.didCancel || res.error) return; + this.setState({ thumbnail: res.customButton ? '' : res.uri }); + }); + } }; handleSubmit = async () => { const { createDog, email, navigation, toggleLoading } = this.props; - const { name, ...others } = this.state; - let thumbnail = undefined; - if (this.state.thumbnail) { - thumbnail = await uploadImage({ - name, - email, + const state = pick(this.state, ['name', 'thumbnail', 'breed', 'gender']); + Keyboard.dismiss(); + if (state.thumbnail) { + const url = await uploadImage({ table: 'dogs', - uri: this.state.thumbnail, + label: email, + name: state.name, + uri: state.thumbnail, })(toggleLoading); + state.thumbnail = url; } - await createDog({ name, thumbnail, ...others }, navigation); + await createDog(state, navigation); }; render() { @@ -116,19 +116,14 @@ class CreateDog extends Component { handlePress: this.handleSubmit, disable: !name || !breed || !gender, }} - extraScrollHeight={200}> + titleOnScroll="댕댕이 정보 입력" + extraScrollHeight={height * 0.25} + extraBottom={height * 0.32}> - + { + onRequestClose={this.toggleModal} + visible={this.state.showModal} + hardwareAccelerated> diff --git a/src/pages/Session/CreateMeta/CreateMeta.tsx b/src/pages/Session/CreateMeta/CreateMeta.tsx index 8b936b5e..ce9d22eb 100644 --- a/src/pages/Session/CreateMeta/CreateMeta.tsx +++ b/src/pages/Session/CreateMeta/CreateMeta.tsx @@ -36,6 +36,10 @@ class CreateMeta extends PureComponent { return null; } + handleChange = ({ name, value }: HandleChangeSelector | HandleChangeDate) => { + this.setState(state => ({ ...state, [name]: value })); + }; + handleSubmit = () => { const { createMeta, navigation } = this.props; const { birth, gender } = this.state; @@ -48,14 +52,6 @@ class CreateMeta extends PureComponent { } }; - handleGenderChange = ({ name, value }: HandleChangeSelector) => { - this.setState(state => ({ ...state, [name]: value })); - }; - - handleDateChange = ({ name, value }: HandleChangeDate) => { - this.setState(state => ({ ...state, [name]: value })); - }; - render() { const { gender, birth } = this.state; const { navigation } = this.props; @@ -81,13 +77,13 @@ class CreateMeta extends PureComponent { label="성별" value={gender} list={[{ name: 'M', label: '남자' }, { name: 'F', label: '여자' }]} - handleChange={this.handleGenderChange} + handleChange={this.handleChange} /> ); diff --git a/src/pages/Session/Select/Select.styles.ts b/src/pages/Session/Select/Select.styles.ts index edaef2e8..be6b90c7 100644 --- a/src/pages/Session/Select/Select.styles.ts +++ b/src/pages/Session/Select/Select.styles.ts @@ -43,6 +43,16 @@ export const views = StyleSheet.create({ backgroundColor: `${color.black}1A`, marginHorizontal: 12, }, + background: { + ...StyleSheet.absoluteFillObject, + paddingHorizontal: 6, + backgroundColor: color.white, + }, + image: { + width: '100%', + height: '100%', + resizeMode: 'contain', + }, }); export const texts = StyleSheet.create({ diff --git a/src/pages/Session/Select/Select.tsx b/src/pages/Session/Select/Select.tsx index 655a09c1..b7e43049 100644 --- a/src/pages/Session/Select/Select.tsx +++ b/src/pages/Session/Select/Select.tsx @@ -2,33 +2,32 @@ import React from 'react'; import { Image, Text, TouchableOpacity, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; -import Splash from 'src/components/module/Splash'; -import { checkPermission } from 'src/store/sagas/user'; import { texts, views } from './Select.styles'; -const BottomButtons: React.FC = ({ navigation }) => { - const navToApp = async () => { - if (await checkPermission()) navigation.navigate('app'); - }; - - return ( - - - 비회원으로 시작하기 - - - navigation.navigate('signUp')}> - 회원가입 - - - ); -}; +const BottomButtons: React.FC = ({ navigation }) => ( + + navigation.navigate('app')}> + 비회원으로 시작하기 + + + navigation.navigate('signUp')}> + 회원가입 + + +); const Select: React.FC = ({ navigation }) => ( - <> - + + + + , @@ -47,7 +46,7 @@ const Select: React.FC = ({ navigation }) => ( - + ); export default Select; diff --git a/src/pages/Session/SendEmail/SendEmail.tsx b/src/pages/Session/SendEmail/SendEmail.tsx index 34adb2cf..bb730b77 100644 --- a/src/pages/Session/SendEmail/SendEmail.tsx +++ b/src/pages/Session/SendEmail/SendEmail.tsx @@ -1,22 +1,24 @@ import React from 'react'; -import { Dimensions, Image, View } from 'react-native'; +import { Image, Keyboard, View } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import PageContainer from 'src/components/container/PageContainer'; -const { height } = Dimensions.get('window'); - -const SendEmail: React.FC = ({ navigation }) => ( - navigation.popToTop() }}> - - - - -); +const SendEmail: React.FC = ({ navigation }) => { + Keyboard.dismiss(); + return ( + navigation.popToTop() }} + alignTitleCenter> + + + + + ); +}; export default SendEmail; diff --git a/src/pages/Session/SignUp/SignUp.tsx b/src/pages/Session/SignUp/SignUp.tsx index c0582cc4..d78ee2ba 100644 --- a/src/pages/Session/SignUp/SignUp.tsx +++ b/src/pages/Session/SignUp/SignUp.tsx @@ -1,6 +1,6 @@ import produce from 'immer'; import React, { Component } from 'react'; -import { TextInput as Input } from 'react-native'; +import { Keyboard, TextInput as Input } from 'react-native'; import { NavigationScreenProps } from 'react-navigation'; import { connect } from 'react-redux'; import { validateEmail, validatePassword } from 'src/assets/functions/validate'; @@ -93,6 +93,7 @@ class SignUp extends Component { const { name, email, password, passwordCheck } = this.state; if (name.valid && email.valid && password.valid && passwordCheck.valid) { + Keyboard.dismiss(); signUp( { name: name.value, diff --git a/src/pages/Walk/Walk/Trailor/Trailor.tsx b/src/pages/Walk/Walk/Trailor/Trailor.tsx deleted file mode 100644 index e21e715f..00000000 --- a/src/pages/Walk/Walk/Trailor/Trailor.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { PureComponent } from 'react'; -import { Animated, Easing } from 'react-native'; - -interface Props { - onFinish: () => void; -} - -interface State { - opacity: Animated.Value; - index: number; -} - -class Trailor extends PureComponent { - private images = [ - require('src/assets/images/img_count_3.jpg'), - require('src/assets/images/img_count_2.jpg'), - require('src/assets/images/img_count_1.jpg'), - require('src/assets/images/img_count_0.jpg'), - ]; - - state: State = { - opacity: new Animated.Value(1), - index: 0, - }; - - animateImage = () => { - const { index, opacity } = this.state; - - Animated.timing(opacity, { - toValue: 0, - duration: 800, - easing: Easing.bezier(0.48, 0, 1, 1), - }).start(c => { - if (c.finished) { - opacity.setValue(1); - if (index === this.images.length - 1) this.props.onFinish(); - else this.setState({ index: index + 1 }); - } - }); - }; - - render() { - const { opacity, index } = this.state; - return ( - - ); - } -} - -export default Trailor; diff --git a/src/pages/Walk/Walk/Trailor/index.ts b/src/pages/Walk/Walk/Trailor/index.ts deleted file mode 100644 index 783229ab..00000000 --- a/src/pages/Walk/Walk/Trailor/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Trailor'; diff --git a/src/pages/Walk/index.ts b/src/pages/Walk/index.ts deleted file mode 100644 index 91c42d83..00000000 --- a/src/pages/Walk/index.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { createStackNavigator, createSwitchNavigator } from 'react-navigation'; -import EditScreen from './Edit'; -import FinishScreen from './Finish'; -import UploadScreen from './Upload'; -import WalkScreen from './Walk'; - -const FinishNavigator = createStackNavigator( - { - finish: FinishScreen, - upload: UploadScreen, - edit: EditScreen, - }, - { - initialRouteName: 'finish', - headerMode: 'none', - } -); - -export default createSwitchNavigator( - { - walk: WalkScreen, - finish: FinishNavigator, - }, - { - initialRouteName: 'walk', - backBehavior: 'initialRoute', - } -); diff --git a/src/pages/Wdd/Wdd.styles.ts b/src/pages/Wdd/Wdd.styles.ts new file mode 100644 index 00000000..610d0c91 --- /dev/null +++ b/src/pages/Wdd/Wdd.styles.ts @@ -0,0 +1,136 @@ +import { Dimensions, StyleSheet } from 'react-native'; +import { height as navHeight } from 'src/components/module/TopNavbar/TopNavbar'; +import { color, font, shadow, size } from 'src/theme'; + +const dogItemSpace = 10; +const { width, height } = Dimensions.get('window'); + +export const views = StyleSheet.create({ + header: { + height: navHeight, + justifyContent: 'center', + alignItems: 'center', + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + dogsWrapper: { + borderBottomWidth: 1, + borderColor: color.grayEF, + }, + dogsListWrapper: { + paddingHorizontal: size.horizontal - dogItemSpace, + }, + dogItem: { + paddingVertical: 16, + paddingHorizontal: dogItemSpace, + }, + modalBackground: { + width, + height, + backgroundColor: color.black33Opacity, + alignItems: 'center', + justifyContent: 'center', + }, + modal: { + width: width * 0.7, + backgroundColor: color.white, + paddingHorizontal: 20, + paddingBottom: 20, + borderRadius: 8, + alignItems: 'center', + ...shadow.center, + }, + closeWrapper: { + alignSelf: 'flex-end', + paddingTop: 10, + marginRight: -20, + paddingHorizontal: 10, + }, + topRowWrapper: { + marginTop: 8, + flexDirection: 'row', + justifyContent: 'center', + }, + itemWrapper: { + paddingHorizontal: 8, + justifyContent: 'center', + }, + vr: { + borderLeftWidth: 1, + borderColor: '#dadcdf7f', + }, + bottomRowWrapper: { + marginTop: 24, + width: '100%', + flexDirection: 'row', + }, + bottomItem: { + flex: 1, + alignItems: 'center', + }, + likeButton: { + marginTop: 30, + width: '100%', + height: 46, + backgroundColor: color.blue, + borderRadius: 8, + justifyContent: 'center', + alignItems: 'center', + }, + infoWrapper: { + marginTop: 10, + width: '100%', + paddingVertical: 12, + paddingHorizontal: 10, + backgroundColor: color.grayEF, + borderRadius: 5, + }, + emptyListMargin: { + marginTop: height * 0.18, + }, +}); + +export const icons = StyleSheet.create({ + logo: { + width: 160, + height: 18, + resizeMode: 'contain', + }, + close: { + width: 20, + height: 20, + }, +}); + +export const texts = StyleSheet.create({ + name: { + marginTop: 10, + color: color.black, + fontSize: 20, + fontWeight: '600', + }, + spec: { + color: color.blackOpacity, + fontSize: font.size.small, + }, + info: { + color: '#484848', + fontSize: font.size.medium, + textAlign: 'center', + }, + bottomLabel: { + color: color.black, + fontSize: font.size.medium, + fontWeight: '600', + }, + bottomValue: { + marginTop: 4, + color: color.black, + fontSize: 26, + fontWeight: '600', + }, + like: { + fontSize: font.size.large, + color: color.white, + }, +}); diff --git a/src/pages/Wdd/Wdd.tsx b/src/pages/Wdd/Wdd.tsx new file mode 100644 index 00000000..2eaac19c --- /dev/null +++ b/src/pages/Wdd/Wdd.tsx @@ -0,0 +1,245 @@ +import produce from 'immer'; +import { findIndex, flatten } from 'lodash'; +import React, { PureComponent } from 'react'; +import { FlatList, NavigationScreenProps } from 'react-navigation'; +import { connect } from 'react-redux'; +import DefaultImage from 'src/components/module/DefaultImage'; +import EmptyList from 'src/components/module/EmptyList'; +import Feed from 'src/components/module/Feed'; +import { pushLike } from 'src/services/api/dog'; +import { Feed as FeedInterface, getFeeds } from 'src/services/api/feed'; +import { searchUsers } from 'src/services/api/user'; +import { Dog } from 'src/store/actions/dog'; +import { ReducerState } from 'src/store/reducers'; +import { icons, texts, views } from './Wdd.styles'; +import { + Image, + SafeAreaView, + TouchableOpacity, + ScrollView, + View, + Modal, + Text, + RefreshControl, + Alert, +} from 'react-native'; + +interface Props extends NavigationScreenProps { + user: ReducerState['user']; +} + +interface State { + dogs: Dog[]; + feeds: FeedInterface[]; + selectDog?: Dog; + refresh: boolean; +} + +// helper +function mapGender(gender: 'M' | 'F' | 'N' | '') { + switch (gender) { + case 'M': + return '수컷'; + case 'F': + return '암컷'; + case 'N': + return '중성화'; + default: + return ''; + } +} + +class Wdd extends PureComponent { + state: State = { dogs: [], feeds: [], refresh: false }; + + componentDidMount() { + this.getDataFromServer(); + } + + handleRefresh = async () => { + await this.setState({ refresh: true }); + await this.getDataFromServer(); + this.setState({ refresh: false }); + }; + + handleDelete = (id: string) => { + const feeds = this.state.feeds.filter(feed => feed._id !== id); + this.setState({ feeds }); + }; + + handlePressLike = async (_id: string) => { + const { user } = this.props; + const data = await pushLike({ _id }); + if (data) { + Alert.alert(data.message); + this.setState(state => + produce(state, draft => { + if (user.repDog && draft.selectDog) { + const pushData = { + dog: user.repDog._id, + createdAt: new Date(), + }; + + const index = findIndex(this.state.dogs, dog => dog._id === _id); + draft.dogs[index].likes.push(pushData); + draft.selectDog.likes.push(pushData); + } + }) + ); + } + }; + + getDataFromServer = async () => { + const { coordinates } = this.props.user.location; + const users = await searchUsers({ coordinates }); + const feeds = await getFeeds({ + dogs: flatten(users.map(user => Object.keys(user.dogs))), + }); + const dogs = users + .filter(user => user.repDog !== undefined) + .map(user => user.repDog) as Dog[]; + await this.setState({ feeds, dogs }); + }; + + selectDog = (selectDog: Dog) => { + this.setState({ selectDog }); + }; + + dismissModal = () => { + this.setState({ selectDog: undefined }); + }; + + renderModal = () => { + const { selectDog: dog } = this.state; + const signedIn = this.props.user.email.length > 0; + + return ( + + + {dog && ( + {}}> + + + + + + {dog.name} + + + {dog.breed} + + + {mapGender(dog.gender)} + + {dog.weight && ( + + {dog.weight}kg + + )} + + {dog.info && ( + + {dog.info} + + )} + + {[ + { label: '킁킁', value: dog.likes.length }, + { label: '산책횟수', value: dog.feeds.length }, + ].map((data, index) => ( + + {data.label} + {data.value} + + ))} + + {signedIn && dog.user !== this.props.user._id && ( + this.handlePressLike(dog._id)}> + 킁킁 보내기 + + )} + + + )} + + + ); + }; + + render() { + return ( + + + + + + }> + {this.state.dogs ? ( + <> + index.toString()} + contentContainerStyle={views.dogsListWrapper} + showsHorizontalScrollIndicator={false} + renderItem={({ item }) => ( + this.selectDog(item)}> + + + )} + horizontal + /> + index.toString()} + showsVerticalScrollIndicator={false} + renderItem={({ item }) => ( + + )} + /> + + ) : ( + + )} + + {this.renderModal()} + + ); + } +} + +export default connect((state: ReducerState) => ({ user: state.user }))(Wdd); diff --git a/src/pages/App/Wdd/index.ts b/src/pages/Wdd/index.ts similarity index 100% rename from src/pages/App/Wdd/index.ts rename to src/pages/Wdd/index.ts diff --git a/src/services/api/dog.ts b/src/services/api/dog.ts index 89cc1049..f5d08858 100644 --- a/src/services/api/dog.ts +++ b/src/services/api/dog.ts @@ -1,27 +1,44 @@ import axios, { AxiosResponse } from 'axios'; -import { - CreateDogInterface, - UpdateDogInterface, - DogInterface, -} from 'src/store/actions/dog'; +import { Alert } from 'react-native'; +import { Dog, DogBase, Like, UpdateDog } from 'src/store/actions/dog'; + +export type LinkedLike = Dog & { createdAt: Date }; export const selectDog = async (params: { _id: string }) => { - const response: AxiosResponse = await axios.put( - `/dogs/${params._id}` - ); + const response: AxiosResponse = await axios.put(`/dogs/${params._id}`); return response.data; }; -export const createDog = async (body: CreateDogInterface) => { - const response: AxiosResponse = await axios.post('/dogs', body); +export const searchDogs = async (params: { likes: Like[] }) => { + const dogs = params.likes.map(like => like.dog); + const response: AxiosResponse = await axios.get('/dogs', { + params: { dogs: JSON.stringify(dogs) }, + }); + const data: LinkedLike[] = response.data.map((dog, index) => ({ + ...dog, + createdAt: params.likes[index].createdAt, + })); + return data; +}; + +export const createDog = async (body: DogBase) => { + const response: AxiosResponse = await axios.post('/dogs', body); return response.data; }; -export const updateDog = async (body: UpdateDogInterface) => { +export const updateDog = async (body: UpdateDog) => { const { _id, ...data } = body; - const response: AxiosResponse = await axios.patch( - `/dogs/${_id}`, - data - ); + const response: AxiosResponse = await axios.patch(`/dogs/${_id}`, data); return response.data; }; + +export const pushLike = async (params: { _id: string }) => { + try { + const response: AxiosResponse<{ message: string }> = await axios.patch( + `/dogs/${params._id}/like` + ); + return response.data; + } catch (err) { + Alert.alert(err.response.data.message); + } +}; diff --git a/src/services/api/feed.ts b/src/services/api/feed.ts index 96489ee4..b6dedbf5 100644 --- a/src/services/api/feed.ts +++ b/src/services/api/feed.ts @@ -1,9 +1,11 @@ import axios, { AxiosResponse } from 'axios'; +import { Alert } from 'react-native'; +import { Dog } from 'src/store/actions/dog'; -interface Feed { +export interface Feed { _id: string; user: string; - dog: string; + dog: Dog; pins: string; // JSON.stringify(pins) seconds: number; distance: number; // km @@ -12,16 +14,21 @@ interface Feed { poos: number; images: string[]; memo?: string; + likes: { user: string; createdAt: Date }[]; createdAt: Date; } -export type Body = Pick< - Feed, - Exclude ->; +export interface Body + extends Pick< + Feed, + Exclude + > { + steps: number; +} export interface Params { - user?: string; + dogs?: string[]; + feeds?: string[]; } export const createFeed = async (params: Body) => { @@ -29,7 +36,32 @@ export const createFeed = async (params: Body) => { return response.data; }; -export const getFeeds = async (params?: Params) => { +export const getFeeds = async (p: Params) => { + const params: { dogs?: string; feeds?: string } = {}; + if (p.dogs) params.dogs = JSON.stringify(p.dogs); + if (p.feeds) params.feeds = JSON.stringify(p.feeds); const response: AxiosResponse = await axios.get('/feeds', { params }); return response.data; }; + +export const deleteFeed = async (body: { _id: string }) => { + const response: AxiosResponse<{ message: string }> = await axios.delete( + `/feeds/${body._id}` + ); + Alert.alert('피드가 삭제되었습니다.'); + return response.data; +}; + +export const pushLike = async (params: { _id: string }) => { + const response: AxiosResponse = await axios.patch( + `/feeds/${params._id}/like` + ); + return response.data; +}; + +export const undoLike = async (params: { _id: string }) => { + const response: AxiosResponse = await axios.delete( + `/feeds/${params._id}/like` + ); + return response.data; +}; diff --git a/src/services/api/place.ts b/src/services/api/place.ts index 195b3801..b636a311 100644 --- a/src/services/api/place.ts +++ b/src/services/api/place.ts @@ -1,60 +1,68 @@ import axios, { AxiosResponse } from 'axios'; import { sortBy } from 'lodash'; import { LatLng } from 'react-native-maps'; +import { Label, Place, PlaceResponse } from 'src/store/actions/place'; -export interface Params { +export interface SearchParams { keyword?: string; - label?: '카페' | '용품' | '병원' | '기타'; + label?: Label; location?: LatLng; range?: number; // km } -export interface Place - extends Pick> { - location: LatLng; -} - -interface GeoJSON { - type: string; - coordinates: [number, number]; -} - -interface Response { - _id: string; - name: string; - location: GeoJSON; - address: string; - label: '카페' | '용품' | '병원' | '기타'; - rating: number; - contact: string; - thumbnail: string; - icon?: string; - images?: string[]; - officeHour?: { - default: string; - weekend?: string; - dayoff?: string; - }; - likes?: string[]; - distance: number; // km -} +const clientToAPI = ({ location, ...params }: SearchParams) => { + const payload: any = { ...params }; + if (location !== undefined) { + payload.coordinates = JSON.stringify([ + location.longitude, + location.latitude, + ]); + } + return payload; +}; -const geoToLatLng = ({ coordinates }: GeoJSON) => +const apiToClient = (place: PlaceResponse) => ({ - latitude: coordinates[1], - longitude: coordinates[0], - } as LatLng); + ...place, + location: { + latitude: place.location.coordinates[1], + longitude: place.location.coordinates[0], + }, + } as Place); -export const searchPlace = async (params?: Params) => { - const response: AxiosResponse = await axios.get('/places', { - params, +export const searchPlace = async (p: SearchParams) => { + const response: AxiosResponse = await axios.get('/places', { + params: clientToAPI(p), }); - const places: Place[] = response.data.map(place => ({ - ...place, - location: geoToLatLng(place.location), - })); + const places = response.data.map(apiToClient); return sortBy( places, (place: Place) => -(place.rating / 5 + Math.pow(0.5, place.distance)) ); }; + +export const getScraps = async (params: { places: string[] }) => { + const response: AxiosResponse = await axios.get('/places', { + params: { places: JSON.stringify(params.places) }, + }); + const places = response.data.map(apiToClient); + return places; +}; + +interface Query { + id: string; +} + +export const scrap = async ({ id }: Query) => { + const response: AxiosResponse = await axios.patch( + `/places/${id}/scrap` + ); + return apiToClient(response.data); +}; + +export const unScrap = async ({ id }: Query) => { + const response: AxiosResponse = await axios.delete( + `/places/${id}/scrap` + ); + return apiToClient(response.data); +}; diff --git a/src/services/api/review.ts b/src/services/api/review.ts index 69495925..78a3822d 100644 --- a/src/services/api/review.ts +++ b/src/services/api/review.ts @@ -14,6 +14,7 @@ interface Params { } export interface Review extends Body { + _id: string; user: UserInterface; createdAt: Date; updatedAt: Date; @@ -28,9 +29,34 @@ export const createReview = async (body: Body) => { return response.data; }; -export const getReivews = async (params?: Params) => { +export const getReviews = async (params?: Params) => { const response: AxiosResponse = await axios.get('/reviews', { params, }); return response.data; }; + +export const updateReview = async (body: Body & { _id: string }) => { + const { _id, ...data } = body; + const response: AxiosResponse = await axios.patch( + `/reviews/${_id}`, + data + ); + return response.data; +}; + +export const deleteReview = async (id: string) => { + const response: AxiosResponse<{ message: string }> = await axios.delete( + `/reviews/${id}` + ); + Alert.alert('리뷰가 삭제되었습니다.'); + return response.data; +}; + +export const reportReview = async (id: string) => { + const response: AxiosResponse<{ message: string }> = await axios.post( + `/reviews/${id}/report` + ); + Alert.alert('신고가 접수되었습니다.'); + return response.data; +}; diff --git a/src/services/api/user.ts b/src/services/api/user.ts index 6f0e704e..1cd272eb 100644 --- a/src/services/api/user.ts +++ b/src/services/api/user.ts @@ -1,6 +1,10 @@ import axios, { AxiosResponse } from 'axios'; import * as actions from 'src/store/actions/user'; +export interface SearchParams { + coordinates: number[]; +} + export const getUser = async () => { // *** Set token on headers before call const response: AxiosResponse = await axios.get( @@ -25,6 +29,14 @@ export const signUp = async (body: actions.SignUpInterface) => { return response.data; }; +export const terminate = async () => { + // *** Set token on headers before call + const response: AxiosResponse<{ message: string }> = await axios.delete( + '/user' + ); + return response.data; +}; + export const updateUser = async (body: actions.UpdateInterface) => { // *** Set token on headers before call const response: AxiosResponse = await axios.patch( @@ -41,3 +53,11 @@ export const forgotPassword = async (body: { email: string }) => { ); return response.data; }; + +export const searchUsers = async (params: SearchParams) => { + const response: AxiosResponse = await axios.get( + '/users', + { params: { coordinates: JSON.stringify(params.coordinates) } } + ); + return response.data; +}; diff --git a/src/services/aws/s3.ts b/src/services/aws/s3.ts index fde0149d..aa22611c 100644 --- a/src/services/aws/s3.ts +++ b/src/services/aws/s3.ts @@ -1,59 +1,59 @@ import { Storage } from 'aws-amplify'; +import moment from 'moment'; +import awsmobile from 'src/aws-exports'; -interface UploadImage { +interface Base { table: 'dogs' | 'places' | 'feeds'; - email?: string; + label?: string; name: string; +} + +interface UploadImage extends Base { uri: string; } -interface UploadImages { - table: 'places' | 'feeds'; - email?: string; - name: string; +interface UploadImages extends Base { uris: string[]; } type S3ResponseType = { key: string }; type ToggleLoading = () => void; -export const uploadImage = ({ table, email, name, uri }: UploadImage) => async ( +const uploadToS3 = async ({ table, label, name, uri }: UploadImage) => { + const markDev = __DEV__ ? '__DEV__/' : ''; + const response = await fetch(uri); + const data = await response.blob(); + const key = `${markDev}${table}/${label || + moment().format('YYYY.MM.DD')}/${name}.png`; + const S3Response = (await Storage.put(key, data, { + level: 'public', + contentType: 'image/png', + })) as S3ResponseType; + return `https://s3.ap-northeast-2.amazonaws.com/${ + awsmobile.aws_user_files_s3_bucket + }/public/${S3Response.key}`; +}; + +export const uploadImage = (data: UploadImage) => async ( toggleLoading: ToggleLoading ) => { await toggleLoading(); - const response = await fetch(uri); - const data = await response.blob(); - const S3Response = (await Storage.put( - `${__DEV__ ? '__DEV__/' : ''}${table}/${ - email ? `${email}/` : '' - }${name}.png`, - data, - { level: 'public', contentType: 'image/png' } - )) as S3ResponseType; + const url = await uploadToS3(data); await toggleLoading(); - return S3Response.key; + return url; }; export const uploadImages = ({ table, - email, + label, name, uris, }: UploadImages) => async (toggleLoading: ToggleLoading) => { await toggleLoading(); const uriList: string[] = await Promise.all( - uris.map(async (uri, index) => { - const response = await fetch(uri); - const data = await response.blob(); - const S3Response = (await Storage.put( - `${__DEV__ ? '__DEV__/' : ''}${table}/${ - email ? `${email}/` : '' - }${name}_${index}.png`, - data, - { level: 'public', contentType: 'image/png' } - )) as S3ResponseType; - return S3Response.key; - }) + uris.map(async (uri, index) => + uploadToS3({ uri, table, label, name: `${name}_${index}` }) + ) ); await toggleLoading(); return uriList; diff --git a/src/store/actions/dog.ts b/src/store/actions/dog.ts index 95656475..fccf63b0 100644 --- a/src/store/actions/dog.ts +++ b/src/store/actions/dog.ts @@ -1,32 +1,44 @@ import { NavigationScreenProp } from 'react-navigation'; +export interface Like { + dog: string; + createdAt: Date; +} + +export interface History { + yearMonth: string; + count: number; + seconds: number; + steps: number; + distance: number; + pees: number; + poos: number; +} + // *** INTERFACES -export interface CreateDogInterface { +export interface DogBase { name: string; thumbnail?: string; breed: string; gender: 'M' | 'F' | 'N' | ''; - birth?: string; // YYYY.MM.DD + birth?: string; weight?: number; info?: string; - feeds: string[]; - likes: string[]; } -export interface UpdateDogInterface { +export interface UpdateDog extends DogBase { _id: string; - name?: string; - thumbnail?: string; - breed?: string; - gender?: 'M' | 'F' | 'N'; - birth?: string; // YYYY.MM.DD - weight?: number; - info?: string; } -export interface DogInterface extends CreateDogInterface { +export interface Dog extends DogBase { _id: string; user: string; + badges: { + firstLike: boolean; + }; + feeds: string[]; + likes: Like[]; + histories: History[]; } // *** CONSTS @@ -45,20 +57,20 @@ export const selectDog = (payload: { _id: string }) => ({ type: SELECT_DOG, }); export const createDog = ( - payload: CreateDogInterface, + payload: DogBase, navigation?: NavigationScreenProp ) => ({ payload, navigation, type: CREATE_DOG, }); -export const updateDog = (payload: UpdateDogInterface) => ({ +export const updateDog = (payload: UpdateDog) => ({ payload, type: UPDATE_DOG, }); export const setDogRequest = () => ({ type: SET_DOG_REQUEST }); -export const setDogSuccess = (payload: DogInterface) => ({ +export const setDogSuccess = (payload: Dog) => ({ payload, type: SET_DOG_SUCCESS, }); diff --git a/src/store/actions/place.ts b/src/store/actions/place.ts new file mode 100644 index 00000000..d29f5e22 --- /dev/null +++ b/src/store/actions/place.ts @@ -0,0 +1,60 @@ +import { LatLng } from 'react-native-maps'; + +export interface GeoJSON { + type: string; + coordinates: [number, number]; +} + +export type Label = '카페' | '식당' | '병원' | '용품' | '술집' | '기타'; + +// *** INTERFACES +export interface Place + extends Pick> { + location: LatLng; +} +export interface PlaceResponse { + _id: string; + name: string; + location: GeoJSON; + address: string; + label: Label; + rating: number; + thumbnail?: string; + contact?: string; + icon?: string; + description?: string; + images?: string[]; + officeHour?: { + default: string; + weekend?: string; + dayoff?: string; + }; + likes?: string[]; + distance: number; // km + scraps: { user: string; createdAt: Date }[]; +} + +// *** CONSTS +export const SCRAP = 'place/SCRAP'; +export const UN_SCRAP = 'place/UN_SCRAP'; + +export const SET_PLACE_REQUEST = 'place/SET_PLACE_REQUEST'; +export const SET_PLACE_SUCCESS = 'place/SET_PLACE_SUCCESS'; +export const SET_PLACE_FAILURE = 'place/SET_PLACE_FAILURE'; + +// *** FUNCTIONS +export const scrap = (payload: { id: string }) => ({ payload, type: SCRAP }); +export const unScrap = (payload: { id: string }) => ({ + payload, + type: UN_SCRAP, +}); + +export const setPlaceRequest = () => ({ type: SET_PLACE_REQUEST }); +export const setPlaceSuccess = (payload: string[]) => ({ + payload, + type: SET_PLACE_SUCCESS, +}); +export const setPlaceFailure = (payload: Response) => ({ + payload, + type: SET_PLACE_FAILURE, +}); diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts index 9557660c..6dabae1e 100644 --- a/src/store/actions/user.ts +++ b/src/store/actions/user.ts @@ -1,5 +1,6 @@ +import { LatLng } from 'react-native-maps'; import { NavigationScreenProp } from 'react-navigation'; -import { DogInterface } from './dog'; +import { Dog } from './dog'; // *** INTERFACES export interface UserInterface { @@ -11,7 +12,9 @@ export interface UserInterface { gender: string; // 'M' | 'F' status: 'ACTIVE' | 'PAUSED' | 'TERMINATED'; dogs: { [_id: string]: string }; - repDog?: DogInterface; + location: { type: string; coordinates: number[] }; + places: string[]; + repDog?: Dog; } export interface UpdateInterface { @@ -20,6 +23,8 @@ export interface UpdateInterface { birth?: string; gender?: string; // 'M' | 'F' status?: 'ACTIVE' | 'PAUSED' | 'TERMINATED'; + location?: { type: string; coordinates: number[] }; + repDog?: Dog; } export interface SignInInterface { @@ -32,23 +37,28 @@ export interface SignUpInterface extends SignInInterface { } // *** CONSTS +export const GET_USER = 'user/GET_USER'; export const AUTO_SIGNIN = 'user/AUTO_SIGNIN'; export const SIGNIN = 'user/SIGNIN'; export const SIGNUP = 'user/SIGNUP'; export const SIGNOUT = 'user/SIGNOUT'; +export const TERMINATE = 'user/TERMINATE'; export const CREATE_META = 'user/CREATE_META'; export const FORGOT_PASSWORD = 'user/FORGOT_PASSWORD'; export const CHANGE_PASSWORD = 'user/CHANGE_PASSWORD'; +export const UPDATE_LOCATION = 'user/UPDATE_LOCATION'; export const SET_USER_REQUEST = 'user/SET_USER_REQUEST'; export const SET_USER_SUCCESS = 'user/SET_USER_SUCCESS'; export const SET_USER_FAILURE = 'user/SET_USER_FAILURE'; +export const UPDATE_LOCAL = 'user/UPDATE_LOCAL'; export const REMOVE_USER = 'user/REMOVE_USER'; // *** FUNCTIONS type Navigation = NavigationScreenProp; +export const getUser = () => ({ type: GET_USER }); export const autoSignIn = (navigation: Navigation) => ({ navigation, type: AUTO_SIGNIN, @@ -67,6 +77,10 @@ export const signOut = (navigation: Navigation) => ({ navigation, type: SIGNOUT, }); +export const terminate = (navigation: Navigation) => ({ + navigation, + type: TERMINATE, +}); export const createMeta = ( payload: { birth: string; gender: string }, navigation: Navigation @@ -83,6 +97,10 @@ export const changePassword = ( payload: { password: string; token: string }, navigation: Navigation ) => ({ payload, navigation, type: CHANGE_PASSWORD }); +export const updateLocation = (payload: LatLng) => ({ + payload, + type: UPDATE_LOCATION, +}); export const setUserRequest = () => ({ type: SET_USER_REQUEST }); export const setUserSuccess = (payload: UserInterface) => ({ @@ -94,4 +112,8 @@ export const setUserFailure = (payload: Response) => ({ type: SET_USER_FAILURE, }); +export const updateLocal = (payload: UpdateInterface) => ({ + payload, + type: UPDATE_LOCAL, +}); export const removeUser = () => ({ type: REMOVE_USER }); diff --git a/src/store/reducers/user.ts b/src/store/reducers/user.ts index ccc3ee0e..05bcccde 100644 --- a/src/store/reducers/user.ts +++ b/src/store/reducers/user.ts @@ -1,22 +1,19 @@ import { AxiosResponse } from 'axios'; import produce from 'immer'; -import { pick } from 'lodash'; import { handleActions } from 'redux-actions'; import { removeHeader } from 'src/services/api/axios'; import { removeUserStorage } from 'src/services/storage/user'; import * as dogActions from 'src/store/actions/dog'; +import * as placeActions from 'src/store/actions/place'; import * as actions from 'src/store/actions/user'; -export interface UserState - extends Pick< - actions.UserInterface, - Exclude - > { +export interface UserState extends actions.UserInterface { error?: AxiosResponse; dogError?: AxiosResponse; } const initialState: UserState = { + _id: '', email: '', lastLogin: new Date(), name: '', @@ -24,6 +21,8 @@ const initialState: UserState = { gender: '', status: 'TERMINATED', dogs: {}, + location: { type: 'Point', coordinates: [0, 0] }, + places: [], }; export default handleActions( @@ -46,6 +45,10 @@ export default handleActions( draft.error = action.payload; }); }, + [actions.UPDATE_LOCAL]: (state, action) => ({ + ...state, + ...action.payload, + }), [actions.REMOVE_USER]: (state, action) => initialState, // *** HANDLE DOG ACTIONS [dogActions.SET_DOG_REQUEST]: (state, action) => @@ -54,7 +57,7 @@ export default handleActions( }), [dogActions.SET_DOG_SUCCESS]: (state, action) => produce(state, draft => { - const dog = action.payload as dogActions.DogInterface; + const dog = action.payload as dogActions.Dog; draft.repDog = dog; draft.dogs[dog._id] = dog.name; }), @@ -69,6 +72,19 @@ export default handleActions( */ draft.dogError = action.payload; }), + // *** HANDLE PLACE ACTIONS + [placeActions.SET_PLACE_REQUEST]: (state, action) => + produce(state, draft => { + delete draft.error; + }), + [placeActions.SET_PLACE_SUCCESS]: (state, action) => + produce(state, draft => { + draft.places = action.payload; + }), + [placeActions.SET_PLACE_FAILURE]: (state, action) => + produce(state, draft => { + draft.error = action.payload; + }), }, initialState ); diff --git a/src/store/sagas/dog.ts b/src/store/sagas/dog.ts index 0d55c9c7..462490ee 100644 --- a/src/store/sagas/dog.ts +++ b/src/store/sagas/dog.ts @@ -2,7 +2,6 @@ import { call, put, takeEvery } from 'redux-saga/effects'; import * as api from 'src/services/api/dog'; import { removeNextStep } from 'src/services/storage/user'; import * as actions from 'src/store/actions/dog'; -import { navigateToApp } from './user'; function* selectDog(action: ReturnType) { try { @@ -22,7 +21,7 @@ function* createDog(action: ReturnType) { yield put(actions.setDogSuccess(data)); yield call(removeNextStep); // *** NAVIGATE - if (action.navigation) yield call(navigateToApp, action.navigation); + if (action.navigation) yield call(action.navigation.navigate, 'app'); } catch (e) { yield put(actions.setDogFailure(e.response)); } diff --git a/src/store/sagas/index.ts b/src/store/sagas/index.ts index 908ebc2a..02417740 100644 --- a/src/store/sagas/index.ts +++ b/src/store/sagas/index.ts @@ -1,8 +1,9 @@ import { all, fork } from 'redux-saga/effects'; import dogRoot from './dog'; +import placeRoot from './place'; import userRoot from './user'; import walkRoot from './walk'; export default function* root() { - yield all([fork(userRoot), fork(dogRoot), fork(walkRoot)]); + yield all([fork(userRoot), fork(dogRoot), fork(walkRoot), fork(placeRoot)]); } diff --git a/src/store/sagas/place.ts b/src/store/sagas/place.ts new file mode 100644 index 00000000..968f46d1 --- /dev/null +++ b/src/store/sagas/place.ts @@ -0,0 +1,36 @@ +import { findIndex } from 'lodash'; +import { call, put, select, takeEvery } from 'redux-saga/effects'; +import * as api from 'src/services/api/place'; +import * as actions from 'src/store/actions/place'; +import { ReducerState } from 'src/store/reducers'; + +const getUser = (state: ReducerState) => state.user; + +function* scrapPlace(action: ReturnType) { + try { + yield put(actions.setPlaceRequest()); + const data: actions.PlaceResponse = yield call(api.scrap, action.payload); + const { places }: ReturnType = yield select(getUser); + places.push(data._id); + yield put(actions.setPlaceSuccess(places)); + } catch (e) { + yield put(actions.setPlaceFailure(e.response)); + } +} + +function* unScrapPlace(action: ReturnType) { + try { + yield put(actions.setPlaceRequest()); + const data: actions.PlaceResponse = yield call(api.unScrap, action.payload); + const { places }: ReturnType = yield select(getUser); + places.splice(findIndex(places, place => place === data._id), 1); + yield put(actions.setPlaceSuccess(places)); + } catch (e) { + yield put(actions.setPlaceFailure(e.response)); + } +} + +export default function* root() { + yield takeEvery(actions.SCRAP, scrapPlace); + yield takeEvery(actions.UN_SCRAP, unScrapPlace); +} diff --git a/src/store/sagas/user.ts b/src/store/sagas/user.ts index 415d67f7..8ac9f327 100644 --- a/src/store/sagas/user.ts +++ b/src/store/sagas/user.ts @@ -1,9 +1,9 @@ -import { Alert, PermissionsAndroid, Platform } from 'react-native'; -import { NavigationActions, NavigationScreenProp } from 'react-navigation'; -import { call, put, takeEvery } from 'redux-saga/effects'; +import { Alert } from 'react-native'; +import { call, put, select, takeEvery } from 'redux-saga/effects'; import { removeHeader, setHeader } from 'src/services/api/axios'; import * as api from 'src/services/api/user'; import * as actions from 'src/store/actions/user'; +import { ReducerState } from 'src/store/reducers'; import { getUserStorage, @@ -12,38 +12,20 @@ import { removeUserStorage, } from 'src/services/storage/user'; -const permissions = [ - PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION, - PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION, - PermissionsAndroid.PERMISSIONS.CAMERA, - PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, - PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE, -]; - // HELPERS -export async function checkPermission() { - if ( - Platform.OS === 'ios' || - (Platform.OS === 'android' && Platform.Version < 23) - ) { - return true; - } - permissions.forEach(async permission => { - if (!(await PermissionsAndroid.check(permission))) { - const response = await PermissionsAndroid.requestMultiple(permissions); - permissions.forEach(perm => { - if (response[perm] !== PermissionsAndroid.RESULTS.GRANTED) return false; - }); - } - }); - return true; -} +const getUserFromStore = (state: ReducerState) => state.user; -export function* navigateToApp(navigation: NavigationScreenProp) { - if (checkPermission()) yield call(navigation.navigate, 'app'); +// SAGAS +function* getUser() { + try { + yield put(actions.setUserRequest()); + const data = yield call(api.getUser); + yield put(actions.setUserSuccess(data)); + } catch (e) { + yield put(actions.setUserFailure(e)); + } } -// SAGAS function* autoSignIn(action: ReturnType) { try { // *** GET TOKEN FROM STORAGE @@ -55,24 +37,22 @@ function* autoSignIn(action: ReturnType) { yield put(actions.setUserSuccess(data)); // *** NAVIGATE if (!nextStep) { - yield call(navigateToApp, action.navigation); + yield call(action.navigation.navigate, 'app'); } else { Alert.alert('회원가입이 진행중입니다.', '이어서 하시겠습니까?', [ { text: '예', onPress: () => { - action.navigation.navigate({ - routeName: 'session', - action: NavigationActions.navigate({ - routeName: 'signUp', - action: NavigationActions.navigate({ routeName: nextStep }), - }), - }); + action.navigation.navigate('session'); + action.navigation.navigate('signUp'); + action.navigation.navigate(nextStep); }, }, { text: '나중에', - onPress: () => action.navigation.navigate('app'), + onPress: async () => { + action.navigation.navigate('app'); + }, style: 'cancel', }, ]); @@ -99,7 +79,7 @@ function* signIn(action: ReturnType) { yield call(setHeader, token); yield call(setUserStorage, { token }); // *** NAVIGATE - yield call(navigateToApp, action.navigation); + yield call(action.navigation.navigate, 'app'); } catch (e) { yield put(actions.setUserFailure(e.response)); } @@ -132,6 +112,33 @@ function* signOut(action: ReturnType) { yield call(action.navigation.navigate, 'session'); } +function* terminate(action: ReturnType) { + function* handlePress() { + yield put(actions.setUserRequest()); + yield call(api.terminate); + yield put(actions.removeUser()); + yield call(removeHeader); + yield call(removeUserStorage); + // *** NAVIGATE + yield call(action.navigation.navigate, 'session'); + } + + try { + Alert.alert('탈퇴 후에는 되돌릴 수 없습니다.', '정말 탈퇴하시겠습니까?', [ + { + text: '예', + onPress: handlePress, + }, + { + text: '나중에', + style: 'cancel', + }, + ]); + } catch (e) { + yield put(actions.setUserFailure(e.response)); + } +} + function* createMeta(action: ReturnType) { try { // *** API @@ -170,18 +177,40 @@ function* changePassword(action: ReturnType) { const data = yield call(api.updateUser, action.payload); yield put(actions.setUserSuccess(data)); // *** NAVIGATE - yield call(navigateToApp, action.navigation); + yield call(action.navigation.navigate, 'app'); + } catch (e) { + yield put(actions.setUserFailure(e.response)); + } +} + +function* updateLocation(action: ReturnType) { + const location = { + type: 'Point', + coordinates: [action.payload.longitude, action.payload.latitude], + }; + try { + yield put(actions.setUserRequest()); + const user: ReturnType = yield select( + getUserFromStore + ); + if (!user.email) throw 'NOT_SIGN_IN'; + const data = yield call(api.updateUser, { location }); + yield put(actions.setUserSuccess(data)); } catch (e) { yield put(actions.setUserFailure(e.response)); + yield put(actions.updateLocal({ location })); } } export default function* root() { + yield takeEvery(actions.GET_USER, getUser); yield takeEvery(actions.AUTO_SIGNIN, autoSignIn); yield takeEvery(actions.SIGNIN, signIn); yield takeEvery(actions.SIGNUP, signUp); yield takeEvery(actions.SIGNOUT, signOut); + yield takeEvery(actions.TERMINATE, terminate); yield takeEvery(actions.CREATE_META, createMeta); yield takeEvery(actions.FORGOT_PASSWORD, forgotPassword); yield takeEvery(actions.CHANGE_PASSWORD, changePassword); + yield takeEvery(actions.UPDATE_LOCATION, updateLocation); } diff --git a/src/theme/color.ts b/src/theme/color.ts index 7a691894..461f6db7 100644 --- a/src/theme/color.ts +++ b/src/theme/color.ts @@ -8,7 +8,7 @@ export default { red: '#FF6060', redLight: '#FF615E', // gray - gary55: '#555555', + gray48: '#484848', gray66: '#666666', gray84: '#848484', grayDA: '#DADCDF', @@ -17,5 +17,4 @@ export default { grayF9: '#F9F9F9', // signature blue: '#127EFF', - bluePastel: '#5887F9', }; diff --git a/src/theme/index.ts b/src/theme/index.ts index 3bd2c934..e1109c4d 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,3 +1,4 @@ export { default as color } from './color'; export { default as font } from './font'; export { default as shadow } from './shadow'; +export { default as size } from './size'; diff --git a/src/theme/shadow.ts b/src/theme/shadow.ts index 34a74697..5e78096c 100644 --- a/src/theme/shadow.ts +++ b/src/theme/shadow.ts @@ -1,16 +1,29 @@ export default { deep: { - elevation: 2, + elevation: 8, shadowOffset: { width: 0, height: 6 }, shadowRadius: 12, shadowColor: '#000', shadowOpacity: 0.18, }, + center: { + elevation: 6, + shadowRadius: 12, + shadowColor: '#000', + shadowOpacity: 0.18, + }, shallow: { - elevation: 1, + elevation: 4, shadowOffset: { width: 0, height: 3 }, shadowRadius: 6, shadowColor: '#000', shadowOpacity: 0.12, }, + soft: { + elevation: 8, + shadowOffset: { width: 0, height: 4 }, + shadowRadius: 12, + shadowColor: '#000', + shadowOpacity: 0.09, + }, }; diff --git a/src/theme/size.ts b/src/theme/size.ts new file mode 100644 index 00000000..c41f1b4d --- /dev/null +++ b/src/theme/size.ts @@ -0,0 +1,7 @@ +import { Dimensions } from 'react-native'; + +const { width } = Dimensions.get('window'); + +export default { + horizontal: width * 0.064, +}; diff --git a/src/types/ActionSheet.d.ts b/src/types/ActionSheet.d.ts new file mode 100644 index 00000000..8472855e --- /dev/null +++ b/src/types/ActionSheet.d.ts @@ -0,0 +1,20 @@ +declare module 'react-native-actionsheet' { + import { Component } from 'react'; + + interface Props { + options: (string | React.ReactNode)[]; + onPress: (index: number) => void; + title?: string; + message?: string; + tintColor?: string; + cancelButtonIndex?: number; + destructiveButtonIndex?: number; + styles?: object; + } + + class ActionSheet extends Component { + public show: () => void; + } + + export default ActionSheet; +} diff --git a/src/types/ExtraDimentionsAndroid.d.ts b/src/types/ExtraDimentionsAndroid.d.ts new file mode 100644 index 00000000..32d23509 --- /dev/null +++ b/src/types/ExtraDimentionsAndroid.d.ts @@ -0,0 +1,21 @@ +declare type Dimensions = + | 'REAL_WINDOW_HEIGHT' + | 'REAL_WINDOW_WIDTH' + | 'STATUS_BAR_HEIGHT' + | 'SOFT_MENU_BAR_HEIGHT' + | 'SMART_BAR_HEIGHT'; + +declare interface ExtraDimensions { + get: (dim: Dimensions) => number; + getRealWindowHeight: () => number; + getRealWindowWidth: () => number; + getStatusBarHeight: () => number; + getSoftMenuBarHeight: () => number; + getSmartBarHeight: () => number; + isSoftMenuBarEnabled: () => number; +} + +declare module 'react-native-extra-dimensions-android' { + const instance: ExtraDimensions; + export = instance; +}