Repository: kiwicom/mobile
Pull request #678 (2018-05-30 09:36:42)

MMB: Add booking id to context


Patch:
diff --git a/app/MMB/src/MainMenu.js b/app/MMB/src/MainMenu.js
index 1d8b55d1..5c3f5099 100644
--- a/app/MMB/src/MainMenu.js
+++ b/app/MMB/src/MainMenu.js
@@ -10,7 +10,6 @@ import PassengerMenuGroup from './menuGroups/PassengerMenuGroup';
 
 type Props = {|
   openMenu: string => void,
-  bookingId: string,
 |};
 
 type State = {|
@@ -36,7 +35,7 @@ export default class MainMenu extends React.Component<Props, State> {
 
     return (
       <ScrollView>
-        <Header bookingId={this.props.bookingId} />
+        <Header />
         <PassengerMenuGroup
           activeId={activeId}
           openSubmenu={this.handleOpenSubmenu}
diff --git a/app/MMB/src/components/header/Header.js b/app/MMB/src/components/header/Header.js
index ded0a72f..f3809996 100644
--- a/app/MMB/src/components/header/Header.js
+++ b/app/MMB/src/components/header/Header.js
@@ -11,12 +11,9 @@ import StatusBar from './StatusBar';
 import TripInfo from './TripInfo';
 import HeaderImage from './HeaderImage';
 import type { HeaderQueryResponse } from './__generated__/HeaderQuery.graphql';
+import BookingDetailContext from '../../context/BookingDetailContext';
 
-type Props = {|
-  bookingId: string,
-|};
-
-export default class Header extends React.Component<Props> {
+export default class Header extends React.Component<{||}> {
   renderInnerComponent = (rendererProps: HeaderQueryResponse) => {
     const booking = idx(rendererProps, _ => _.booking);
     const isPastBooking = idx(rendererProps.booking, _ => _.isPastBooking);
@@ -38,22 +35,26 @@ export default class Header extends React.Component<Props> {
   };
 
   render = () => (
-    <PrivateApiRenderer
-      render={this.renderInnerComponent}
-      query={graphql`
-        query HeaderQuery($bookingId: ID!) {
-          booking(id: $bookingId) {
-            isPastBooking
-            ...StatusBar
-            ...TripInfo
-            ...HeaderImage
-          }
-        }
-      `}
-      variables={{
-        bookingId: this.props.bookingId,
-      }}
-    />
+    <BookingDetailContext.Consumer>
+      {({ bookingId }) => (
+        <PrivateApiRenderer
+          render={this.renderInnerComponent}
+          query={graphql`
+            query HeaderQuery($bookingId: ID!) {
+              booking(id: $bookingId) {
+                isPastBooking
+                ...StatusBar
+                ...TripInfo
+                ...HeaderImage
+              }
+            }
+          `}
+          variables={{
+            bookingId: bookingId,
+          }}
+        />
+      )}
+    </BookingDetailContext.Consumer>
   );
 }
 
diff --git a/app/MMB/src/context/BookingDetailContext.js b/app/MMB/src/context/BookingDetailContext.js
index c39794ad..af15fc31 100644
--- a/app/MMB/src/context/BookingDetailContext.js
+++ b/app/MMB/src/context/BookingDetailContext.js
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 const defaultState = {
   isPastBooking: false,
+  bookingId: '',
 };
 
 const { Consumer, Provider: ContextProvider } = React.createContext({
@@ -13,10 +14,12 @@ const { Consumer, Provider: ContextProvider } = React.createContext({
 type Props = {|
   +children: React.Node,
   +isPastBooking: boolean,
+  +bookingId: string,
 |};
 
 type State = {|
   +isPastBooking: boolean,
+  +bookingId: string,
 |};
 
 class Provider extends React.Component<Props, State> {
@@ -25,6 +28,7 @@ class Provider extends React.Component<Props, State> {
 
     this.state = {
       isPastBooking: props.isPastBooking,
+      bookingId: props.bookingId,
     };
   }
 
diff --git a/app/MMB/src/navigation/DetailScreen.js b/app/MMB/src/navigation/DetailScreen.js
index 383385fa..9317619a 100644
--- a/app/MMB/src/navigation/DetailScreen.js
+++ b/app/MMB/src/navigation/DetailScreen.js
@@ -141,22 +141,15 @@ export default class DetailsScreen extends React.Component<Props, State> {
     ).screen;
 
     return (
-      <BookingDetailContext.Provider isPastBooking={this.props.isPastBooking}>
+      <BookingDetailContext.Provider
+        isPastBooking={this.props.isPastBooking}
+        bookingId={this.props.bookingId}
+      >
         <Layout
           menuComponent={
             <AdaptableLayout.Consumer
-              renderOnWide={
-                <MainMenu
-                  openMenu={this.changeContentOnTablet}
-                  bookingId={this.props.bookingId}
-                />
-              }
-              renderOnNarrow={
-                <MainMenu
-                  openMenu={this.openMenuOnMobile}
-                  bookingId={this.props.bookingId}
-                />
-              }
+              renderOnWide={<MainMenu openMenu={this.changeContentOnTablet} />}
+              renderOnNarrow={<MainMenu openMenu={this.openMenuOnMobile} />}
             />
           }
           containerComponent={


Test patch:
diff --git a/app/MMB/src/context/__tests__/BookingDetailContext.test.js b/app/MMB/src/context/__tests__/BookingDetailContext.test.js
index a231c698..09ed9480 100644
--- a/app/MMB/src/context/__tests__/BookingDetailContext.test.js
+++ b/app/MMB/src/context/__tests__/BookingDetailContext.test.js
@@ -10,12 +10,15 @@ class ContextConsumer extends React.Component<{}> {
 }
 
 describe('BookingDetailContext', () => {
-  it('injects the isPastBooking prop to consumers', () => {
+  it('injects the props to consumers', () => {
     const wrapper = renderer.create(
-      <BookingDetailContext.Provider isPastBooking={false}>
+      <BookingDetailContext.Provider isPastBooking={false} bookingId="1234">
         <BookingDetailContext.Consumer>
-          {({ isPastBooking }) => (
-            <ContextConsumer isPastBooking={isPastBooking} />
+          {({ isPastBooking, bookingId }) => (
+            <ContextConsumer
+              isPastBooking={isPastBooking}
+              bookingId={bookingId}
+            />
           )}
         </BookingDetailContext.Consumer>
       </BookingDetailContext.Provider>,
@@ -23,5 +26,6 @@ describe('BookingDetailContext', () => {
 
     const instance = wrapper.root.findByType(ContextConsumer);
     expect(instance.props.isPastBooking).toBe(false);
+    expect(instance.props.bookingId).toBe('1234');
   });
 });