Bug 1527500 - Save to pocket and bookmark menu options

common/Reducers.jsm

@@ -458,6 +458,33 @@ function Pocket(prevState = INITIAL_STATE.Pocket, action) {
 }
 
 function DiscoveryStream(prevState = INITIAL_STATE.DiscoveryStream, action) {
+  // Return if action data is empty, or spocs or feeds data is not loaded
+  const isNotReady = () =>
+    !action.data || !prevState.spocs.loaded || !prevState.feeds.loaded;
+
+  const nextState = handleSites => (
+    {
+      ...prevState,
+      spocs: {
+        ...prevState.spocs,
+        data: prevState.spocs.data.spocs ? {
+          spocs: handleSites(prevState.spocs.data.spocs),
+        } : {},
+      },
+      feeds: {
+        ...prevState.feeds,
+        data: Object.keys(prevState.feeds.data).reduce((accumulator, feed_url) => {
+          accumulator[feed_url] = {
+            data: {
+              ...prevState.feeds.data[feed_url].data,
+              recommendations: handleSites(prevState.feeds.data[feed_url].data.recommendations),
+            },
+          };
+          return accumulator;
+        }, {}),
+      },
+    });
+
   switch (action.type) {
     case at.DISCOVERY_STREAM_CONFIG_CHANGE:
     // The reason this is a separate action is so it doesn't trigger a listener update on init
@@ -484,34 +511,6 @@ function DiscoveryStream(prevState = INITIAL_STATE.DiscoveryStream, action) {
           spocs_endpoint: action.data || INITIAL_STATE.DiscoveryStream.spocs.spocs_endpoint,
         },
       };
-    case at.PLACES_LINK_BLOCKED:
-      // Return if action data is empty, or spocs or feeds data is not loaded
-      if (!action.data || !prevState.spocs.loaded || !prevState.feeds.loaded) {
-        return prevState;
-      }
-      // Filter spocs and recommendations data inside feeds by removing action.data.url
-      // received on PLACES_LINK_BLOCKED triggered by dismiss link menu option
-      return {
-        ...prevState,
-        spocs: {
-          ...prevState.spocs,
-          data: prevState.spocs.data.spocs ? {
-            spocs: prevState.spocs.data.spocs.filter(s => s.url !== action.data.url),
-          } : {},
-        },
-        feeds: {
-          ...prevState.feeds,
-          data: Object.keys(prevState.feeds.data).reduce((accumulator, feed_url) => {
-            accumulator[feed_url] = {
-              data: {
-                ...prevState.feeds.data[feed_url].data,
-                recommendations: prevState.feeds.data[feed_url].data.recommendations.filter(r => r.url !== action.data.url),
-              },
-            };
-            return accumulator;
-          }, {}),
-        },
-      };
     case at.DISCOVERY_STREAM_SPOCS_UPDATE:
       if (action.data) {
         return {
@@ -525,6 +524,57 @@ function DiscoveryStream(prevState = INITIAL_STATE.DiscoveryStream, action) {
         };
       }
       return prevState;
+    case at.PLACES_LINK_BLOCKED:
+      return isNotReady() ? prevState :
+        nextState(items => items.filter(item => item.url !== action.data.url));
+
+    case at.PLACES_SAVED_TO_POCKET:
+      const addPocketInfo = item => {
+        if (item.url === action.data.url) {
+          return Object.assign({}, item, {
+            open_url: action.data.open_url,
+            pocket_id: action.data.pocket_id,
+          });
+        }
+        return item;
+      };
+      return isNotReady() ? prevState :
+        nextState(items => items.map(addPocketInfo));
+
+    case at.DELETE_FROM_POCKET:
+    case at.ARCHIVE_FROM_POCKET:
+      return isNotReady() ? prevState :
+        nextState(items => items.filter(item => item.pocket_id !== action.data.pocket_id));
+
+    case at.PLACES_BOOKMARK_ADDED:
+      const updateBookmarkInfo = item => {
+        if (item.url === action.data.url) {
+          const {bookmarkGuid, bookmarkTitle, dateAdded} = action.data;
+          return Object.assign({}, item, {
+            bookmarkGuid,
+            bookmarkTitle,
+            bookmarkDateCreated: dateAdded,
+          });
+        }
+        return item;
+      };
+      return isNotReady() ? prevState :
+        nextState(items => items.map(updateBookmarkInfo));
+
+    case at.PLACES_BOOKMARK_REMOVED:
+      const removeBookmarkInfo = item => {
+        if (item.url === action.data.url) {
+          const newSite = Object.assign({}, item);
+          delete newSite.bookmarkGuid;
+          delete newSite.bookmarkTitle;
+          delete newSite.bookmarkDateCreated;
+          return newSite;
+        }
+        return item;
+      };
+      return isNotReady() ? prevState :
+        nextState(items => items.map(removeBookmarkInfo));
+
     default:
       return prevState;
   }

content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -25,7 +25,9 @@ export class CardGrid extends React.PureComponent {
         type={this.props.type}
         context={rec.context}
         dispatch={this.props.dispatch}
-        source={rec.domain} />
+        source={rec.domain}
+        pocket_id={rec.pocket_id}
+        bookmarkGuid={rec.bookmarkGuid} />
     ));
 
     let divisibility = ``;

