From b07366f5cee1e48592760c1c1e993fba731c888e Mon Sep 17 00:00:00 2001 From: u-e Date: Fri, 2 Aug 2019 01:13:00 +0300 Subject: [PATCH] wip on placeholder for boosts item --- src/components/basicUIElements/index.js | 2 + .../placeHolder/boostPlaceHolderStyles.js | 15 +++++ .../view/placeHolder/boostPlaceHolderView.js | 35 +++++++++++ src/screens/boost/container/boostContainer.js | 27 +++++++-- src/screens/boost/screen/boostScreen.js | 59 +++++++++++-------- 5 files changed, 107 insertions(+), 31 deletions(-) create mode 100644 src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js create mode 100644 src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js diff --git a/src/components/basicUIElements/index.js b/src/components/basicUIElements/index.js index 24e7d4c93..f4ff21f63 100644 --- a/src/components/basicUIElements/index.js +++ b/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, diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js new file mode 100644 index 000000000..dc9d791aa --- /dev/null +++ b/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, + }, +}); diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js new file mode 100644 index 000000000..a6fffb90a --- /dev/null +++ b/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( + + + + + + , + ); + }); + + return {listElements}; +}; + +const mapStateToProps = state => ({ + isDarkTheme: state.application.isDarkTheme, +}); + +export default connect(mapStateToProps)(BoostPlaceHolder); diff --git a/src/screens/boost/container/boostContainer.js b/src/screens/boost/container/boostContainer.js index 4ec1aa368..fc5b37ba5 100644 --- a/src/screens/boost/container/boostContainer.js +++ b/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 ; + return ; + + // 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" } } diff --git a/src/screens/boost/screen/boostScreen.js b/src/screens/boost/screen/boostScreen.js index 0556951bf..d36d06902 100644 --- a/src/screens/boost/screen/boostScreen.js +++ b/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 => ( - - {this._renderDeal(item)} - - buyItem(item.productId)} - height={50} - text={intl.formatMessage({ - id: 'boost.buy', - })} - isDisable={false} - isLoading={false} - > - - {this._getTitle(get(item, 'title'))} - - + {true ? ( + + ) : ( + productList.map(item => ( + + {this._renderDeal(item)} + + buyItem(item.productId)} + height={50} + text={intl.formatMessage({ + id: 'boost.buy', + })} + isDisable={false} + isLoading={false} + > + + {this._getTitle(get(item, 'title'))} + + + - - - + + - - {get(item, 'localizedPrice', 0)} + + {get(item, 'localizedPrice', null) && ( + {get(item, 'localizedPrice', 0)} + )} + - - ))} + )) + )} ); }