Fixed heatmap on iOS.

Performance improvement (changed ListView to FlatList). Fixed unnecessary matches rendering in Player Overview. Close #133.
odota · Oct 8, 2018 · 91922cc · 91922cc
1 parent 12546ae
commit 91922cc
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 121 deletions.
diff --git a/app/actions/player_matches_act.js b/app/actions/player_matches_act.js
@@ -4,6 +4,9 @@ export const types = {
     REQUEST_MATCHES: 'REQUEST_MATCHES',
     RECEIVE_MATCHES: 'RECEIVE_MATCHES',
     RECEIVE_EMPTY_MATCHES: 'RECEIVE_EMPTY_MATCHES',
+    REQUEST_RECENT_MATCHES: 'REQUEST_RECENT_MATCHES',
+    RECEIVE_RECENT_MATCHES: 'RECEIVE_RECENT_MATCHES',
+    RECEIVE_EMPTY_RECENT_MATCHES: 'RECEIVE_EMPTY_RECENT_MATCHES',
     CHANGE_SORTED_BY: 'CHANGE_SORTED_BY',
     SORT_MATCHES: 'SORT_MATCHES',
     SET_MAX_PAGES: 'SET_MAX_PAGES',
@@ -45,6 +48,41 @@ function receiveEmptyMatches() {
     };
 }
 
+function requestRecentMatches() {
+    return {
+        type: types.REQUEST_RECENT_MATCHES
+    };
+}
+
+function receiveRecentMatches(recentMatches) {
+    return {
+        type: types.RECEIVE_RECENT_MATCHES,
+        recentMatches
+    };
+}
+
+function receiveEmptyRecentMatches() {
+    return {
+        type: types.RECEIVE_EMPTY_RECENT_MATCHES
+    };
+}
+
+export function fetchRecentMatches(playerId, limit) {
+    var endpoint = "players/" + playerId + "/matches?limit=" + limit;
+
+    return dispatch => {
+        dispatch(requestRecentMatches());
+
+        return fetchAPI(endpoint)
+            .then((json) => {
+                dispatch(receiveRecentMatches(json));
+            })
+            .catch(() => {
+                dispatch(receiveEmptyRecentMatches());
+            })
+    }
+}
+
 export function setMaxPages(maxPages) {
     return {
         type: types.SET_MAX_PAGES,
@@ -74,64 +112,64 @@ export function resetMatchesPage() {
 }
 
 export function fetchMatches(playerId, limit, projects, sortCategory, heroId, result,
-                                faction, gameMode, lane, lobbyType, patch, date, region) {
+    faction, gameMode, lane, lobbyType, patch, date, region) {
     var endpoint = "players/" + playerId + "/matches?limit=" + limit;
 
-    if(projects){
-        for(let i = 0; i < projects.length; i++) {
+    if (projects) {
+        for (let i = 0; i < projects.length; i++) {
             endpoint += ("&project=" + projects[i]);
         }
     }
 
-    if(sortCategory !== undefined && sortCategory !== "match_id") {
+    if (sortCategory !== undefined && sortCategory !== "match_id") {
         endpoint += ("&sort=" + sortCategory);
     }
 
-    if(heroId !== undefined && heroId !== 0) {
+    if (heroId !== undefined && heroId !== 0) {
         endpoint += ("&hero_id=" + heroId);
     }
 
-    if(faction !== undefined && faction !== -1) {
+    if (faction !== undefined && faction !== -1) {
         endpoint += ("&isRadiant=" + faction);
     }
 
-    if(patch !== undefined && patch !== -1) {
+    if (patch !== undefined && patch !== -1) {
         endpoint += ("&patch=" + patch);
     }
 
-    if(gameMode !== undefined && gameMode !== -1) {
+    if (gameMode !== undefined && gameMode !== -1) {
         endpoint += ("&game_mode=" + gameMode);
     }
 
-    if(result !== undefined && result !== -1) {
+    if (result !== undefined && result !== -1) {
         endpoint += ("&win=" + result);
     }
 
-    if(lane !== undefined && lane !== -1) {
+    if (lane !== undefined && lane !== -1) {
         endpoint += ("&lane_role=" + lane);
     }
 
-    if(lobbyType !== undefined && lobbyType !== -2) {
+    if (lobbyType !== undefined && lobbyType !== -2) {
         endpoint += ("&lobby_type=" + lobbyType);
     }
 
-    if(date !== undefined && date !== -1) {
+    if (date !== undefined && date !== -1) {
         endpoint += ("&date=" + date);
     }
 
-    if(region !== undefined && region !== -1) {
+    if (region !== undefined && region !== -1) {
         endpoint += ("&region=" + region);
     }
 
     return dispatch => {
         dispatch(requestMatches());
 
         return fetchAPI(endpoint)
-        .then((json) => {
-            dispatch(receiveMatches(json));
-        })
-        .catch(() => {
-            dispatch(receiveEmptyMatches());
-        })
+            .then((json) => {
+                dispatch(receiveMatches(json));
+            })
+            .catch(() => {
+                dispatch(receiveEmptyMatches());
+            })
     }
 }
diff --git a/app/components/Heatmap.js b/app/components/Heatmap.js
@@ -75,6 +75,7 @@ class Heatmap extends Component {
                 scrollEnabled = {false}
                 injectedJavaScript = {script}
                 javaScriptEnabled
+                originWhitelist={['*']}
                 style = {{width: 300, height: 300, backgroundColor: this.props.background}}
             />;
         }

diff --git a/app/components/HeroesCard.js b/app/components/HeroesCard.js
@@ -4,7 +4,7 @@ import {
     Text,
     StyleSheet,
     Image,
-    ListView
+    FlatList
 } from 'react-native';
 
 import { connect } from 'react-redux';
@@ -30,7 +30,6 @@ class HeroesCard extends Component {
 
     constructor(props) {
         super(props);
-        this.heroesDS = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
         this.renderRow = this.renderRow.bind(this);
         this.getIndex = this.getIndex.bind(this);
         this.sortByKey = this.sortByKey.bind(this);
@@ -115,16 +114,17 @@ class HeroesCard extends Component {
         return processedHeroList;
     }
 
-    renderRow(rowData, i, j) {
+    renderRow(item) {
+        let rowData = item.item;
         var rowContainer;
-        if ((parseInt(j) + 1) % 2 == 0) {
+        if ((parseInt(item.index) + 1) % 2 == 0) {
             rowContainer = { backgroundColor: this.props.mod, marginTop: 10, paddingVertical: 5, borderRadius: 3 };
         } else {
             rowContainer = { backgroundColor: this.props.alpha, marginTop: 10, paddingVertical: 5, borderRadius: 3 };
         }
         var staticUri = getHeroImage(rowData.heroId);
         return (
-            <View style={rowContainer}>
+            <View style={rowContainer} >
                 <Text style={[styles.heroValueText, { color: this.props.secondLegend }]} numberOfLines={1}>{rowData.localizedName}</Text>
                 <View style={[styles.inRowSeparator, { backgroundColor: this.props.legend }]} />
 
@@ -179,11 +179,12 @@ class HeroesCard extends Component {
                             </View>
                         </View>
                     </View>
-                    <ListView
-                        dataSource={this.heroesDS.cloneWithRows(processedHeroList)}
-                        renderRow={this.renderRow}
+                    <FlatList
+                        data={processedHeroList}
+                        renderItem={this.renderRow}
                         enableEmptySections={true}
                         initialListSize={120}
+                        keyExtractor={(item, index) => index.toString()}
                     />
                 </View>
             )