Merge branch 'bugfix/markdown-darktheme' of github.com:esteemapp/esteem-mobile into development

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

@@ -1,26 +1,36 @@
 /* eslint-disable radix */
 import React from 'react';
-import { connect } from 'react-redux';
 import { Dimensions, View } from 'react-native';
 import times from 'lodash/times';
 import Placeholder from 'rn-placeholder';
 
+import { ThemeContainer } from '../../../../containers';
+
 import styles from './boostPlaceHolderStyles';
 
 const HEIGHT = Dimensions.get('window').height;
 
-const BoostPlaceHolder = ({ isDarkTheme }) => {
+const BoostPlaceHolder = () => {
-  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
   const ratio = (HEIGHT - 300) / 50 / 1.3;
   const listElements = [];
 
   times(parseInt(ratio), i => {
     listElements.push(
+      <ThemeContainer>
+        {({ isDarkTheme }) => {
+          const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
+          return (
             <View style={styles.container} key={i}>
               <View style={styles.line}>
                 <Placeholder.Box color={color} width={90} height={40} animate="fade" />
                 <View style={styles.paragraphWrapper}>
-            <Placeholder.Box color={color} width={140} radius={25} height={50} animate="fade" />
+                  <Placeholder.Box
+                    color={color}
+                    width={140}
+                    radius={25}
+                    height={50}
+                    animate="fade"
+                  />
                 </View>
                 <Placeholder.Box
                   style={styles.rightBox}
@@ -30,15 +40,14 @@ const BoostPlaceHolder = ({ isDarkTheme }) => {
                   animate="fade"
                 />
               </View>
-      </View>,
+            </View>
+          );
+        }}
+      </ThemeContainer>,
     );
   });
 
   return <View style={styles.container}>{listElements}</View>;
 };
 
-const mapStateToProps = state => ({
+export default BoostPlaceHolder;
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(BoostPlaceHolder);

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

@@ -1,13 +1,16 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
+import { ThemeContainer } from '../../../../containers';
+
 import styles from './listItemPlaceHolderStyles';
 
-const ListItemPlaceHolderView = ({ isDarkTheme }) => {
+const ListItemPlaceHolderView = () => {
+  return (
+    <ThemeContainer>
+      {({ isDarkTheme }) => {
         const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-
         return (
           <View style={styles.container}>
             <Placeholder.Media size={30} hasRadius animate="fade" color={color} />
@@ -25,10 +28,9 @@ const ListItemPlaceHolderView = ({ isDarkTheme }) => {
             </View>
           </View>
         );
+      }}
+    </ThemeContainer>
+  );
 };
 
-const mapStateToProps = state => ({
+export default ListItemPlaceHolderView;
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(ListItemPlaceHolderView);

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

@@ -1,6 +1,5 @@
 /* eslint-disable radix */
 import React, { Fragment } from 'react';
-import { connect } from 'react-redux';
 import { Dimensions } from 'react-native';
 import times from 'lodash/times';
 
@@ -18,9 +17,4 @@ const ListPlaceHolderView = () => {
 
   return <Fragment>{listElements}</Fragment>;
 };
-
+export default ListPlaceHolderView;
-const mapStateToProps = state => ({
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(ListPlaceHolderView);

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

@@ -1,13 +1,16 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
+import { ThemeContainer } from '../../../../containers';
+
 import styles from './postCardPlaceHolderStyles';
 // TODO: make container for place holder wrapper after alpha
-const PostCardPlaceHolder = ({ isDarkTheme }) => {
+const PostCardPlaceHolder = () => {
+  return (
+    <ThemeContainer>
+      {({ isDarkTheme }) => {
         const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
-
         return (
           <View style={styles.container}>
             <View style={styles.textWrapper}>
@@ -29,10 +32,8 @@ const PostCardPlaceHolder = ({ isDarkTheme }) => {
             </View>
           </View>
         );
+      }}
+    </ThemeContainer>
+  );
 };
-
+export default PostCardPlaceHolder;
-const mapStateToProps = state => ({
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(PostCardPlaceHolder);

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

@@ -1,11 +1,15 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
+import { ThemeContainer } from '../../../../containers';
+
 import styles from './postCardPlaceHolderStyles';
-// TODO: make container for place holder wrapper after alpha
+
-const PostPlaceHolder = ({ isDarkTheme }) => {
+const PostPlaceHolder = () => {
+  return (
+    <ThemeContainer>
+      {({ isDarkTheme }) => {
         const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
         return (
@@ -38,10 +42,9 @@ const PostPlaceHolder = ({ isDarkTheme }) => {
             </View>
           </View>
         );
+      }}
+    </ThemeContainer>
+  );
 };
 
-const mapStateToProps = state => ({
+export default PostPlaceHolder;
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(PostPlaceHolder);

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

@@ -1,11 +1,15 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { View } from 'react-native';
 import Placeholder from 'rn-placeholder';
 
+import { ThemeContainer } from '../../../../containers';
+
 import styles from './profileSummaryPlaceHolderStyles';
 // TODO: make container for place holder wrapper after alpha
-const ProfileSummaryPlaceHolder = ({ isDarkTheme }) => {
+const ProfileSummaryPlaceHolder = () => {
+  return (
+    <ThemeContainer>
+      {({ isDarkTheme }) => {
         const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
         return (
@@ -28,10 +32,9 @@ const ProfileSummaryPlaceHolder = ({ isDarkTheme }) => {
             </View>
           </View>
         );
+      }}
+    </ThemeContainer>
+  );
 };
 
-const mapStateToProps = state => ({
+export default ProfileSummaryPlaceHolder;
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(ProfileSummaryPlaceHolder);

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

@@ -1,10 +1,11 @@
 /* eslint-disable radix */
 import React, { Fragment } from 'react';
-import { connect } from 'react-redux';
 import { View, Dimensions } from 'react-native';
 import Placeholder from 'rn-placeholder';
 import times from 'lodash/times';
 
+import { ThemeContainer } from '../../../../containers';
+
 import styles from './walletDetailsPlaceHolderStyles';
 
 const HEIGHT = Dimensions.get('window').height;
@@ -24,7 +25,9 @@ const listPlaceHolderView = color => {
   return <Fragment>{listElements}</Fragment>;
 };
 
-const WalletDetailsPlaceHolder = ({ isDarkTheme }) => {
+const WalletDetailsPlaceHolder = () => (
+  <ThemeContainer>
+    {({ isDarkTheme }) => {
       const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
 
       return (
@@ -35,10 +38,8 @@ const WalletDetailsPlaceHolder = ({ isDarkTheme }) => {
           {listPlaceHolderView(color)}
         </View>
       );
-};
+    }}
+  </ThemeContainer>
+);
 
-const mapStateToProps = state => ({
+export default WalletDetailsPlaceHolder;
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(WalletDetailsPlaceHolder);

src/components/bottomTabBar/view/bottomTabBarView.js

@@ -10,7 +10,7 @@ import { updateActiveBottomTab } from '../../../redux/actions/uiAction';
 import ROUTES from '../../../constants/routeNames';
 
 // Container
-import { DarkThemeContainer } from '../../../containers';
+import { ThemeContainer } from '../../../containers';
 
 // Components
 import TabBar from './tabbar';
@@ -44,7 +44,7 @@ const BottomTabBarView = ({
   }, [dispatch, index, routes]);
 
   return (
-    <DarkThemeContainer>
+    <ThemeContainer>
       {({ isDarkTheme }) => (
         <SafeAreaView style={styles.wrapper}>
           <TabBar
@@ -74,7 +74,7 @@ const BottomTabBarView = ({
           </TabBar>
         </SafeAreaView>
       )}
-    </DarkThemeContainer>
+    </ThemeContainer>
   );
 };
 

src/components/header/view/headerView.js

@@ -34,7 +34,6 @@ class HeaderView extends Component {
 
   render() {
     const {
-      avatarUrl,
       displayName,
       handleOnPressBackButton,
       handleOpenDrawer,

src/components/markdownEditor/view/markdownEditorView.js

@@ -13,6 +13,8 @@ import { PostBody } from '../../postElements';
 import { StickyBar } from '../../basicUIElements';
 import { TextInput } from '../../textInput';
 
+import { ThemeContainer } from '../../../containers';
+
 // Styles
 import styles from './markdownEditorStyles';
 
@@ -201,6 +203,8 @@ export default class MarkdownEditorView extends Component {
         behavior={Platform.OS === 'ios' ? 'padding' : null}
       >
         {!isPreviewActive ? (
+          <ThemeContainer>
+            {({ isDarkTheme }) => (
               <TextInput
                 multiline
                 onChangeText={this._changeText}
@@ -208,7 +212,7 @@ export default class MarkdownEditorView extends Component {
                 placeholder={intl.formatMessage({
                   id: isReply ? 'editor.reply_placeholder' : 'editor.default_placeholder',
                 })}
-            placeholderTextColor="#c1c5c7"
+                placeholderTextColor={isDarkTheme ? '#526d91' : '#c1c5c7'}
                 selection={selection}
                 selectionColor="#357ce6"
                 style={styles.textWrapper}
@@ -217,6 +221,8 @@ export default class MarkdownEditorView extends Component {
                 innerRef={this.inputRef}
                 editable={!isLoading}
               />
+            )}
+          </ThemeContainer>
         ) : (
           this._renderPreview()
         )}

src/components/notification/view/notificationView.js

@@ -10,6 +10,7 @@ import { ContainerHeader } from '../../containerHeader';
 import { FilterBar } from '../../filterBar';
 import { NotificationLine } from '../..';
 import { ListPlaceHolder } from '../../basicUIElements';
+import { ThemeContainer } from '../../../containers';
 
 // Utils
 import { isToday, isYesterday, isThisWeek, isThisMonth } from '../../../utils/time';
@@ -149,12 +150,7 @@ class NotificationView extends PureComponent {
   );
 
   render() {
-    const {
+    const { readAllNotification, getActivities, isNotificationRefreshing } = this.props;
-      readAllNotification,
-      getActivities,
-      isNotificationRefreshing,
-      isDarkTheme,
-    } = this.props;
     const { filters, selectedFilter } = this.state;
     const _notifications = this._getNotificationsArrays();
 
@@ -178,6 +174,8 @@ class NotificationView extends PureComponent {
           ListFooterComponent={this._renderFooterLoading}
           ListEmptyComponent={<ListPlaceHolder />}
           refreshControl={
+            <ThemeContainer>
+              {({ isDarkTheme }) => (
                 <RefreshControl
                   refreshing={isNotificationRefreshing}
                   progressBackgroundColor="#357CE6"
@@ -185,6 +183,8 @@ class NotificationView extends PureComponent {
                   titleColor="#fff"
                   colors={['#fff']}
                 />
+              )}
+            </ThemeContainer>
           }
           renderItem={({ item, index }) => (
             <Fragment>

src/components/points/view/pointsStyles.js

@@ -119,7 +119,7 @@ export default EStyleSheet.create({
   },
   scrollContainer: {
     flex: 1,
-    backgroundColor: '$pureWhite',
+    backgroundColor: '$primaryBackgroundColor',
   },
   popoverDetails: {
     flexDirection: 'row',

src/components/points/view/pointsView.js

@@ -13,6 +13,7 @@ import { Icon } from '../../icon';
 import { MainButton } from '../../mainButton';
 import { DropdownButton } from '../../dropdownButton';
 import { CollapsibleCard } from '../../collapsibleCard';
+import { ThemeContainer } from '../../../containers';
 
 // Utils
 import { getTimeFromNow } from '../../../utils/time';
@@ -40,9 +41,11 @@ class PointsView extends Component {
   // Component Functions
 
   refreshControl = () => {
-    const { fetchUserActivity, refreshing, isDarkTheme } = this.props;
+    const { fetchUserActivity, refreshing } = this.props;
 
     return (
+      <ThemeContainer>
+        {isDarkTheme => (
           <RefreshControl
             refreshing={refreshing}
             onRefresh={fetchUserActivity}
@@ -51,6 +54,8 @@ class PointsView extends Component {
             titleColor="#fff"
             colors={['#fff']}
           />
+        )}
+      </ThemeContainer>
     );
   };
 

src/components/posts/container/postsContainer.js

@@ -55,7 +55,6 @@ class PostsContainer extends PureComponent {
       tag,
       isLoginDone,
       isLoggedIn,
-      isDarkTheme,
       nsfw,
     } = this.props;
     const { promotedPosts } = this.state;
@@ -80,7 +79,6 @@ class PostsContainer extends PureComponent {
         tag={tag}
         isLoginDone={isLoginDone}
         isLoggedIn={isLoggedIn}
-        isDarkTheme={isDarkTheme}
         nsfw={nsfw}
       />
     );
@@ -89,7 +87,6 @@ class PostsContainer extends PureComponent {
 
 const mapStateToProps = state => ({
   currentAccount: state.account.currentAccount,
-  isDarkTheme: state.application.isDarkTheme,
   isLoggedIn: state.application.isLoggedIn,
   isLoginDone: state.application.isLoginDone,
   nsfw: state.application.nsfw,

src/components/posts/view/postsView.js

@@ -14,6 +14,7 @@ import { PostCard } from '../../postCard';
 import { FilterBar } from '../../filterBar';
 import { PostCardPlaceHolder, NoPost } from '../../basicUIElements';
 import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
+import { ThemeContainer } from '../../../containers';
 
 // Styles
 import styles from './postsStyles';
@@ -141,7 +142,6 @@ class PostsView extends Component {
         ? POPULAR_FILTERS[selectedFilterIndex].toLowerCase()
         : PROFILE_FILTERS[selectedFilterIndex].toLowerCase();
     let options;
-    const newPosts = [];
     const limit = 3;
 
     if (!isConnected) {
@@ -362,7 +362,6 @@ class PostsView extends Component {
     const {
       filterOptions,
       selectedOptionIndex,
-      isDarkTheme,
       isHideImage,
       handleImagesHide,
     } = this.props;
@@ -401,6 +400,8 @@ class PostsView extends Component {
           onScrollEndDrag={this._handleOnScroll}
           ListEmptyComponent={this._renderEmptyContent}
           refreshControl={
+            <ThemeContainer>
+              {({ isDarkTheme }) => (
                 <RefreshControl
                   refreshing={refreshing}
                   onRefresh={this._handleOnRefreshPosts}
@@ -409,6 +410,8 @@ class PostsView extends Component {
                   titleColor="#fff"
                   colors={['#fff']}
                 />
+              )}
+            </ThemeContainer>
           }
           ref={ref => {
             this.flatList = ref;

src/components/textInput/view/textInputView.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import { TextInput } from 'react-native';
-import { connect } from 'react-redux';
+
+import { ThemeContainer } from '../../../containers';
 
 // Styles
 import styles from './textInputStyles';
 
-const TextInputView = ({ isDarkTheme, innerRef, height, style, ...props }) => (
+const TextInputView = ({ innerRef, height, style, ...props }) => (
+  <ThemeContainer>
+    {({ isDarkTheme }) => (
       <TextInput
         ref={innerRef}
         keyboardAppearance={isDarkTheme ? 'dark' : 'light'}
         {...props}
         style={[styles.input, { minHeight: height }, style]}
       />
+    )}
+  </ThemeContainer>
 );
 
-const mapStateToProps = state => ({
+export default TextInputView;
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(TextInputView);

src/components/wallet/container/walletContainer.js

@@ -137,7 +137,7 @@ class WalletContainer extends Component {
   };
 
   render() {
-    const { currentAccount, selectedUser, isDarkTheme, handleOnScroll } = this.props;
+    const { currentAccount, selectedUser, handleOnScroll } = this.props;
     const { walletData, isClaiming, isRefreshing } = this.state;
 
     return (
@@ -149,7 +149,6 @@ class WalletContainer extends Component {
         isClaiming={isClaiming}
         handleOnWalletRefresh={this._handleOnWalletRefresh}
         isRefreshing={isRefreshing}
-        isDarkTheme={isDarkTheme}
         handleOnScroll={handleOnScroll}
       />
     );
@@ -159,7 +158,6 @@ class WalletContainer extends Component {
 const mapStateToProps = state => ({
   currentAccount: state.account.currentAccount,
   pinCode: state.application.pin,
-  isDarkTheme: state.application.isDarkTheme,
   globalProps: state.account.globalProps,
 });
 

src/components/wallet/view/walletView.js

@@ -10,6 +10,7 @@ import { CollapsibleCard } from '../../collapsibleCard';
 import { WalletDetails } from '../../walletDetails';
 import { Transaction } from '../../transaction';
 import { WalletDetailsPlaceHolder } from '../../basicUIElements';
+import { ThemeContainer } from '../../../containers';
 
 // Styles
 import styles from './walletStyles';
@@ -53,7 +54,6 @@ class WalletView extends PureComponent {
       isRefreshing,
       selectedUsername,
       walletData,
-      isDarkTheme,
       handleOnScroll,
     } = this.props;
 
@@ -62,6 +62,8 @@ class WalletView extends PureComponent {
         onScroll={handleOnScroll && handleOnScroll}
         style={styles.scrollView}
         refreshControl={
+          <ThemeContainer>
+            {isDarkTheme => (
               <RefreshControl
                 refreshing={isRefreshing}
                 onRefresh={handleOnWalletRefresh}
@@ -70,6 +72,8 @@ class WalletView extends PureComponent {
                 titleColor="#fff"
                 colors={['#fff']}
               />
+            )}
+          </ThemeContainer>
         }
       >
         {!walletData ? (

src/containers/darkThemeContainer.js

@@ -1,14 +0,0 @@
-import { React } from 'react';
-import { connect } from 'react-redux';
-
-const DarkThemeContainer = ({ children, isDarkTheme }) =>
-  children &&
-  children({
-    isDarkTheme,
-  });
-
-const mapStateToProps = state => ({
-  isDarkTheme: state.application.isDarkTheme,
-});
-
-export default connect(mapStateToProps)(DarkThemeContainer);

src/containers/index.js

@@ -1,4 +1,3 @@
-import DarkThemeContainer from './darkThemeContainer';
 import InAppPurchaseContainer from './inAppPurchaseContainer';
 import PointsContainer from './pointsContainer';
 import ProfileContainer from './profileContainer';
@@ -6,9 +5,9 @@ import ProfileEditContainer from './profileEditContainer';
 import RedeemContainer from './redeemContainer';
 import SpinGameContainer from './spinGameContainer';
 import TransferContainer from './transferContainer';
+import ThemeContainer from './themeContainer';
 
 export {
-  DarkThemeContainer,
   InAppPurchaseContainer,
   PointsContainer,
   ProfileContainer,
@@ -16,4 +15,5 @@ export {
   RedeemContainer,
   SpinGameContainer,
   TransferContainer,
+  ThemeContainer,
 };

src/containers/pointsContainer.js

@@ -231,7 +231,6 @@ class PointsContainer extends Component {
     const {
       balance,
       isClaiming,
-      isDarkTheme,
       isLoading,
       navigationParams,
       refreshing,
@@ -257,7 +256,6 @@ class PointsContainer extends Component {
         handleOnDropdownSelected: this._handleOnDropdownSelected,
         handleOnPressTransfer: this._handleOnPressTransfer,
         isClaiming,
-        isDarkTheme,
         isLoading,
         navigationParams,
         refreshing,
@@ -271,7 +269,6 @@ class PointsContainer extends Component {
 
 const mapStateToProps = state => ({
   username: state.account.currentAccount.name,
-  isDarkTheme: state.application.isDarkTheme,
   activeBottomTab: state.ui.activeBottomTab,
   isConnected: state.application.isConnected,
   accounts: state.account.otherAccounts,

src/containers/redeemContainer.js

@@ -140,7 +140,6 @@ class RedeemContainer extends Component {
 
 const mapStateToProps = state => ({
   username: state.account.currentAccount.name,
-  isDarkTheme: state.application.isDarkTheme,
   activeBottomTab: state.ui.activeBottomTab,
   isConnected: state.application.isConnected,
   accounts: state.account.otherAccounts,

src/containers/themeContainer.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { connect } from 'react-redux';
+
+const ThemeContainer = ({ children, isDarkTheme }) => {
+  return (
+    children &&
+    children({
+      isDarkTheme,
+    })
+  );
+};
+
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(ThemeContainer);

src/screens/notification/container/notificationContainer.js

@@ -151,13 +151,12 @@ class NotificationContainer extends Component {
 
   render() {
     const { isLoggedIn } = this.props;
-    const { notifications, isNotificationRefreshing, isDarkTheme } = this.state;
+    const { notifications, isNotificationRefreshing } = this.state;
 
     return (
       <NotificationScreen
         getActivities={this._getAvtivities}
         notifications={notifications}
-        isDarkTheme={isDarkTheme}
         navigateToNotificationRoute={this._navigateToNotificationRoute}
         readAllNotification={this._readAllNotification}
         handleLoginPress={this._handleOnPressLogin}
@@ -171,7 +170,6 @@ class NotificationContainer extends Component {
 
 const mapStateToProps = state => ({
   isLoggedIn: state.application.isLoggedIn,
-  isDarkTheme: state.application.isDarkTheme,
   isConnected: state.application.isConnected,
 
   username: state.account.currentAccount.name,

src/screens/points/screen/pointsScreen.js

@@ -25,7 +25,6 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
               claimPoints,
               fetchUserActivity,
               isClaiming,
-              isDarkTheme,
               isLoading,
               refreshing,
               userActivities,
@@ -35,7 +34,6 @@ const PointsScreen = ({ isLoggedIn, handleLoginPress }) => {
                 claimPoints={claimPoints}
                 fetchUserActivity={fetchUserActivity}
                 isClaiming={isClaiming}
-                isDarkTheme={isDarkTheme}
                 isLoading={isLoading}
                 refreshing={refreshing}
                 userActivities={userActivities}