wip on placeholder for boosts item

src/components/basicUIElements/index.js

@@ -18,6 +18,7 @@ import ProfileSummaryPlaceHolder from './view/placeHolder/profileSummaryPlaceHol
 import WalletDetailsPlaceHolder from './view/placeHolder/walletDetailsPlaceHolder';
 import WalletUnclaimedPlaceHolder from './view/placeHolder/walletUnclaimedPlaceHolder';
 import ListPlaceHolder from './view/placeHolder/listPlaceHolderView';
+import BoostPlaceHolder from './view/placeHolder/boostPlaceHolderView';
 
 export {
   Card,
@@ -26,6 +27,7 @@ export {
   LineBreak,
   ListItemPlaceHolder,
   ListPlaceHolder,
+  BoostPlaceHolder,
   NoInternetConnection,
   NoPost,
   PostCardPlaceHolder,

src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js

@@ -0,0 +1,15 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    backgroundColor: '$primaryBackgroundColor',
+    borderColor: '$primaryLightBackground',
+    marginRight: 0,
+    marginLeft: 0,
+    flex: 1,
+    flexDirection: 'row',
+  },
+  paragraphWrapper: {
+    marginLeft: 50,
+  },
+});

src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js

@@ -0,0 +1,35 @@
+/* eslint-disable radix */
+import React, { Fragment } from 'react';
+import { connect } from 'react-redux';
+import { Dimensions, View } from 'react-native';
+import times from 'lodash/times';
+import Placeholder from 'rn-placeholder';
+
+import styles from './boostPlaceHolderStyles';
+
+const HEIGHT = Dimensions.get('window').height;
+
+const BoostPlaceHolder = ({ isDarkTheme }) => {
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
+  const ratio = (HEIGHT - 300) / 50;
+  const listElements = [];
+
+  times(parseInt(ratio), i => {
+    listElements.push(
+      <View key={i}>
+        <Placeholder.Box width={90} height={40} />
+        <View style={styles.paragraphWrapper}>
+          <Placeholder.Box width={120} radius={20} height={40} />
+        </View>
+      </View>,
+    );
+  });
+
+  return <View style={styles.container}>{listElements}</View>;
+};
+
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(BoostPlaceHolder);

src/screens/boost/container/boostContainer.js

@@ -39,6 +39,7 @@ class BoostContainer extends Component {
     this.state = {
       receipt: '',
       productList: [],
+      isLoading: true,
     };
   }
 
@@ -67,11 +68,11 @@ class BoostContainer extends Component {
   _getItems = async () => {
     try {
       const products = await RNIap.getProducts(ITEM_SKUS);
-      console.log('Products', products);
       products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)).reverse();
-      this.setState({ productList: products });
+      await this.setState({ productList: products });
+      this.setState({ isLoading: false });
     } catch (err) {
-      console.warn(err.code, err.message);
+      this.setState({ isLoading: false });
     }
   };
 
@@ -103,9 +104,25 @@ class BoostContainer extends Component {
   // };
 
   render() {
-    const { productList } = this.state;
+    const { productList, isLoading } = this.state;
+    const _freeEstm = { productId: 0, title: 'free esteem', localizedPrice: null };
 
-    return <BoostScreen boostData={productList} buyItem={this._buyItem} />;
+    return <BoostScreen productList={productList} buyItem={this._buyItem} isLoading={isLoading} />;
+
+    //     currency: "TRY"
+    // description: "Get $0,99 worth of ESTM to boost experience"
+    // discounts: []
+    // introductoryPrice: ""
+    // introductoryPriceNumberOfPeriodsIOS: ""
+    // introductoryPricePaymentModeIOS: ""
+    // introductoryPriceSubscriptionPeriodIOS: ""
+    // localizedPrice: "₺6,99"
+    // price: "6.99"
+    // productId: "099points"
+    // subscriptionPeriodNumberIOS: "0"
+    // subscriptionPeriodUnitIOS: "DAY"
+    // title: "100 ESTM"
+    // type: "Do not use this. It returned sub only before"
   }
 }
 

src/screens/boost/screen/boostScreen.js

@@ -7,6 +7,7 @@ import get from 'lodash/get';
 import { BasicHeader } from '../../../components/basicHeader';
 import { MainButton } from '../../../components/mainButton';
 import { Icon } from '../../../components/icon';
+import { BoostPlaceHolder } from '../../../components/basicUIElements';
 
 // Styles
 import globalStyles from '../../../globalStyles';
@@ -50,7 +51,7 @@ class BoostScreen extends PureComponent {
   };
 
   render() {
-    const { intl, buyItem, boostData } = this.props;
+    const { intl, buyItem, productList, isLoading } = this.props;
     const { selectedBoost } = this.state;
 
     return (
@@ -61,34 +62,40 @@ class BoostScreen extends PureComponent {
           })}
         />
 
-        {boostData.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={false}
-                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} />
+        {true ? (
+          <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={false}
+                  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>
-                </View>
-              </MainButton>
-            </View>
+                </MainButton>
+              </View>
 
-            <View style={styles.priceWrapper}>
-              <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
+              <View style={styles.priceWrapper}>
+                {get(item, 'localizedPrice', null) && (
+                  <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
+                )}
+              </View>
             </View>
-          </View>
-        ))}
+          ))
+        )}
       </View>
     );
   }