content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -67,7 +67,9 @@ export class DSCard extends React.PureComponent {
           url={this.props.url}
           title={this.props.title}
           source={this.props.source}
-          type={this.props.type} />
+          type={this.props.type}
+          pocket_id={this.props.pocket_id}
+          bookmarkGuid={this.props.bookmarkGuid} />
       </div>
     );
   }

content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx

@@ -42,7 +42,7 @@ export class _DSLinkMenu extends React.PureComponent {
   render() {
     const {index, dispatch} = this.props;
     const isContextMenuOpen = this.state.showContextMenu && this.state.activeCard === index;
-    const TOP_STORIES_CONTEXT_MENU_OPTIONS = ["OpenInNewWindow", "OpenInPrivateWindow", "Separator", "BlockUrl"];
+    const TOP_STORIES_CONTEXT_MENU_OPTIONS = ["CheckBookmarkOrArchive", "CheckSavedToPocket", "Separator", "OpenInNewWindow", "OpenInPrivateWindow", "Separator", "BlockUrl"];
     const title = this.props.title || this.props.source;
     const type = this.props.type || "DISCOVERY_STREAM";
 
@@ -70,6 +70,8 @@ export class _DSLinkMenu extends React.PureComponent {
             type: this.props.type,
             url: this.props.url,
             guid: this.props.id,
+            pocket_id: this.props.pocket_id,
+            bookmarkGuid: this.props.bookmarkGuid,
           }} />
       }
     </div>);

content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx

@@ -53,7 +53,9 @@ export class Hero extends React.PureComponent {
         type={this.props.type}
         dispatch={this.props.dispatch}
         context={rec.context}
-        source={rec.domain} />
+        source={rec.domain}
+        pocket_id={rec.pocket_id}
+        bookmarkGuid={rec.bookmarkGuid} />
     ));
 
     let list = (
@@ -104,7 +106,9 @@ export class Hero extends React.PureComponent {
               url={heroRec.url}
               title={heroRec.title}
               source={heroRec.domain}
-              type={this.props.type} />
+              type={this.props.type}
+              pocket_id={heroRec.pocket_id}
+              bookmarkGuid={heroRec.bookmarkGuid} />
           </div>
           <div className={`${this.props.subComponentType}`}>
             { this.props.subComponentType === `cards` ? cards : list }

content-src/components/DiscoveryStreamComponents/List/List.jsx

@@ -70,7 +70,9 @@ export class ListItem extends React.PureComponent {
           url={this.props.url}
           title={this.props.title}
           source={this.props.source}
-          type={this.props.type} />
+          type={this.props.type}
+          pocket_id={this.props.pocket_id}
+          bookmarkGuid={this.props.bookmarkGuid} />
       </li>
     );
   }
@@ -98,7 +100,9 @@ export function _List(props) {
       title={rec.title}
       context={rec.context}
       type={props.type}
-      url={rec.url} />
+      url={rec.url}
+      pocket_id={rec.pocket_id}
+      bookmarkGuid={rec.bookmarkGuid} />
   ));
   const listStyles = [
     "ds-list",

content-src/lib/link-menu-options.js

@@ -189,7 +189,7 @@ export const LinkMenuOptions = {
   }),
   DeleteFromPocket: site => ({
     id: "menu_action_delete_pocket",
-    icon: "delete",
+    icon: "pocket-delete",
     action: ac.AlsoToMain({
       type: at.DELETE_FROM_POCKET,
       data: {pocket_id: site.pocket_id},
@@ -198,7 +198,7 @@ export const LinkMenuOptions = {
   }),
   ArchiveFromPocket: site => ({
     id: "menu_action_archive_pocket",
-    icon: "check",
+    icon: "pocket-archive",
     action: ac.AlsoToMain({
       type: at.ARCHIVE_FROM_POCKET,
       data: {pocket_id: site.pocket_id},

content-src/styles/_icons.scss

@@ -93,6 +93,14 @@
     background-image: url('#{$image-path}glyph-pocket-save-16.svg');
   }
 
+  &.icon-pocket-delete {
+    background-image: url('#{$image-path}glyph-pocket-delete-16.svg');
+  }
+
+  &.icon-pocket-archive {
+    background-image: url('#{$image-path}glyph-pocket-archive-16.svg');
+  }
+
   &.icon-history-item {
     background-image: url('chrome://browser/skin/history.svg');
   }