diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /browser/components/pocket/content/panels/js/components/Home | |
parent | Initial commit. (diff) | |
download | thunderbird-upstream.tar.xz thunderbird-upstream.zip |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/pocket/content/panels/js/components/Home')
-rw-r--r-- | browser/components/pocket/content/panels/js/components/Home/Home.jsx | 168 |
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; |