Search parameters become persistant

It was achieved using async/await.
humayyani · Jun 17, 2019 · 0c685a1 · 0c685a1
1 parent 7ad06be
commit 0c685a1
Show file tree

Hide file tree

Showing 28 changed files with 150 additions and 110 deletions.
diff --git a/apps/core/components/searchForm/DatePicker.js b/apps/core/components/searchForm/DatePicker.js
@@ -25,7 +25,7 @@ type Props = {|
     +confirm: string,
   |},
   +numberOfRenderedMonths: number,
-  +onConfirm: ConfirmType => void,
+  +onConfirm: ConfirmType => void | Promise<void>,
   +onDismiss: () => void,
   +onPress: () => void,
   +style?: StylePropType,

diff --git a/apps/core/components/searchForm/Datepickers.js b/apps/core/components/searchForm/Datepickers.js
@@ -40,6 +40,7 @@ type Props = {|
   +setNightsInDestinationSelection: boolean => void,
   +setTripType: TripType => void,
   +layout: number,
+  +onDateSelect: () => void,
 |};
 
 type State = {|
@@ -72,7 +73,7 @@ class Datepickers extends React.Component<Props, State> {
     });
   };
 
-  handleDateChange = ({
+  handleDateChange = async ({
     dates,
     isNightsInDestinationSelected,
     nightsInDestination,
@@ -87,23 +88,23 @@ class Datepickers extends React.Component<Props, State> {
     } = this.props;
 
     if (this.state.isDepartureDatePickerVisible && dates) {
-      setDepartureDate(...dates);
+      await setDepartureDate(...dates);
     }
     if (
       this.state.isArrivalDatePickerVisible &&
       isNightsInDestinationSelected != null
     ) {
-      setNightsInDestinationSelection(isNightsInDestinationSelected);
-
+      await setNightsInDestinationSelection(isNightsInDestinationSelected);
       if (!isNightsInDestinationSelected && dates) {
-        setReturnDate(...dates);
+        await setReturnDate(...dates);
       } else if (nightsInDestination) {
-        setNightsInDestination(...nightsInDestination);
+        await setNightsInDestination(...nightsInDestination);
       }
       if (tripType === TRIP_TYPES.ONEWAY) {
-        setTripType(TRIP_TYPES.RETURN);
+        await setTripType(TRIP_TYPES.RETURN);
       }
     }
+    this.props.onDateSelect();
     this.handleDatePickerDismiss();
   };
 

diff --git a/apps/core/components/searchForm/PassengersInput.js b/apps/core/components/searchForm/PassengersInput.js
@@ -17,6 +17,7 @@ type Props = {|
   +adults: number,
   +infants: number,
   +setPassengerData: ($ReadOnly<Passengers>) => void,
+  +onParamsUpdate: () => void,
 |};
 
 type State = {|
@@ -28,8 +29,9 @@ class PassengersModal extends React.Component<Props, State> {
     showPassengerModal: false,
   };
 
-  handlePassengersSave = (passengersData: $ReadOnly<Passengers>) => {
-    this.props.setPassengerData(passengersData);
+  handlePassengersSave = async (passengersData: $ReadOnly<Passengers>) => {
+    await this.props.setPassengerData(passengersData);
+    this.props.onParamsUpdate();
     this.togglePassengerModal();
   };
 

diff --git a/apps/core/components/searchForm/PlacePicker/PlacePickerContent.js b/apps/core/components/searchForm/PlacePicker/PlacePickerContent.js
@@ -43,6 +43,8 @@ type Props = {|
     type: LocationSearchType,
     location: Location | Location[],
   ) => void,
+  +onPressSelect: () => void,
+  +onPlaceSelect: () => void,
 |};
 
 type State = {|
@@ -122,11 +124,13 @@ class PlacePickerContent extends React.Component<Props, State> {
     this.refetchSuggestions(text);
   };
 
-  handlePressOption = (option: OptionType) => {
-    const { setLocation, pickerType } = this.props;
+  handlePressOption = async (option: OptionType) => {
+    const { setLocation, pickerType, onPlaceSelect } = this.props;
     const location = mapOptionToLocation(option);
 
-    setLocation(pickerType, location);
+    await setLocation(pickerType, location);
+    onPlaceSelect();
+
     this.props.onClose();
   };
 

diff --git a/apps/core/components/searchForm/PlacePicker/PlacePickerRenderer.js b/apps/core/components/searchForm/PlacePicker/PlacePickerRenderer.js
@@ -15,16 +15,18 @@ import {
 type Props = {|
   +placeType: PlaceType,
   +onClose: () => void,
+  +onPlaceSelect: () => void,
 |};
 
 export default class PlacePickerRenderer extends React.Component<Props> {
   renderInner = (data: PlacePickerRendererQueryResponse) => {
-    const { placeType, onClose } = this.props;
+    const { placeType, onClose, onPlaceSelect } = this.props;
     return (
       <PlacePickerContent
         pickerType={this.getPickerType(placeType)}
         locations={data}
         onClose={onClose}
+        onPlaceSelect={onPlaceSelect}
       />
     );
   };

diff --git a/apps/core/components/searchForm/Placepickers.js b/apps/core/components/searchForm/Placepickers.js
@@ -30,8 +30,9 @@ import {
 type Props = {|
   +travelFrom: ?Array<Location>,
   +travelTo: ?Array<Location>,
-  +handlePlaceSwitchPress: () => void,
+  +switchFromTo: () => void,
   +layout: number,
+  +onPlaceSelect: () => void,
 |};
 
 type State = {|
@@ -58,17 +59,26 @@ class Placepickers extends React.Component<Props, State> {
     return '';
   };
 
-  onClose = () => this.setState({ isModalOpen: false });
+  onClose = () => {
+    this.setState({ isModalOpen: false });
+    this.props.onPlaceSelect();
+  };
 
   handleFromPress = () =>
     this.setState({ placeType: PLACE_TYPE.ORIGIN, isModalOpen: true });
 
   handleToPress = () =>
     this.setState({ placeType: PLACE_TYPE.DESTINATION, isModalOpen: true });
 
+  handlePlaceSwitchPress = async () => {
+    await this.props.switchFromTo();
+    this.props.onPlaceSelect();
+  };
+
   render() {
-    const { layout, travelFrom, travelTo, handlePlaceSwitchPress } = this.props;
+    const { layout, travelFrom, travelTo, onPlaceSelect } = this.props;
     const rowLayout = layout >= LAYOUT.largeMobile;
+
     return (
       <PickersWrapper layout={layout}>
         <TripInput
@@ -78,7 +88,7 @@ class Placepickers extends React.Component<Props, State> {
           icon={<Icon name="airplane-takeoff" />}
           value={this.getLocationsNames(travelFrom)}
         />
-        <TouchableWithoutFeedback onPress={handlePlaceSwitchPress}>
+        <TouchableWithoutFeedback onPress={this.handlePlaceSwitchPress}>
           <View
             style={[styles.placeSwitch, rowLayout && styles.rowPlaceSwitch]}
           >
@@ -95,6 +105,7 @@ class Placepickers extends React.Component<Props, State> {
           <PlacePicker
             onClose={this.onClose}
             placeType={this.state.placeType}
+            onPlaceSelect={onPlaceSelect}
           />
         </Modal>
       </PickersWrapper>
@@ -148,7 +159,7 @@ const select = ({
 }: SearchContextState) => ({
   travelFrom,
   travelTo,
-  handlePlaceSwitchPress: switchFromTo,
+  switchFromTo,
 });
 
 export default withLayoutContext(layoutSelect)(

diff --git a/apps/core/components/searchForm/SearchForm.js b/apps/core/components/searchForm/SearchForm.js
@@ -66,76 +66,78 @@ class SearchForm extends React.Component<Props> {
     return '';
   };
 
-  handleSubmitPress = () => {
+  getSearchParams = () => {
     const {
       travelFrom,
       travelTo,
       tripType,
       adults,
       infants,
       limit,
-      onSubmit,
       isNightsInDestinationSelected,
       nightsInDestinationFrom,
       nightsInDestinationTo,
     } = this.props;
 
+    const dateFrom = format(this.props.dateFrom, BASIC_ISO_DATE_FORMAT);
+    const dateTo = format(this.props.dateTo, BASIC_ISO_DATE_FORMAT);
+    const returnDateFrom = format(
+      this.props.returnDateFrom,
+      BASIC_ISO_DATE_FORMAT,
+    );
+    const returnDateTo = format(this.props.returnDateTo, BASIC_ISO_DATE_FORMAT);
+
+    return {
+      travelFrom: qs.stringify(travelFrom),
+      travelTo: qs.stringify(travelTo),
+      travelFromName: this.convertLocationsToParams(travelFrom, 'name'),
+      travelToName: this.convertLocationsToParams(travelTo, 'name'),
+      sortBy: 'QUALITY',
+      limit,
+      adults,
+      infants,
+      dateFrom,
+      dateTo,
+      tripType,
+      ...(tripType === TRIP_TYPES.RETURN // @TODO refactor
+        ? isNightsInDestinationSelected
+          ? {
+              isNightsInDestinationSelected,
+              nightsInDestinationFrom: parseInt(nightsInDestinationFrom, 10),
+              nightsInDestinationTo: parseInt(nightsInDestinationTo, 10),
+            }
+          : {
+              returnDateFrom,
+              returnDateTo,
+            }
+        : {}),
+    };
+  };
+
+  handleSubmitPress = () => {
+    const { travelFrom } = this.props;
     if (travelFrom == null || travelFrom.length === 0) {
       this.props.setAlertContent({
         message: 'Please choose an origin place',
       });
     } else {
-      const dateFrom = format(this.props.dateFrom, BASIC_ISO_DATE_FORMAT);
-      const dateTo = format(this.props.dateTo, BASIC_ISO_DATE_FORMAT);
-      const returnDateFrom = format(
-        this.props.returnDateFrom,
-        BASIC_ISO_DATE_FORMAT,
-      );
-      const returnDateTo = format(
-        this.props.returnDateTo,
-        BASIC_ISO_DATE_FORMAT,
-      );
-      if (onSubmit != null) {
-        onSubmit({
-          dateFrom,
-          dateTo,
-          returnDateFrom,
-          returnDateTo,
-          nightsInDestinationFrom,
-          nightsInDestinationTo,
-          tripType,
-          travelFrom,
-          travelTo,
-          sort: 'QUALITY',
-          limit,
-          adults,
-          infants,
-        });
-      }
+      const searchParams = this.getSearchParams();
+      this.props.navigation.navigate(Routes.RESULTS, {
+        ...searchParams,
+      });
+    }
+  };
+
+  handleParamsUpdate = () => {
+    const { travelFrom } = this.props;
+    if (travelFrom == null || travelFrom.length === 0) {
+      this.props.setAlertContent({
+        message: 'Please choose an origin place',
+      });
+    } else if (Platform.OS === 'web') {
+      const searchParams = this.getSearchParams();
       this.props.navigation.navigate(Routes.RESULTS, {
-        travelFrom: qs.stringify(travelFrom),
-        travelTo: qs.stringify(travelTo),
-        travelFromName: this.convertLocationsToParams(travelFrom, 'name'),
-        travelToName: this.convertLocationsToParams(travelTo, 'name'),
-        sort: 'QUALITY',
-        limit,
-        adults,
-        infants,
-        dateFrom,
-        dateTo,
-        tripType,
-        ...(tripType === TRIP_TYPES.RETURN // @TODO refactor
-          ? isNightsInDestinationSelected
-            ? {
-                isNightsInDestinationSelected,
-                nightsInDestinationFrom: parseInt(nightsInDestinationFrom, 10),
-                nightsInDestinationTo: parseInt(nightsInDestinationTo, 10),
-              }
-            : {
-                returnDateFrom,
-                returnDateTo,
-              }
-          : {}),
+        ...searchParams,
       });
     }
   };
@@ -144,10 +146,10 @@ class SearchForm extends React.Component<Props> {
     const desktopLayout = this.props.layout >= LAYOUT.desktop;
     return (
       <>
-        <SearchFormModes />
+        <SearchFormModes onParamsUpdate={this.handleParamsUpdate} />
         <View style={desktopLayout && styles.inputsDesktop}>
-          <Placepickers />
-          <Datepickers />
+          <Placepickers onPlaceSelect={this.handleParamsUpdate} />
+          <Datepickers onDateSelect={this.handleParamsUpdate} />
           <View style={[styles.bottom, desktopLayout && styles.bottomDesktop]}>
             {this.props.showButton && (
               <Button

diff --git a/apps/core/components/searchForm/SearchFormModes.js b/apps/core/components/searchForm/SearchFormModes.js
@@ -8,12 +8,16 @@ import { StyleSheet } from '@kiwicom/universal-components';
 import TripTypeSelect from './TripTypeSelect';
 import PassengersInput from './PassengersInput';
 
-const SearchFormModes = () => {
+type Props = {|
+  +onParamsUpdate: () => void,
+|};
+
+const SearchFormModes = ({ onParamsUpdate }: Props) => {
   return (
     <View style={styles.container}>
-      <TripTypeSelect />
+      <TripTypeSelect onParamsUpdate={onParamsUpdate} />
       <View style={styles.hSpacer} />
-      <PassengersInput />
+      <PassengersInput onParamsUpdate={onParamsUpdate} />
     </View>
   );
 };

diff --git a/apps/core/components/searchForm/TripTypeSelect.js b/apps/core/components/searchForm/TripTypeSelect.js
@@ -26,6 +26,7 @@ type Props = {|
   +tripType: string,
   +layout: number,
   +setTripType: string => void,
+  +onParamsUpdate: () => void,
 |};
 
 type State = {|
@@ -37,9 +38,10 @@ class TripTypeSelect extends React.Component<Props, State> {
     showTripTypeModal: false,
   };
 
-  handleTripTypeSelect = (type: string) => {
+  handleTripTypeSelect = async (type: string) => {
     if (type === TRIP_TYPES.RETURN || type === TRIP_TYPES.ONEWAY) {
-      this.props.setTripType(type);
+      await this.props.setTripType(type);
+      this.props.onParamsUpdate();
     }
   };
 

diff --git a/apps/core/contexts/searchContext/__tests__/helpers.test.js b/apps/core/contexts/searchContext/__tests__/helpers.test.js
@@ -40,7 +40,7 @@ const urlQuery = {
     '0%5Bid%5D=TG9jYXRpb246b3Nsb19ubw%3D%3D&0%5BlocationId%5D=oslo_no&0%5Bname%5D=Oslo&0%5Btype%5D=destination',
   travelFromName: 'Prague',
   travelToName: 'Oslo',
-  sort: 'QUALITY',
+  sortBy: 'QUALITY',
   limit: '50',
   adults: '2',
   infants: '1',
@@ -63,7 +63,7 @@ describe('parseURLqueryToState', () => {
       "limit": 50,
       "returnDateFrom": 2019-06-03T00:00:00.000Z,
       "returnDateTo": 2019-06-03T00:00:00.000Z,
-      "sort": "QUALITY",
+      "sortBy": "QUALITY",
       "travelFrom": Array [
         Object {
           "id": "TG9jYXRpb246cHJhZ3VlX2N6",