feat(action): save article to third-party services

README.es-ES.md

@@ -19,6 +19,7 @@ Las funcionalidades clave incluyen:
 - Elimina artículos duplicados por hash, título o URL al cargar la lista
 - De-duplicate articles by hash, title, or URL when loading the list
 - Disponible en varios idiomasç (incluye: Inglés / Español / 简体中文)
+- Guardar artículo en servicios de terceros
 - Otras características esperando que las descubras...
 
 ## Capturas de pantalla

README.md

@@ -18,7 +18,8 @@ Key features include:
 - Batch update the host of filtered subscription URLs (useful for replacing RSSHub instances)
 - Batch refresh recently errored subscriptions
 - De-duplicate articles by hash, title, or URL when loading the list
-- i18n supports (include: English / Español / 简体中文)
+- I18n supports (include: English / Español / 简体中文)
+- Save article to third-party services
 - Other features waiting for you to discover...
 
 ## Screenshots

README.zh-CN.md

@@ -19,6 +19,7 @@ Reactflux 是 [Miniflux](https://github.com/miniflux/miniflux) 的第三方 Web
 - 批量刷新最近更新错误的订阅源
 - 文章列表加载时按 hash、标题或 URL 去重
 - 多语言支持 (目前包括：English / Español / 简体中文)
+- 保存文章到第三方服务
 - 其他功能等你来发现...
 
 ## 截图

src/apis/entries.js

@@ -14,6 +14,9 @@ export const toggleEntryStarred = async (entryId) =>
 export const getOriginalContent = async (entryId) =>
   apiClient.get(`/v1/entries/${entryId}/fetch-content`);
 
+export const saveToThirdPartyServices = async (entryId) =>
+  apiClient.raw(`/v1/entries/${entryId}/save`, { method: "POST" });
+
 export const buildEntriesUrl = (baseParams, extraParams = {}) => {
   const { baseUrl, orderField, offset, limit, status } = baseParams;
   const orderDirection = getSettings("orderDirection");

src/components/Article/ActionButtons.jsx

@@ -6,6 +6,7 @@ import {
   IconCloudDownload,
   IconMinusCircle,
   IconRecord,
+  IconSave,
   IconStar,
   IconStarFill,
 } from "@arco-design/web-react/icon";
@@ -18,8 +19,12 @@ import "./ActionButtons.css";
 
 const ActionButtons = ({ handleEntryClick, entryListRef }) => {
   const { activeContent } = useStore(contentState);
-  const { handleFetchContent, handleToggleStarred, handleToggleStatus } =
-    useEntryActions();
+  const {
+    handleFetchContent,
+    handleSaveToThirdPartyServices,
+    handleToggleStarred,
+    handleToggleStatus,
+  } = useEntryActions();
   const { exitDetailView, navigateToNextArticle, navigateToPreviousArticle } =
     useKeyHandlers(handleEntryClick, entryListRef);
 
@@ -54,6 +59,11 @@ const ActionButtons = ({ handleEntryClick, entryListRef }) => {
         onClick={() => handleToggleStarred(activeContent)}
         type="primary"
       />
+      <Button
+        icon={<IconSave />}
+        onClick={handleSaveToThirdPartyServices}
+        type="primary"
+      />
       <Button
         icon={<IconArrowLeft />}
         onClick={() => navigateToPreviousArticle()}

src/components/Content/Content.jsx

@@ -34,6 +34,7 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
 
   const {
     handleFetchContent,
+    handleSaveToThirdPartyServices,
     handleToggleStarred,
     handleToggleStatus,
     handleEntryStatusUpdate,
@@ -110,6 +111,7 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
     navigateToPreviousArticle,
     openLinkExternally,
     openPhotoSlider,
+    saveToThirdPartyServices,
     toggleReadStatus,
     toggleStarStatus,
   } = useKeyHandlers(handleEntryClick, entryListRef);
@@ -120,6 +122,7 @@ const Content = ({ info, getEntries, markAllAsRead }) => {
       ArrowLeft: () => navigateToPreviousArticle(),
       ArrowRight: () => navigateToNextArticle(),
       Escape: () => exitDetailView(),
+      a: () => saveToThirdPartyServices(handleSaveToThirdPartyServices),
       b: openLinkExternally,
       d: () => fetchOriginalArticle(handleFetchContent),
       m: () => toggleReadStatus(() => handleToggleStatus(activeContent)),

src/components/Settings/Hotkeys.jsx

@@ -45,26 +45,31 @@ const Hotkeys = () => {
     },
     {
       key: "6",
+      keyName: "A",
+      description: polyglot.t("hotkeys.a"),
+    },
+    {
+      key: "7",
       keyName: "B",
       description: polyglot.t("hotkeys.b"),
     },
     {
-      key: "7",
+      key: "8",
       keyName: "D",
       description: polyglot.t("hotkeys.d"),
     },
     {
-      key: "8",
+      key: "9",
       keyName: "M",
       description: polyglot.t("hotkeys.m"),
     },
     {
-      key: "9",
+      key: "10",
       keyName: "S",
       description: polyglot.t("hotkeys.s"),
     },
     {
-      key: "10",
+      key: "11",
       keyName: "V",
       description: polyglot.t("hotkeys.v"),
     },

src/hooks/useEntryActions.js

@@ -4,6 +4,7 @@ import Confetti from "canvas-confetti";
 import { useStore } from "@nanostores/react";
 import {
   getOriginalContent,
+  saveToThirdPartyServices,
   toggleEntryStarred,
   updateEntriesStatus,
 } from "../apis";
@@ -144,9 +145,21 @@ const useEntryActions = () => {
     }
   };
 
+  const handleSaveToThirdPartyServices = async () => {
+    const response = await saveToThirdPartyServices(activeContent.id);
+    if (response.status === 202) {
+      Message.success("Saved to third-party services successfully");
+    } else {
+      Message.error(
+        "Failed to save to third-party services, please try again later, or check your integration settings",
+      );
+    }
+  };
+
   return {
     handleEntryStatusUpdate,
     handleFetchContent,
+    handleSaveToThirdPartyServices,
     handleToggleStarred,
     handleToggleStatus,
   };

src/hooks/useKeyHandlers.js

@@ -120,6 +120,12 @@ const useKeyHandlers = (handleEntryClick, entryListRef) => {
     }
   };
 
+  const saveToThirdPartyServices = (handleSaveToThirdPartyServices) => {
+    if (activeContent) {
+      handleSaveToThirdPartyServices();
+    }
+  };
+
   const toggleReadStatus = (handleUpdateEntry) => {
     if (activeContent) {
       handleUpdateEntry();
@@ -154,6 +160,7 @@ const useKeyHandlers = (handleEntryClick, entryListRef) => {
     navigateToPreviousArticle,
     openLinkExternally,
     openPhotoSlider,
+    saveToThirdPartyServices,
     toggleReadStatus,
     toggleStarStatus,
   };

src/locales/en-US.json

@@ -157,6 +157,7 @@
     "ctrl_left": "Navigate to the previous unread article in the list",
     "right": "Navigate to the next article in the list",
     "ctrl_right": "Navigate to the next unread article in the list",
+    "a": "Save the current article to third-party services",
     "b": "Open the current article's link in a new browser tab",
     "d": "Fetch and display the original content of the current article",
     "m": "Toggle the read status of the current article",

src/locales/es-ES.json

@@ -157,6 +157,7 @@
     "ctrl_left": "Navegar al artículo previo no leído en la lista",
     "right": "Navegar al siguiente artículo en la lista",
     "ctrl_right": "Navegar al siguiente artículo no leído en la lista",
+    "a": "Guardar el artículo actual en servicios de terceros",
     "b": "Abrir el enlace del artículo actual en una nueva pestaña del navegador",
     "d": "Obtener y mostrar el contenido original del artículo actual",
     "m": "Alternar el estado de lectura del artículo actual",

src/locales/zh-CN.json

@@ -157,6 +157,7 @@
     "ctrl_left": "在列表中导航到上一篇未读文章",
     "right": "在列表中导航到下一篇文章",
     "ctrl_right": "在列表中导航到下一篇未读文章",
+    "a": "保存当前文章到第三方服务",
     "b": "在当前文章的链接中打开一个新浏览器标签",
     "d": "获取并显示当前文章的原始内容",
     "m": "切换当前文章的阅读状态 (已读/未读)",