1 files changed, 168 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/components/Home/Home.jsx b/browser/components/pocket/content/panels/js/components/Home/Home.jsx
new file mode 100644
index 0000000000..fc936bfa56
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/components/Home/Home.jsx
@@ -0,0 +1,168 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React, { useState, useEffect } from "react";
+import Header from "../Header/Header";
+import ArticleList from "../ArticleList/ArticleList";
+import PopularTopics from "../PopularTopics/PopularTopics";
+import Button from "../Button/Button";
+import panelMessaging from "../../messages";
+
+function Home(props) {
+  const {
+    locale,
+    topics,
+    pockethost,
+    hideRecentSaves,
+    utmSource,
+    utmCampaign,
+    utmContent,
+  } = props;
+  const [{ articles, status }, setArticlesState] = useState({
+    articles: [],
+    // Can be success, loading, or error.
+    status: "",
+  });
+
+  const utmParams = `utm_source=${utmSource}${
+    utmCampaign && utmContent
+      ? `&utm_campaign=${utmCampaign}&utm_content=${utmContent}`
+      : ``
+  }`;
+
+  useEffect(() => {
+    if (!hideRecentSaves) {
+      // We don't display the loading message until instructed. This is because cache
+      // loads should be fast, so using the loading message for cache just adds loading jank.
+      panelMessaging.addMessageListener(
+        "PKT_loadingRecentSaves",
+        function (resp) {
+          setArticlesState({
+            articles,
+            status: "loading",
+          });
+        }
+      );
+
+      panelMessaging.addMessageListener(
+        "PKT_renderRecentSaves",
+        function (resp) {
+          const { data } = resp;
+
+          if (data.status === "error") {
+            setArticlesState({
+              articles: [],
+              status: "error",
+            });
+            return;
+          }
+
+          setArticlesState({
+            articles: data,
+            status: "success",
+          });
+        }
+      );
+    }
+
+    // tell back end we're ready
+    panelMessaging.sendMessage("PKT_show_home");
+  }, []);
+
+  let recentSavesSection = null;
+
+  if (status === "error" || hideRecentSaves) {
+    recentSavesSection = (
+      <h3
+        className="header_medium"
+        data-l10n-id="pocket-panel-home-new-user-cta"
+      />
+    );
+  } else if (status === "loading") {
+    recentSavesSection = (
+      <span data-l10n-id="pocket-panel-home-most-recent-saves-loading" />
+    );
+  } else if (status === "success") {
+    if (articles?.length) {
+      recentSavesSection = (
+        <>
+          <h3
+            className="header_medium"
+            data-l10n-id="pocket-panel-home-most-recent-saves"
+          />
+          {articles.length > 3 ? (
+            <>
+              <ArticleList
+                articles={articles.slice(0, 3)}
+                source="home_recent_save"
+                utmParams={utmParams}
+                openInPocketReader={true}
+              />
+              <span className="stp_button_wide">
+                <Button
+                  style="secondary"
+                  url={`https://${pockethost}/a?${utmParams}`}
+                  source="home_view_list"
+                >
+                  <span data-l10n-id="pocket-panel-button-show-all" />
+                </Button>
+              </span>
+            </>
+          ) : (
+            <ArticleList
+              articles={articles}
+              source="home_recent_save"
+              utmParams={utmParams}
+            />
+          )}
+        </>
+      );
+    } else {
+      recentSavesSection = (
+        <>
+          <h3
+            className="header_medium"
+            data-l10n-id="pocket-panel-home-new-user-cta"
+          />
+          <h3
+            className="header_medium"
+            data-l10n-id="pocket-panel-home-new-user-message"
+          />
+        </>
+      );
+    }
+  }
+
+  return (
+    <div className="stp_panel_container">
+      <div className="stp_panel stp_panel_home">
+        <Header>
+          <Button
+            style="primary"
+            url={`https://${pockethost}/a?${utmParams}`}
+            source="home_view_list"
+          >
+            <span data-l10n-id="pocket-panel-header-my-saves" />
+          </Button>
+        </Header>
+        <hr />
+        {recentSavesSection}
+        <hr />
+        {pockethost && locale?.startsWith("en") && topics?.length && (
+          <>
+            <h3 className="header_medium">Explore popular topics:</h3>
+            <PopularTopics
+              topics={topics}
+              pockethost={pockethost}
+              utmParams={utmParams}
+              source="home_popular_topic"
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default Home;