feat: add favicon cache

web/src/components/ShortcutView.tsx

@@ -1,16 +1,16 @@
 import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
+import useFaviconStore from "../stores/v1/favicon";
 import { absolutifyLink } from "../helpers/utils";
-import * as api from "../helpers/api";
 import { showCommonDialog } from "./Alert";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
 import VisibilityIcon from "./VisibilityIcon";
-import { useEffect, useState } from "react";
 
 interface Props {
   shortcut: Shortcut;
@@ -21,18 +21,16 @@ const ShortcutView = (props: Props) => {
   const { shortcut, handleEdit } = props;
   const { t } = useTranslation();
   const user = useAppSelector((state) => state.user.user as User);
+  const faviconStore = useFaviconStore();
   const [favicon, setFavicon] = useState<string | undefined>(undefined);
   const havePermission = user.role === "ADMIN" || shortcut.creatorId === user.id;
 
   useEffect(() => {
-    api
-      .getUrlFavicon(shortcut.link)
-      .then(({ data }) => {
-        setFavicon(data);
-      })
-      .catch(() => {
-        // do nothing.
-      });
+    faviconStore.getOrFetchUrlFavicon(shortcut.link).then((url) => {
+      if (url) {
+        setFavicon(url);
+      }
+    });
   }, [shortcut.link]);
 
   const handleCopyButtonClick = (shortcut: Shortcut) => {

web/src/stores/v1/favicon.ts

@@ -0,0 +1,41 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import * as api from "../../helpers/api";
+
+interface FaviconState {
+  cache: {
+    [key: string]: string;
+  };
+  getOrFetchUrlFavicon: (url: string) => Promise<string>;
+}
+
+const useFaviconStore = create<FaviconState>()(
+  persist(
+    (set, get) => ({
+      cache: {},
+      getOrFetchUrlFavicon: async (url: string) => {
+        const cache = get().cache;
+        if (cache[url]) {
+          return cache[url];
+        }
+
+        try {
+          const { data: favicon } = await api.getUrlFavicon(url);
+          if (favicon) {
+            cache[url] = favicon;
+            set(cache);
+            return favicon;
+          }
+        } catch (error) {
+          // do nothing
+        }
+        return "";
+      },
+    }),
+    {
+      name: "favicon_cache",
+    }
+  )
+);
+
+export default useFaviconStore;