Repository: kiwicom/mobile
Pull request #988 (2018-08-14 12:32:11)

Hotels: Add new styling for AllHotelsSearchRow


Patch:
diff --git a/app/hotels/src/allHotels/AllHotelsSearchRow.js b/app/hotels/src/allHotels/AllHotelsSearchRow.js
index 2faa9459..c05abc5e 100644
--- a/app/hotels/src/allHotels/AllHotelsSearchRow.js
+++ b/app/hotels/src/allHotels/AllHotelsSearchRow.js
@@ -4,50 +4,25 @@ import * as React from 'react';
 import idx from 'idx';
 import { View } from 'react-native';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { SimpleCard, NetworkImage, StyleSheet } from '@kiwicom/mobile-shared';
+import {
+  SimpleCard,
+  NetworkImage,
+  StyleSheet,
+  Color,
+  Touchable,
+} from '@kiwicom/mobile-shared';
 
 import HotelTitle from './HotelTitle';
 import HotelReviewScore from './HotelReviewScore';
 import type { AllHotelsSearchRow as AllHotelsSearchRowProps } from './__generated__/AllHotelsSearchRow.graphql';
+import HotelsContext from '../HotelsContext';
 
-type Props = {|
-  +openSingleHotel: (id: string) => void,
-  +data: AllHotelsSearchRowProps,
+type PropsWithContext = {|
+  ...Props,
+  +isNew: boolean,
 |};
 
-const style = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
-  image: {
-    marginEnd: 10,
-    width: 50,
-    borderRadius: 2,
-    android: {
-      height: 80,
-    },
-    ios: {
-      height: 70,
-    },
-  },
-  hotelTitleWrapper: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  hotelTitle: {
-    flex: 1,
-  },
-  hotelReviewScore: {
-    marginStart: 10,
-  },
-  cardStyle: {
-    marginVertical: 0,
-    marginBottom: 5,
-  },
-});
-
-class AllHotelsSearchRow extends React.Component<Props> {
+class AllHotelsSearchRow extends React.Component<PropsWithContext> {
   onGoToSingleHotel = () => {
     const hotelId = idx(this.props, _ => _.data.hotel.id);
     if (hotelId) {
@@ -55,10 +30,40 @@ class AllHotelsSearchRow extends React.Component<Props> {
     }
   };
 
+  renderNew = () => {
+    const lowResUrl = idx(this.props.data, _ => _.hotel.mainPhoto.lowResUrl);
+
+    return (
+      <Touchable onPress={this.onGoToSingleHotel} style={newStyles.container}>
+        <View style={style.row}>
+          <View style={newStyles.imageContainer}>
+            <NetworkImage
+              style={style.image}
+              resizeMode="cover"
+              source={{ uri: lowResUrl }}
+            />
+          </View>
+          <View style={newStyles.content}>
+            <View style={newStyles.hotelTitleWrapper}>
+              <View style={style.hotelTitle}>
+                <HotelTitle data={this.props.data} />
+              </View>
+              <View style={newStyles.hotelReviewScore}>
+                <HotelReviewScore hotel={idx(this.props.data, _ => _.hotel)} />
+              </View>
+            </View>
+          </View>
+        </View>
+      </Touchable>
+    );
+  };
+
   render = () => {
-    const { data } = this.props;
+    const { data, isNew } = this.props;
+    if (isNew) {
+      return this.renderNew();
+    }
     const lowResUrl = idx(data, _ => _.hotel.mainPhoto.lowResUrl);
-
     return (
       <SimpleCard onPress={this.onGoToSingleHotel} style={style.cardStyle}>
         <View style={style.row}>
@@ -82,8 +87,19 @@ class AllHotelsSearchRow extends React.Component<Props> {
   };
 }
 
+type Props = {|
+  +openSingleHotel: (id: string) => void,
+  +data: AllHotelsSearchRowProps,
+|};
+
+const AllHotelsSearchRowWithContext = (props: Props) => (
+  <HotelsContext.Consumer>
+    {({ isNew }) => <AllHotelsSearchRow {...props} isNew={isNew} />}
+  </HotelsContext.Consumer>
+);
+
 export default createFragmentContainer(
-  AllHotelsSearchRow,
+  AllHotelsSearchRowWithContext,
   graphql`
     fragment AllHotelsSearchRow on HotelAvailability {
       ...HotelTitle
@@ -97,3 +113,62 @@ export default createFragmentContainer(
     }
   `,
 );
+
+const newStyles = StyleSheet.create({
+  container: {
+    backgroundColor: Color.white,
+    paddingTop: 8,
+    paddingStart: 8,
+  },
+  content: {
+    flex: 1,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: Color.ink.lighter,
+  },
+  imageContainer: {
+    marginBottom: 8,
+  },
+  hotelReviewScore: {
+    marginEnd: 8,
+    marginStart: 10,
+    alignSelf: 'center',
+  },
+  hotelTitleWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingBottom: 8,
+  },
+});
+
+const style = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  image: {
+    marginEnd: 10,
+    width: 50,
+    borderRadius: 2,
+    android: {
+      height: 80,
+    },
+    ios: {
+      height: 70,
+    },
+  },
+  hotelTitleWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  hotelTitle: {
+    flex: 1,
+  },
+  hotelReviewScore: {
+    marginStart: 10,
+  },
+  cardStyle: {
+    marginVertical: 0,
+    marginBottom: 5,
+  },
+});


Test patch:
diff --git a/app/hotels/src/allHotels/__tests__/__snapshots__/AllHotelsSearchList.test.js.snap b/app/hotels/src/allHotels/__tests__/__snapshots__/AllHotelsSearchList.test.js.snap
index 216d0e35..e3659381 100644
--- a/app/hotels/src/allHotels/__tests__/__snapshots__/AllHotelsSearchList.test.js.snap
+++ b/app/hotels/src/allHotels/__tests__/__snapshots__/AllHotelsSearchList.test.js.snap
@@ -22,7 +22,7 @@ exports[`renders a "not found" message when no hotel is found 1`] = `
 
 exports[`renders found hotels 1`] = `
 <Component>
-  <Relay(AllHotelsSearchRow)
+  <Relay(AllHotelsSearchRowWithContext)
     data={
       Object {
         "id": "hotel1",
@@ -30,7 +30,7 @@ exports[`renders found hotels 1`] = `
     }
     openSingleHotel={[Function]}
   />
-  <Relay(AllHotelsSearchRow)
+  <Relay(AllHotelsSearchRowWithContext)
     data={
       Object {
         "id": "hotel2",