Merge pull request #83 from CaronaBoard/ui-tweaks

Ui tweaks
CaronaBoard · Oct 3, 2017 · 3bfd3e4 · 3bfd3e4
2 parents 2c38ab3 + 02981cb
commit 3bfd3e4
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 93 deletions.
diff --git 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[`<RideOffer /> Should have a snapshot 1`] = `
           }
         }
       >
-        <Icon
-          allowFontScaling={false}
-          name="radio-button-unchecked"
-          size={12}
-          style={
-            Object {
-              "fontSize": 15,
-              "marginRight": 5,
-            }
-          }
-        />
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
           rkCardText={true}
         >
-          PUC
+          Eduardo Moroni está oferecendo uma carona
         </Text>
       </View>
       <View
@@ -46,30 +35,15 @@ exports[`<RideOffer /> Should have a snapshot 1`] = `
           }
         }
       >
-        <Icon
-          allowFontScaling={false}
-          name="radio-button-unchecked"
-          size={12}
-          style={
-            Object {
-              "fontSize": 15,
-              "marginRight": 5,
-            }
-          }
-        />
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
           rkCardText={true}
         >
-          Bomfim
+          De: PUC
         </Text>
       </View>
-    </View>
-    <View
-      rkCardContent={true}
-    >
       <View
         style={
           Object {
@@ -78,24 +52,13 @@ exports[`<RideOffer /> Should have a snapshot 1`] = `
           }
         }
       >
-        <Icon
-          allowFontScaling={false}
-          name="today"
-          size={12}
-          style={
-            Object {
-              "fontSize": 15,
-              "marginRight": 5,
-            }
-          }
-        />
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
           rkCardText={true}
         >
-          Seg-Sex
+          Para: Bomfim
         </Text>
       </View>
       <View
@@ -106,24 +69,30 @@ exports[`<RideOffer /> Should have a snapshot 1`] = `
           }
         }
       >
-        <Icon
-          allowFontScaling={false}
-          name="schedule"
-          size={12}
-          style={
-            Object {
-              "fontSize": 15,
-              "marginRight": 5,
-            }
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          rkCardText={true}
+        >
+          Em: Seg-Sex
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
           }
-        />
+        }
+      >
         <Text
           accessible={true}
           allowFontScaling={true}
           ellipsizeMode="tail"
           rkCardText={true}
         >
-          19h
+          As: 19h
         </Text>
       </View>
     </View>

diff --git 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 (
-      <View style={Styles.line} >
-        <Icon name={icon} style={Styles.icon} />
-        <Text rkCardText>{text}</Text>
-      </View>
-    )
-  }
-
   render () {
     const {
       origin,
       destination,
       days,
-      hours
+      hours,
+      profile
     } = this.props.ride
 
     return (
       <TouchableOpacity onPress={() => this.onPress()}>
         <RkCard>
           <View rkCardContent>
-            { this.renderLine(origin, 'radio-button-unchecked') }
-            { this.renderLine(destination, 'radio-button-unchecked') }
-          </View>
-          <View rkCardContent>
-            { this.renderLine(days, 'today') }
-            { this.renderLine(hours, 'schedule') }
+            <View style={Styles.line} >
+              <Text rkCardText>{`${profile.name} está oferecendo uma carona`}</Text>
+            </View>
+            <View style={Styles.line} >
+              <Text rkCardText>{`De: ${origin}`}</Text>
+            </View>
+            <View style={Styles.line} >
+              <Text rkCardText>{`Para: ${destination}`}</Text>
+            </View>
+            <View style={Styles.line} >
+              <Text rkCardText>{`Em: ${days}`}</Text>
+            </View>
+            <View style={Styles.line} >
+              <Text rkCardText>{`As: ${hours}`}</Text>
+            </View>
           </View>
         </RkCard>
       </TouchableOpacity>

diff --git 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 (
-      <View style={Styles.line} >
+      <View style={Styles.line}>
         <Icon name={icon} style={Styles.icon} />
         <Text rkCardText>{text}</Text>
       </View>
@@ -38,12 +38,27 @@ export class YourRideOffer extends React.Component {
       <TouchableOpacity onPress={() => this.onPress()}>
         <RkCard>
           <View rkCardContent>
-            { this.renderLine(origin, 'radio-button-unchecked') }
-            { this.renderLine(destination, 'radio-button-unchecked') }
-          </View>
-          <View rkCardContent>
-            { this.renderLine(days, 'today') }
-            { this.renderLine(hours, 'schedule') }
+            <View style={Styles.line}>
+              <Text rkCardText>
+                {'Você está oferencendo carona'}
+              </Text>
+              <View style={Styles.line}>
+                <Text rkCardText>
+                  {`De: ${origin}`}
+                </Text>
+              </View>
+              <Text rkCardText>
+                {`Para: ${destination}`}
+              </Text>
+            </View>
+            <Text rkCardText>
+              {`Em: ${days}`}
+            </Text>
+            <View style={Styles.line}>
+              <Text rkCardText>
+                {`As: ${hours}`}
+              </Text>
+            </View>
           </View>
           <Icon
             name='delete-forever'

diff --git a/src/modules/rideRequest/components/YourRideRequest.js 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 (
+      <LoadingSpinnerView isLoading={this.state.loading} >
+        <TouchableOpacity onPress={() => this.onPress({ ride })}>
+          <RkCard>
+            <View rkCardContent>
+              <View style={Styles.line} >
+                <Text rkCardText>{`Você pediu carona para ${profile.name}`}</Text>
+              </View>
+              <View style={Styles.line} >
+                <Text rkCardText>{`De: ${origin}`}</Text>
+              </View>
+              <View style={Styles.line} >
+                <Text rkCardText>{`Para: ${destination}`}</Text>
+              </View>
+              <View style={Styles.line} >
+                <Text rkCardText>{`Em: ${days}`}</Text>
+              </View>
+              <View style={Styles.line} >
+                <Text rkCardText>{`As: ${hours}`}</Text>
+              </View>
+            </View>
+            <Icon
+              name='delete-forever'
+              size={30}
+              color='#900'
+              style={Styles.icon}
+            />
+          </RkCard>
+        </TouchableOpacity>
+      </LoadingSpinnerView>
+    )
+  }
+}
diff --git a/src/modules/rideRequest/components/styles/YourRideRequest.style.js 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
@@ -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 (
-      <Icon
-        name='delete-forever'
-        size={30}
-        color='#900'
-        style={style}
-      />
-    )
-  }
-
   onPressRide = (props) => {
     const { rideRequestsMap } = this.props
     const { rideId } = props.ride
@@ -71,7 +55,7 @@ export class YourRideRequestsScreen extends Component {
         <FlatList
           data={this.props.yourRideRequests}
           keyExtractor={({rideId}) => rideId}
-          renderItem={({ item }) => <Ride ride={item} onPress={this.onPressRide} icon={this.renderDeleteIcon()} />}
+          renderItem={({ item }) => <YourRideRequest ride={item} onPress={this.onPressRide} />}
         />
       </LoadingSpinnerView>
     )