created filter for userlist dropdown

src/components/editorHeader/view/editorHeaderView.js

@@ -134,6 +134,7 @@ class EditorHeaderView extends Component {
                 onChangeText={value => this._handleOnSearch(value)}
                 autoFocus
                 placeholder="Search"
+                autoCapitalize="none"
                 style={styles.textInput}
               />
             )}

src/components/votersDisplay/view/votersDisplayView.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import {
   View, FlatList, Text, TouchableOpacity,
 } from 'react-native';
@@ -13,25 +13,18 @@ import FastImage from 'react-native-fast-image';
 import styles from './votersDisplayStyles';
 // const DEFAULT_IMAGE = require('../../../../assets/esteem.png');
 
-class VotersDisplayView extends Component {
+class VotersDisplayView extends PureComponent {
   /* Props
     * ------------------------------------------------
     *   @prop { type }    name                - Description....
     */
 
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  // Component Life Cycles
-
   // Component Functions
   _renderItem = (item, index) => {
     const { handleOnUserPress } = this.props;
     const reputation = `(${item.reputation})`;
     const value = `$ ${item.value}`;
-    const percent = `${item.value}%`;
+    const percent = `${item.percent}%`;
 
     return (
       <View style={[styles.voteItemWrapper, index % 2 !== 0 && styles.voteItemWrapperGray]}>
@@ -55,13 +48,15 @@ class VotersDisplayView extends Component {
 
   render() {
     const { votes } = this.props;
+    console.log(votes);
 
     return (
       <View style={styles.container}>
         {votes.length > 0 ? (
           <FlatList
             data={votes}
-            keyExtractor={item => item.voter.toString()}
+            keyExtractor={item => item.voter}
+            removeClippedSubviews={false}
             renderItem={({ item, index }) => this._renderItem(item, index)}
           />
         ) : (

src/screens/voters/screen/votersScreen.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-
 // Constants
 
 // Components
@@ -8,9 +7,8 @@ import { EditorHeader } from '../../../components/editorHeader';
 import { FilterBar } from '../../../components/filterBar';
 import { VotersDisplay } from '../../../components/votersDisplay';
 
-// Styles
+// Utils
-// eslint-disable-next-line
+import { isBefore } from '../../../utils/time';
-//import styles from './_styles';
 
 class VotersScreen extends Component {
   /* Props
@@ -29,7 +27,26 @@ class VotersScreen extends Component {
   // Component Life Cycles
 
   // Component Functions
-  _handleOnDropdownSelect = () => {};
+  _handleOnDropdownSelect = (index) => {
+    const { data } = this.state;
+    const _data = data;
+
+    switch (index) {
+      case '0':
+        _data.sort((a, b) => Number(b.value) - Number(a.value));
+        break;
+      case '1':
+        _data.sort((a, b) => b.percent - a.percent);
+        break;
+      case '2':
+        _data.sort((a, b) => (isBefore(a.time, b.time) ? 1 : -1));
+        break;
+      default:
+        break;
+    }
+
+    this.setState({ filterResult: _data });
+  };
 
   _handleRightIconPress = () => {};
 
@@ -38,7 +55,6 @@ class VotersScreen extends Component {
 
     const newData = data.filter((item) => {
       const itemName = item.voter.toUpperCase();
-      // ${item.name.first.toUpperCase()} ${item.name.last.toUpperCase()}`;
       const _text = text.toUpperCase();
 
       return itemName.indexOf(_text) > -1;
@@ -65,7 +81,7 @@ class VotersScreen extends Component {
           defaultText="REWARDS"
           onDropdownSelect={this._handleOnDropdownSelect}
         />
-        <VotersDisplay votes={filterResult || data} />
+        <VotersDisplay key={Math.random()} votes={filterResult || data} />
       </View>
     );
   }

src/utils/time.js

@@ -9,8 +9,10 @@ export const getTimeFromNow = (value) => {
     .fromNow();
 };
 
-export const getFormatedCreatedDate = value => {
+export const getFormatedCreatedDate = (value) => {
   if (!value) return null;
 
-  return moment(value).format("DD MMM, YYYY");
+  return moment(value).format('DD MMM, YYYY');
 };
+
+export const isBefore = (a, b) => moment(a).isBefore(b);