Remove withContext HOC

use HotelsFormContext as hook

app/core/src/screens/hotelsStack/Homepage.js

@@ -13,26 +13,12 @@ import { DateFormatter } from '@kiwicom/mobile-localization';
 import PlacepickerModal from './placepicker/PlacepickerModal';
 import HotelsForm from './HotelsForm';
 import {
-  withHotelsFormContext,
+  HotelsFormContext,
   type HotelsFormContextType,
 } from './HotelsFormContext';
 
 type Props = {|
   +navigation: NavigationType,
-  +cityName: string,
-  +cityId: string,
-  +checkin: Date,
-  +checkout: Date,
-  +coordinates: {|
-    +lat: number,
-    +lng: number,
-  |},
-  +adultsCount: number,
-  +childrenCount: Array<{| +age: number |}>,
-|};
-
-type State = {|
-  showPlacepicker: boolean,
 |};
 
 function Section({ children }: { children: React.Node }) {
@@ -43,123 +29,92 @@ function Section({ children }: { children: React.Node }) {
   return <View style={sectionStyle}>{children}</View>;
 }
 
-class Homepage extends React.Component<Props, State> {
-  static navigationOptions = {
-    headerTitle: (
-      <HeaderTitle>
-        <Translation passThrough="Welcome to rn-hotels" />
-      </HeaderTitle>
-    ),
-  };
-
-  state = {
-    showPlacepicker: false,
-  };
-
-  goToNewHotelsPage = () => {
-    const {
-      cityId,
-      cityName,
-      checkin,
-      checkout,
-      adultsCount,
-      childrenCount: children,
-    } = this.props;
-    this.props.navigation.navigate('NewHotelsPackage', {
+const Homepage = (props: Props) => {
+  const [showPlacepicker, setShowPlacepicker] = React.useState(false);
+  const {
+    cityName,
+    cityId,
+    checkin,
+    checkout,
+    coordinates: { lat, lng },
+    adultsCount,
+    children,
+  }: HotelsFormContextType = React.useContext(HotelsFormContext);
+
+  function goToNewHotelsPage() {
+    props.navigation.navigate('NewHotelsPackage', {
       cityId,
       cityName,
       currency: 'EUR',
       checkin: DateFormatter(checkin).formatForMachine(),
       checkout: DateFormatter(checkout).formatForMachine(),
       roomsConfiguration: [{ adultsCount, children }],
     });
-  };
+  }
 
-  goToStay22HotelsPage = () => {
-    const {
-      coordinates: { lat, lng },
-      cityName,
-      checkin,
-      checkout,
-      adultsCount,
-      childrenCount: children,
-    } = this.props;
-    this.props.navigation.navigate('NewHotelsPackage', {
+  function goToStay22HotelsPage() {
+    props.navigation.navigate('NewHotelsPackage', {
       cityName,
       currency: 'EUR',
       checkin: DateFormatter(checkin).formatForMachine(),
       checkout: DateFormatter(checkout).formatForMachine(),
       roomsConfiguration: [{ adultsCount, children }],
       coordinates: { latitude: lat, longitude: lng },
     });
-  };
-
-  goToSingleHotel = () => {
-    this.props.navigation.navigate('SingleHotelPackage');
-  };
-
-  togglePlacepicker = () => {
-    this.setState(state => ({
-      showPlacepicker: !state.showPlacepicker,
-    }));
-  };
+  }
 
-  render() {
-    return (
-      <LayoutSingleColumn testID="homePage">
-        <ScrollView>
-          <Section>
-            <HotelsForm togglePlacepicker={this.togglePlacepicker} />
-          </Section>
-          <Section>
-            <TextButton
-              title={<Translation passThrough="Open hotels" />}
-              testID="homePage__Hotels-button"
-              onPress={this.goToNewHotelsPage}
-            />
-          </Section>
+  function goToSingleHotel() {
+    props.navigation.navigate('SingleHotelPackage');
+  }
 
-          <Section>
-            <TextButton
-              title={<Translation passThrough="Open Stay 22Hotels" />}
-              onPress={this.goToStay22HotelsPage}
-            />
-          </Section>
+  function togglePlacepicker() {
+    setShowPlacepicker(show => !show);
+  }
 
-          <Section>
-            <TextButton
-              title={<Translation passThrough="Go to single hotel" />}
-              onPress={this.goToSingleHotel}
-            />
-          </Section>
-          <PlacepickerModal
-            isVisible={this.state.showPlacepicker}
-            onClose={this.togglePlacepicker}
-            onSave={this.togglePlacepicker}
-            cityName={this.props.cityName}
+  return (
+    <LayoutSingleColumn testID="homePage">
+      <ScrollView>
+        <Section>
+          <HotelsForm togglePlacepicker={togglePlacepicker} />
+        </Section>
+        <Section>
+          <TextButton
+            title={<Translation passThrough="Open hotels" />}
+            testID="homePage__Hotels-button"
+            onPress={goToNewHotelsPage}
           />
-        </ScrollView>
-      </LayoutSingleColumn>
-    );
-  }
-}
+        </Section>
 
-const select = ({
-  cityName,
-  cityId,
-  checkin,
-  checkout,
-  coordinates,
-  adultsCount,
-  children,
-}: HotelsFormContextType) => ({
-  cityName,
-  cityId,
-  checkin,
-  checkout,
-  coordinates,
-  adultsCount,
-  childrenCount: children,
-});
+        <Section>
+          <TextButton
+            title={<Translation passThrough="Open Stay 22Hotels" />}
+            onPress={goToStay22HotelsPage}
+          />
+        </Section>
 
-export default withHotelsFormContext(select)(Homepage);
+        <Section>
+          <TextButton
+            title={<Translation passThrough="Go to single hotel" />}
+            onPress={goToSingleHotel}
+          />
+        </Section>
+        <PlacepickerModal
+          isVisible={showPlacepicker}
+          onClose={togglePlacepicker}
+          onSave={togglePlacepicker}
+          cityName={cityName}
+        />
+      </ScrollView>
+    </LayoutSingleColumn>
+  );
+};
+
+Homepage.navigationOptions = {
+  headerTitle: (
+    <HeaderTitle>
+      <Translation passThrough="Welcome to rn-hotels" />
+    </HeaderTitle>
+  ),
+};
+
+export default Homepage;

app/core/src/screens/hotelsStack/HotelsForm.js

@@ -12,88 +12,86 @@ import {
 import { DateUtils } from '@kiwicom/mobile-localization';
 
 import {
-  withHotelsFormContext,
+  HotelsFormContext,
   type HotelsFormContextType,
 } from './HotelsFormContext';
 
 type Props = {|
-  +cityName: string,
   +togglePlacepicker: () => void,
-  +checkin: Date,
-  +checkout: Date,
-  +onCheckinChange: Date => void,
-  +onCheckoutChange: Date => void,
-  +onAdultsChange: number => void,
-  +adultsCount: number,
-  +childrenCount: number,
-  +onChildrenChange: boolean => void,
 |};
 
-class HotelsForm extends React.Component<Props> {
-  incrementAdults = () => {
-    this.props.onAdultsChange(1);
-  };
+export default function HotelsForm(props: Props) {
+  const {
+    cityName,
+    checkin,
+    checkout,
+    adultsCount,
+    children: childrenCount,
+    actions: { onCheckinChange, onCheckoutChange, setAdults, setChildren },
+  }: HotelsFormContextType = React.useContext(HotelsFormContext);
 
-  decrementAdults = () => {
-    this.props.onAdultsChange(-1);
-  };
+  function incrementAdults() {
+    setAdults(1);
+  }
 
-  incrementChildren = () => {
-    this.props.onChildrenChange(true);
-  };
+  function decrementAdults() {
+    setAdults(-1);
+  }
 
-  decrementChildren = () => {
-    this.props.onChildrenChange(false);
-  };
+  function incrementChildren() {
+    setChildren(true);
+  }
 
-  render() {
-    return (
-      <>
-        <Translation passThrough="Selected city (click to change)" />
-        <TextButton
-          title={<Translation passThrough={this.props.cityName} />}
-          onPress={this.props.togglePlacepicker}
-          type="secondary"
-        />
-        <View style={styles.row}>
-          <View style={styles.item}>
-            <Translation passThrough="checkin" />
-            <DatePicker
-              date={this.props.checkin}
-              onDateChange={this.props.onCheckinChange}
-              minDate={new Date()}
-            />
-          </View>
-          <View style={styles.item}>
-            <Translation passThrough="checkout" />
-            <DatePicker
-              date={this.props.checkout}
-              onDateChange={this.props.onCheckoutChange}
-              maxDate={DateUtils().addDays(365)}
-              minDate={DateUtils().addDays(1)}
-            />
-          </View>
-        </View>
-        <View style={styles.row}>
-          <Translation passThrough="Adults" />
-          <IncrementDecrementButtons
-            onIncrement={this.incrementAdults}
-            onDecrement={this.decrementAdults}
-            number={this.props.adultsCount}
-            showNumber={true}
-            plusButtonTestID="adultsIncrement"
+  function decrementChildren() {
+    setChildren(false);
+  }
+
+  return (
+    <>
+      <Translation passThrough="Selected city (click to change)" />
+      <TextButton
+        title={<Translation passThrough={cityName} />}
+        onPress={props.togglePlacepicker}
+        type="secondary"
+      />
+      <View style={styles.row}>
+        <View style={styles.item}>
+          <Translation passThrough="checkin" />
+          <DatePicker
+            date={checkin}
+            onDateChange={onCheckinChange}
+            minDate={new Date()}
           />
-          <Translation passThrough="Children" />
-          <IncrementDecrementButtons
-            onIncrement={this.incrementChildren}
-            onDecrement={this.decrementChildren}
-            number={this.props.childrenCount}
-            showNumber={true}
+        </View>
+        <View style={styles.item}>
+          <Translation passThrough="checkout" />
+          <DatePicker
+            date={checkout}
+            onDateChange={onCheckoutChange}
+            maxDate={DateUtils().addDays(365)}
+            minDate={DateUtils().addDays(1)}
           />
         </View>
-      </>
-    );
-  }
+      </View>
+      <View style={styles.row}>
+        <Translation passThrough="Adults" />
+        <IncrementDecrementButtons
+          onIncrement={incrementAdults}
+          onDecrement={decrementAdults}
+          number={adultsCount}
+          showNumber={true}
+          plusButtonTestID="adultsIncrement"
+        />
+        <Translation passThrough="Children" />
+        <IncrementDecrementButtons
+          onIncrement={incrementChildren}
+          onDecrement={decrementChildren}
+          number={childrenCount.length}
+          showNumber={true}
+        />
+      </View>
+    </>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -106,24 +104,3 @@ const styles = StyleSheet.create({
     marginEnd: 5,
   },
 });
-
-const select = ({
-  cityName,
-  checkin,
-  checkout,
-  adultsCount,
-  children,
-  actions: { onCheckinChange, onCheckoutChange, setAdults, setChildren },
-}: HotelsFormContextType) => ({
-  cityName,
-  checkin,
-  checkout,
-  onCheckinChange,
-  onCheckoutChange,
-  onAdultsChange: setAdults,
-  onChildrenChange: setChildren,
-  adultsCount,
-  childrenCount: children.length,
-});
-
-export default withHotelsFormContext(select)(HotelsForm);