Repository: kiwicom/mobile
Pull request #689 (2018-05-31 14:53:20)

MMB: Detach VisaInformation from relay
Basically same as #681 


Patch:
diff --git a/app/MMB/src/scenes/passenger/Passenger.js b/app/MMB/src/scenes/passenger/Passenger.js
index f4599466..9488405b 100644
--- a/app/MMB/src/scenes/passenger/Passenger.js
+++ b/app/MMB/src/scenes/passenger/Passenger.js
@@ -10,6 +10,8 @@ import startCase from 'lodash/startCase';
 
 import { SeparatorTrimmed } from '../../components/Separators';
 import VisaInformation from './visa/VisaInformation';
+import VisaWarning from './visa/VisaWarning';
+import VisaRequired from './visa/VisaRequired';
 import type { Passenger_passenger as PassengerType } from './__generated__/Passenger_passenger.graphql';
 import MenuGroup from '../../components/menu/MenuGroup';
 import PassengerMenuItem from './PassengerMenuItem';
@@ -19,7 +21,7 @@ const Row = ({ children }: {| children: React.Node |}) => (
 );
 
 type Props = {|
-  passenger: PassengerType,
+  +passenger: PassengerType,
 |};
 
 export const Passenger = ({ passenger }: Props) => {
@@ -32,6 +34,11 @@ export const Passenger = ({ passenger }: Props) => {
     (idx(passenger, _ => _.insuranceType) || '').toLowerCase(),
   );
 
+  let requiredIn = idx(passenger, _ => _.visaInformation.requiredIn) || [];
+  requiredIn = requiredIn.map(item => idx(item, _ => _.name) || '');
+  let warningIn = idx(passenger, _ => _.visaInformation.warningIn) || [];
+  warningIn = warningIn.map(item => idx(item, _ => _.name) || '');
+
   return (
     <SimpleCard style={styles.card}>
       <MenuGroup
@@ -64,7 +71,10 @@ export const Passenger = ({ passenger }: Props) => {
             value={<Translation passThrough={insuranceType} />}
           />
         </Row>
-        <VisaInformation visa={passenger} />
+        <VisaInformation requiredIn={requiredIn} warningIn={warningIn}>
+          <VisaRequired countries={requiredIn} />
+          <VisaWarning countries={warningIn} />
+        </VisaInformation>
       </MenuGroup>
     </SimpleCard>
   );
@@ -82,7 +92,14 @@ export default createFragmentContainer(
         idNumber
       }
       insuranceType
-      ...VisaInformation_visa
+      visaInformation {
+        requiredIn {
+          name
+        }
+        warningIn {
+          name
+        }
+      }
     }
   `,
 );
diff --git a/app/MMB/src/scenes/passenger/__generated__/PassengerDetailContainerQuery.graphql.js b/app/MMB/src/scenes/passenger/__generated__/PassengerDetailContainerQuery.graphql.js
index 5564ca8a..0f163d67 100644
--- a/app/MMB/src/scenes/passenger/__generated__/PassengerDetailContainerQuery.graphql.js
+++ b/app/MMB/src/scenes/passenger/__generated__/PassengerDetailContainerQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash c144d30eb06f4848b6aa94c5ae6ffbac
+ * @relayHash 5b2ca5d4830f6250a2fcb44099522966
  */
 
 /* eslint-disable */
@@ -56,10 +56,6 @@ fragment Passenger_passenger on Passenger {
     idNumber
   }
   insuranceType
-  ...VisaInformation_visa
-}
-
-fragment VisaInformation_visa on Passenger {
   visaInformation {
     requiredIn {
       name
@@ -109,7 +105,7 @@ return {
   "operationKind": "query",
   "name": "PassengerDetailContainerQuery",
   "id": null,
-  "text": "query PassengerDetailContainerQuery(\n  $id: ID!\n) {\n  booking(id: $id) {\n    ...PassengerDetail_booking\n    id\n  }\n}\n\nfragment PassengerDetail_booking on Booking {\n  databaseId\n  contactDetails {\n    ...ContactDetails_contactDetails\n  }\n  passengers {\n    databaseId\n    ...Passenger_passenger\n  }\n}\n\nfragment ContactDetails_contactDetails on BookingContactDetails {\n  phone\n  email\n}\n\nfragment Passenger_passenger on Passenger {\n  fullName\n  title\n  birthday\n  nationality\n  travelDocument {\n    idNumber\n  }\n  insuranceType\n  ...VisaInformation_visa\n}\n\nfragment VisaInformation_visa on Passenger {\n  visaInformation {\n    requiredIn {\n      name\n    }\n    warningIn {\n      name\n    }\n  }\n}\n",
+  "text": "query PassengerDetailContainerQuery(\n  $id: ID!\n) {\n  booking(id: $id) {\n    ...PassengerDetail_booking\n    id\n  }\n}\n\nfragment PassengerDetail_booking on Booking {\n  databaseId\n  contactDetails {\n    ...ContactDetails_contactDetails\n  }\n  passengers {\n    databaseId\n    ...Passenger_passenger\n  }\n}\n\nfragment ContactDetails_contactDetails on BookingContactDetails {\n  phone\n  email\n}\n\nfragment Passenger_passenger on Passenger {\n  fullName\n  title\n  birthday\n  nationality\n  travelDocument {\n    idNumber\n  }\n  insuranceType\n  visaInformation {\n    requiredIn {\n      name\n    }\n    warningIn {\n      name\n    }\n  }\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
diff --git a/app/MMB/src/scenes/passenger/__generated__/PassengerDetailQuery.graphql.js b/app/MMB/src/scenes/passenger/__generated__/PassengerDetailQuery.graphql.js
index 905c5cc1..c0c78755 100644
--- a/app/MMB/src/scenes/passenger/__generated__/PassengerDetailQuery.graphql.js
+++ b/app/MMB/src/scenes/passenger/__generated__/PassengerDetailQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 0319badcafb3be87682541923e719980
+ * @relayHash 939cda06d5e623f766e87f98d05fecb6
  */
 
 /* eslint-disable */
@@ -56,10 +56,6 @@ fragment Passenger_passenger on Passenger {
     idNumber
   }
   insuranceType
-  ...VisaInformation_visa
-}
-
-fragment VisaInformation_visa on Passenger {
   visaInformation {
     requiredIn {
       name
@@ -109,7 +105,7 @@ return {
   "operationKind": "query",
   "name": "PassengerDetailQuery",
   "id": null,
-  "text": "query PassengerDetailQuery(\n  $id: ID!\n) {\n  booking(id: $id) {\n    ...PassengerDetail_booking\n    id\n  }\n}\n\nfragment PassengerDetail_booking on Booking {\n  databaseId\n  contactDetails {\n    ...ContactDetails_contactDetails\n  }\n  passengers {\n    databaseId\n    ...Passenger_passenger\n  }\n}\n\nfragment ContactDetails_contactDetails on BookingContactDetails {\n  phone\n  email\n}\n\nfragment Passenger_passenger on Passenger {\n  fullName\n  title\n  birthday\n  nationality\n  travelDocument {\n    idNumber\n  }\n  insuranceType\n  ...VisaInformation_visa\n}\n\nfragment VisaInformation_visa on Passenger {\n  visaInformation {\n    requiredIn {\n      name\n    }\n    warningIn {\n      name\n    }\n  }\n}\n",
+  "text": "query PassengerDetailQuery(\n  $id: ID!\n) {\n  booking(id: $id) {\n    ...PassengerDetail_booking\n    id\n  }\n}\n\nfragment PassengerDetail_booking on Booking {\n  databaseId\n  contactDetails {\n    ...ContactDetails_contactDetails\n  }\n  passengers {\n    databaseId\n    ...Passenger_passenger\n  }\n}\n\nfragment ContactDetails_contactDetails on BookingContactDetails {\n  phone\n  email\n}\n\nfragment Passenger_passenger on Passenger {\n  fullName\n  title\n  birthday\n  nationality\n  travelDocument {\n    idNumber\n  }\n  insuranceType\n  visaInformation {\n    requiredIn {\n      name\n    }\n    warningIn {\n      name\n    }\n  }\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
diff --git a/app/MMB/src/scenes/passenger/__generated__/Passenger_passenger.graphql.js b/app/MMB/src/scenes/passenger/__generated__/Passenger_passenger.graphql.js
index deab3a37..4d1604e2 100644
--- a/app/MMB/src/scenes/passenger/__generated__/Passenger_passenger.graphql.js
+++ b/app/MMB/src/scenes/passenger/__generated__/Passenger_passenger.graphql.js
@@ -8,7 +8,6 @@
 
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
-type VisaInformation_visa$ref = any;
 export type InsuranceType = "NONE" | "TRAVEL_BASIC" | "TRAVEL_PLUS" | "%future added value";
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type Passenger_passenger$ref: FragmentReference;
@@ -21,13 +20,30 @@ export type Passenger_passenger = {|
     +idNumber: ?string
   |},
   +insuranceType: ?InsuranceType,
-  +$fragmentRefs: VisaInformation_visa$ref,
+  +visaInformation: ?{|
+    +requiredIn: ?$ReadOnlyArray<?{|
+      +name: ?string
+    |}>,
+    +warningIn: ?$ReadOnlyArray<?{|
+      +name: ?string
+    |}>,
+  |},
   +$refType: Passenger_passenger$ref,
 |};
 */
 
 
-const node/*: ConcreteFragment*/ = {
+const node/*: ConcreteFragment*/ = (function(){
+var v0 = [
+  {
+    "kind": "ScalarField",
+    "alias": null,
+    "name": "name",
+    "args": null,
+    "storageKey": null
+  }
+];
+return {
   "kind": "Fragment",
   "name": "Passenger_passenger",
   "type": "Passenger",
@@ -88,12 +104,39 @@ const node/*: ConcreteFragment*/ = {
       "storageKey": null
     },
     {
-      "kind": "FragmentSpread",
-      "name": "VisaInformation_visa",
-      "args": null
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "visaInformation",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "Visa",
+      "plural": false,
+      "selections": [
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "requiredIn",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "Location",
+          "plural": true,
+          "selections": v0
+        },
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "warningIn",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "Location",
+          "plural": true,
+          "selections": v0
+        }
+      ]
     }
   ]
 };
+})();
 // prettier-ignore
-(node/*: any*/).hash = 'b2093f050c07c992a8849e420b204ea4';
+(node/*: any*/).hash = '716c048f169a8890e173d03b07ef1d92';
 module.exports = node;
diff --git a/app/MMB/src/scenes/passenger/visa/VisaInformation.js b/app/MMB/src/scenes/passenger/visa/VisaInformation.js
index 035ef43a..53ad3033 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaInformation.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaInformation.js
@@ -1,13 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
-import idx from 'idx';
 
-import VisaRequired from './VisaRequired';
 import VisaOk from './VisaOk';
-import VisaWarning from './VisaWarning';
-import type { VisaInformation_visa as VisaType } from './__generated__/VisaInformation_visa.graphql';
 import ManageMyBookingContext from '../../../context/BookingDetailContext';
 
 type PropsWithContext = {|
@@ -15,11 +10,13 @@ type PropsWithContext = {|
   +isPastBooking: boolean,
 |};
 
-export const VisaInformation = (props: PropsWithContext) => {
-  const requiredIn = idx(props.visa, _ => _.visaInformation.requiredIn) || [];
-  const warningIn = idx(props.visa, _ => _.visaInformation.warningIn) || [];
-
-  if (props.isPastBooking) {
+export const VisaInformation = ({
+  requiredIn,
+  warningIn,
+  isPastBooking,
+  children,
+}: PropsWithContext) => {
+  if (isPastBooking) {
     return null;
   }
 
@@ -27,20 +24,13 @@ export const VisaInformation = (props: PropsWithContext) => {
     return <VisaOk />;
   }
 
-  return (
-    <React.Fragment>
-      <VisaRequired
-        countries={requiredIn.map(country => idx(country, _ => _.name) || '')}
-      />
-      <VisaWarning
-        countries={warningIn.map(country => idx(country, _ => _.name) || '')}
-      />
-    </React.Fragment>
-  );
+  return children;
 };
 
 type Props = {|
-  +visa: VisaType,
+  +requiredIn: $ReadOnlyArray<string>,
+  +warningIn: $ReadOnlyArray<string>,
+  +children: React.Node,
 |};
 
 const VisaInformationWithContext = (props: Props) => (
@@ -51,18 +41,4 @@ const VisaInformationWithContext = (props: Props) => (
   </ManageMyBookingContext.Consumer>
 );
 
-export default createFragmentContainer(
-  VisaInformationWithContext,
-  graphql`
-    fragment VisaInformation_visa on Passenger {
-      visaInformation {
-        requiredIn {
-          name
-        }
-        warningIn {
-          name
-        }
-      }
-    }
-  `,
-);
+export default VisaInformationWithContext;
diff --git a/app/MMB/src/scenes/passenger/visa/VisaRequired.js b/app/MMB/src/scenes/passenger/visa/VisaRequired.js
index 240fd51e..d37c7992 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaRequired.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaRequired.js
@@ -7,7 +7,7 @@ import { StyleSheet, Text } from '@kiwicom/mobile-shared';
 import Alert from '../../../components/alert/Alert';
 
 type Props = {|
-  countries: string[],
+  +countries: $ReadOnlyArray<string>,
 |};
 
 export default function VisaRequired(props: Props) {
diff --git a/app/MMB/src/scenes/passenger/visa/VisaWarning.js b/app/MMB/src/scenes/passenger/visa/VisaWarning.js
index adb08dc0..fbb1f57a 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaWarning.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaWarning.js
@@ -7,7 +7,7 @@ import { StyleSheet, Text } from '@kiwicom/mobile-shared';
 import Alert from '../../../components/alert/Alert';
 
 type Props = {|
-  countries: string[],
+  +countries: $ReadOnlyArray<string>,
 |};
 
 export default function VisaWarning(props: Props) {
diff --git a/app/MMB/src/scenes/passenger/visa/__generated__/VisaInformation_visa.graphql.js b/app/MMB/src/scenes/passenger/visa/__generated__/VisaInformation_visa.graphql.js
deleted file mode 100644
index c2b6fc58..00000000
--- a/app/MMB/src/scenes/passenger/visa/__generated__/VisaInformation_visa.graphql.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * @flow
- */
-
-/* eslint-disable */
-
-'use strict';
-
-/*::
-import type { ConcreteFragment } from 'relay-runtime';
-import type { FragmentReference } from "relay-runtime";
-declare export opaque type VisaInformation_visa$ref: FragmentReference;
-export type VisaInformation_visa = {|
-  +visaInformation: ?{|
-    +requiredIn: ?$ReadOnlyArray<?{|
-      +name: ?string
-    |}>,
-    +warningIn: ?$ReadOnlyArray<?{|
-      +name: ?string
-    |}>,
-  |},
-  +$refType: VisaInformation_visa$ref,
-|};
-*/
-
-
-const node/*: ConcreteFragment*/ = (function(){
-var v0 = [
-  {
-    "kind": "ScalarField",
-    "alias": null,
-    "name": "name",
-    "args": null,
-    "storageKey": null
-  }
-];
-return {
-  "kind": "Fragment",
-  "name": "VisaInformation_visa",
-  "type": "Passenger",
-  "metadata": null,
-  "argumentDefinitions": [],
-  "selections": [
-    {
-      "kind": "LinkedField",
-      "alias": null,
-      "name": "visaInformation",
-      "storageKey": null,
-      "args": null,
-      "concreteType": "Visa",
-      "plural": false,
-      "selections": [
-        {
-          "kind": "LinkedField",
-          "alias": null,
-          "name": "requiredIn",
-          "storageKey": null,
-          "args": null,
-          "concreteType": "Location",
-          "plural": true,
-          "selections": v0
-        },
-        {
-          "kind": "LinkedField",
-          "alias": null,
-          "name": "warningIn",
-          "storageKey": null,
-          "args": null,
-          "concreteType": "Location",
-          "plural": true,
-          "selections": v0
-        }
-      ]
-    }
-  ]
-};
-})();
-// prettier-ignore
-(node/*: any*/).hash = '389022b56a00315a1f58e4dd6d439fb7';
-module.exports = node;


Test patch:
diff --git a/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap b/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
index 47399967..6bf7fd63 100644
--- a/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
+++ b/app/MMB/src/scenes/passenger/__tests__/__snapshots__/Passenger.test.js.snap
@@ -73,20 +73,17 @@ exports[`renders 1`] = `
         }
       />
     </Row>
