Merge pull request #1172 from esteemapp/new/boostContainer

created new boost container

.eslintrc.json

@@ -33,6 +33,7 @@
     "react/prop-types": 0,
     "import/no-named-default": "off",
     "no-param-reassign": "off",
-    "no-case-declarations": "off"
+    "no-case-declarations": "off",
+    "no-cycle": "off"
   }
 }

src/containers/inAppPurchaseContainer.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Platform, Alert } from 'react-native';
@@ -5,15 +6,13 @@ import { withNavigation } from 'react-navigation';
 import RNIap, { purchaseErrorListener, purchaseUpdatedListener } from 'react-native-iap';
 import { injectIntl } from 'react-intl';
 import get from 'lodash/get';
+
 // Services
-import { purchaseOrder } from '../../../providers/esteem/esteem';
-import bugsnag from '../../../config/bugsnag';
+import bugsnag from '../config/bugsnag';
+import { purchaseOrder } from '../providers/esteem/esteem';
 
 // Utilities
-import { default as ROUTES } from '../../../constants/routeNames';
-
-// Component
-import BoostScreen from '../screen/boostScreen';
+import { default as ROUTES } from '../constants/routeNames';
 
 const ITEM_SKUS = Platform.select({
   ios: ['099points', '199points', '499points', '999points', '4999points', '9999points'],
@@ -26,7 +25,7 @@ class BoostContainer extends Component {
     this.state = {
       productList: [],
       isLoading: true,
-      isProccesing: false,
+      isProcessing: false,
     };
   }
 
@@ -41,6 +40,7 @@ class BoostContainer extends Component {
       this.purchaseUpdateSubscription.remove();
       this.purchaseUpdateSubscription = null;
     }
+
     if (this.purchaseErrorSubscription) {
       this.purchaseErrorSubscription.remove();
       this.purchaseErrorSubscription = null;
@@ -74,7 +74,7 @@ class BoostContainer extends Component {
             } else if (Platform.OS === 'android') {
               RNIap.consumePurchaseAndroid(token);
             }
-            this.setState({ isProccesing: false });
+            this.setState({ isProcessing: false });
           })
           .catch(err =>
             bugsnag.notify(err, report => {
@@ -95,7 +95,7 @@ class BoostContainer extends Component {
           error.debugMessage,
         );
       }
-      this.setState({ isProccesing: false });
+      this.setState({ isProcessing: false });
     });
   };
 
