enhancet voters a nd re blog screens

src/components/votersDisplay/container/votersDisplayContainer.js

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import { withNavigation } from 'react-navigation';
-
-// Constants
-import ROUTES from '../../../constants/routeNames';
-
-// Component
-import VotersDisplayView from '../view/votersDisplayView';
-
-/*
- *            Props Name        Description                                     Value
- *@props -->  props name here   description here                                Value Type Here
- *
- */
-
-class VotersDisplayContainer extends Component {
-  _handleOnUserPress = username => {
-    const { navigation } = this.props;
-
-    navigation.navigate({
-      routeName: ROUTES.SCREENS.PROFILE,
-      params: {
-        username,
-      },
-      key: username,
-    });
-  };
-
-  render() {
-    const { votes } = this.props;
-
-    return <VotersDisplayView handleOnUserPress={this._handleOnUserPress} votes={votes} />;
-  }
-}
-
-export default withNavigation(VotersDisplayContainer);

src/components/votersDisplay/index.js

@@ -1,5 +1,4 @@
-import VotersDisplayView from './view/votersDisplayView';
-import VotersDisplay from './container/votersDisplayContainer';
+import VotersDisplay from './view/votersDisplayView';
 
-export { VotersDisplay, VotersDisplayView };
+export { VotersDisplay };
 export default VotersDisplay;

src/components/votersDisplay/view/votersDisplayStyles.js

@@ -2,6 +2,7 @@ import EStyleSheet from 'react-native-extended-stylesheet';
 
 export default EStyleSheet.create({
   container: {
+    flex: 1,
     padding: 8,
     flexDirection: 'row',
     height: '$deviceHeight - 150',

src/components/votersDisplay/view/votersDisplayView.js

@@ -1,27 +1,37 @@
-import React, { Component } from 'react';
-import { View, FlatList, Text } from 'react-native';
-import { injectIntl } from 'react-intl';
+import React from 'react';
+import { SafeAreaView, FlatList, Text } from 'react-native';
+import { withNavigation } from 'react-navigation';
+import { useIntl } from 'react-intl';
 
 // Utils
 import { getTimeFromNow } from '../../../utils/time';
 
 // Components
 import { UserListItem } from '../../basicUIElements';
+
+// Constants
+import ROUTES from '../../../constants/routeNames';
+
 // Styles
 import styles from './votersDisplayStyles';
 
-class VotersDisplayView extends Component {
-  /* Props
-   * ------------------------------------------------
-   *   @prop { type }    name                - Description....
-   */
+const VotersDisplayView = ({ votes, navigation }) => {
+  const intl = useIntl();
 
-  // Component Functions
-  _renderItem = (item, index) => {
-    const { handleOnUserPress } = this.props;
+  const _handleOnUserPress = username => {
+    navigation.navigate({
+      routeName: ROUTES.SCREENS.PROFILE,
+      params: {
+        username,
+      },
+      key: username,
+    });
+  };
+
+  const _renderItem = (item, index) => {
     const value = `$ ${item.value}`;
     const percent = `${item.percent}%`;
-
+    console.log(item);
     return (
       <UserListItem
         index={index}
@@ -30,35 +40,31 @@ class VotersDisplayView extends Component {
         isHasRightItem
         isRightColor={item.is_down_vote}
         rightText={value}
-        handleOnPress={() => handleOnUserPress(item.voter)}
+        handleOnPress={() => _handleOnUserPress(item.voter)}
         isClickable
         subRightText={percent}
       />
     );
   };
 
-  render() {
-    const { votes, intl } = this.props;
+  return (
+    <SafeAreaView style={styles.container}>
+      {votes && votes.length > 0 ? (
+        <FlatList
+          data={votes}
+          keyExtractor={item => item.voter}
+          removeClippedSubviews={false}
+          renderItem={({ item, index }) => _renderItem(item, index)}
+        />
+      ) : (
+        <Text style={styles.text}>
+          {intl.formatMessage({
+            id: 'voters.no_user',
+          })}
+        </Text>
+      )}
+    </SafeAreaView>
+  );
+};
 
-    return (
-      <View style={styles.container}>
-        {votes.length > 0 ? (
-          <FlatList
-            data={votes}
-            keyExtractor={item => item.voter}
-            removeClippedSubviews={false}
-            renderItem={({ item, index }) => this._renderItem(item, index)}
-          />
-        ) : (
-          <Text style={styles.text}>
-            {intl.formatMessage({
-              id: 'voters.no_user',
-            })}
-          </Text>
-        )}
-      </View>
-    );
-  }
-}
-
-export default injectIntl(VotersDisplayView);
+export default withNavigation(VotersDisplayView);

src/screens/reblogs/screen/reblogScreen.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { View, FlatList } from 'react-native';
+import { View, FlatList, SafeAreaView } from 'react-native';
 import { useIntl } from 'react-intl';
-
-// Constants
+import get from 'lodash/get';
 
 // Components
 import { BasicHeader, UserListItem } from '../../../components';
 
+// Container
 import AccountListContainer from '../../../containers/accountListContainer';
 
 // Utils
@@ -31,13 +31,12 @@ const ReblogScreen = ({ navigation }) => {
     id: 'reblog.title',
   });
 
-  const activeVotes =
-    navigation.state && navigation.state.params && navigation.state.params.reblogs;
+  const activeVotes = get(navigation, 'state.params.reblogs');
 
   return (
     <AccountListContainer data={activeVotes} navigation={navigation}>
       {({ data, filterResult, handleSearch, handleOnUserPress }) => (
-        <View style={globalStyles.container}>
+        <SafeAreaView style={globalStyles.container}>
           <BasicHeader
             title={`${headerTitle} (${data && data.length})`}
             isHasSearch
@@ -49,7 +48,7 @@ const ReblogScreen = ({ navigation }) => {
             removeClippedSubviews={false}
             renderItem={({ item, index }) => renderUserListItem(item, index, handleOnUserPress)}
           />
-        </View>
+        </SafeAreaView>
       )}
     </AccountListContainer>
   );

src/screens/voters/screen/votersScreen.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { View } from 'react-native';
+import { SafeAreaView } from 'react-native';
 import { useIntl } from 'react-intl';
-
-// Constants
+import get from 'lodash/get';
 
 // Components
 import { BasicHeader, FilterBar, VotersDisplay } from '../../../components';
@@ -20,13 +19,12 @@ const VotersScreen = ({ navigation }) => {
     id: 'voters.voters_info',
   });
 
-  const activeVotes =
-    navigation.state && navigation.state.params && navigation.state.params.activeVotes;
+  const activeVotes = get(navigation, 'state.params.activeVotes');
 
   return (
     <AccountListContainer data={activeVotes}>
       {({ data, filterResult, handleOnVotersDropdownSelect, handleSearch }) => (
-        <View style={globalStyles.container}>
+        <SafeAreaView style={globalStyles.container}>
           <BasicHeader
             title={`${headerTitle} (${data && data.length})`}
             isHasSearch
@@ -43,7 +41,7 @@ const VotersScreen = ({ navigation }) => {
             onDropdownSelect={handleOnVotersDropdownSelect}
           />
           <VotersDisplay votes={filterResult || data} />
-        </View>
+        </SafeAreaView>
       )}
     </AccountListContainer>
   );