⬆ Bump to RN 0.66

⬆ Bump apollo client
⬆ Bump dev dependencies
♻ Refactor ProofContainer into useProof (untested)
🚨 Format with prettier

src/modules/membership/MembershipContainer.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
 import Membership from './Membership';
-import ProofContainer from './ProofContainer';
+import Proof from './Proof';
 import { logout } from '../../actions';
 import { requestUserData } from '../../api';
 
@@ -54,7 +54,7 @@ class MembershipContainer extends Component {
   render() {
     if (this.props.user) {
       return (
-        <ProofContainer
+        <Proof
           user={this.props.user}
           isFetchingUserData={this.props.isFetchingUserData}
           isAuthenticated={this.props.isAuthenticated}
@@ -84,7 +84,4 @@ function storeToProps(store) {
   };
 }
 
-export default connect(
-  storeToProps,
-  { requestUserData, logout }
-)(MembershipContainer);
+export default connect(storeToProps, { requestUserData, logout })(MembershipContainer);

src/modules/membership/Proof.js

@@ -4,6 +4,7 @@ import { Button, Text as NBText, Spinner } from 'native-base';
 import Confetti from 'react-native-confetti';
 
 import theme from '../../theme';
+import useProof from './useProof';
 
 const MembershipValidTo = ({ user }) => {
   if (!user.last_membership) {
@@ -118,19 +119,10 @@ const MembershipName = ({ user }) => {
   );
 };
 
-const Proof = ({
-  chargeError,
-  user,
-  fetchUser,
-  isFetchingUserData,
-  isChargingMembership,
-  isLoadingMembershipType,
-  membershipPrice,
-  onChargePress,
-  onLogoutPress,
-}) => {
+const Proof = ({ onLogoutPress, user, fetchUser, isFetchingUserData }) => {
   const CONFETTI_TIMEOUT = 15000;
   const confettiRef = useRef(null);
+  const { chargeError, isChargingMembership, isLoadingMembershipType, onChargePress, membershipPrice } = useProof();
 
   useEffect(() => {
     return () => {

src/modules/membership/ProofContainer.js

@@ -1,97 +0,0 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import stripe from 'tipsi-stripe';
-import Config from 'react-native-config';
-import { graphql } from 'react-apollo';
-import gql from 'graphql-tag';
-
-import Proof from './Proof';
-import { requestMembershipCharge } from '../../api';
-
-stripe.setOptions({
-  publishableKey: Config.STRIPE_PUBLISHABLE_KEY || '',
-});
-
-class ProofContainer extends Component {
-  getPrice(membershipTypes) {
-    if (!membershipTypes) {
-      return 0;
-    }
-
-    return membershipTypes[0].price / 100;
-  }
-
-  componentDidMount = () => {
-    this.checkExpiry();
-  };
-
-  render() {
-    return (
-      <Proof
-        user={this.props.user}
-        fetchUser={this.props.fetchUser}
-        isFetchingUserData={this.props.isFetchingUserData}
-        isChargingMembership={this.props.isChargingMembership}
-        isLoadingMembershipType={this.props.data.loading}
-        chargeError={this.props.chargeError ? this.props.chargeError : ''}
-        onChargePress={this.openStripe}
-        onLogoutPress={this.props.onLogoutPress}
-        membershipPrice={this.getPrice(this.props.data.membershipTypes)}
-      />
-    );
-  }
-
-  checkExpiry() {
-    const { user, fetchUser } = this.props;
-    const todaysDate = new Date().toISOString().substring(0, 10);
-    const lastMembership = user.last_membership;
-    if (lastMembership && lastMembership.membership_type !== 'lifelong' && lastMembership.end_date < todaysDate) {
-      fetchUser();
-    }
-  }
-
-  openStripe = () => {
-    const options = {
-      prefilledInformation: {
-        email: this.props.user.email,
-      },
-      smsAutofillDisabled: true,
-    };
-
-    const membershipTypeSlug = this.props.data.membershipTypes ? this.props.data.membershipTypes[0].slug : 'standard';
-
-    stripe.paymentRequestWithCardForm(options).then(
-      (token) => {
-        // returns a token.tokenId which should be saved
-        this.props.requestMembershipCharge(
-          this.props.userToken,
-          { id: token.tokenId, email: this.props.user.email },
-          membershipTypeSlug
-        );
-      },
-      () => {
-        /* FIXME: Happens only if card dialog is canceled? */
-      }
-    );
-  };
-}
-
-const PROOF_QUERY = gql`
-  {
-    membershipTypes(isDefault: true) {
-      slug
-      price
-    }
-  }
-`;
-
-const proofContainerWithState = connect(
-  (store) => ({
-    userToken: store.userToken,
-    isChargingMembership: store.isChargingMembership,
-    chargeError: store.chargeError,
-  }),
-  { requestMembershipCharge }
-)(ProofContainer);
-
-export default graphql(PROOF_QUERY)(proofContainerWithState);

src/modules/membership/useProof.js

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import stripe from 'tipsi-stripe';
+import Config from 'react-native-config';
+import { gql, useQuery } from '@apollo/client';
+
+import { requestMembershipCharge } from '../../api';
+
+stripe.setOptions({
+  publishableKey: Config.STRIPE_PUBLISHABLE_KEY || '',
+});
+
+const PROOF_QUERY = gql`
+  {
+    membershipTypes(isDefault: true) {
+      slug
+      price
+    }
+  }
+`;
+
+function getPrice(membershipTypes) {
+  if (!membershipTypes) {
+    return 0;
+  }
+
+  return membershipTypes[0].price / 100;
+}
+
+// FIXME: where do these come from?
+const useProof = ({ user, fetchUser }) => {
+  const dispatch = useDispatch();
+  const { userToken, isChargingMembership, chargeError } = useSelector((state) => ({
+    userToken: state.userToken,
+    isChargingMembership: state.isChargingMembership,
+    chargeError: state.chargeError,
+  }));
+  const { data, loading } = useQuery(PROOF_QUERY);
+
+  const openStripe = () => {
+    const options = {
+      prefilledInformation: {
+        email: user.email,
+      },
+      smsAutofillDisabled: true,
+    };
+
+    const membershipTypeSlug = data.membershipTypes ? data.membershipTypes[0].slug : 'standard';
+
+    stripe.paymentRequestWithCardForm(options).then(
+      (token) => {
+        // returns a token.tokenId which should be saved
+        dispatch(requestMembershipCharge(userToken, { id: token.tokenId, email: user.email }, membershipTypeSlug));
+      },
+      () => {
+        /* FIXME: Happens only if card dialog is canceled? */
+      }
+    );
+  };
+
+  useEffect(() => {
+    const todaysDate = new Date().toISOString().substring(0, 10);
+    const lastMembership = user.last_membership;
+    if (lastMembership && lastMembership.membership_type !== 'lifelong' && lastMembership.end_date < todaysDate) {
+      fetchUser();
+    }
+  }, []);
+
+  return {
+    chargeError: chargeError || '',
+    isChargingMembership,
+    isLoadingMembershipType: loading,
+    membershipPrice: getPrice(data.membershipTypes),
+    onChargePress: openStripe,
+  };
+};
+
+export default useProof;

src/modules/register/UserRegister.js

@@ -23,7 +23,7 @@ export default class UserRegister extends Component {
   validateForm(triggeredBy) {
     const fieldNames = ['firstName', 'lastName', 'email', 'phoneNumber', 'password'];
 
-    const errors = Object.assign({}, this.state.errors);
+    const errors = { ...this.state.errors };
     const touched = new Set(this.state.touched).add(triggeredBy);
 
     /* No empty fields */

src/modules/register/UserRegisterContainer.js

@@ -44,7 +44,4 @@ function storeToProps(store) {
     registerError: errors,
   };
 }
-export default connect(
-  storeToProps,
-  { requestRegisterUser }
-)(UserRegisterContainer);
+export default connect(storeToProps, { requestRegisterUser })(UserRegisterContainer);