From 53e2860604cc0047f041f381169fddf2306e9149 Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Mon, 10 Jul 2023 15:54:38 +0500 Subject: [PATCH 1/8] theme container migration --- .../view/placeHolder/boostPlaceHolderView.js | 59 ++++---- .../placeHolder/commentPlaceHolderView.js | 49 ++++--- .../placeHolder/communitiesPlaceHolder.js | 40 +++--- .../placeHolder/listItemPlaceHolderView.js | 43 +++--- .../placeHolder/postCardPlaceHolderView.js | 45 +++--- .../view/placeHolder/postPlaceHolderView.js | 49 ++++--- .../placeHolder/profileSummaryPlaceHolder.js | 51 ++++--- .../placeHolder/walletDetailsPlaceHolder.js | 37 ++--- .../titleArea/view/titleAreaView.js | 45 +++--- .../formInput/view/formInputView.tsx | 43 +++--- .../header/container/headerContainer.js | 54 ++++---- .../notification/view/notificationView.tsx | 72 +++++----- .../snippetEditorModal/snippetEditorModal.tsx | 115 ++++++++-------- src/components/wallet/view/walletView.js | 130 +++++++++--------- 14 files changed, 398 insertions(+), 434 deletions(-) diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js index c25c466096..b5f4f7e3be 100644 --- a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js +++ b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js @@ -1,11 +1,10 @@ /* eslint-disable radix */ import React from 'react'; import { View } from 'react-native'; +import { useSelector } from 'react-redux'; import times from 'lodash/times'; import Placeholder from 'rn-placeholder'; - -import { ThemeContainer } from '../../../../containers'; - +// import { useSelector } from 'react-redux'; //NEW LINE ADDED import styles from './boostPlaceHolderStyles'; import getWindowDimensions from '../../../../utils/getWindowDimensions'; @@ -14,37 +13,31 @@ const HEIGHT = getWindowDimensions().height; const BoostPlaceHolder = () => { const ratio = (HEIGHT - 300) / 50 / 1.3; const listElements = []; - + const isDarkTheme = useSelector((state) => state.application.isDarkTeme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; times(parseInt(ratio), (i) => { - listElements.push( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - - - - - - - ); - }} - , + listElements.push( + + + + + + + + + ); }); diff --git a/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js index 32e537d4e7..1b7a252235 100644 --- a/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js +++ b/src/components/basicUIElements/view/placeHolder/commentPlaceHolderView.js @@ -2,8 +2,7 @@ import React from 'react'; import { View } from 'react-native'; import LottieView from 'lottie-react-native'; -import { ThemeContainer } from '../../../../containers'; - +import { useSelector } from 'react-redux'; import styles from './listItemPlaceHolderStyles'; const CommentPlaceHolderView = () => { @@ -12,31 +11,31 @@ const CommentPlaceHolderView = () => { height: 72, }; + + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; + return ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - ); - }} - + + + ); + + + }; export default CommentPlaceHolderView; diff --git a/src/components/basicUIElements/view/placeHolder/communitiesPlaceHolder.js b/src/components/basicUIElements/view/placeHolder/communitiesPlaceHolder.js index ddc91c2694..1d571a9134 100644 --- a/src/components/basicUIElements/view/placeHolder/communitiesPlaceHolder.js +++ b/src/components/basicUIElements/view/placeHolder/communitiesPlaceHolder.js @@ -2,33 +2,29 @@ import React from 'react'; import { View } from 'react-native'; import Placeholder from 'rn-placeholder'; -import { ThemeContainer } from '../../../../containers'; +import { useSelector } from 'react-redux'; import styles from './postCardPlaceHolderStyles'; // TODO: make container for place holder wrapper after alpha const PostCardPlaceHolder = () => { + const isDarkTheme = useSelector((state) => state.application.isDarkTheme) + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; return ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - - - ); - }} - + + + + + ); + }; export default PostCardPlaceHolder; diff --git a/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js index ab1d945f0f..fed16866ae 100644 --- a/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js +++ b/src/components/basicUIElements/view/placeHolder/listItemPlaceHolderView.js @@ -2,35 +2,32 @@ import React from 'react'; import { View } from 'react-native'; import Placeholder from 'rn-placeholder'; -import { ThemeContainer } from '../../../../containers'; +import { useSelector } from 'react-redux'; import styles from './listItemPlaceHolderStyles'; const ListItemPlaceHolderView = () => { + + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; return ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - - - - ); - }} - + + + + + + ); + }; export default ListItemPlaceHolderView; diff --git a/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js index f04a173dc8..77957ed17f 100644 --- a/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js +++ b/src/components/basicUIElements/view/placeHolder/postCardPlaceHolderView.js @@ -1,39 +1,34 @@ import React from 'react'; import { View } from 'react-native'; import LottieView from 'lottie-react-native'; -import { ThemeContainer } from '../../../../containers'; +import { useSelector } from 'react-redux'; import styles from './postCardPlaceHolderStyles'; import getWindowDimensions from '../../../../utils/getWindowDimensions'; - const PostCardPlaceHolder = () => { const animationStyle = { width: getWindowDimensions().nativeWidth - 32, }; + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; return ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - ); - }} - + + + ); + }; export default PostCardPlaceHolder; diff --git a/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js index 2be22134fa..29ced2278f 100644 --- a/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js +++ b/src/components/basicUIElements/view/placeHolder/postPlaceHolderView.js @@ -1,36 +1,33 @@ import React from 'react'; import { View } from 'react-native'; import LottieView from 'lottie-react-native'; -import { ThemeContainer } from '../../../../containers'; -import getWindowDimensions from '../../../../utils/getWindowDimensions'; +import { useSelector } from 'react-redux'; +import getWindowDimensions from '../../../../utils/getWindowDimensions'; const PostPlaceHolder = () => { - return ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - ); - }} - + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; + + return ( + + + ); + }; export default PostPlaceHolder; diff --git a/src/components/basicUIElements/view/placeHolder/profileSummaryPlaceHolder.js b/src/components/basicUIElements/view/placeHolder/profileSummaryPlaceHolder.js index 013f1a5225..303411ba84 100644 --- a/src/components/basicUIElements/view/placeHolder/profileSummaryPlaceHolder.js +++ b/src/components/basicUIElements/view/placeHolder/profileSummaryPlaceHolder.js @@ -1,40 +1,35 @@ import React from 'react'; import { View } from 'react-native'; import Placeholder from 'rn-placeholder'; - -import { ThemeContainer } from '../../../../containers'; +import { useSelector } from 'react-redux'; import styles from './profileSummaryPlaceHolderStyles'; // TODO: make container for place holder wrapper after alpha const ProfileSummaryPlaceHolder = () => { - return ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - return ( - - - - - - - - - - ); - }} - + return ( + + + + + + + + + ); + }; export default ProfileSummaryPlaceHolder; diff --git a/src/components/basicUIElements/view/placeHolder/walletDetailsPlaceHolder.js b/src/components/basicUIElements/view/placeHolder/walletDetailsPlaceHolder.js index 13d316e6b8..535a1edf68 100644 --- a/src/components/basicUIElements/view/placeHolder/walletDetailsPlaceHolder.js +++ b/src/components/basicUIElements/view/placeHolder/walletDetailsPlaceHolder.js @@ -3,8 +3,7 @@ import React, { Fragment } from 'react'; import { View } from 'react-native'; import Placeholder from 'rn-placeholder'; import times from 'lodash/times'; - -import { ThemeContainer } from '../../../../containers'; +import { useSelector } from 'react-redux'; import styles from './walletDetailsPlaceHolderStyles'; import getWindowDimensions from '../../../../utils/getWindowDimensions'; @@ -26,22 +25,24 @@ const listPlaceHolderView = (color) => { return {listElements}; }; -const WalletDetailsPlaceHolder = () => ( - - {({ isDarkTheme }) => { - const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; - - return ( - - - - - {listPlaceHolderView(color)} - - ); - }} - -); +const WalletDetailsPlaceHolder = () => { + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); + const color = isDarkTheme ? '#2e3d51' : '#f5f5f5'; + + + return ( + + + + + {listPlaceHolderView(color)} + + ) + +} + + + export default WalletDetailsPlaceHolder; /* eslint-enable */ diff --git a/src/components/editorElements/titleArea/view/titleAreaView.js b/src/components/editorElements/titleArea/view/titleAreaView.js index 2ceaa50557..49f2b345db 100644 --- a/src/components/editorElements/titleArea/view/titleAreaView.js +++ b/src/components/editorElements/titleArea/view/titleAreaView.js @@ -1,10 +1,11 @@ import React, { Component } from 'react'; import { View } from 'react-native'; +import { useSelector } from 'react-redux'; + // Constants // Components import { TextInput } from '../../../textInput'; -import { ThemeContainer } from '../../../../containers'; // Styles import styles from './titleAreaStyles'; @@ -48,32 +49,30 @@ export default class TitleAreaView extends Component { render() { const { intl, isPreviewActive, autoFocus } = this.props; const { text, height } = this.state; - + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const maxHeight = isAndroidOreo() ? 24 : 35; return ( - - {({ isDarkTheme }) => ( - { - this.setState({ height: event.nativeEvent.contentSize.height }); - }} - autoFocus={autoFocus} - onChangeText={(textT) => this._handleOnChange(textT)} - value={text} - /> - )} - + + { + this.setState({ height: event.nativeEvent.contentSize.height }); + }} + autoFocus={autoFocus} + onChangeText={(textT) => this._handleOnChange(textT)} + value={text} + /> + ); } diff --git a/src/components/formInput/view/formInputView.tsx b/src/components/formInput/view/formInputView.tsx index a6cf738591..f4ad719ad1 100644 --- a/src/components/formInput/view/formInputView.tsx +++ b/src/components/formInput/view/formInputView.tsx @@ -22,6 +22,7 @@ import { getResizedAvatar } from '../../../utils/image'; // Styles import styles from './formInputStyles'; +import { useSelector } from 'react-redux'; interface Props extends TextInputProps { type: string; @@ -69,7 +70,7 @@ const FormInputView = ({ const [_value, setValue] = useState(value || ''); const [inputBorderColor, setInputBorderColor] = useState('#e7e7e7'); const [_isValid, setIsValid] = useState(true); - + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const isIos = Platform.OS === 'ios'; const _handleOnChange = (text) => { @@ -178,28 +179,24 @@ const FormInputView = ({ ) )} - - {({ isDarkTheme }) => ( - - )} - + {rightInfoIcon && !isValid ? ( _renderInfoIconWithPopover() diff --git a/src/components/header/container/headerContainer.js b/src/components/header/container/headerContainer.js index bd59acdb32..b484d5bc3b 100644 --- a/src/components/header/container/headerContainer.js +++ b/src/components/header/container/headerContainer.js @@ -3,7 +3,7 @@ import get from 'lodash/get'; import has from 'lodash/has'; // Component -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; import HeaderView from '../view/headerView'; @@ -14,7 +14,7 @@ import { toggleQRModal } from '../../../redux/actions/uiAction'; const HeaderContainer = ({ selectedUser, isReverse, handleOnBackPress, hideUser, showQR }) => { const navigation = useNavigation(); const dispatch = useDispatch(); - + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const _handleOpenDrawer = () => { if (has(navigation, 'openDrawer') && typeof get(navigation, 'openDrawer') === 'function') { navigation.openDrawer(); @@ -34,33 +34,31 @@ const HeaderContainer = ({ selectedUser, isReverse, handleOnBackPress, hideUser, }; return ( - - {({ isDarkTheme }) => ( - - {({ currentAccount, isLoggedIn, isLoginDone }) => { - const _user = isReverse && selectedUser ? selectedUser : currentAccount; - const reputation = parseReputation(get(_user, 'reputation')); - return ( - - ); - }} - - )} - + + {({ currentAccount, isLoggedIn, isLoginDone }) => { + const _user = isReverse && selectedUser ? selectedUser : currentAccount; + + const reputation = parseReputation(get(_user, 'reputation')); + return ( + + ); + }} + + ); }; diff --git a/src/components/notification/view/notificationView.tsx b/src/components/notification/view/notificationView.tsx index 41e88d9230..51c3304322 100644 --- a/src/components/notification/view/notificationView.tsx +++ b/src/components/notification/view/notificationView.tsx @@ -1,8 +1,8 @@ /* eslint-disable react/jsx-wrap-multilines */ import React, { PureComponent } from 'react'; +import { connect } from 'react-redux'; import { View, ActivityIndicator, RefreshControl, Text } from 'react-native'; import { injectIntl } from 'react-intl'; - // Constants // Components @@ -12,7 +12,6 @@ import { ContainerHeader } from '../../containerHeader'; import { FilterBar } from '../../filterBar'; import { NotificationLine } from '../..'; import { ListPlaceHolder } from '../../basicUIElements'; -import { ThemeContainer } from '../../../containers'; // Utils import { isToday, isYesterday, isThisWeek, isLastWeek, isThisMonth } from '../../../utils/time'; @@ -204,6 +203,8 @@ class NotificationView extends PureComponent { ); render() { + const { isDarkTheme } = this.props; + const { readAllNotification, getActivities, isNotificationRefreshing, intl, isLoading } = this.props; const { filters, selectedFilter, selectedIndex } = this.state; @@ -223,43 +224,44 @@ class NotificationView extends PureComponent { selectedOptionIndex={selectedIndex} onRightIconPress={readAllNotification} /> - - {({ isDarkTheme }) => ( - `${item.id}-${index}`} - onEndReached={() => getActivities(true)} - onEndReachedThreshold={0.3} - ListFooterComponent={this._renderFooterLoading} - ListEmptyComponent={ - isNotificationRefreshing ? ( - - ) : ( - - {intl.formatMessage({ id: 'notification.noactivity' })} - - ) - } - contentContainerStyle={styles.listContentContainer} - refreshControl={ - getActivities()} - progressBackgroundColor="#357CE6" - tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'} - titleColor="#fff" - colors={['#fff']} - /> - } - renderItem={this._renderItem} + + `${item.id}-${index}`} + onEndReached={() => getActivities(true)} + onEndReachedThreshold={0.3} + ListFooterComponent={this._renderFooterLoading} + ListEmptyComponent={ + isNotificationRefreshing ? ( + + ) : ( + + {intl.formatMessage({ id: 'notification.noactivity' })} + + ) + } + contentContainerStyle={styles.listContentContainer} + refreshControl={ + getActivities()} + progressBackgroundColor="#357CE6" + tintColor={!isDarkTheme ? '#357ce6' : '#96c0ff'} + titleColor="#fff" + colors={['#fff']} /> - )} - + } + renderItem={this._renderItem} + /> ); } } +const mapStateToProps = (state: { application: { isDarkTheme: any } }) => ({ + isDarkTheme: state.application.isDarkTheme, +}); -export default injectIntl(NotificationView); +export default connect(mapStateToProps)(injectIntl(NotificationView)); +// export default injectIntl(NotificationView); /* eslint-enable */ diff --git a/src/components/snippetEditorModal/snippetEditorModal.tsx b/src/components/snippetEditorModal/snippetEditorModal.tsx index 14221f1d58..02519e35d0 100644 --- a/src/components/snippetEditorModal/snippetEditorModal.tsx +++ b/src/components/snippetEditorModal/snippetEditorModal.tsx @@ -1,8 +1,8 @@ import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'; import { useIntl } from 'react-intl'; import { Alert, KeyboardAvoidingView, Platform, View } from 'react-native'; +import { useSelector } from 'react-redux'; import { TextInput } from '..'; -import { ThemeContainer } from '../../containers'; import { Snippet } from '../../models'; import { useSnippetsMutation } from '../../providers/queries'; import { TextButton } from '../buttons'; @@ -27,6 +27,7 @@ const SnippetEditorModal = ({}, ref) => { const [isNewSnippet, setIsNewSnippet] = useState(true); const [showModal, setShowModal] = useState(false); const [titleHeight, setTitleHeight] = useState(0); + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); useImperativeHandle(ref, () => ({ showNewModal: () => { @@ -63,66 +64,62 @@ const SnippetEditorModal = ({}, ref) => { }; const _renderContent = ( - - {({ isDarkTheme }) => ( - - - - { - setTitleHeight(event.nativeEvent.contentSize.height); - }} - onChangeText={setTitle} - value={title} - /> - + + + + { + setTitleHeight(event.nativeEvent.contentSize.height); + }} + onChangeText={setTitle} + value={title} + /> + - - + + - - setShowModal(false)} - style={styles.closeButton} - /> - - - - )} - + + setShowModal(false)} + style={styles.closeButton} + /> + + + ); return ( diff --git a/src/components/wallet/view/walletView.js b/src/components/wallet/view/walletView.js index 93ba2cf21a..9f880bf2c1 100644 --- a/src/components/wallet/view/walletView.js +++ b/src/components/wallet/view/walletView.js @@ -1,20 +1,21 @@ /* eslint-disable react/jsx-wrap-multilines */ import React, { Fragment } from 'react'; +import { useSelector } from 'react-redux'; import { View, Text, ScrollView, RefreshControl } from 'react-native'; import { useIntl } from 'react-intl'; - // Components import { Icon } from '../../icon'; import { MainButton } from '../../mainButton'; import { CollapsibleCard } from '../../collapsibleCard'; import { WalletDetails } from '../../walletDetails'; import { WalletDetailsPlaceHolder } from '../../basicUIElements'; -import { ThemeContainer, WalletContainer } from '../../../containers'; + // Styles import styles from './walletStyles'; const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) => { + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const intl = useIntl(); const _getUnclaimedText = (walletData, isPreview) => ( @@ -47,74 +48,71 @@ const WalletView = ({ setEstimatedWalletValue, selectedUser, handleOnScroll }) = walletData, userActivities, }) => ( - - {(isDarkTheme) => ( - - } - contentContainerStyle={styles.scrollContentContainer} - scrollEventThrottle={16} - > - {!walletData ? ( - - - - ) : ( - - {walletData.hasUnclaimedRewards && ( - + } + contentContainerStyle={styles.scrollContentContainer} + scrollEventThrottle={16} + > + {!walletData ? ( + + + + ) : ( + + {walletData.hasUnclaimedRewards && ( + + {currentAccountUsername === selectedUsername ? ( + claimRewardBalance()} > - {currentAccountUsername === selectedUsername ? ( - claimRewardBalance()} - > - - {_getUnclaimedText(walletData)} - - - - - - ) : ( - _getUnclaimedText(walletData, true) - )} - + + {_getUnclaimedText(walletData)} + + + + + + ) : ( + _getUnclaimedText(walletData, true) )} - - - - - + )} - + + + + + )} - + + )} ); From 82b875845a7ff21b7e2e3835ab929c1197435cac Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Mon, 10 Jul 2023 17:18:07 +0500 Subject: [PATCH 2/8] Theme container migrate --- .../customiseFiltersModal.tsx | 42 ++++++++----------- .../formInput/view/formInputView.tsx | 2 - .../header/container/headerContainer.js | 2 +- 3 files changed, 19 insertions(+), 27 deletions(-) diff --git a/src/components/customiseFiltersModal/customiseFiltersModal.tsx b/src/components/customiseFiltersModal/customiseFiltersModal.tsx index 786286cac3..315fab8171 100644 --- a/src/components/customiseFiltersModal/customiseFiltersModal.tsx +++ b/src/components/customiseFiltersModal/customiseFiltersModal.tsx @@ -6,8 +6,6 @@ import EStyleSheet from 'react-native-extended-stylesheet'; import { useDispatch } from 'react-redux'; import { CheckBox } from '..'; import { getDefaultFilters, getFilterMap } from '../../constants/options/filters'; - -import { ThemeContainer } from '../../containers'; import { useAppSelector } from '../../hooks'; import { setCommunityTabs, @@ -142,28 +140,24 @@ const CustomiseFiltersModal = ({ pageType }: Props, ref: Ref - {({ isDarkTheme }) => ( - - Customise Filters - - {_renderOptions()} - - - - - - )} - + + Customise Filters + + {_renderOptions()} + + + + + ); return ( diff --git a/src/components/formInput/view/formInputView.tsx b/src/components/formInput/view/formInputView.tsx index f4ad719ad1..5cc7c5b691 100644 --- a/src/components/formInput/view/formInputView.tsx +++ b/src/components/formInput/view/formInputView.tsx @@ -15,8 +15,6 @@ import Popover, { usePopover } from 'react-native-modal-popover'; // Components import { TextInput } from '../../textInput'; import { Icon } from '../../icon'; -import { ThemeContainer } from '../../../containers'; - // Utils import { getResizedAvatar } from '../../../utils/image'; diff --git a/src/components/header/container/headerContainer.js b/src/components/header/container/headerContainer.js index b484d5bc3b..ea8cc4d42f 100644 --- a/src/components/header/container/headerContainer.js +++ b/src/components/header/container/headerContainer.js @@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; import HeaderView from '../view/headerView'; -import { AccountContainer, ThemeContainer } from '../../../containers'; +import { AccountContainer } from '../../../containers'; import { parseReputation } from '../../../utils/user'; import { toggleQRModal } from '../../../redux/actions/uiAction'; From 0325a3c782ba706b7575e8959094d194a3d2bf9d Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Mon, 10 Jul 2023 17:19:22 +0500 Subject: [PATCH 3/8] Delete File of Theme Container --- src/containers/themeContainer.js | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 src/containers/themeContainer.js diff --git a/src/containers/themeContainer.js b/src/containers/themeContainer.js deleted file mode 100644 index b815cc53fb..0000000000 --- a/src/containers/themeContainer.js +++ /dev/null @@ -1,19 +0,0 @@ -/* 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); -/* eslint-enable */ From 4575a9e760a6dee339af1acba5e5811e85a09476 Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Mon, 10 Jul 2023 17:20:55 +0500 Subject: [PATCH 4/8] Theme container migrate --- src/containers/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/containers/index.js b/src/containers/index.js index 7f31e9a33d..7be8c49d5e 100644 --- a/src/containers/index.js +++ b/src/containers/index.js @@ -7,7 +7,6 @@ import ProfileEditContainer from './profileEditContainer'; import RedeemContainer from './redeemContainer'; import SpinGameContainer from './spinGameContainer'; import WalletContainer from './walletContainer'; -import ThemeContainer from './themeContainer'; import TransferContainer from './transferContainer'; export { @@ -20,6 +19,5 @@ export { RedeemContainer, SpinGameContainer, WalletContainer, - ThemeContainer, TransferContainer, }; From 864e0638f6a2d64adaf3e4e854baf34f8d2e208c Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Tue, 11 Jul 2023 15:50:47 +0500 Subject: [PATCH 5/8] Make a switch Cases for android and IOS --- .../editorElements/titleArea/view/titleAreaView.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/components/editorElements/titleArea/view/titleAreaView.js b/src/components/editorElements/titleArea/view/titleAreaView.js index 49f2b345db..d4fa70fd44 100644 --- a/src/components/editorElements/titleArea/view/titleAreaView.js +++ b/src/components/editorElements/titleArea/view/titleAreaView.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import { useSelector } from 'react-redux'; - +import { injectIntl } from 'react-intl'; +import { connect } from 'react-redux'; // Constants // Components @@ -12,7 +13,7 @@ import styles from './titleAreaStyles'; import globalStyles from '../../../../globalStyles'; import isAndroidOreo from '../../../../utils/isAndroidOreo'; -export default class TitleAreaView extends Component { +class TitleAreaView extends Component { /* Props * ------------------------------------------------ * @prop { type } name - Description.... @@ -49,7 +50,6 @@ export default class TitleAreaView extends Component { render() { const { intl, isPreviewActive, autoFocus } = this.props; const { text, height } = this.state; - const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const maxHeight = isAndroidOreo() ? 24 : 35; return ( @@ -77,3 +77,8 @@ export default class TitleAreaView extends Component { ); } } + +const mapStateToProps = (state) => ({ + isDarkTheme: state.customTabs.isDarkTheme, +}); +export default injectIntl(connect(mapStateToProps)); \ No newline at end of file From ab342970463619e9bc638424005fe242f0edd89d Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Tue, 11 Jul 2023 16:07:28 +0500 Subject: [PATCH 6/8] Impelement react redux hook in class component --- .../editorElements/titleArea/view/titleAreaView.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/editorElements/titleArea/view/titleAreaView.js b/src/components/editorElements/titleArea/view/titleAreaView.js index d4fa70fd44..a0642ad7aa 100644 --- a/src/components/editorElements/titleArea/view/titleAreaView.js +++ b/src/components/editorElements/titleArea/view/titleAreaView.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import { useSelector } from 'react-redux'; -import { injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { injectIntl } from 'react-intl'; // Constants // Components @@ -50,6 +50,7 @@ class TitleAreaView extends Component { render() { const { intl, isPreviewActive, autoFocus } = this.props; const { text, height } = this.state; + const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const maxHeight = isAndroidOreo() ? 24 : 35; return ( @@ -78,7 +79,8 @@ class TitleAreaView extends Component { } } -const mapStateToProps = (state) => ({ - isDarkTheme: state.customTabs.isDarkTheme, + +const mapStateToProps = (state: { application: { isDarkTheme: any } }) => ({ + isDarkTheme: state.application.isDarkTheme, }); -export default injectIntl(connect(mapStateToProps)); \ No newline at end of file +export default connect(mapStateToProps)(injectIntl); \ No newline at end of file From e3896a1c368e159e0458678d2426ae7b3dc2b8ee Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Tue, 11 Jul 2023 16:14:40 +0500 Subject: [PATCH 7/8] import WalletContainer --- src/components/wallet/view/walletView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/wallet/view/walletView.js b/src/components/wallet/view/walletView.js index 9f880bf2c1..79cb87f05f 100644 --- a/src/components/wallet/view/walletView.js +++ b/src/components/wallet/view/walletView.js @@ -9,7 +9,7 @@ import { MainButton } from '../../mainButton'; import { CollapsibleCard } from '../../collapsibleCard'; import { WalletDetails } from '../../walletDetails'; import { WalletDetailsPlaceHolder } from '../../basicUIElements'; - +import { WalletContainer } from '../../../containers'; // Styles import styles from './walletStyles'; From 724fe8462343fd52800f0b58e5ddd69a717f7b10 Mon Sep 17 00:00:00 2001 From: Syed Moazzam Ali Date: Tue, 11 Jul 2023 18:37:08 +0500 Subject: [PATCH 8/8] use redux store in class component --- .../editorElements/titleArea/view/titleAreaView.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/editorElements/titleArea/view/titleAreaView.js b/src/components/editorElements/titleArea/view/titleAreaView.js index a0642ad7aa..97e8cb2779 100644 --- a/src/components/editorElements/titleArea/view/titleAreaView.js +++ b/src/components/editorElements/titleArea/view/titleAreaView.js @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import { View } from 'react-native'; import { useSelector } from 'react-redux'; import { connect } from 'react-redux'; -import { injectIntl } from 'react-intl'; // Constants // Components @@ -50,9 +49,8 @@ class TitleAreaView extends Component { render() { const { intl, isPreviewActive, autoFocus } = this.props; const { text, height } = this.state; - const isDarkTheme = useSelector((state) => state.application.isDarkTheme); const maxHeight = isAndroidOreo() ? 24 : 35; - + const { isDarkTheme } = this.props; return ( @@ -80,7 +78,12 @@ class TitleAreaView extends Component { } -const mapStateToProps = (state: { application: { isDarkTheme: any } }) => ({ + +const mapStateToProps = (state) => ({ isDarkTheme: state.application.isDarkTheme, }); -export default connect(mapStateToProps)(injectIntl); \ No newline at end of file + +export default connect(mapStateToProps)(TitleAreaView); + + +