Add feed badge. Close #214

Author: erikaperugachi

electron_app/src/DBManager.js

@@ -1090,6 +1090,13 @@ const getAllFeedItems = () => {
   return db.select('*').from(Table.FEEDITEM);
 };
 
+const getFeedItemsCounterBySeen = (seen = 0) => {
+  const query = `SELECT COUNT(DISTINCT ${Table.FEEDITEM}.id) AS count
+  FROM ${Table.FEEDITEM}
+  WHERE ${Table.FEEDITEM}.seen = ${seen}`;
+  return db.raw(query);
+};
+
 const updateFeedItems = ({ ids, seen }) => {
   const params = {};
   if (typeof seen === 'boolean') params.seen = seen;
@@ -1296,6 +1303,7 @@ module.exports = {
   getEmailsToDeleteByThreadIdAndLabelId,
   getEmailsUnredByLabelId,
   getEmailLabelsByEmailId,
+  getFeedItemsCounterBySeen,
   getFilesByEmailId,
   getPendingEvents,
   getIdentityKeyRecord,

electron_app/src/ipc/database.js

@@ -131,6 +131,10 @@ ipc.answerRenderer('db-get-emails-unread-by-labelid', params =>
   dbManager.getEmailsUnredByLabelId(params)
 );
 
+ipc.answerRenderer('db-get-feeditems-counter-by-seen', seen =>
+  dbManager.getFeedItemsCounterBySeen(seen)
+);
+
 ipc.answerRenderer('db-get-files-by-emailid', emailId =>
   dbManager.getFilesByEmailId(emailId)
 );

email_mailbox/src/actions/app.js

@@ -40,11 +40,10 @@ export const loadApp = params => {
       ...params,
       limit: INIT_LIMIT_THREADS
     });
-    const feeditems = await defineFeedItems();
-
+    const { feedItems, badge } = await defineFeedItems();
     const activity = stopLoadThread();
     const contact = addContacts(contacts);
-    const feeditem = addFeedItems(feeditems, true);
+    const feeditem = addFeedItems(feedItems, badge, true);
     const label = addLabels(labels);
     const thread = addThreads(params.labelId, threads, true);
 

email_mailbox/src/actions/feeditems.js

@@ -1,61 +1,49 @@
 import { FeedItem } from './types';
 import {
   deleteFeedItemById,
+  getFeedItemsCounterBySeen,
   updateFeedItems as updateFeedItemsDB
 } from './../utils/ipc';
 import { defineFeedItems } from '../utils/FeedItemUtils';
 
-export const addFeedItems = (feeds, clear) => {
+export const addFeedItems = (feeds, badge, clear) => {
   return {
     type: FeedItem.ADD_BATCH,
+    badge,
     feeds,
     clear
   };
 };
 
-export const removeFeedItemSuccess = feedItemId => {
-  return {
-    type: FeedItem.REMOVE_SUCCESS,
-    feed: { id: feedItemId }
-  };
-};
-
-export const updateFeedItemSuccess = ({ id, seen }) => {
-  return {
-    type: FeedItem.UPDATE,
-    feed: { id, seen }
-  };
-};
-
-export const updateFeedItems = ({ ids, seen }) => {
+export const loadFeedItems = clear => {
   return async dispatch => {
     try {
-      await updateFeedItemsDB({ ids, seen });
-      dispatch(updateFeedItemsSuccess({ ids, seen }));
+      const { feedItems, badge } = await defineFeedItems();
+      dispatch(addFeedItems(feedItems, badge, clear));
     } catch (e) {
       // TO DO
     }
   };
 };
 
-export const updateFeedItemsSuccess = ({ ids, seen }) => {
-  return {
-    type: FeedItem.UPDATE_FEED_ITEMS,
-    feed: { ids, seen }
-  };
-};
-
-export const loadFeedItems = clear => {
+export const removeFeedItem = feedItemId => {
   return async dispatch => {
     try {
-      const feedItems = await defineFeedItems();
-      dispatch(addFeedItems(feedItems, clear));
+      await deleteFeedItemById(feedItemId);
+      dispatch(removeFeedItemSuccess(feedItemId));
     } catch (e) {
       // TO DO
     }
   };
 };
 
+export const removeFeedItemSuccess = feedItemId => {
+  return {
+    type: FeedItem.REMOVE_SUCCESS,
+    feed: { id: feedItemId }
+  };
+};
+
 export const updateFeedItem = ({ id, seen }) => {
   return async dispatch => {
     try {
@@ -67,13 +55,29 @@ export const updateFeedItem = ({ id, seen }) => {
   };
 };
 
-export const removeFeedItem = feedItemId => {
+export const updateFeedItemSuccess = ({ id, seen }) => {
+  return {
+    type: FeedItem.UPDATE,
+    feed: { id, seen }
+  };
+};
+
+export const updateFeedItems = ({ ids, seen }) => {
   return async dispatch => {
     try {
-      await deleteFeedItemById(feedItemId);
-      dispatch(removeFeedItemSuccess(feedItemId));
+      await updateFeedItemsDB({ ids, seen });
+      const badge = await getFeedItemsCounterBySeen(0);
+      dispatch(updateFeedItemsSuccess({ ids, seen, badge: badge[0].count }));
     } catch (e) {
       // TO DO
     }
   };
 };
+
+export const updateFeedItemsSuccess = ({ ids, seen, badge }) => {
+  return {
+    type: FeedItem.UPDATE_FEED_ITEMS,
+    badge,
+    feed: { ids, seen }
+  };
+};

email_mailbox/src/actions/threads.js

@@ -1,6 +1,9 @@
 import { Thread } from './types';
 import {
   addDataApp,
+  addContacts,
+  loadFeedItems,
+  removeEmails,
   startLoadSync,
   stopLoadThread,
   stopAll,
@@ -30,12 +33,9 @@ import {
   sendUpdateThreadLabelsErrorMessage,
   sendUpdateUnreadThreadsErrorMessage
 } from './../utils/electronEventInterface';
-import { loadFeedItems } from './feeditems';
 import { SocketCommand } from '../utils/const';
-import { removeEmails } from './emails';
 import { filterTemporalThreadIds } from '../utils/EmailUtils';
 import { defineThreads } from '../utils/ThreadUtils';
-import { addContacts } from '.';
 
 export const addThreads = (labelId, threads, clear) => ({
   type: Thread.ADD_BATCH,

email_mailbox/src/components/ActivityPanelShortCut.js

@@ -9,11 +9,17 @@ const ActivityPanelShortCut = props => (
   >
     <div className="activity-panel-shortcut-content">
       <i className="icon-bell" />
+      {!!props.badge && (
+        <div className="activity-panel-shortcut-badge">
+          <span>{props.badge}</span>
+        </div>
+      )}
     </div>
   </div>
 );
 
 ActivityPanelShortCut.propTypes = {
+  badge: PropTypes.number,
   onClick: PropTypes.func
 };
 

email_mailbox/src/components/HeaderHOC.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ActivityPanelShortCut from './ActivityPanelShortCut';
+import ActivityPanelShortCut from './../containers/ActivityPanelShortCut';
 import './headerhoc.scss';
 
 const HeaderHOC = InComponent =>

email_mailbox/src/components/activitypanelshortcut.scss

@@ -25,22 +25,32 @@
   position: relative;
   width: 61px;
 
-  &:before{
-    content: '';
-    height: 0;
-    width: 0;
-    position: absolute;
-    left: -8px;
-    top: 24px;
-    border-right: 8px solid #373a45;
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-  }
-
   i{
     background-color: transparent;
     color: white;
     font-size: 25px;
     margin: 0 auto;
   }
+
+  .activity-panel-shortcut-badge{
+    align-items: center;
+    background-color: #ff3366;
+    border: 2px solid #373a45;
+    border-radius: 12px;
+    display: flex;
+    height: 19px;
+    min-width: 19px;
+    position: absolute;
+    left: 31px;
+    top: 10px;
+    width: auto;
+
+    span{
+      color: white;
+      font-size: 11px;
+      font-weight: 300;
+      margin: 0 auto;
+      padding: 0 4px;
+    }
+  }
 }

email_mailbox/src/containers/ActivityPanel.js

@@ -58,7 +58,8 @@ const populateFeeds = (state, feeds) => {
 };
 
 const mapStateToProps = state => {
-  const feeds = state.get('feeditems').toList();
+  const feedItems = state.get('feeditems');
+  const feeds = feedItems.get('list').toList();
   const orderedFeeds = orderFeedsByDate(feeds);
   const populated = populateFeeds(state, orderedFeeds);
   const { newFeeds, oldFeeds } = clasifyFeeds(populated);

email_mailbox/src/containers/ActivityPanelShortCut.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import ActivityPanelShortCutView from '../components/ActivityPanelShortCut';
+
+const mapStateToProps = state => {
+  const feedItems = state.get('feeditems');
+  const badge = feedItems.get('badge');
+  return {
+    badge
+  };
+};
+
+const ActivityPanelShortCut = connect(mapStateToProps)(
+  ActivityPanelShortCutView
+);
+
+export default ActivityPanelShortCut;