From f7ee6657efc16f5ac47615e5df0c1e9af4484a11 Mon Sep 17 00:00:00 2001
From: zhanglun <zhanglun1410@gmail.com>
Date: Thu, 14 Sep 2023 18:30:12 +0800
Subject: [PATCH] improvement: update view status

---
 src-tauri/src/server/handlers/article.rs  |  5 +++
 src/containers/Article/ReadingOptions.tsx | 43 ++++++++++++++++++++---
 src/stores/createUserConfigSlice.ts       | 27 +++++++++++++-
 3 files changed, 69 insertions(+), 6 deletions(-)

diff --git a/src-tauri/src/server/handlers/article.rs b/src-tauri/src/server/handlers/article.rs
index 50d8565bd..284f281d3 100644
--- a/src-tauri/src/server/handlers/article.rs
+++ b/src-tauri/src/server/handlers/article.rs
@@ -52,6 +52,11 @@ pub async fn handle_mark_as_read(
   Ok(web::Json(res))
 }
 
+#[get("/api/articles/{uuid}/source")]
+pub async fn handle_get_article_source(uuid: web::Path<String>) -> Result<impl Responder> {
+  Ok(web::Json("hahah".to_string()))
+}
+
 #[get("/api/articles")]
 pub async fn handle_articles(
   query: web::Query<feed::article::ArticleFilter>,
diff --git a/src/containers/Article/ReadingOptions.tsx b/src/containers/Article/ReadingOptions.tsx
index 9d181ff64..45eb477b3 100644
--- a/src/containers/Article/ReadingOptions.tsx
+++ b/src/containers/Article/ReadingOptions.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import clsx from "clsx";
 import { Icon } from "@/components/Icon";
 import { ExternalLink, Ghost, Link, Paintbrush, Share } from "lucide-react";
 import { useBearStore } from "@/stores";
@@ -35,14 +36,39 @@ export const ReadingOptions = (props: NavigatorProps) => {
     setFilter: state.setFilter,
 
     userConfig: state.userConfig,
+    viewOrigin: state.viewOrigin,
+    updateViewOrigin: state.updateViewOrigin,
+    viewOriginLoading: state.viewOriginLoading,
+    updateViewOriginLoading: state.updateViewOriginLoading,
   }));
 
   const handleViewSourcePage = () => {
+    if (!store.article) {
+      return;
+    }
+
     const { link } = store.article as Article;
 
-    dataAgent.getPageSources(link).then((res) => {
-      console.log(res);
-    });
+    if (store.viewOrigin) {
+      store.updateViewOrigin(false);
+
+      return;
+    }
+
+    store.updateViewOrigin(true);
+    store.updateViewOriginLoading(true);
+
+    dataAgent
+      .getPageSources(link)
+      .then((res) => {
+        console.log(res);
+      })
+      .finally(() => {
+        store.updateViewOriginLoading(false);
+      });
+    // .catch((err) => {
+    //   store.updateViewOrigin(false);
+    // });
     // TODO: parse web content
   };
 
@@ -80,8 +106,15 @@ export const ReadingOptions = (props: NavigatorProps) => {
         </PopoverContent>
       </Popover>
       <TooltipBox content="View full page">
-        <Icon onClick={handleViewSourcePage}>
-          <Ghost size={16} />
+        <Icon
+          onClick={handleViewSourcePage}
+          disable={!store.article}
+          active={store.viewOrigin}
+        >
+          <Ghost
+            size={16}
+            className={clsx({ "animate-bounce": store.viewOrigin })}
+          />
         </Icon>
       </TooltipBox>
       <TooltipBox content="Open in browser">
diff --git a/src/stores/createUserConfigSlice.ts b/src/stores/createUserConfigSlice.ts
index ac5b5f843..3205972d6 100644
--- a/src/stores/createUserConfigSlice.ts
+++ b/src/stores/createUserConfigSlice.ts
@@ -5,9 +5,17 @@ export interface UserConfigSlice {
   userConfig: UserConfig;
   getUserConfig: any;
   updateUserConfig: (cfg: UserConfig) => void;
+
+  viewOrigin: boolean;
+  updateViewOrigin: (status: boolean) => void;
+  viewOriginLoading: boolean;
+  updateViewOriginLoading: (status: boolean) => void;
 }
 
-export const createUserConfigSlice: StateCreator<UserConfigSlice> = (set, get) => ({
+export const createUserConfigSlice: StateCreator<UserConfigSlice> = (
+  set,
+  get
+) => ({
   userConfig: {},
 
   getUserConfig: () => {
@@ -27,4 +35,21 @@ export const createUserConfigSlice: StateCreator<UserConfigSlice> = (set, get) =
       }));
     });
   },
+
+  viewOrigin: false,
+
+  updateViewOrigin: (status: boolean) => {
+    console.log("%c Line:40 🥃 status", "color:#ea7e5c", status);
+    set(() => ({
+      viewOrigin: status,
+    }));
+  },
+
+  viewOriginLoading: false,
+
+  updateViewOriginLoading: (status: boolean) => {
+    set(() => ({
+      viewOriginLoading: status,
+    }));
+  },
 });