Repository: kiwicom/mobile
Pull request #1316 (2018-11-12 13:49:15)

Hotels: Merge single hotel context and hotels context

tbergq: @RobinCsl 🚀 

Patch:
diff --git a/app/hotels/src/HotelsContext.js b/app/hotels/src/HotelsContext.js
index 48cbe9f3..5291efd5 100644
--- a/app/hotels/src/HotelsContext.js
+++ b/app/hotels/src/HotelsContext.js
@@ -6,6 +6,8 @@ import { withContext } from '@kiwicom/mobile-shared';
 import type { CurrentSearchStats } from './filter/CurrentSearchStatsType';
 
 const defaultState = {
+  hotelId: '',
+  apiProvider: 'booking',
   version: '',
   cityId: null,
   checkin: null,
@@ -23,12 +25,15 @@ const defaultState = {
     setCurrentSearchStats: () => {},
   },
   getGuestCount: () => 0,
+  setHotelId: () => {},
 };
 
 const { Consumer, Provider: ContextProvider } = React.createContext({
   ...defaultState,
 });
 
+export type ApiProvider = 'booking' | 'stay22';
+
 export type RoomConfigurationType = $ReadOnlyArray<{|
   +adultsCount: number,
   +children?: $ReadOnlyArray<{|
@@ -47,9 +52,13 @@ type Props = {|
   +currency: string,
   +latitude: ?number,
   +longitude: ?number,
+  +hotelId: ?string,
+  +apiProvider: ApiProvider,
 |};
 
 export type State = {|
+  hotelId: string,
+  +apiProvider: ApiProvider,
   +version: string,
   +cityName: string | null,
   +cityId: string | null,
@@ -61,6 +70,7 @@ export type State = {|
   +latitude: number | null,
   +longitude: number | null,
   +getGuestCount: () => number,
+  +setHotelId: (hotelId: string) => void,
   +actions: {|
     +setCurrentSearchStats: ({|
       priceMax: number,
@@ -87,6 +97,8 @@ class Provider extends React.Component<Props, State> {
     super(props);
 
     this.state = {
+      hotelId: props.hotelId ?? '',
+      apiProvider: props.apiProvider,
       version: props.version,
       cityId: props.cityId || null,
       checkin: getAsUtcDate(props.checkin),
@@ -101,6 +113,7 @@ class Provider extends React.Component<Props, State> {
         priceMin: 0,
       },
       getGuestCount: this.getGuestCount,
+      setHotelId: this.setHotelId,
       actions: {
         setCurrentSearchStats: this.setCurrentSearchStats,
       },
@@ -113,6 +126,8 @@ class Provider extends React.Component<Props, State> {
     });
   };
 
+  setHotelId = (hotelId: string) => this.setState({ hotelId });
+
   getGuestCount = () => {
     if (this.state.roomsConfiguration == null) {
       return 0;
diff --git a/app/hotels/src/allHotels/AllHotelsSearchList.js b/app/hotels/src/allHotels/AllHotelsSearchList.js
index 547001aa..f97c57e2 100644
--- a/app/hotels/src/allHotels/AllHotelsSearchList.js
+++ b/app/hotels/src/allHotels/AllHotelsSearchList.js
@@ -7,14 +7,14 @@ import { Translation } from '@kiwicom/mobile-localization';
 
 import AllHotelsSearchRow from './AllHotelsSearchRow';
 import type { AllHotelsSearchList as AllHotelsSearchListProps } from './__generated__/AllHotelsSearchList.graphql';
-import SingleHotelContext from '../navigation/singleHotel/SingleHotelContext';
+import { withHotelsContext } from '../HotelsContext';
 
-type PropsWithContext = {|
-  ...Props,
+type Props = {|
+  +data: AllHotelsSearchListProps,
   setHotelId: (id: string) => void,
 |};
 
-export class AllHotelsSearchList extends React.Component<PropsWithContext> {
+export class AllHotelsSearchList extends React.Component<Props> {
   componentDidMount() {
     const hotelId = this.props.data[0].hotelId;
 
@@ -50,23 +50,10 @@ export class AllHotelsSearchList extends React.Component<PropsWithContext> {
   }
 }
 
-type Props = {|
-  +data: AllHotelsSearchListProps,
-|};
-
-class AllHotelsSearchListWithContext extends React.Component<Props> {
-  renderInner = ({ setHotelId }) => (
-    <AllHotelsSearchList {...this.props} setHotelId={setHotelId} />
-  );
+const select = ({ setHotelId }) => ({ setHotelId });
 
-  render = () => (
-    <SingleHotelContext.Consumer>
-      {this.renderInner}
-    </SingleHotelContext.Consumer>
-  );
-}
 export default createFragmentContainer(
-  AllHotelsSearchListWithContext,
+  withHotelsContext(select)(AllHotelsSearchList),
   graphql`
     fragment AllHotelsSearchList on AllHotelsInterface @relay(plural: true) {
       id
diff --git a/app/hotels/src/allHotels/AllHotelsSearchRow.js b/app/hotels/src/allHotels/AllHotelsSearchRow.js
index a3457978..2c3b2060 100644
--- a/app/hotels/src/allHotels/AllHotelsSearchRow.js
+++ b/app/hotels/src/allHotels/AllHotelsSearchRow.js
@@ -15,16 +15,19 @@ import {
   type NavigationType,
 } from '@kiwicom/mobile-navigation';
 
-import { type RoomConfigurationType } from '../HotelsContext';
+import {
+  type RoomConfigurationType,
+  type ApiProvider,
+  withHotelsContext,
+} from '../HotelsContext';
 import HotelTitle from './HotelTitle';
 import HotelReviewScore from '../components/HotelReviewScore';
 import type { AllHotelsSearchRow as AllHotelsSearchRowProps } from './__generated__/AllHotelsSearchRow.graphql';
-import SingleHotelContext, {
-  type ApiProvider,
-} from '../navigation/singleHotel/SingleHotelContext';
 
-type PropsWithContext = {|
-  ...Props,
+type Props = {|
+  +navigation: NavigationType,
+  +data: AllHotelsSearchRowProps,
+  +testID?: string,
   +setHotelId: (hotelId: string) => void,
   +hotelId: string,
   +checkin: Date,
@@ -33,11 +36,13 @@ type PropsWithContext = {|
   +apiProvider: ApiProvider,
 |};
 
-class AllHotelsSearchRow extends React.Component<PropsWithContext> {
+class AllHotelsSearchRow extends React.Component<Props> {
   onGoToSingleHotel = () => {
-    const hotelId = this.props.data.hotelId;
+    const { hotelId } = this.props.data;
+
     if (hotelId != null) {
       this.props.setHotelId(hotelId);
+
       this.props.navigation.navigate('SingleHotel', {
         checkin: this.props.checkin,
         checkout: this.props.checkout,
@@ -102,23 +107,16 @@ class AllHotelsSearchRow extends React.Component<PropsWithContext> {
   };
 }
 
-type Props = {|
-  +navigation: NavigationType,
-  +data: AllHotelsSearchRowProps,
-  +testID?: string,
-|};
-
-class AllHotelsSearchRowWithContext extends React.Component<Props> {
-  renderInner = context => <AllHotelsSearchRow {...this.props} {...context} />;
+const select = ({
+  setHotelId,
+  checkin,
+  checkout,
+  roomsConfiguration,
+  apiProvider,
+}) => ({ setHotelId, checkin, checkout, roomsConfiguration, apiProvider });
 
-  render = () => (
-    <SingleHotelContext.Consumer>
-      {this.renderInner}
-    </SingleHotelContext.Consumer>
-  );
-}
 export default createFragmentContainer(
-  withNavigation(AllHotelsSearchRowWithContext),
+  withHotelsContext(select)(withNavigation(AllHotelsSearchRow)),
   graphql`
     fragment AllHotelsSearchRow on AllHotelsInterface {
       ...HotelTitle
diff --git a/app/hotels/src/appRegistry/RootComponent.js b/app/hotels/src/appRegistry/RootComponent.js
index ca5f2aa1..3365e2d9 100644
--- a/app/hotels/src/appRegistry/RootComponent.js
+++ b/app/hotels/src/appRegistry/RootComponent.js
@@ -7,13 +7,10 @@ import { Dimensions, type DimensionType } from '@kiwicom/mobile-shared';
 import HotelsFilterContext from '../HotelsFilterContext';
 import HotelsContext, {
   type RoomConfigurationType,
-  getAsUtcDate,
+  type ApiProvider,
 } from '../HotelsContext';
 import SearchResultsContext from '../navigation/allHotels/SearchResultsContext';
 import type { Coordinates } from '../CoordinatesType';
-import SingleHotelContext, {
-  type ApiProvider,
-} from '../navigation/singleHotel/SingleHotelContext';
 
 type Props = {|
   +dataSaverEnabled: boolean,
@@ -46,18 +43,12 @@ export default class RootComponent extends React.Component<Props> {
             cityName={this.props.cityName}
             latitude={this.props.coordinates?.latitude ?? null}
             longitude={this.props.coordinates?.longitude ?? null}
+            hotelId={this.props.hotelId}
+            apiProvider={this.props.apiProvider}
           >
-            <SingleHotelContext.Provider
-              hotelId={this.props.hotelId ?? ''}
-              checkin={getAsUtcDate(this.props.checkin)}
-              checkout={getAsUtcDate(this.props.checkout)}
-              roomsConfiguration={this.props.roomsConfiguration}
-              apiProvider={this.props.apiProvider}
-            >
-              <Dimensions.Provider dimensions={this.props.dimensions}>
-                {this.props.children}
-              </Dimensions.Provider>
-            </SingleHotelContext.Provider>
+            <Dimensions.Provider dimensions={this.props.dimensions}>
+              {this.props.children}
+            </Dimensions.Provider>
           </HotelsContext.Provider>
         </HotelsFilterContext.Provider>
       </ConfigContext.Provider>
diff --git a/app/hotels/src/map/allHotels/HotelSwipeItem.js b/app/hotels/src/map/allHotels/HotelSwipeItem.js
index 74cb7628..fcd967d9 100644
--- a/app/hotels/src/map/allHotels/HotelSwipeItem.js
+++ b/app/hotels/src/map/allHotels/HotelSwipeItem.js
@@ -13,19 +13,16 @@ import {
   Device,
 } from '@kiwicom/mobile-shared';
 
-import { type RoomConfigurationType } from '../../HotelsContext';
-import SingleHotelContext from '../../navigation/singleHotel/SingleHotelContext';
+import {
+  type RoomConfigurationType,
+  withHotelsContext,
+} from '../../HotelsContext';
 import HotelDetailPreview from '../hotelDetailPreview/HotelDetailPreview';
 import type { HotelSwipeItem as HotelSwipeItemData } from './__generated__/HotelSwipeItem.graphql';
 
 type PropsWithContext = {|
   ...Props,
   +deviceWidth: number,
-  +setHotelId: (hotelId: string) => void,
-  +hotelId: string,
-  +checkin: Date,
-  +checkout: Date,
-  +roomsConfiguration: RoomConfigurationType,
 |};
 
 export class HotelSwipeItemWithContext extends React.Component<
@@ -83,40 +80,56 @@ type Props = {|
   +width: number,
   +navigation: NavigationType,
   +data: ?HotelSwipeItemData,
+  +setHotelId: (hotelId: string) => void,
+  +hotelId: string,
+  +checkin: Date,
+  +checkout: Date,
+  +roomsConfiguration: RoomConfigurationType,
 |};
 
 class HotelSwipeItem extends React.Component<Props> {
-  renderDimensions = ({ width }) => (
-    <SingleHotelContext.Consumer>
-      {this.renderSingleHotelContext(width)}
-    </SingleHotelContext.Consumer>
-  );
-
-  renderSingleHotelContext = (width: number) => ({
-    setHotelId,
-    hotelId,
-    checkin,
-    checkout,
-    roomsConfiguration,
-  }) => (
-    <HotelSwipeItemWithContext
-      {...this.props}
-      setHotelId={setHotelId}
-      hotelId={hotelId}
-      checkin={checkin}
-      checkout={checkout}
-      roomsConfiguration={roomsConfiguration}
-      deviceWidth={width}
-    />
-  );
+  renderDimensions = ({ width }) => {
+    const {
+      setHotelId,
+      hotelId,
+      checkin,
+      checkout,
+      roomsConfiguration,
+    } = this.props;
+    return (
+      <HotelSwipeItemWithContext
+        {...this.props}
+        setHotelId={setHotelId}
+        hotelId={hotelId}
+        checkin={checkin}
+        checkout={checkout}
+        roomsConfiguration={roomsConfiguration}
+        deviceWidth={width}
+      />
+    );
+  };
 
   render() {
     return <Dimensions.Consumer>{this.renderDimensions}</Dimensions.Consumer>;
   }
 }
 
+const select = ({
+  setHotelId,
+  hotelId,
+  checkin,
+  checkout,
+  roomsConfiguration,
+}) => ({
+  setHotelId,
+  hotelId,
+  checkin,
+  checkout,
+  roomsConfiguration,
+});
+
 export default createFragmentContainer(
-  withNavigation(HotelSwipeItem),
+  withHotelsContext(select)(withNavigation(HotelSwipeItem)),
   graphql`
     fragment HotelSwipeItem on AllHotelsInterface {
       hotelId
diff --git a/app/hotels/src/map/allHotels/MapScreen.js b/app/hotels/src/map/allHotels/MapScreen.js
index 5a9aac77..14a869aa 100644
--- a/app/hotels/src/map/allHotels/MapScreen.js
+++ b/app/hotels/src/map/allHotels/MapScreen.js
@@ -10,19 +10,14 @@ import {
   Device,
 } from '@kiwicom/mobile-shared';
 
-import SingleHotelContext from '../../navigation/singleHotel/SingleHotelContext';
+import { withHotelsContext } from '../../HotelsContext';
 import MapView from './MapView';
 import HotelSwipeList from './HotelSwipeList';
 import type { MapScreen as MapScreenData } from './__generated__/MapScreen.graphql';
 import gradient from '../gradient.png';
 
-type Props = {|
-  +data: MapScreenData,
-|};
-
 type PropsWithContext = {|
   ...Props,
-  +setHotelId: (hotelId: string) => void,
   +deviceWidth: number,
 |};
 
@@ -102,17 +97,16 @@ const styles = StyleSheet.create({
   underlay: { height: 132 },
 });
 
+type Props = {|
+  +data: MapScreenData,
+  +setHotelId: (hotelId: string) => void,
+|};
+
 class MapScreen extends React.Component<Props> {
   renderDimension = ({ width }) => (
-    <SingleHotelContext.Consumer>
-      {this.renderSingleContext(width)}
-    </SingleHotelContext.Consumer>
-  );
-
-  renderSingleContext = width => ({ setHotelId }) => (
     <MapScreenWithContext
       {...this.props}
-      setHotelId={setHotelId}
+      setHotelId={this.props.setHotelId}
       deviceWidth={width}
     />
   );
@@ -122,8 +116,10 @@ class MapScreen extends React.Component<Props> {
   }
 }
 
+const select = ({ setHotelId }) => ({ setHotelId });
+
 export default createFragmentContainer(
-  MapScreen,
+  withHotelsContext(select)(MapScreen),
   graphql`
     fragment MapScreen on AllHotelsInterface @relay(plural: true) {
       id
diff --git a/app/hotels/src/map/singleHotel/SingleHotelMapScreen.js b/app/hotels/src/map/singleHotel/SingleHotelMapScreen.js
index 271c6d22..519c8a6a 100644
--- a/app/hotels/src/map/singleHotel/SingleHotelMapScreen.js
+++ b/app/hotels/src/map/singleHotel/SingleHotelMapScreen.js
@@ -11,7 +11,6 @@ import type { AvailableHotelSearchInput } from '../../singleHotel/AvailableHotel
 import type { SingleHotelMapScreenQueryResponse } from './__generated__/SingleHotelMapScreenQuery.graphql';
 import { sanitizeDate } from '../../GraphQLSanitizers';
 import SingleMap from './SingleMap';
-import SingleHotelContext from '../../navigation/singleHotel/SingleHotelContext';
 import {
   withHotelsContext,
   type RoomConfigurationType,
@@ -22,6 +21,9 @@ type Props = {|
   +search: AvailableHotelSearchInput,
   +navigation: NavigationType,
   +roomsConfiguration: RoomConfigurationType,
+  +hotelId: string,
+  +checkin: Date,
+  +checkout: Date,
 |};
 
 class SingleHotelMapScreen extends React.Component<Props> {
@@ -35,8 +37,14 @@ class SingleHotelMapScreen extends React.Component<Props> {
     <SingleMap goBack={this.goBack} data={availableHotel} />
   );
 
-  renderQuery = ({ checkin, checkout, hotelId }) => {
-    const { currency, roomsConfiguration } = this.props;
+  render() {
+    const {
+      currency,
+      roomsConfiguration,
+      checkin,
+      checkout,
+      hotelId,
+    } = this.props;
     return (
       <PublicApiRenderer
         query={graphql`
@@ -61,20 +69,21 @@ class SingleHotelMapScreen extends React.Component<Props> {
         render={this.renderInnerComponent}
       />
     );
-  };
-
-  render() {
-    return (
-      <SingleHotelContext.Consumer>
-        {this.renderQuery}
-      </SingleHotelContext.Consumer>
-    );
   }
 }
 
-const select = ({ currency, roomsConfiguration }) => ({
+const select = ({
+  currency,
+  roomsConfiguration,
+  hotelId,
+  checkin,
+  checkout,
+}) => ({
   currency,
   roomsConfiguration,
+  hotelId,
+  checkin,
+  checkout,
 });
 
 export default withHotelsContext(select)(withNavigation(SingleHotelMapScreen));
diff --git a/app/hotels/src/map/singleHotel/Stay22SingleHotelMapScreen.js b/app/hotels/src/map/singleHotel/Stay22SingleHotelMapScreen.js
index 92c71814..76e3c2ce 100644
--- a/app/hotels/src/map/singleHotel/Stay22SingleHotelMapScreen.js
+++ b/app/hotels/src/map/singleHotel/Stay22SingleHotelMapScreen.js
@@ -8,7 +8,6 @@ import {
 } from '@kiwicom/mobile-navigation';
 
 import { sanitizeDate } from '../../GraphQLSanitizers';
-import SingleHotelContext from '../../navigation/singleHotel/SingleHotelContext';
 import { withHotelsContext } from '../../HotelsContext';
 import type { Stay22SingleHotelMapScreenQueryResponse } from './__generated__/Stay22SingleHotelMapScreenQuery.graphql';
 import SingleMap from './SingleMap';
@@ -17,6 +16,9 @@ type Props = {|
   +navigation: NavigationType,
   +currency: string,
   +getGuestCount: () => number,
+  +hotelId: string,
+  +checkin: Date,
+  +checkout: Date,
 |};
 
 class Stay22SingleHotelMapScreen extends React.Component<Props> {
@@ -28,8 +30,8 @@ class Stay22SingleHotelMapScreen extends React.Component<Props> {
     <SingleMap data={props.stay22HotelDetail} goBack={this.goBack} />
   );
 
-  renderSingleHotelContext = ({ hotelId, checkin, checkout }) => {
-    const { getGuestCount, currency } = this.props;
+  render() {
+    const { getGuestCount, currency, hotelId, checkin, checkout } = this.props;
     return (
       <PublicApiRenderer
         query={graphql`
@@ -61,18 +63,16 @@ class Stay22SingleHotelMapScreen extends React.Component<Props> {
         render={this.renderInner}
       />
     );
-  };
-
-  render() {
-    return (
-      <SingleHotelContext.Consumer>
-        {this.renderSingleHotelContext}
-      </SingleHotelContext.Consumer>
-    );
   }
 }
 
-const select = ({ getGuestCount, currency }) => ({ getGuestCount, currency });
+const select = ({ getGuestCount, currency, hotelId, checkin, checkout }) => ({
+  getGuestCount,
+  currency,
+  hotelId,
+  checkin,
+  checkout,
+});
 
 export default withHotelsContext(select)(
   withNavigation(Stay22SingleHotelMapScreen),
diff --git a/app/hotels/src/navigation/singleHotel/SingleHotelContext.js b/app/hotels/src/navigation/singleHotel/SingleHotelContext.js
deleted file mode 100644
index aee8219f..00000000
--- a/app/hotels/src/navigation/singleHotel/SingleHotelContext.js
+++ /dev/null
@@ -1,63 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import type { RoomConfigurationType } from '../../HotelsContext';
-
-export type ApiProvider = 'booking' | 'stay22';
-
-const defaultState = {
-  hotelId: '',
-  checkin: new Date(),
-  checkout: new Date(),
-  roomsConfiguration: [],
-  setHotelId: () => {},
-  apiProvider: 'booking',
-};
-
-const { Consumer, Provider: ContextProvider } = React.createContext({
-  ...defaultState,
-});
-
-type Props = {|
-  +children: React.Node,
-  +hotelId: string,
-  +checkin: ?Date,
-  +checkout: ?Date,
-  +roomsConfiguration: ?RoomConfigurationType,
-  +apiProvider: ?ApiProvider,
-|};
-
-export type State = {|
-  hotelId: string,
-  +checkin: Date,
-  +checkout: Date,
-  +roomsConfiguration: RoomConfigurationType,
-  +apiProvider: ApiProvider,
-  +setHotelId: (hotelId: string) => void,
-|};
-
-class Provider extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      hotelId: props.hotelId,
-      checkin: props.checkin ?? new Date(), // If we hit the fallback on any of this, there is some error from how native passes props. This should be caught and handled in result screen
-      checkout: props.checkout ?? new Date(),
-      roomsConfiguration: props.roomsConfiguration ?? [],
-      apiProvider: props.apiProvider ?? 'booking',
-      setHotelId: this.setHotelId,
-    };
-  }
-
-  setHotelId = (hotelId: string) => {
-    this.setState({ hotelId });
-  };
-
-  render = () => (
-    <ContextProvider value={this.state}>{this.props.children}</ContextProvider>
-  );
-}
-
-export default { Consumer, Provider };
diff --git a/app/hotels/src/navigation/singleHotel/SingleHotelMapNavigationScreen.js b/app/hotels/src/navigation/singleHotel/SingleHotelMapNavigationScreen.js
index 22d337de..e5499762 100644
--- a/app/hotels/src/navigation/singleHotel/SingleHotelMapNavigationScreen.js
+++ b/app/hotels/src/navigation/singleHotel/SingleHotelMapNavigationScreen.js
@@ -5,34 +5,26 @@ import { StatusBar } from 'react-native';
 import { withMappedNavigationAndConfigProps } from 'react-navigation-props-mapper';
 
 import SingleHotelMapScreen from '../../map/singleHotel/SingleHotelMapScreen';
-import SingleHotelContext from './SingleHotelContext';
+import { withHotelsContext, type ApiProvider } from '../../HotelsContext';
 import Stay22SingleHotelMapScreen from '../../map/singleHotel/Stay22SingleHotelMapScreen';
 
-type Props = {||};
+type Props = {|
+  +apiProvider: ApiProvider,
+|};
 
-class SingleHotelMapNavigationScreen extends React.Component<Props> {
-  renderInner = ({ apiProvider }) => {
-    return (
-      <React.Fragment>
-        <StatusBar barStyle="dark-content" />
-        {apiProvider === 'booking' ? (
-          <SingleHotelMapScreen />
-        ) : (
-          <Stay22SingleHotelMapScreen />
-        )}
-      </React.Fragment>
-    );
-  };
+const SingleHotelMapNavigationScreen = ({ apiProvider }: Props) => (
+  <React.Fragment>
+    <StatusBar barStyle="dark-content" />
+    {apiProvider === 'booking' ? (
+      <SingleHotelMapScreen />
+    ) : (
+      <Stay22SingleHotelMapScreen />
+    )}
+  </React.Fragment>
+);
 
-  render() {
-    return (
-      <SingleHotelContext.Consumer>
-        {this.renderInner}
-      </SingleHotelContext.Consumer>
-    );
-  }
-}
+const select = ({ apiProvider }) => ({ apiProvider });
 
 export default withMappedNavigationAndConfigProps(
-  SingleHotelMapNavigationScreen,
+  withHotelsContext(select)(SingleHotelMapNavigationScreen),
 );
diff --git a/app/hotels/src/singleHotel/SingleHotelContainer.js b/app/hotels/src/singleHotel/SingleHotelContainer.js
index e239fd6a..d73e42d8 100644
--- a/app/hotels/src/singleHotel/SingleHotelContainer.js
+++ b/app/hotels/src/singleHotel/SingleHotelContainer.js
@@ -8,19 +8,20 @@ import type { SingleHotelContainerQueryResponse } from './__generated__/SingleHo
 import { sanitizeDate } from '../GraphQLSanitizers';
 import {
   type RoomConfigurationType,
+  type ApiProvider,
   withHotelsContext,
 } from '../HotelsContext';
-import SingleHotelContext, {
-  type State as SingleHotelState,
-} from '../navigation/singleHotel/SingleHotelContext';
 import Stay22SingleHotel from './Stay22SingleHotel';
 
 type PropsWithContext = {|
-  ...Props,
+  +goBack: () => void,
+  +currency: string,
+  +getGuestCount: () => number,
   +hotelId: string,
   +checkin: Date,
   +checkout: Date,
   +roomsConfiguration: RoomConfigurationType,
+  +apiProvider: ApiProvider,
 |};
 
 class SingleHotelContainer extends React.Component<PropsWithContext> {
@@ -35,16 +36,13 @@ class SingleHotelContainer extends React.Component<PropsWithContext> {
   );
 
   render() {
-    const {
-      currency,
-      checkin,
-      checkout,
-      roomsConfiguration,
-      hotelId,
-    } = this.props;
-    if (hotelId === '') {
+    const { apiProvider, ...rest } = this.props;
+    if (this.props.hotelId === '') {
       return null;
     }
+    if (apiProvider === 'stay22') {
+      return <Stay22SingleHotel {...rest} />;
+    }
     return (
       <PublicApiRenderer
         query={graphql`
@@ -61,12 +59,12 @@ class SingleHotelContainer extends React.Component<PropsWithContext> {
         `}
         variables={{
           search: {
-            hotelId,
-            roomsConfiguration,
-            checkin: sanitizeDate(checkin),
-            checkout: sanitizeDate(checkout),
+            hotelId: this.props.hotelId,
+            roomsConfiguration: this.props.roomsConfiguration,
+            checkin: sanitizeDate(this.props.checkin),
+            checkout: sanitizeDate(this.props.checkout),
           },
-          options: { currency },
+          options: { currency: this.props.currency },
         }}
         render={this.renderInnerComponent}
       />
@@ -74,43 +72,22 @@ class SingleHotelContainer extends React.Component<PropsWithContext> {
   }
 }
 
-type Props = {|
-  +goBack: () => void,
-  +currency: string,
-  +getGuestCount: () => number,
-|};
-
-class SingleHotelContainerWithContext extends React.Component<Props> {
-  renderInner = ({
-    checkin,
-    checkout,
-    roomsConfiguration,
-    hotelId,
-    apiProvider,
-  }: SingleHotelState) => {
-    const props = {
-      checkin,
-      checkout,
-      roomsConfiguration,
-      hotelId,
-      ...this.props,
-    };
-
-    if (apiProvider === 'booking') {
-      return <SingleHotelContainer {...props} />;
-    }
-    return <Stay22SingleHotel {...props} />;
-  };
-
-  render() {
-    return (
-      <SingleHotelContext.Consumer>
-        {this.renderInner}
-      </SingleHotelContext.Consumer>
-    );
-  }
-}
-
-const select = ({ currency, getGuestCount }) => ({ currency, getGuestCount });
+const select = ({
+  currency,
+  getGuestCount,
+  checkin,
+  checkout,
+  roomsConfiguration,
+  hotelId,
+  apiProvider,
+}) => ({
+  currency,
+  getGuestCount,
+  checkin,
+  checkout,
+  roomsConfiguration,
+  hotelId,
+  apiProvider,
+});
 
-export default withHotelsContext(select)(SingleHotelContainerWithContext);
+export default withHotelsContext(select)(SingleHotelContainer);
diff --git a/app/hotels/src/singleHotel/hotelInformation/location/Location.js b/app/hotels/src/singleHotel/hotelInformation/location/Location.js
index 7f9bb0fd..2055b116 100644
--- a/app/hotels/src/singleHotel/hotelInformation/location/Location.js
+++ b/app/hotels/src/singleHotel/hotelInformation/location/Location.js
@@ -20,7 +20,6 @@ import {
 
 import gradient from './white-to-alpha-horizontal.png';
 import type { Location_hotel } from './__generated__/Location_hotel.graphql';
-import SingleHotelContext from '../../../navigation/singleHotel/SingleHotelContext';
 import {
   type RoomConfigurationType,
   withHotelsContext,
@@ -30,15 +29,18 @@ type ContainerProps = {|
   +hotel: any,
 |};
 
-type PropsWithContext = {|
-  ...Props,
+type Props = {|
+  ...ContainerProps,
+  +hotel: ?Location_hotel,
+  +navigation: NavigationType,
+  +currency: string,
   +hotelId: string,
   +checkin: Date,
   +checkout: Date,
   +roomsConfiguration: RoomConfigurationType,
 |};
 
-export class Location extends React.Component<PropsWithContext> {
+export class Location extends React.Component<Props> {
   goToMap = () => {
     this.props.navigation.navigate('SingleHotelMap', {
       hotelId: this.props.hotelId,
@@ -92,37 +94,16 @@ export class Location extends React.Component<PropsWithContext> {
   };
 }
 
-type Props = {|
-  ...ContainerProps,
-  +hotel: ?Location_hotel,
-  +navigation: NavigationType,
-  +currency: string,
-|};
-
-class LocationWithContext extends React.Component<Props> {
-  renderInner = ({ hotelId, checkin, checkout, roomsConfiguration }) => (
-    <Location
-      {...this.props}
-      hotelId={hotelId}
-      checkin={checkin}
-      checkout={checkout}
-      roomsConfiguration={roomsConfiguration}
-    />
-  );
-
-  render() {
-    return (
-      <SingleHotelContext.Consumer>
-        {this.renderInner}
-      </SingleHotelContext.Consumer>
-    );
-  }
-}
-
-const select = ({ currency }) => ({ currency });
+const select = ({
+  currency,
+  hotelId,
+  checkin,
+  checkout,
+  roomsConfiguration,
+}) => ({ currency, hotelId, checkin, checkout, roomsConfiguration });
 
 export default (createFragmentContainer(
-  withHotelsContext(select)(withNavigation(LocationWithContext)),
+  withHotelsContext(select)(withNavigation(Location)),
   graphql`
     fragment Location_hotel on HotelInterface {
       address {


Test patch:
diff --git a/app/hotels/src/__tests__/HotelsContext.test.js b/app/hotels/src/__tests__/HotelsContext.test.js
index 3f3a10fd..5ff97ccf 100644
--- a/app/hotels/src/__tests__/HotelsContext.test.js
+++ b/app/hotels/src/__tests__/HotelsContext.test.js
@@ -17,6 +17,8 @@ const props = {
   checkout: null,
   cityId: null,
   cityName: null,
+  apiProvider: 'booking',
+  hotelId: '',
 };
 
 const Child = () => null;
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 318dccd9..8807eb5f 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`] = `
 <React.Fragment>
-  <ForwardRef(Relay(withNavigation(AllHotelsSearchRowWithContext)))
+  <ForwardRef(Relay(WithContext))
     data={
       Object {
         "$fragmentRefs": null,
@@ -33,7 +33,7 @@ exports[`renders found hotels 1`] = `
     }
     testID="firstHotelResult"
   />
-  <ForwardRef(Relay(withNavigation(AllHotelsSearchRowWithContext)))
+  <ForwardRef(Relay(WithContext))
     data={
       Object {
         "$fragmentRefs": null,