implemented new filter to leader board && ui updated

src/components/basicUIElements/view/userListItem/userListItem.js

@@ -18,19 +18,34 @@ const UserListItem = ({
   handleOnLongPress,
   isClickable,
   text,
+  middleText,
+  rightTextStyle,
 }) => (
   <TouchableOpacity
     onLongPress={() => handleOnLongPress && handleOnLongPress()}
     disabled={!isClickable}
     onPress={() => handleOnPress && handleOnPress()}
   >
-    <View style={[styles.voteItemWrapper, index % 2 !== 0 && styles.voteItemWrapperGray]}>
+    <View style={[styles.voteItemWrapper, index % 2 === 0 && styles.voteItemWrapperGray]}>
       {itemIndex && <Text style={styles.itemIndex}>{itemIndex}</Text>}
       <UserAvatar noAction={userCanPress} style={styles.avatar} username={username} />
       <View style={styles.userDescription}>
         <Text style={styles.name}>{text || username}</Text>
         {description && <Text style={styles.date}>{description}</Text>}
       </View>
+      {middleText && (
+        <View style={styles.middleWrapper}>
+          <Text
+            style={[
+              styles.value,
+              isRightColor && styles.valueGray,
+              isBlackRightColor && styles.valueBlack,
+            ]}
+          >
+            {middleText}
+          </Text>
+        </View>
+      )}
       {isHasRightItem && (
         <View style={styles.rightWrapper}>
           <Text
@@ -38,6 +53,7 @@ const UserListItem = ({
               styles.value,
               isRightColor && styles.valueGray,
               isBlackRightColor && styles.valueBlack,
+              rightTextStyle,
             ]}
           >
             {rightText}

src/components/basicUIElements/view/userListItem/userListItemStyles.js

@@ -47,6 +47,7 @@ export default EStyleSheet.create({
   rightWrapper: {
     textAlign: 'center',
     alignItems: 'center',
+    width: 80,
   },
   text: {
     color: '$iconColor',
@@ -68,4 +69,7 @@ export default EStyleSheet.create({
     fontSize: 10,
     marginRight: 17,
   },
+  middleWrapper: {
+    marginRight: 30,
+  },
 });

src/components/leaderboard/container/leaderboardContainer.js

@@ -48,7 +48,7 @@ class LeaderboardContainer extends PureComponent {
     });
   };
 
-  _fetchLeaderBoard = async () => {
+  _fetchLeaderBoard = async selectedFilter => {
     const { intl, isConnected } = this.props;
     let users;
 
@@ -57,7 +57,7 @@ class LeaderboardContainer extends PureComponent {
     this.setState({ refreshing: true });
 
     try {
-      users = await getLeaderboard();
+      users = await getLeaderboard(selectedFilter);
     } catch (error) {
       Alert.alert(
         intl.formatMessage({ id: 'alert.error' }),

src/components/leaderboard/view/leaderboardStyles.js

@@ -5,12 +5,29 @@ export default EStyleSheet.create({
     flex: 1,
     padding: 8,
   },
-  text: {
+  title: {
     color: '$primaryDarkGray',
     fontSize: 14,
     fontWeight: 'bold',
     marginLeft: 20,
     fontFamily: '$primaryFont',
     paddingBottom: 10,
+    flexGrow: 1,
+  },
+  rewardText: {
+    color: '$primaryBlue',
+  },
+  columnTitleWrapper: {
+    flexDirection: 'row',
+    marginTop: 10,
+    justifyContent: 'flex-end',
+  },
+  columnTitle: {
+    color: '$primaryDarkGray',
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginRight: 40,
+    marginBottom: 10,
+    fontFamily: '$primaryFont',
   },
 });

src/components/leaderboard/view/leaderboardView.js

@@ -1,11 +1,12 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import { View, FlatList, Text } from 'react-native';
 import { injectIntl } from 'react-intl';
 import get from 'lodash/get';
 
 // Components
 import { UserListItem, ListPlaceHolder } from '../../basicUIElements';
-
+import { FilterBar } from '../../filterBar';
+import FILTER_OPTIONS, { VALUE } from '../../../constants/options/leaderboard';
 // Styles
 import styles from './leaderboardStyles';
 
@@ -28,9 +29,11 @@ class LeaderboardView extends PureComponent {
         isHasRightItem
         isClickable
         isBlackRightColor
-        rightText={get(item, 'count')}
+        rightText={get(item, 'points')}
+        middleText={get(item, 'count')}
         itemIndex={index + 1}
         handleOnPress={() => handleOnUserPress(get(item, '_id'))}
+        rightTextStyle={styles.rewardText}
       />
     );
   };
@@ -39,22 +42,37 @@ class LeaderboardView extends PureComponent {
     const { users, intl, fetchLeaderBoard, refreshing } = this.props;
 
     return (
-      <View style={styles.container}>
-        <Text style={styles.text}>
-          {intl.formatMessage({
-            id: 'notification.leaderboard_title',
-          })}
-        </Text>
-        <FlatList
-          data={users}
-          refreshing={refreshing}
-          keyExtractor={item => get(item, '_id', Math.random()).toString()}
-          removeClippedSubviews={false}
-          ListEmptyComponent={<ListPlaceHolder />}
-          onRefresh={() => fetchLeaderBoard()}
-          renderItem={({ item, index }) => this._renderItem(item, index)}
+      <Fragment>
+        <FilterBar
+          dropdownIconName="arrow-drop-down"
+          options={VALUE}
+          selectedOptionIndex={0}
+          defaultText={VALUE[0]}
+          onDropdownSelect={selectedIndex => fetchLeaderBoard(FILTER_OPTIONS[selectedIndex])}
         />
-      </View>
+
+        <View style={styles.container}>
+          <View style={styles.columnTitleWrapper}>
+            <Text style={styles.title}>
+              {intl.formatMessage({
+                id: 'notification.leaderboard_title',
+              })}
+            </Text>
+            <Text style={[styles.columnTitle]}>Activities</Text>
+            <Text style={[styles.columnTitle]}>Reward</Text>
+          </View>
+
+          <FlatList
+            data={users}
+            refreshing={refreshing}
+            keyExtractor={item => get(item, '_id', Math.random()).toString()}
+            removeClippedSubviews={false}
+            ListEmptyComponent={<ListPlaceHolder />}
+            onRefresh={() => fetchLeaderBoard()}
+            renderItem={({ item, index }) => this._renderItem(item, index)}
+          />
+        </View>
+      </Fragment>
     );
   }
 }

src/constants/options/leaderboard.js

@@ -0,0 +1,3 @@
+export default ['day', 'week', 'month'];
+
+export const VALUE = ['Daily', 'Weekly', 'Montly'];

src/providers/esteem/esteem.js

@@ -131,7 +131,10 @@ export const addFavorite = (currentUsername, targetUsername) =>
 export const removeFavorite = (currentUsername, targetUsername) =>
   api.delete(`/favoriteUser/${currentUsername}/${targetUsername}`);
 
-export const getLeaderboard = () => api.get('/leaderboard').then(resp => resp.data);
+export const getLeaderboard = duration =>
+  api.get('/leaderboard', { params: { duration } }).then(resp => {
+    return resp.data;
+  });
 
 export const getActivities = data =>
   new Promise((resolve, reject) => {