@@ -119,7 +119,7 @@ class BoostContainer extends Component {
   _buyItem = async sku => {
     const { navigation } = this.props;
 
-    await this.setState({ isProccesing: true });
+    await this.setState({ isProcessing: true });
 
     if (sku !== 'freePoints') {
       try {
@@ -139,17 +139,19 @@ class BoostContainer extends Component {
   };
 
   render() {
-    const { productList, isLoading, isProccesing } = this.state;
+    const { children } = this.props;
+    const { productList, isLoading, isProcessing } = this.state;
     // const FREE_ESTM = { productId: 'freePoints', title: 'free estm' };
 
     return (
-      <BoostScreen
-        // productList={[...productList, FREE_ESTM]}
-        productList={productList}
-        buyItem={this._buyItem}
-        isLoading={isLoading}
-        isProccesing={isProccesing}
-      />
+      children &&
+      children({
+        // productList: [...productList, FREE_ESTM],
+        productList,
+        buyItem: this._buyItem,
+        isLoading,
+        isProcessing,
+      })
     );
   }
 }

src/containers/index.js

@@ -1,13 +1,15 @@
+import InAppPurchaseContainer from './inAppPurchaseContainer';
 import PointsContainer from './pointsContainer';
+import ProfileContainer from './profileContainer';
 import ProfileEditContainer from './profileEditContainer';
 import RedeemContainer from './redeemContainer';
 import TransferContainer from './transferContainer';
-import ProfileContainer from './profileContainer';
 
 export {
+  InAppPurchaseContainer,
   PointsContainer,
+  ProfileContainer,
   ProfileEditContainer,
   RedeemContainer,
   TransferContainer,
-  ProfileContainer,
 };

src/screens/boost/index.js

@@ -1,4 +0,0 @@
-import Boost from './container/boostContainer';
-
-export { Boost };
-export default Boost;

src/screens/boost/screen/boostScreen.js

@@ -1,106 +1,97 @@
-import React, { PureComponent, Fragment } from 'react';
-import { injectIntl } from 'react-intl';
+import React, { Fragment } from 'react';
 import { View, Text } from 'react-native';
 import get from 'lodash/get';
+import { useIntl } from 'react-intl';
 
 // Components
 import { BasicHeader, Icon, MainButton, BoostPlaceHolder } from '../../../components';
 
+// Container
+import { InAppPurchaseContainer } from '../../../containers';
+
 // Styles
 import globalStyles from '../../../globalStyles';
 import styles from './boostScreenStyles';
 
 const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' };
 
-class BoostScreen extends PureComponent {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedBoost: 0,
-    };
-  }
-
-  // Component Life Cycles
-
-  // Component Functions
-  _renderDeal = item => {
-    if (DEALS[item.productId]) {
-      return (
-        <View style={styles.descriptionWrapper}>
-          <Fragment>
-            <Text style={styles.description}>{DEALS[item.productId]}</Text>
-            <View style={styles.triangle} />
-          </Fragment>
-        </View>
-      );
-    }
-  };
-
-  _getTitle = title => {
-    let _title = title.toUpperCase();
-
-    if (_title.includes('(ESTEEM)')) {
-      _title = _title.replace('(ESTEEM)', '');
-    }
-
-    return _title;
-  };
-
-  render() {
-    const { intl, buyItem, productList, isLoading, isProccesing } = this.props;
-    const { selectedBoost } = this.state;
-
+const _renderDeal = item => {
+  if (DEALS[item.productId]) {
     return (
-      <View style={globalStyles.container}>
-        <BasicHeader
-          disabled={isProccesing}
-          title={intl.formatMessage({
-            id: 'boost.title',
-          })}
-        />
-
-        {isLoading ? (
-          <BoostPlaceHolder />
-        ) : (
-          productList.map(item => (
-            <View style={styles.boostLine} key={get(item, 'productId')}>
-              {this._renderDeal(item)}
-              <View style={styles.buttonWrapper}>
-                <MainButton
-                  style={styles.button}
-                  onPress={() => buyItem(item.productId)}
-                  height={50}
-                  text={intl.formatMessage({
-                    id: 'boost.buy',
-                  })}
-                  isDisable={isProccesing}
-                  isLoading={false}
-                >
-                  <View style={styles.buttonContent}>
-                    <Text style={styles.buttonText}>{this._getTitle(get(item, 'title'))}</Text>
-                    <View style={styles.buttonIconWrapper}>
-                      <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
-                    </View>
-                  </View>
-                </MainButton>
-              </View>
-
-              <View style={styles.priceWrapper}>
-                {get(item, 'localizedPrice', null) && (
-                  <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
-                )}
-              </View>
-            </View>
-          ))
-        )}
+      <View style={styles.descriptionWrapper}>
+        <Fragment>
+          <Text style={styles.description}>{DEALS[item.productId]}</Text>
+          <View style={styles.triangle} />
+        </Fragment>
       </View>
     );
   }
-}
 
-export default injectIntl(BoostScreen);
+  return null;
+};
+
+const _getTitle = title => {
+  let _title = title.toUpperCase();
+
+  if (_title.includes('(ESTEEM)')) {
+    _title = _title.replace('(ESTEEM)', '');
+  }
+
+  return _title;
+};
+
+const BoostScreen = () => {
+  const intl = useIntl();
+
+  return (
+    <InAppPurchaseContainer>
+      {({ buyItem, productList, isLoading, isProcessing }) => (
+        <View style={globalStyles.container}>
+          <BasicHeader
+            disabled={isProcessing}
+            title={intl.formatMessage({
+              id: 'boost.title',
+            })}
+          />
+
+          {isLoading ? (
+            <BoostPlaceHolder />
+          ) : (
+            productList.map(item => (
+              <View style={styles.boostLine} key={get(item, 'productId')}>
+                {_renderDeal(item)}
+                <View style={styles.buttonWrapper}>
+                  <MainButton
+                    style={styles.button}
+                    onPress={() => buyItem(item.productId)}
+                    height={50}
+                    text={intl.formatMessage({
+                      id: 'boost.buy',
+                    })}
+                    isDisable={isProcessing}
+                    isLoading={false}
+                  >
+                    <View style={styles.buttonContent}>
+                      <Text style={styles.buttonText}>{_getTitle(get(item, 'title'))}</Text>
+                      <View style={styles.buttonIconWrapper}>
+                        <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+                      </View>
+                    </View>
+                  </MainButton>
+                </View>
+
+                <View style={styles.priceWrapper}>
+                  {get(item, 'localizedPrice', null) && (
+                    <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
+                  )}
+                </View>
+              </View>
+            ))
+          )}
+        </View>
+      )}
+    </InAppPurchaseContainer>
+  );
+};
+
+export default BoostScreen;

src/screens/index.js

@@ -1,5 +1,4 @@
 import { Bookmarks } from './bookmarks';
-import { Boost } from './boost';
 import { Drafts } from './drafts';
 import { Editor } from './editor';
 import { Follows } from './follows';
@@ -12,6 +11,7 @@ import { Points } from './points';
 import { Post } from './post';
 import { SearchResult } from './searchResult';
 import { Settings } from './settings';
+import Boost from './boost/screen/boostScreen';
 import Profile from './profile/screen/profileScreen';
 import ProfileEdit from './profileEdit/screen/profileEditScreen';
 import Reblogs from './reblogs';