-    <Relay(VisaInformationWithContext)
-      visa={
-        Object {
-          "birthday": "1984-05-10T00:00:00.000Z",
-          "fullName": "Trond Bergquist",
-          "insuranceType": "TRAVEL_PLUS",
-          "nationality": "no",
-          "title": "Mr",
-          "travelDocument": Object {
-            "idNumber": "123456",
-          },
-        }
-      }
-    />
+    <VisaInformationWithContext
+      requiredIn={Array []}
+      warningIn={Array []}
+    >
+      <VisaRequired
+        countries={Array []}
+      />
+      <VisaWarning
+        countries={Array []}
+      />
+    </VisaInformationWithContext>
   </MenuGroup>
 </SimpleCard>
 `;
diff --git a/app/MMB/src/scenes/passenger/visa/__tests__/VisaInformation.test.js b/app/MMB/src/scenes/passenger/visa/__tests__/VisaInformation.test.js
index a697905a..4500af24 100644
--- a/app/MMB/src/scenes/passenger/visa/__tests__/VisaInformation.test.js
+++ b/app/MMB/src/scenes/passenger/visa/__tests__/VisaInformation.test.js
@@ -9,13 +9,9 @@ import VisaRequired from '../VisaRequired';
 import VisaWarning from '../VisaWarning';
 
 const defaultProps = {
-  visa: {
-    visaInformation: {
-      requiredIn: [],
-      warningIn: [],
-    },
-    isPastBooking: false,
-  },
+  requiredIn: [],
+  warningIn: [],
+  isPastBooking: false,
 };
 
 describe('VisaInformation', () => {
@@ -24,15 +20,20 @@ describe('VisaInformation', () => {
       ...defaultProps,
       isPastBooking: true,
     };
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    const wrapper = renderer.create(<VisaInformation {...props} />);
+    const wrapper = renderer.create(
+      <VisaInformation {...props}>{false}</VisaInformation>,
+    );
 
     expect(wrapper.toTree().rendered).toBe(null);
   });
 
   it('renders visa ok when requiredIn and warningIn contains no elements', () => {
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    const wrapper = renderer.create(<VisaInformation {...defaultProps} />);
+    const wrapper = renderer.create(
+      <VisaInformation {...defaultProps}>
+        <VisaRequired countries={[]} />
+        <VisaWarning countries={[]} />
+      </VisaInformation>,
+    );
 
     expect(wrapper.root.findByType(VisaOk)).toBeDefined();
     expect(() => {
@@ -46,15 +47,16 @@ describe('VisaInformation', () => {
   it('renders visa warning and visa required when they contain elements', () => {
     const props = {
       ...defaultProps,
-      visa: {
-        visaInformation: {
-          requiredIn: [{ name: 'Norway' }],
-          warningIn: [{ name: 'Sweden' }],
-        },
-      },
+      requiredIn: ['Norway'],
+      warningIn: ['Norway'],
     };
-    // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
-    const wrapper = renderer.create(<VisaInformation {...props} />);
+
+    const wrapper = renderer.create(
+      <VisaInformation {...props}>
+        <VisaRequired countries={['Norway']} />
+        <VisaWarning countries={['Norway']} />
+      </VisaInformation>,
+    );
 
     expect(wrapper.root.findByType(VisaRequired)).toBeDefined();
     expect(wrapper.root.findByType(VisaWarning)).toBeDefined();