Update badge

electron_app/src/DBManager.js

@@ -425,7 +425,7 @@ const baseThreadQuery = ({
           Table.CONTACT
         }.email END)) as fromContactName`
       ),
-      db.raw(`max(${Table.EMAIL}.unread) as isUnread`)
+      db.raw(`max(${Table.EMAIL}.unread) as unread`)
     )
     .from(Table.EMAIL)
     .leftJoin(

email_mailbox/public/labels.json

@@ -3,7 +3,8 @@
     {
       "id": 1,
       "color": "#ffffff",
-      "text": "Inbox"
+      "text": "Inbox",
+      "badge": 1
     },
     {
       "id": 2,
@@ -13,7 +14,8 @@
     {
       "id": 3,
       "color": "#ffffff",
-      "text": "Spam"
+      "text": "Spam",
+      "badge": 1
     },
     {
       "id": 4,

email_mailbox/src/actions/emails.js

@@ -1,10 +1,12 @@
 import { Email } from './types';
 import {
   getEmailsByThreadId,
+  updateUnreadEmailByThreadId,
   setMuteEmailById,
   setUnreadEmailById
 } from '../utils/electronInterface';
 import { loadContacts } from './contacts';
+import { updateLabelSuccess } from './labels';
 
 export const addEmails = emails => {
   return {
@@ -81,3 +83,16 @@ export const markEmailUnread = (emailId, valueToSet) => {
     }
   };
 };
+
+export const updateUnreadEmails = (thread, label) => {
+  return async dispatch => {
+    try {
+      await updateUnreadEmailByThreadId(thread.id, thread.unread);
+      if (label) {
+        dispatch(updateLabelSuccess(label));
+      }
+    } catch (e) {
+      // To do
+    }
+  };
+};

email_mailbox/src/actions/index.js

@@ -7,13 +7,14 @@ import {
   filterThreadsByUnread,
   loadEvents,
   loadThreads,
-  markThreadsRead,
   moveThreads,
   multiSelectThread,
   selectThread,
   removeThread,
   removeThreadLabel,
   deselectThreads,
+  updateUnreadThread,
+  updateUnreadThreads,
   searchThreads,
   selectThreads,
   removeThreads,
@@ -24,7 +25,8 @@ import {
   loadEmails,
   markEmailUnread,
   muteEmail,
-  muteNotifications
+  muteNotifications,
+  updateUnreadEmails
 } from './emails';
 import {
   addLabels,
@@ -65,7 +67,6 @@ export {
   loadThreads,
   markEmailUnread,
   markFeedAsSelected,
-  markThreadsRead,
   moveThreads,
   multiSelectThread,
   muteEmail,
@@ -83,5 +84,8 @@ export {
   setThreads,
   toggleMuteFeed,
   updateLabel,
-  updateLabelSuccess
+  updateLabelSuccess,
+  updateUnreadEmails,
+  updateUnreadThread,
+  updateUnreadThreads
 };

email_mailbox/src/actions/threads.js

@@ -1,5 +1,6 @@
 import { Thread } from './types';
 import { startLoadSync, stopLoadSync } from './activity';
+import { updateLabelSuccess } from './labels';
 import {
   createEmailLabel,
   deleteEmailLabel,
@@ -106,7 +107,20 @@ export const moveThreads = (threadIds, labelId) => ({
   labelId
 });
 
-export const markThreadsRead = (threadsParams, read) => {
+export const updateUnreadThread = thread => {
+  return {
+    type: Thread.UPDATE_UNREAD_THREAD,
+    thread
+  };
+};
+
+export const updateUnreadThreadsSuccess = (threadsIds, read) => ({
+  threadsIds,
+  read,
+  type: Thread.UPDATE_UNREAD_THREADS
+});
+
+export const updateUnreadThreads = (threadsParams, read, label) => {
   return async dispatch => {
     try {
       const storeIds = threadsParams.map(param => param.threadIdStore);
@@ -117,20 +131,15 @@ export const markThreadsRead = (threadsParams, read) => {
         })
       );
       if (dbReponse) {
-        dispatch(markThreadsReadSuccess(storeIds, read));
+        dispatch(updateUnreadThreadsSuccess(storeIds, read));
+        if (label) dispatch(updateLabelSuccess(label));
       }
     } catch (e) {
       // To do
     }
   };
 };
 
-export const markThreadsReadSuccess = (threadsIds, read) => ({
-  threadsIds,
-  read,
-  type: Thread.UPDATE_UNREAD
-});
-
 export const searchThreads = params => {
   return async dispatch => {
     try {

email_mailbox/src/actions/types.js

@@ -13,7 +13,8 @@ export const Thread = {
   REMOVE_THREADS: 'REMOVE_THREADS',
   SEARCH_THREADS: 'SEARCH_THREADS',
   MOVE_THREADS: 'MOVE_THREADS',
-  UPDATE_UNREAD: 'UPDATE_UNREAD_THREADS'
+  UPDATE_UNREAD_THREADS: 'UPDATE_UNREAD_THREADS',
+  UPDATE_UNREAD_THREAD: 'UPDATE_UNREAD_THREAD'
 };
 
 export const Contact = {

email_mailbox/src/components/EmailWrapper.js

@@ -13,20 +13,6 @@ class EmailWrapper extends Component {
     };
   }
 
-  componentDidMount() {
-    const email = this.props.email;
-    if (email.unread && (this.state.displayEmail || this.props.staticOpen)) {
-      this.props.markUnread();
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const email = nextProps.email;
-    if (email.unread && (this.state.displayEmail || this.props.staticOpen)) {
-      this.props.markUnread();
-    }
-  }
-
   render() {
     return (
       <Email
@@ -43,6 +29,14 @@ class EmailWrapper extends Component {
     );
   }
 
+  componentDidMount() {
+    if (this.props.email.unread) {
+      this.setState({
+        displayEmail: true
+      });
+    }
+  }
+
   onToggleEmail = () => {
     if (!this.props.staticOpen) {
       this.setState({
@@ -74,7 +68,6 @@ class EmailWrapper extends Component {
 EmailWrapper.propTypes = {
   displayEmail: PropTypes.func,
   email: PropTypes.object,
-  markUnread: PropTypes.func,
   staticOpen: PropTypes.bool
 };
 

email_mailbox/src/components/PanelWrapper.js

@@ -38,6 +38,7 @@ class PanelWrapper extends Component {
           limit: this.props.threadsCount + 1
         });
       }
+      this.props.onUpdateUnreadEmails();
     });
 
     addEvent(Event.UPDATE_SAVED_DRAFTS, () => {
@@ -145,8 +146,9 @@ class PanelWrapper extends Component {
 
 PanelWrapper.propTypes = {
   onLoadThreads: PropTypes.func,
-  threadsCount: PropTypes.number,
-  onUpdateOpenedAccount: PropTypes.func
+  onUpdateOpenedAccount: PropTypes.func,
+  onUpdateUnreadEmails: PropTypes.func,
+  threadsCount: PropTypes.number
 };
 
 export default PanelWrapper;

email_mailbox/src/components/Thread.js

@@ -36,7 +36,15 @@ class Thread extends Component {
 
   componentDidMount() {
     this.props.onLoadEmails(this.props.thread.threadId);
-    this.props.onMarkRead(this.props.thread, true);
+    if (this.props.thread.unread) {
+      this.props.onUpdateUnreadEmails(this.props.thread, false);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.thread.unread) {
+      this.props.onUpdateUnreadThread(this.props.thread, false);
+    }
   }
 
   handleRemoveLabel = labelId => {
@@ -48,7 +56,8 @@ Thread.propTypes = {
   emails: PropTypes.object,
   labels: PropTypes.array,
   onLoadEmails: PropTypes.func,
-  onMarkRead: PropTypes.func,
+  onUpdateUnreadEmails: PropTypes.func,
+  onUpdateUnreadThread: PropTypes.func,
   onRemoveThreadLabel: PropTypes.func,
   thread: PropTypes.object
 };

email_mailbox/src/components/ThreadItem.js

@@ -10,8 +10,8 @@ class ThreadItem extends Component {
   render() {
     const visibleStyle = this.getStyleVisibilityByMultiselect();
     const {
+      checked,
       thread,
-      myClass,
       onRegionEnter,
       onRegionLeave,
       onSelectThread,
@@ -20,7 +20,11 @@ class ThreadItem extends Component {
     } = this.props;
     return (
       <div
-        className={'thread-item-container ' + myClass}
+        className={
+          'thread-item-container ' +
+          (thread.unread ? 'thread-unread' : 'thread-read') +
+          (checked ? ' thread-checked' : '')
+        }
         onClick={() => {
           onSelectThread(thread);
         }}
@@ -253,10 +257,6 @@ HoverMenuItem.propTypes = {
   tip: PropTypes.string
 };
 
-ThreadItem.defaultProps = {
-  myClass: ''
-};
-
 ThreadItem.propTypes = {
   color: PropTypes.string,
   checked: PropTypes.bool,
@@ -268,7 +268,6 @@ ThreadItem.propTypes = {
   letters: PropTypes.string,
   mailbox: PropTypes.string,
   multiselect: PropTypes.bool,
-  myClass: PropTypes.string,
   onCheckItem: PropTypes.func,
   onImportantClick: PropTypes.func,
   onMouseEnterItem: PropTypes.func,

email_mailbox/src/components/threaditem.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid #ebebeb;
+  color: black;
   cursor: pointer;
   padding: 5px;
   align-items: center;
@@ -113,6 +114,33 @@
   .match-string{
     background-color: #fdfbea;
   }
+
+  &.thread-read{
+    background-color: #f4f4f4;;   
+    font-weight: 300;
+
+    .thread-label-option{
+      > div{
+        background-color: white;
+      }
+    }
+  }
+
+  &.thread-unread{
+    background-color: white;
+    font-weight: 600;
+
+    .thread-label-option{
+      > div{
+        background-color: rgb(247, 247, 248);
+      }
+    }
+  }
+
+  &.thread-checked{
+    background-color: #fdfbea; 
+  }
+
 }
 
 .thread-label-option{
@@ -181,40 +209,6 @@
   }
 }
 
-.thread-read{
-  color: black;
-  background-color: #f4f4f4;;   
-  font-weight: 300;
-
-  .thread-label-option{
-    > div{
-      background-color: white;
-    }
-  }
-}
-
-.thread-read-selected{
-  @extend .thread-read;
-  background-color: #fdfbea; 
-}
-
-.thread-unread{
-  color: black;
-  background-color: white;
-  font-weight: 600;
-
-  .thread-label-option{
-    > div{
-      background-color: rgb(247, 247, 248);
-    }
-  }
-}
-
-.thread-unread-selected{
-  @extend .thread-unread;
-  background-color: #fdfbea; 
-}
-
 .thread-icons{
   display: flex;
 }