introduce reselect for better re-render of files

Author: negative0

package-lock.json

@@ -28,6 +28,7 @@
     "node-sass": "^4.13.1",
     "package.json": "^2.0.1",
     "prop-types": "^15.7.2",
+    "rclone-api": "^1.0.0",
     "react": "^16.12.0",
     "react-app-polyfill": "^1.0.6",
     "react-autosuggest": "^10.0.0",
@@ -45,9 +46,9 @@
     "reactstrap": "^8.4.1",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
     "simple-line-icons": "^2.4.1",
-    "typescript": "^3.7.5",
-    "rclone-api": "^1.0.0"
+    "typescript": "^3.7.5"
   },
   "devDependencies": {
     "check-prop-types": "^1.1.2",

package.json

@@ -23,7 +23,7 @@ import {PROP_CURRENT_PATH, PROP_FS_INFO} from "../../../utils/RclonePropTypes";
 import * as PropTypes from 'prop-types';
 import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
 import {createNewPublicLink, deleteFile, purgeDir} from "rclone-api";
-
+import {createSelector} from "reselect";
 
 /*
 * Start code for react DND
@@ -468,19 +468,44 @@ const propTypes = {
     loadImages: PropTypes.bool.isRequired
 };
 
-const defaultProps = {
-};
+const defaultProps = {};
 
 
 FilesView.propTypes = propTypes;
 FilesView.defaultProps = defaultProps;
 
+let count = 0;
+
+const getVisibleFiles = createSelector(
+    (state, props) => props.containerID,
+    (state, props) => state.explorer.currentPaths[props.containerID],
+    (state, props) => state.explorer.visibilityFilters[props.containerID],
+    (state, props) => state.explorer.sortFilters[props.containerID],
+    (state, props) => state.explorer.searchQueries[props.containerID],
+    (state, props) => state.explorer.sortFiltersAscending[props.containerID],
+    (state, props) => state.remote.files[`${state.explorer.currentPaths[props.containerID].remoteName}-${state.explorer.currentPaths[props.containerID].remotePath}`],
+    (containerID, currentPath, visibilityFilter, sortFilter, searchQuery, sortFilterAscending, files) => {
+        console.log("Files render : " + (++count));
+        files = files.files;
+        // Filter according to visibility filters
+        if (visibilityFilter && visibilityFilter !== "") {
+            files = changeListVisibility(files, visibilityFilter);
+        }
+
+        //Filter according to search query, if any
+        if (searchQuery) {
+            files = changeSearchFilter(files, searchQuery);
+        }
+        files.sort(getSortCompareFunction(sortFilter, sortFilterAscending));
+
+        return files;
+    }
+)
 
 const mapStateToProps = (state, ownProps) => {
     const {currentPaths, visibilityFilters, gridMode, searchQueries, loadImages, sortFilters, sortFiltersAscending} = state.explorer;
     const {containerID} = ownProps;
     const currentPath = currentPaths[containerID];
-    const visibilityFilter = visibilityFilters[containerID];
     const mgridMode = gridMode[containerID];
     const searchQuery = searchQueries[containerID];
     const mloadImages = loadImages[containerID];
@@ -491,7 +516,6 @@ const mapStateToProps = (state, ownProps) => {
     const {remoteName, remotePath} = currentPath;
 
     if (currentPath && state.remote.configs) {
-
         const tempRemoteName = remoteName.split(':')[0];
         if (state.remote.configs[tempRemoteName])
             fsInfo = state.remote.configs[tempRemoteName];
@@ -502,24 +526,10 @@ const mapStateToProps = (state, ownProps) => {
     let files = state.remote.files[pathKey];
 
     if (files) {
-        console.log(files);
-        files = files.files;
-        // Filter according to visibility filters
-        if (visibilityFilter && visibilityFilter !== "") {
-            files = changeListVisibility(files, visibilityFilter);
-        }
-
-        //Filter according to search query, if any
-        if (searchQuery) {
-            files = changeSearchFilter(files, searchQuery);
-        }
-        files.sort(getSortCompareFunction(sortFilter, sortFilterAscending));
-
+        files = getVisibleFiles(state, ownProps);
     }
 
     // Sort the files
-
-
     return {
         files,
         currentPath,