From 74ad3e14535dd49a679300e007439e8356267453 Mon Sep 17 00:00:00 2001 From: Eduardo Moroni Date: Tue, 3 Oct 2017 09:57:05 -0300 Subject: [PATCH 1/2] feat: style your ride offer --- .../rideOffer/components/YourRideOffer.js | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/modules/rideOffer/components/YourRideOffer.js b/src/modules/rideOffer/components/YourRideOffer.js index ef7cbc3..0a56252 100644 --- a/src/modules/rideOffer/components/YourRideOffer.js +++ b/src/modules/rideOffer/components/YourRideOffer.js @@ -19,7 +19,7 @@ export class YourRideOffer extends React.Component { renderLine = (text, icon) => { return ( - + {text} @@ -38,12 +38,27 @@ export class YourRideOffer extends React.Component { this.onPress()}> - { this.renderLine(origin, 'radio-button-unchecked') } - { this.renderLine(destination, 'radio-button-unchecked') } - - - { this.renderLine(days, 'today') } - { this.renderLine(hours, 'schedule') } + + + {'Você está oferencendo carona'} + + + + {`De: ${origin}`} + + + + {`Para: ${destination}`} + + + + {`Em: ${days}`} + + + + {`As: ${hours}`} + + Date: Tue, 3 Oct 2017 10:16:18 -0300 Subject: [PATCH 2/2] feat: use text to show lists --- .../__snapshots__/RideOffer.test.js.snap | 71 ++++++------------- src/modules/rideOffer/components/RideOffer.js | 34 ++++----- .../rideRequest/components/YourRideRequest.js | 70 ++++++++++++++++++ .../styles/YourRideRequest.style.js | 27 +++++++ .../containers/YourRideRequestsScreen.js | 20 +----- 5 files changed, 136 insertions(+), 86 deletions(-) create mode 100644 src/modules/rideRequest/components/YourRideRequest.js create mode 100644 src/modules/rideRequest/components/styles/YourRideRequest.style.js diff --git a/__tests__/src/modules/rideOffer/components/__snapshots__/RideOffer.test.js.snap b/__tests__/src/modules/rideOffer/components/__snapshots__/RideOffer.test.js.snap index d0d6eb4..6de2fa0 100644 --- a/__tests__/src/modules/rideOffer/components/__snapshots__/RideOffer.test.js.snap +++ b/__tests__/src/modules/rideOffer/components/__snapshots__/RideOffer.test.js.snap @@ -18,24 +18,13 @@ exports[` Should have a snapshot 1`] = ` } } > - - PUC + Eduardo Moroni está oferecendo uma carona Should have a snapshot 1`] = ` } } > - - Bomfim + De: PUC - - Should have a snapshot 1`] = ` } } > - - Seg-Sex + Para: Bomfim Should have a snapshot 1`] = ` } } > - + Em: Seg-Sex + + + + } + > - 19h + As: 19h diff --git a/src/modules/rideOffer/components/RideOffer.js b/src/modules/rideOffer/components/RideOffer.js index 340d4a8..c1685ce 100644 --- a/src/modules/rideOffer/components/RideOffer.js +++ b/src/modules/rideOffer/components/RideOffer.js @@ -1,6 +1,5 @@ import React from 'react' import PropTypes from 'prop-types' -import Icon from 'react-native-vector-icons/MaterialIcons' import { View, Text, TouchableOpacity } from 'react-native' import Styles from './styles/RideOffer.style' @@ -17,33 +16,34 @@ export class RideOffer extends React.Component { this.props.onPress(this.props.ride) } - renderLine = (text, icon) => { - return ( - - - {text} - - ) - } - render () { const { origin, destination, days, - hours + hours, + profile } = this.props.ride return ( this.onPress()}> - { this.renderLine(origin, 'radio-button-unchecked') } - { this.renderLine(destination, 'radio-button-unchecked') } - - - { this.renderLine(days, 'today') } - { this.renderLine(hours, 'schedule') } + + {`${profile.name} está oferecendo uma carona`} + + + {`De: ${origin}`} + + + {`Para: ${destination}`} + + + {`Em: ${days}`} + + + {`As: ${hours}`} + diff --git a/src/modules/rideRequest/components/YourRideRequest.js b/src/modules/rideRequest/components/YourRideRequest.js new file mode 100644 index 0000000..8e9db79 --- /dev/null +++ b/src/modules/rideRequest/components/YourRideRequest.js @@ -0,0 +1,70 @@ +import PropTypes from 'prop-types' +import React, { Component } from 'react' +import { RkCard } from 'react-native-ui-kitten' +import Icon from 'react-native-vector-icons/MaterialIcons' +import { View, Text, TouchableOpacity } from 'react-native' + +import { RidePropType } from '../types' +import Styles from './styles/YourRideRequest.style' +import { LoadingSpinnerView } from '../../shared/components/LoadingSpinnerView' + +export class YourRideRequest extends Component { + static propTypes = { + ride: RidePropType.isRequired, + onPress: PropTypes.func.isRequired, + icon: PropTypes.node + } + + state = { + loading: false + } + + onPress = async (ride) => { + this.setState({loading: true}) + await this.props.onPress(ride) + this.setState({loading: false}) + } + + render () { + const { ride } = this.props + const { + origin, + destination, + days, + hours, + profile + } = ride + + return ( + + this.onPress({ ride })}> + + + + {`Você pediu carona para ${profile.name}`} + + + {`De: ${origin}`} + + + {`Para: ${destination}`} + + + {`Em: ${days}`} + + + {`As: ${hours}`} + + + + + + + ) + } +} diff --git a/src/modules/rideRequest/components/styles/YourRideRequest.style.js b/src/modules/rideRequest/components/styles/YourRideRequest.style.js new file mode 100644 index 0000000..40d4bbe --- /dev/null +++ b/src/modules/rideRequest/components/styles/YourRideRequest.style.js @@ -0,0 +1,27 @@ +import { StyleSheet } from 'react-native' +import { Fonts, Metrics } from '../../../shared/themes/index' + +export default StyleSheet.create({ + container: { + flexDirection: 'column', + alignItems: 'flex-start', + margin: Metrics.baseMargin + }, + title: { + ...Fonts.style.h4 + }, + subTitle: { + ...Fonts.style.h6 + }, + text: { + ...Fonts.style.input + }, + line: { + flexDirection: 'row', + alignItems: 'center' + }, + icon: { + marginRight: Metrics.smallMargin, + alignSelf: 'flex-end' + } +}) diff --git a/src/modules/rideRequest/containers/YourRideRequestsScreen.js b/src/modules/rideRequest/containers/YourRideRequestsScreen.js index b633420..b7d6385 100644 --- a/src/modules/rideRequest/containers/YourRideRequestsScreen.js +++ b/src/modules/rideRequest/containers/YourRideRequestsScreen.js @@ -2,14 +2,13 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import { FlatList } from 'react-native' import React, { Component } from 'react' -import Icon from 'react-native-vector-icons/MaterialIcons' -import { Ride } from '../components/Ride' import { alert } from '../../../navigation/Alert' import { onNavigatorEvent } from '../../../navigation/NavBar' import { removeRideRequest } from '../../../services/firebase/database/RideRequest' import { LoadingSpinnerView } from '../../shared/components/LoadingSpinnerView' import { fetchYourRideRequests } from '../../../redux/actions/async/RideRequestActions' +import { YourRideRequest } from '../components/YourRideRequest' export const INITIAL_STATE = { loading: false @@ -43,21 +42,6 @@ export class YourRideRequestsScreen extends Component { } } - renderDeleteIcon = () => { - const style = { - alignSelf: 'flex-end' - } - - return ( - - ) - } - onPressRide = (props) => { const { rideRequestsMap } = this.props const { rideId } = props.ride @@ -71,7 +55,7 @@ export class YourRideRequestsScreen extends Component { rideId} - renderItem={({ item }) => } + renderItem={({ item }) => } /> )