Fix scroll and replace componentDidUpdate instead of componentWillProps. Close #1086

Author: erikaperugachi

email_mailbox/src/components/PanelWrapper.js

@@ -296,8 +296,8 @@ class PanelWrapper extends Component {
         .threadIdSelected;
       const currentLabelId = this.state.sectionSelected.params.mailboxSelected
         .id;
-      const limit =
-        this.props.threadsCount > 20 ? this.props.threadsCount : undefined;
+      const currentMailboxSize = this.props[currentLabelId];
+      const limit = currentMailboxSize > 22 ? currentMailboxSize : undefined;
       if (labelIds && isRenderingMailbox) {
         if (labelIds.includes(currentLabelId)) {
           this.props.onLoadThreads(

email_mailbox/src/components/Threads.js

@@ -65,7 +65,11 @@ const Threads = props => (
         </span>
       </div>
     </div>
-    <div className="threads-content cptx-scrollbar" onScroll={props.onScroll}>
+    <div
+      className="threads-content cptx-scrollbar"
+      onScroll={props.onScroll}
+      ref={props.setScrollRef}
+    >
       <div className="threads-items">
         {props.threads.size < 1 && (
           <EmptyMailbox
@@ -175,6 +179,7 @@ Threads.propTypes = {
   popupContent: PropTypes.object,
   searchParams: PropTypes.object,
   setPopupContent: PropTypes.func,
+  setScrollRef: PropTypes.func,
   switchChecked: PropTypes.bool,
   switchDisabled: PropTypes.bool,
   threadItemsChecked: PropTypes.object,

email_mailbox/src/components/ThreadsWrapper.js

@@ -16,44 +16,7 @@ class ThreadsWrapper extends Component {
       tip: '',
       popupContent: undefined
     };
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (
-      this.props.mailboxSelected !== nextProps.mailboxSelected ||
-      this.props.searchParams !== nextProps.searchParams ||
-      (nextProps.threadItemsChecked.size === 0 &&
-        this.props.threadItemsChecked.size > 0)
-    ) {
-      this.setState({ lastMinDate: undefined });
-      this.props.onLoadThreads(
-        nextProps.mailboxSelected,
-        true,
-        nextProps.searchParams
-      );
-    }
-    if (
-      this.props.threadItemsChecked.size > 0 &&
-      this.props.mailboxSelected !== nextProps.mailboxSelected
-    ) {
-      this.props.onBackOption();
-    }
-
-    if (
-      this.state.isHiddenLoadingSync &&
-      nextProps.totalTask > nextProps.completedTask
-    ) {
-      this.setState({ isHiddenLoadingSync: false });
-    }
-    if (
-      !this.state.isHiddenLoadingSync &&
-      nextProps.totalTask > 0 &&
-      nextProps.completedTask > 0 &&
-      (nextProps.totalTask === nextProps.completedTask ||
-        nextProps.completedTask > nextProps.totalTask)
-    ) {
-      setTimeout(() => this.setState({ isHiddenLoadingSync: true }), 1000);
-    }
+    this.scroll = null;
   }
 
   render() {
@@ -68,6 +31,7 @@ class ThreadsWrapper extends Component {
         onMouseLeaveItem={this.handleMouseLeaveItem}
         onScroll={this.handleScroll}
         onChangeSwitch={this.handleChangeSwitch}
+        setScrollRef={this.handleSetScrollRef}
         tip={this.state.tip}
         popupContent={this.state.popupContent}
         setPopupContent={this.setPopupContent}
@@ -82,6 +46,46 @@ class ThreadsWrapper extends Component {
       this.props.onLoadApp(this.props.mailboxSelected, true);
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.mailboxSelected !== this.props.mailboxSelected ||
+      prevProps.searchParams !== this.props.searchParams ||
+      (this.props.threadItemsChecked.size === 0 &&
+        prevProps.threadItemsChecked.size > 0)
+    ) {
+      this.setState({ lastMinDate: undefined });
+      this.props.onLoadThreads(
+        this.props.mailboxSelected,
+        true,
+        this.props.searchParams
+      );
+      if (this.scroll.scrollTop !== 0) {
+        this.scroll.scrollTop = 0;
+      }
+    }
+    if (
+      this.props.threadItemsChecked.size > 0 &&
+      prevProps.mailboxSelected !== this.props.mailboxSelected
+    ) {
+      this.props.onBackOption();
+    }
+    if (
+      this.state.isHiddenLoadingSync &&
+      this.props.totalTask > this.props.completedTask
+    ) {
+      this.setState({ isHiddenLoadingSync: false });
+    }
+    if (
+      !this.state.isHiddenLoadingSync &&
+      this.props.totalTask > 0 &&
+      this.props.completedTask > 0 &&
+      (this.props.totalTask === this.props.completedTask ||
+        this.props.completedTask > this.props.totalTask)
+    ) {
+      setTimeout(() => this.setState({ isHiddenLoadingSync: true }), 1000);
+    }
+  }
+
   handleCloseMessage = () => {
     if (this.props.isUpdateAvailable) {
       this.props.onCloseUpdateMessage();
@@ -159,6 +163,10 @@ class ThreadsWrapper extends Component {
     this.setState({ popupContent: undefined }, this.props.onEmptyTrash);
   };
 
+  handleSetScrollRef = e => {
+    this.scroll = e;
+  };
+
   setPopupContent = popupContent => {
     this.setState({ popupContent });
   };

email_mailbox/src/containers/Panel.js

@@ -19,13 +19,18 @@ import { updateSettings } from '../utils/ipc';
 import { defineRejectedLabels } from '../utils/EmailUtils';
 
 const mapStateToProps = state => {
-  const threadsCount = state
+  const labelIds = state
     .get('threads')
-    .get(`${LabelType.inbox.id}`)
-    .get('list').size;
-  return {
-    threadsCount
-  };
+    .keySeq()
+    .toArray();
+  const result = labelIds.reduce((result, id) => {
+    const size = state
+      .get('threads')
+      .get(`${id}`)
+      .get('list').size;
+    return { ...result, [id]: size };
+  }, {});
+  return result;
 };
 
 const defineContactType = labelId => {