From ab81ffd324543112b5ca1315fd866b87ff2b9233 Mon Sep 17 00:00:00 2001
From: Gavin Suntop <gavin@gsuntop.com>
Date: Mon, 2 May 2022 18:14:07 +0000
Subject: [PATCH] Bug 1766040 - Clickable save for STP refresh r=thecount

Differential Revision: https://phabricator.services.mozilla.com/D144995
---
 .../js/components/ArticleList/ArticleList.jsx | 24 +++++++++++++++++--
 .../panels/js/components/Home/Home.jsx        |  1 +
 .../panels/js/components/Saved/Saved.jsx      |  2 +-
 .../pocket/content/panels/js/main.bundle.js   | 19 +++++++++++----
 4 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx
index 787c03bc43ede..2816a4b99df59 100644
--- a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx
+++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.jsx
@@ -34,7 +34,15 @@ function Article(props) {
       : null;
   }
 
-  const { article, savedArticle, position, source, model, utmParams } = props;
+  const {
+    article,
+    savedArticle,
+    position,
+    source,
+    model,
+    utmParams,
+    openInPocketReader,
+  } = props;
   const url = new URL(article.url || article.resolved_url || "");
   const urlSearchParams = new URLSearchParams(utmParams);
   for (let [key, val] of urlSearchParams.entries()) {
@@ -51,10 +59,21 @@ function Article(props) {
     article.publisher ||
     article.domain_metadata?.name ||
     article.resolved_domain;
+
+  let constructedURL = url.href;
+
+  if (
+    openInPocketReader &&
+    article.item_id &&
+    !url.href.match(/getpocket\.com\/read/)
+  ) {
+    constructedURL = `https://getpocket.com/read/${article.item_id}`;
+  }
+
   return (
     <li className="stp_article_list_item">
       <ArticleUrl
-        url={url.href}
+        url={constructedURL}
         savedArticle={savedArticle}
         position={position}
         source={source}
@@ -94,6 +113,7 @@ function ArticleList(props) {
           source={props.source}
           model={props.model}
           utmParams={props.utmParams}
+          openInPocketReader={props.openInPocketReader}
         />
       ))}
     </ul>
diff --git a/browser/components/pocket/content/panels/js/components/Home/Home.jsx b/browser/components/pocket/content/panels/js/components/Home/Home.jsx
index 03604105316a7..89f28255398de 100644
--- a/browser/components/pocket/content/panels/js/components/Home/Home.jsx
+++ b/browser/components/pocket/content/panels/js/components/Home/Home.jsx
@@ -95,6 +95,7 @@ function Home(props) {
                 articles={articles.slice(0, 3)}
                 source="home_recent_save"
                 utmParams={utmParams}
+                openInPocketReader={true}
               />
               <span className="stp_button_wide">
                 <Button
diff --git a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx
index 1513ee0c95f09..33f56c51dc3de 100644
--- a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx
+++ b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx
@@ -138,7 +138,7 @@ function Saved(props) {
               </Button>
             </h3>
             {savedStory && (
-              <ArticleList articles={[savedStory]} savedArticle={true} />
+              <ArticleList articles={[savedStory]} openInPocketReader={true} />
             )}
             <TagPicker tags={[]} itemUrl={itemUrl} />
             {similarRecs?.length && locale?.startsWith("en") && (
diff --git a/browser/components/pocket/content/panels/js/main.bundle.js b/browser/components/pocket/content/panels/js/main.bundle.js
index e2820e592493e..8faa1e73affbf 100644
--- a/browser/components/pocket/content/panels/js/main.bundle.js
+++ b/browser/components/pocket/content/panels/js/main.bundle.js
@@ -168,7 +168,8 @@ function Article(props) {
     position,
     source,
     model,
-    utmParams
+    utmParams,
+    openInPocketReader
   } = props;
   const url = new URL(article.url || article.resolved_url || "");
   const urlSearchParams = new URLSearchParams(utmParams);
@@ -183,10 +184,16 @@ function Article(props) {
   const title = article.title || article.resolved_title; // Sometimes domain_metadata is not there, depending on the source.
 
   const publisher = article.publisher || article.domain_metadata?.name || article.resolved_domain;
+  let constructedURL = url.href;
+
+  if (openInPocketReader && article.item_id && !url.href.match(/getpocket\.com\/read/)) {
+    constructedURL = `https://getpocket.com/read/${article.item_id}`;
+  }
+
   return /*#__PURE__*/react.createElement("li", {
     className: "stp_article_list_item"
   }, /*#__PURE__*/react.createElement(ArticleUrl, {
-    url: url.href,
+    url: constructedURL,
     savedArticle: savedArticle,
     position: position,
     source: source,
@@ -218,7 +225,8 @@ function ArticleList(props) {
     position: position,
     source: props.source,
     model: props.model,
-    utmParams: props.utmParams
+    utmParams: props.utmParams,
+    openInPocketReader: props.openInPocketReader
   })));
 }
 
@@ -344,7 +352,8 @@ function Home(props) {
       }), articles.length > 3 ? /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement(ArticleList_ArticleList, {
         articles: articles.slice(0, 3),
         source: "home_recent_save",
-        utmParams: utmParams
+        utmParams: utmParams,
+        openInPocketReader: true
       }), /*#__PURE__*/react.createElement("span", {
         className: "stp_button_wide"
       }, /*#__PURE__*/react.createElement(Button_Button, {
@@ -999,7 +1008,7 @@ function Saved(props) {
     "data-l10n-id": "pocket-panel-button-remove"
   }))), savedStory && /*#__PURE__*/react.createElement(ArticleList_ArticleList, {
     articles: [savedStory],
-    savedArticle: true
+    openInPocketReader: true
   }), /*#__PURE__*/react.createElement(TagPicker_TagPicker, {
     tags: [],
     itemUrl: itemUrl