created acccount container enhanced header container & view convert to hooks && merged trending and feed

src/components/basicHeader/container/basicHeaderContainer.js

@@ -26,13 +26,15 @@ class BasicHeaderContainer extends Component {
 
     if (isNewPost) {
       navigation.navigate({
-        routeName: ROUTES.SCREENS.HOME,
+        routeName: ROUTES.SCREENS.FEED,
       });
     } else {
       navigation.goBack();
     }
 
-    if (handleOnBackPress) handleOnBackPress();
+    if (handleOnBackPress) {
+      handleOnBackPress();
+    }
   };
 
   render() {

src/components/bottomTabBar/view/bottomTabBarView.js

@@ -21,7 +21,7 @@ import styles from './bottomTabBarStyles';
 const _jumpTo = (route, index, routes, jumpTo) => {
   const _routeName = routes[index].routeName;
 
-  if (!!get(route, 'params.scrollToTop') && _routeName === ROUTES.TABBAR.HOME) {
+  if (!!get(route, 'params.scrollToTop') && _routeName === ROUTES.TABBAR.FEED) {
     route.params.scrollToTop();
   }
 

src/components/formInput/view/formInputStyles.js

@@ -6,9 +6,9 @@ export default EStyleSheet.create({
     borderTopRightRadius: 8,
     marginTop: 16,
     flexDirection: 'row',
-    backgroundColor: '$primaryLightBackground',
     height: 60,
     borderBottomWidth: 2,
+    backgroundColor: '$primaryWhiteLightBackground',
   },
   firstImage: {
     width: 24,

src/components/header/container/headerContainer.js

@@ -1,80 +1,53 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import { withNavigation } from 'react-navigation';
-import { connect } from 'react-redux';
+import get from 'lodash/get';
-import { get, has } from 'lodash';
+import has from 'lodash/has';
 
 // Component
 import HeaderView from '../view/headerView';
 
-/*
+import { AccountContainer, ThemeContainer } from '../../../containers';
- *            Props Name        Description                                     Value
- *@props -->  props name here   description here                                Value Type Here
- *
- */
-
-class HeaderContainer extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycle Functions
-
-  // Component Functions
-
-  _handleOpenDrawer = () => {
-    const { navigation } = this.props;
 
+const HeaderContainer = ({ selectedUser, isReverse, navigation, handleOnBackPress }) => {
+  const _handleOpenDrawer = () => {
     if (has(navigation, 'openDrawer') && typeof get(navigation, 'openDrawer') === 'function') {
       navigation.openDrawer();
     }
   };
 
-  _handleOnPressBackButton = () => {
+  const _handleOnPressBackButton = () => {
-    const { navigation, handleOnBackPress } = this.props;
+    if (handleOnBackPress) {
-
+      handleOnBackPress();
-    if (handleOnBackPress) handleOnBackPress();
+    }
 
     navigation.goBack();
   };
 
-  render() {
+  return (
-    const {
+    <ThemeContainer>
-      isLoggedIn,
+      {({ isDarkTheme }) => (
-      currentAccount,
+        <AccountContainer>
-      selectedUser,
+          {({ currentAccount, isLoggedIn, isLoginDone }) => {
-      isReverse,
+            const _user = isReverse && selectedUser ? selectedUser : currentAccount;
-      isLoginDone,
-      isDarkTheme,
-    } = this.props;
-    const _user = isReverse && selectedUser ? selectedUser : currentAccount;
 
-    const displayName = get(_user, 'display_name');
+            return (
-    const username = get(_user, 'name');
+              <HeaderView
-    const reputation = get(_user, 'reputation');
+                displayName={get(_user, 'display_name')}
+                handleOnPressBackButton={_handleOnPressBackButton}
+                handleOpenDrawer={_handleOpenDrawer}
+                isDarkTheme={isDarkTheme}
+                isLoggedIn={isLoggedIn}
+                isLoginDone={isLoginDone}
+                isReverse={isReverse}
+                reputation={get(_user, 'reputation')}
+                username={get(_user, 'name')}
+              />
+            );
+          }}
+        </AccountContainer>
+      )}
+    </ThemeContainer>
+  );
+};
 
-    return (
+export default withNavigation(HeaderContainer);
-      <HeaderView
-        handleOnPressBackButton={this._handleOnPressBackButton}
-        handleOpenDrawer={this._handleOpenDrawer}
-        isLoggedIn={isLoggedIn}
-        isReverse={isReverse}
-        isLoginDone={isLoginDone}
-        displayName={displayName}
-        username={username}
-        reputation={reputation}
-        isDarkTheme={isDarkTheme}
-      />
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  isLoggedIn: state.application.isLoggedIn,
-  isLoginDone: state.application.isLoginDone,
-  isDarkTheme: state.application.isDarkTheme,
-
-  currentAccount: state.account.currentAccount,
-});
-
-export default connect(mapStateToProps)(withNavigation(HeaderContainer));

src/components/header/view/headerStyles.js

@@ -7,7 +7,7 @@ export default EStyleSheet.create({
     width: '$deviceWidth',
     backgroundColor: '$primaryBackgroundColor',
     flex: 1,
-    maxHeight: Platform.OS === 'ios' ? 95 : 80,
+    maxHeight: Platform.OS === 'ios' ? 105 : 80,
   },
   containerReverse: {
     justifyContent: 'space-between',
@@ -33,8 +33,7 @@ export default EStyleSheet.create({
   titleWrapper: {
     flexDirection: 'column',
     justifyContent: 'center',
-    marginLeft: 8,
+    marginHorizontal: 8,
-    marginRight: 8,
   },
   title: {
     fontSize: 14,

src/components/header/view/headerView.js

@@ -1,131 +1,107 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import { View, Text, SafeAreaView, TouchableOpacity } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { injectIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
 
 // Components
 import { SearchModal } from '../../searchModal';
 import { IconButton } from '../../iconButton';
 import { UserAvatar } from '../../userAvatar';
+
 // Styles
 import styles from './headerStyles';
 
-class HeaderView extends Component {
+const HeaderView = ({
-  /* Props
+  displayName,
-   * ------------------------------------------------
+  handleOnPressBackButton,
-   *   @prop { boolean }    hideStatusBar                - Can declare status bar is hide or not.
+  handleOpenDrawer,
-   *
+  isDarkTheme,
-   */
+  isLoggedIn,
+  isLoginDone,
+  isReverse,
+  reputation,
+  username,
+}) => {
+  const [isSearchModalOpen, setIsSearchModalOpen] = useState(false);
+  const intl = useIntl();
+  let gradientColor;
 
-  constructor(props) {
+  if (isReverse) {
-    super(props);
+    gradientColor = isDarkTheme ? ['#43638e', '#081c36'] : ['#357ce6', '#2d5aa0'];
-    this.state = {
+  } else {
-      isSearchModalOpen: false,
+    gradientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
-    };
   }
 
-  // Component Life Cycles
+  return (
-
+    <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
-  // Component Functions
+      <SearchModal
-
+        placeholder={intl.formatMessage({
-  _handleOnCloseSearch = () => {
+          id: 'header.search',
-    this.setState({ isSearchModalOpen: false });
+        })}
-  };
+        isOpen={isSearchModalOpen}
-
+        handleOnClose={() => setIsSearchModalOpen(false)}
-  render() {
+      />
-    const {
+      <TouchableOpacity
-      displayName,
+        style={styles.avatarWrapper}
-      handleOnPressBackButton,
+        onPress={handleOpenDrawer}
-      handleOpenDrawer,
+        disabled={isReverse}
-      intl,
+      >
-      isDarkTheme,
+        <LinearGradient
-      isLoggedIn,
+          start={{ x: 0, y: 0 }}
-      isLoginDone,
+          end={{ x: 1, y: 0 }}
-      isReverse,
+          colors={gradientColor}
-      reputation,
+          style={[
-      username,
+            styles.avatarButtonWrapper,
-    } = this.props;
+            isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
-    const { isSearchModalOpen } = this.state;
+          ]}
-    let gredientColor;
-
-    if (isReverse) {
-      gredientColor = isDarkTheme ? ['#43638e', '#081c36'] : ['#357ce6', '#2d5aa0'];
-    } else {
-      gredientColor = isDarkTheme ? ['#081c36', '#43638e'] : ['#2d5aa0', '#357ce6'];
-    }
-
-    return (
-      <SafeAreaView style={[styles.container, isReverse && styles.containerReverse]}>
-        <SearchModal
-          placeholder={intl.formatMessage({
-            id: 'header.search',
-          })}
-          isOpen={isSearchModalOpen}
-          handleOnClose={this._handleOnCloseSearch}
-        />
-        <TouchableOpacity
-          style={styles.avatarWrapper}
-          onPress={() => handleOpenDrawer()}
-          disabled={isReverse}
         >
-          <LinearGradient
+          <UserAvatar
-            start={{ x: 0, y: 0 }}
+            noAction
-            end={{ x: 1, y: 0 }}
+            style={isReverse ? styles.reverseAvatar : styles.avatar}
-            colors={gredientColor}
+            username={username}
-            style={[
+          />
-              styles.avatarButtonWrapper,
+        </LinearGradient>
-              isReverse ? styles.avatarButtonWrapperReverse : styles.avatarDefault,
+      </TouchableOpacity>
-            ]}
+      {displayName || username ? (
-          >
+        <View style={styles.titleWrapper}>
-            <UserAvatar
+          {displayName && <Text style={styles.title}>{displayName}</Text>}
-              noAction
+          <Text style={styles.subTitle}>
-              style={isReverse ? styles.reverseAvatar : styles.avatar}
+            {`@${username}`}
-              username={username}
+            {reputation && ` (${reputation})`}
-            />
+          </Text>
-          </LinearGradient>
+        </View>
-        </TouchableOpacity>
+      ) : (
-        {displayName || username ? (
+        <View style={styles.titleWrapper}>
-          <View style={styles.titleWrapper}>
+          {isLoginDone && !isLoggedIn && (
-            {displayName && <Text style={styles.title}>{displayName}</Text>}
+            <Text style={styles.noAuthTitle}>
-            <Text style={styles.subTitle}>
+              {intl.formatMessage({
-              {`@${username}`}
+                id: 'header.title',
-              {reputation && ` (${reputation})`}
+              })}
             </Text>
-          </View>
+          )}
-        ) : (
+        </View>
-          <View style={styles.titleWrapper}>
+      )}
-            {isLoginDone && !isLoggedIn && (
-              <Text style={styles.noAuthTitle}>
-                {intl.formatMessage({
-                  id: 'header.title',
-                })}
-              </Text>
-            )}
-          </View>
-        )}
-        {isReverse && (
-          <View style={styles.reverseBackButtonWrapper}>
-            <IconButton
-              style={styles.backButton}
-              iconStyle={styles.backIcon}
-              name="md-arrow-back"
-              onPress={() => handleOnPressBackButton()}
-            />
-          </View>
-        )}
 
-        {!isReverse && (
+      {isReverse ? (
-          <View style={styles.backButtonWrapper}>
+        <View style={styles.reverseBackButtonWrapper}>
-            <IconButton
+          <IconButton
-              iconStyle={styles.backIcon}
+            style={styles.backButton}
-              name="md-search"
+            iconStyle={styles.backIcon}
-              onPress={() => this.setState({ isSearchModalOpen: true })}
+            name="md-arrow-back"
-            />
+            onPress={() => handleOnPressBackButton()}
-          </View>
+          />
-        )}
+        </View>
-      </SafeAreaView>
+      ) : (
-    );
+        <View style={styles.backButtonWrapper}>
-  }
+          <IconButton
-}
+            iconStyle={styles.backIcon}
+            name="md-search"
+            onPress={() => setIsSearchModalOpen(true)}
+          />
+        </View>
+      )}
+    </SafeAreaView>
+  );
+};
 
-export default injectIntl(HeaderView);
+export default HeaderView;

src/components/posts/container/postsContainer.js

@@ -1,94 +1,69 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
-import get from 'lodash/get';
 
 // Component
 import PostsView from '../view/postsView';
 
+// Container
+import { AccountContainer } from '../../../containers';
+
 // Actions
 import { setFeedPosts } from '../../../redux/actions/postsAction';
 import { hidePostsThumbnails } from '../../../redux/actions/uiAction';
 
-/*
+const PostsContainer = ({
- *            Props Name        Description                                     Value
+  changeForceLoadPostState,
- *@props -->  props name here   description here                                Value Type Here
+  feedPosts,
- *
+  filterOptions,
- */
+  forceLoadPost,
-
+  getFor,
-class PostsContainer extends PureComponent {
+  handleOnScroll,
-  constructor(props) {
+  isConnected,
-    super(props);
+  isHideImages,
-    this.state = {
+  pageType,
-      promotedPosts: [],
+  selectedOptionIndex,
-    };
+  tag,
-  }
+  nsfw,
-
+}) => {
-  // Component Life Cycle Functions
+  const dispatch = useDispatch();
-
-  // Component Functions
-
-  _setFeedPosts = posts => {
-    const { dispatch } = this.props;
 
+  const _setFeedPosts = posts => {
     dispatch(setFeedPosts(posts));
   };
 
-  _handleImagesHide = () => {
+  const _handleImagesHide = () => {
-    const { dispatch, isHideImages } = this.props;
-
     dispatch(hidePostsThumbnails(!isHideImages));
   };
 
-  render() {
+  return (
-    const {
+    <AccountContainer>
-      changeForceLoadPostState,
+      {({ username, isLoggedIn, isLoginDone }) => (
-      currentAccount,
+        <PostsView
-      feedPosts,
+          changeForceLoadPostState={changeForceLoadPostState}
-      filterOptions,
+          currentAccountUsername={username}
-      forceLoadPost,
+          feedPosts={feedPosts}
-      getFor,
+          filterOptions={filterOptions}
-      handleOnScroll,
+          forceLoadPost={forceLoadPost}
-      isConnected,
+          getFor={getFor}
-      isHideImages,
+          handleImagesHide={_handleImagesHide}
-      pageType,
+          handleOnScroll={handleOnScroll}
-      selectedOptionIndex,
+          hidePostsThumbnails={hidePostsThumbnails}
-      tag,
+          isConnected={isConnected}
-      isLoginDone,
+          isHideImage={isHideImages}
-      isLoggedIn,
+          isLoggedIn={isLoggedIn}
-      nsfw,
+          isLoginDone={isLoginDone}
-    } = this.props;
+          nsfw={nsfw}
-    const { promotedPosts } = this.state;
+          pageType={pageType}
-
+          selectedOptionIndex={selectedOptionIndex}
-    return (
+          setFeedPosts={_setFeedPosts}
-      <PostsView
+          tag={tag}
-        changeForceLoadPostState={changeForceLoadPostState}
+        />
-        currentAccountUsername={get(currentAccount, 'name', '')}
+      )}
-        feedPosts={feedPosts}
+    </AccountContainer>
-        filterOptions={filterOptions}
+  );
-        forceLoadPost={forceLoadPost}
+};
-        getFor={getFor}
-        handleOnScroll={handleOnScroll}
-        handleImagesHide={this._handleImagesHide}
-        hidePostsThumbnails={hidePostsThumbnails}
-        isConnected={isConnected}
-        isHideImage={isHideImages}
-        pageType={pageType}
-        promotedPosts={promotedPosts}
-        selectedOptionIndex={selectedOptionIndex}
-        setFeedPosts={this._setFeedPosts}
-        tag={tag}
-        isLoginDone={isLoginDone}
-        isLoggedIn={isLoggedIn}
-        nsfw={nsfw}
-      />
-    );
-  }
-}
 
 const mapStateToProps = state => ({
-  currentAccount: state.account.currentAccount,
-  isLoggedIn: state.application.isLoggedIn,
-  isLoginDone: state.application.isLoginDone,
   nsfw: state.application.nsfw,
   feedPosts: state.posts.feedPosts,
   isConnected: state.application.isConnected,

src/components/posts/view/postsView.js

@@ -13,7 +13,6 @@ import { getPromotePosts } from '../../../providers/esteem/esteem';
 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
@@ -39,15 +38,6 @@ class PostsView extends Component {
     };
   }
 
-  // Component Functions
-  componentWillMount() {
-    const { navigation } = this.props;
-
-    navigation.setParams({
-      scrollToTop: this._scrollToTop,
-    });
-  }
-
   async componentDidMount() {
     const { isConnected, pageType } = this.props;
 
@@ -97,25 +87,24 @@ class PostsView extends Component {
   _getPromotePosts = async () => {
     const { currentAccountUsername } = this.props;
 
-    await getPromotePosts().then(async res => {
+    await getPromotePosts()
-      if (res && res.length) {
+      .then(async res => {
-        const promotedPosts = await Promise.all(
+        if (res && res.length) {
-          res.map(item =>
+          const promotedPosts = await Promise.all(
-            getPost(get(item, 'author'), get(item, 'permlink'), currentAccountUsername, true).then(
+            res.map(item =>
-              post => post,
+              getPost(
+                get(item, 'author'),
+                get(item, 'permlink'),
+                currentAccountUsername,
+                true,
+              ).then(post => post),
             ),
-          ),
+          );
-        );
 
-        this.setState({ promotedPosts });
+          this.setState({ promotedPosts });
-      }
+        }
-    });
+      })
-  };
+      .catch(() => {});
-
-  _scrollToTop = () => {
-    if (this.flatList) {
-      this.flatList.scrollToOffset({ x: 0, y: 0, animated: true });
-    }
   };
 
   _loadPosts = async () => {
@@ -123,10 +112,10 @@ class PostsView extends Component {
       getFor,
       tag,
       currentAccountUsername,
-      pageType,
       nsfw,
       setFeedPosts,
       isConnected,
+      filterOptions,
     } = this.props;
     const {
       posts,
@@ -137,10 +126,7 @@ class PostsView extends Component {
       isLoading,
       promotedPosts,
     } = this.state;
-    const filter =
+    const filter = filterOptions[selectedFilterIndex].toLowerCase();
-      pageType === 'posts'
-        ? POPULAR_FILTERS[selectedFilterIndex].toLowerCase()
-        : PROFILE_FILTERS[selectedFilterIndex].toLowerCase();
     let options;
     const limit = 3;
 
@@ -157,12 +143,7 @@ class PostsView extends Component {
     }
 
     this.setState({ isLoading: true });
-    if (tag || filter === 'feed' || filter === 'blog' || getFor === 'blog') {
+    if (filter === 'feed' || filter === 'blog' || getFor === 'blog' || filter === 'reblogs') {
-      options = {
-        tag,
-        limit,
-      };
-    } else if (filter === 'reblogs') {
       options = {
         tag,
         limit,
@@ -359,12 +340,7 @@ class PostsView extends Component {
 
   render() {
     const { refreshing, posts, isShowFilterBar } = this.state;
-    const {
+    const { filterOptions, selectedOptionIndex, isHideImage, handleImagesHide } = this.props;
-      filterOptions,
-      selectedOptionIndex,
-      isHideImage,
-      handleImagesHide,
-    } = this.props;
 
     return (
       <View style={styles.container}>
@@ -413,9 +389,6 @@ class PostsView extends Component {
               )}
             </ThemeContainer>
           }
-          ref={ref => {
-            this.flatList = ref;
-          }}
         />
       </View>
     );

src/components/textInput/view/textInputStyles.js

@@ -15,5 +15,6 @@ export default EStyleSheet.create({
   input: {
     flex: 1,
     minHeight: 50,
+    backgroundColor: '$primaryWhiteLightBackground',
   },
 });

src/constants/options/filters.js

@@ -1,10 +1,10 @@
-export const POPULAR_FILTERS = [
+export const POPULAR_FILTERS = ['TRENDING', 'HOT', 'NEW', 'PROMOTED'];
-  'TRENDING',
-  'HOT',
-  'CREATED',
-  'ACTIVE',
-  'PROMOTED',
-  'VOTES',
-  'CHILDREN',
-];
 export const PROFILE_FILTERS = ['BLOG', 'FEED'];
+
+// 'TRENDING',
+// 'HOT',
+// 'CREATED',
+// 'ACTIVE',
+// 'PROMOTED',
+// 'VOTES',
+// 'CHILDREN',

src/constants/routeNames.js

@@ -11,7 +11,7 @@ export default {
     EDITOR: `Editor${SCREEN_SUFFIX}`,
     FOLLOWS: `Follows${SCREEN_SUFFIX}`,
     SPIN_GAME: `SpinGame${SCREEN_SUFFIX}`,
-    HOME: `Home${SCREEN_SUFFIX}`,
+    FEED: `Feed${SCREEN_SUFFIX}`,
     LOGIN: `Login${SCREEN_SUFFIX}`,
     PINCODE: `PinCode${SCREEN_SUFFIX}`,
     POST: `Post${SCREEN_SUFFIX}`,
@@ -29,7 +29,7 @@ export default {
     MAIN: `Main${DRAWER_SUFFIX}`,
   },
   TABBAR: {
-    HOME: `Home${TABBAR_SUFFIX}`,
+    FEED: `Feed${TABBAR_SUFFIX}`,
     NOTIFICATION: `Notification${TABBAR_SUFFIX}`,
     POINTS: `Points${TABBAR_SUFFIX}`,
     POST_BUTTON: `PostButton${TABBAR_SUFFIX}`,

src/containers/accountContainer.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import { connect } from 'react-redux';
+
+const AccountContainer = ({
+  accounts,
+  children,
+  currentAccount,
+  isLoggedIn,
+  isLoginDone,
+  username,
+}) => {
+  return (
+    children &&
+    children({
+      accounts,
+      currentAccount,
+      isLoggedIn,
+      isLoginDone,
+      username,
+    })
+  );
+};
+
+const mapStateToProps = state => ({
+  accounts: state.account.otherAccounts,
+  currentAccount: state.account.currentAccount,
+  isLoggedIn: state.application.isLoggedIn,
+  isLoginDone: state.application.isLoginDone,
+  username: state.account.currentAccount.name,
+});
+
+export default connect(mapStateToProps)(AccountContainer);

src/containers/index.js

@@ -1,3 +1,4 @@
+import AccountContainer from './accountContainer';
 import InAppPurchaseContainer from './inAppPurchaseContainer';
 import PointsContainer from './pointsContainer';
 import ProfileContainer from './profileContainer';
@@ -8,6 +9,7 @@ import TransferContainer from './transferContainer';
 import ThemeContainer from './themeContainer';
 
 export {
+  AccountContainer,
   InAppPurchaseContainer,
   PointsContainer,
   ProfileContainer,

src/navigation/baseNavigator.js

@@ -6,13 +6,13 @@ import ROUTES from '../constants/routeNames';
 
 // Components
 import { Icon, IconContainer } from '../components/icon';
-import { Home, Notification, Profile, Points } from '../screens';
+import { Feed, Notification, Profile, Points } from '../screens';
 import { PostButton, BottomTabBar } from '../components';
 
 const BaseNavigator = createBottomTabNavigator(
   {
-    [ROUTES.TABBAR.HOME]: {
+    [ROUTES.TABBAR.FEED]: {
-      screen: Home,
+      screen: Feed,
       navigationOptions: () => ({
         tabBarIcon: ({ tintColor }) => (
           <Icon iconType="MaterialIcons" name="view-day" color={tintColor} size={26} />

src/navigation/routes.js

@@ -31,7 +31,7 @@ import { SideMenu } from '../components';
 
 const mainNavigation = createDrawerNavigator(
   {
-    [ROUTES.SCREENS.HOME]: {
+    [ROUTES.SCREENS.FEED]: {
       screen: BaseNavigator,
     },
   },

src/providers/esteem/esteem.js

@@ -357,7 +357,13 @@ export const getSCAccessToken = code =>
     api.post('/sc-token-refresh', { code }).then(resp => resolve(resp.data));
   });
 
-export const getPromotePosts = () => api.get('/promoted-posts').then(resp => resp.data);
+export const getPromotePosts = () => {
+  try {
+    return api.get('/promoted-posts').then(resp => resp.data);
+  } catch (error) {
+    return error;
+  }
+};
 
 export const purchaseOrder = data => api.post('/purchase-order', data).then(resp => resp.data);
 

src/screens/feed/index.js

@@ -0,0 +1,4 @@
+import Feed from './screen/feedScreen';
+
+export { Feed };
+export default Feed;

src/screens/feed/screen/feedScreen.js

@@ -0,0 +1,36 @@
+import React, { Fragment } from 'react';
+import { SafeAreaView } from 'react-native';
+import get from 'lodash/get';
+
+// Components
+import { Posts, Header } from '../../../components';
+
+// Container
+import { AccountContainer } from '../../../containers';
+
+// Styles
+import styles from './feedStyles';
+
+import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
+
+const FeedScreen = () => {
+  return (
+    <AccountContainer>
+      {({ currentAccount, isLoggedIn }) => (
+        <Fragment>
+          <Header />
+          <SafeAreaView style={styles.container}>
+            <Posts
+              filterOptions={[...PROFILE_FILTERS, ...POPULAR_FILTERS]}
+              getFor={isLoggedIn ? 'feed' : 'trending'}
+              selectedOptionIndex={isLoggedIn ? 1 : 2}
+              tag={get(currentAccount, 'name')}
+            />
+          </SafeAreaView>
+        </Fragment>
+      )}
+    </AccountContainer>
+  );
+};
+
+export default FeedScreen;

src/screens/home/container/homeContainer.js

@@ -1,38 +0,0 @@
-import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
-
-// Component
-import HomeScreen from '../screen/homeScreen';
-
-/*
- *            Props Name        Description                                     Value
- *@props -->  props name here   description here                                Value Type Here
- *
- */
-
-class HomeContainer extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    const { isLoggedIn, isLoginDone, currentAccount } = this.props;
-
-    return (
-      <HomeScreen
-        isLoggedIn={isLoggedIn}
-        isLoginDone={isLoginDone}
-        currentAccount={currentAccount}
-      />
-    );
-  }
-}
-
-const mapStateToProps = state => ({
-  isLoggedIn: state.application.isLoggedIn,
-  isLoginDone: state.application.isLoginDone,
-  currentAccount: state.account.currentAccount,
-});
-
-export default connect(mapStateToProps)(HomeContainer);

src/screens/home/index.js

@@ -1,5 +0,0 @@
-import HomeScreen from './screen/homeScreen';
-import Home from './container/homeContainer';
-
-export { HomeScreen, Home };
-export default Home;

src/screens/home/screen/homeScreen.js

@@ -1,73 +0,0 @@
-import React, { PureComponent, Fragment } from 'react';
-import { View, SafeAreaView } from 'react-native';
-import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { injectIntl } from 'react-intl';
-
-// Components
-import { TabBar, Posts, Header } from '../../../components';
-
-// Styles
-import styles from './homeStyles';
-import globalStyles from '../../../globalStyles';
-
-import { POPULAR_FILTERS, PROFILE_FILTERS } from '../../../constants/options/filters';
-
-class HomeScreen extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  render() {
-    const { currentAccount, intl, isLoggedIn } = this.props;
-
-    return (
-      <Fragment>
-        <Header />
-        <SafeAreaView style={styles.container}>
-          <ScrollableTabView
-            style={globalStyles.tabView}
-            activeTab={!isLoggedIn ? 1 : 0}
-            renderTabBar={() => (
-              <TabBar
-                style={styles.tabbar}
-                tabUnderlineDefaultWidth={80}
-                tabUnderlineScaleX={2}
-                tabBarPosition="overlayTop"
-              />
-            )}
-          >
-            <View
-              tabLabel={intl.formatMessage({
-                id: 'home.feed',
-              })}
-              style={styles.tabbarItem}
-            >
-              <Posts
-                filterOptions={PROFILE_FILTERS}
-                getFor={PROFILE_FILTERS[1].toLowerCase()}
-                tag={currentAccount.name}
-                selectedOptionIndex={1}
-              />
-            </View>
-            <View
-              tabLabel={intl.formatMessage({
-                id: 'home.popular',
-              })}
-              style={styles.tabbarItem}
-            >
-              <Posts
-                filterOptions={POPULAR_FILTERS}
-                getFor={POPULAR_FILTERS[0].toLowerCase()}
-                selectedOptionIndex={0}
-                pageType="posts"
-              />
-            </View>
-          </ScrollableTabView>
-        </SafeAreaView>
-      </Fragment>
-    );
-  }
-}
-
-export default injectIntl(HomeScreen);

src/screens/index.js

@@ -2,7 +2,7 @@ import { Bookmarks } from './bookmarks';
 import { Drafts } from './drafts';
 import { Editor } from './editor';
 import { Follows } from './follows';
-import { Home } from './home';
+import { Feed } from './feed';
 import { Launch } from './launch';
 import { Login } from './login';
 import { Notification } from './notification';
@@ -27,7 +27,7 @@ export {
   Drafts,
   Editor,
   Follows,
-  Home,
+  Feed,
   Launch,
   Login,
   Notification,

src/screens/pinCode/container/pinCodeContainer.js

@@ -108,7 +108,9 @@ class PinCodeContainer extends Component {
           dispatch(updateCurrentAccount({ ..._currentAccount }));
           this._savePinCode(pin);
 
-          if (callback) callback(pin, oldPinCode);
+          if (callback) {
+            callback(pin, oldPinCode);
+          }
           dispatch(closePinCodeModal());
           if (navigateTo) {
             const navigateAction = NavigationActions.navigate({
@@ -171,7 +173,9 @@ class PinCodeContainer extends Component {
 
           setExistUser(true).then(() => {
             this._savePinCode(pin);
-            if (callback) callback(pin, oldPinCode);
+            if (callback) {
+              callback(pin, oldPinCode);
+            }
             dispatch(closePinCodeModal());
             if (navigateTo) {
               const navigateAction = NavigationActions.navigate({
@@ -197,7 +201,7 @@ class PinCodeContainer extends Component {
       } = this.props;
       const { oldPinCode } = this.state;
 
-      // If the user is exist, we are just checking to pin and navigating to home screen
+      // If the user is exist, we are just checking to pin and navigating to feed screen
       const pinData = {
         pinCode: pin,
         password: currentAccount ? currentAccount.password : '',
@@ -213,7 +217,9 @@ class PinCodeContainer extends Component {
           [_currentAccount.local] = realmData;
           dispatch(updateCurrentAccount({ ..._currentAccount }));
           dispatch(closePinCodeModal());
-          if (callback) callback(pin, oldPinCode);
+          if (callback) {
+            callback(pin, oldPinCode);
+          }
           if (navigateTo) {
             const navigateAction = NavigationActions.navigate({
               routeName: navigateTo,