refactor: use swr to fetch data (#117)

Author: wibus-wee

package.json

@@ -30,6 +30,7 @@
     "react-router-dom": "6.9.0",
     "react-use": "17.4.0",
     "sonner": "^0.3.0",
+    "swr": "^2.1.3",
     "valtio": "^1.10.3",
     "vditor": "^3.9.1"
   },

pnpm-lock.yaml

@@ -1,74 +1,33 @@
 import clsx from "clsx";
-import { useEffect, useState } from "react";
 import { Sidebar } from "./components/widgets/Sidebar";
 import { AppRouter } from "./router/router";
-import { apiClient } from "./utils/request";
-import { Loading } from "./components/universal/Loading";
-import { useNavigate } from "react-router-dom";
 import { useSnapshot } from "valtio";
-import { app, server } from "./states/app";
-import { jump } from "@utils/path";
-import { toast, Toaster } from "sonner";
+import { app } from "./states/app";
+import useSWR from "swr";
+import { InternelServerErrorPage } from "@pages/InternelServerErrorPage";
+import { useAppCheck } from "@hooks/useAppCheck";
 
 function App() {
   const appSnapshot = useSnapshot(app);
-  const [loading, setLoading] = useState(true);
-  const navigate = useNavigate();
 
-  useEffect(() => {
-    apiClient("/ping")
-      .then(() => {})
-      .catch(() => {
-        if (window.location.pathname != jump("/status")) {
-          toast.error("无法与后端通信，请检查服务状态");
-          navigate(jump("/status"));
+  const { error: gatewayError } = useSWR("/ping");
+
+  if (gatewayError) {
+    return (
+      <InternelServerErrorPage
+        title={"Mog Gateway 错误"}
+        description={
+          "控制台似乎无法连接到 Mog 网关层，请检查 Mog 网关层的运行状态。"
         }
-        return;
-      })
-      .then(() => {
-        apiClient("/user/ping").then(() => {
-          apiClient("/user/check")
-          .then(() => {
-            (window.location.pathname == jump("/") ||
-              window.location.pathname == jump("/login") ||
-              window.location.pathname == jump("/register")) &&
-              navigate(jump("/dashboard"));
-            app.authenticated = true;
-            app.showSidebar = true;
-          })
-          .catch(() => {
-            console.log(11)
-            window.location.pathname != jump("/login") &&
-              window.location.pathname != jump("/register") &&
-              window.location.pathname != jump("/status") &&
-              navigate(jump("/login"));
-          });
-        }).catch(() => {
-          if (window.location.pathname != jump("/status")) {
-            toast.error("无法与后端通信，请检查服务状态");
-            navigate(jump("/status"));
-          }
-          return;
-        })
-        apiClient("/category").then((res) => {
-          server.categories = res.data;
-        });
-        apiClient("/category?type=Tag").then((res) => {
-          server.tags = res.data;
-        });
-      })
-      .finally(() => {
-        setTimeout(() => {
-          setLoading(false);
-        }, 1000);
-      });
-  }, []);
+      />
+    );
+  }
 
+  useAppCheck();
+  
   return (
     <>
-      <Toaster />
-      <Loading loading={loading} />
-      <div className={clsx("app", "loading", !loading && "loaded")}>
+      <div className={clsx("app")}>
         {appSnapshot.showSidebar && <Sidebar />}
         <div className="inner">
           <AppRouter />

src/App.tsx

@@ -50,7 +50,7 @@ export const CheckBox = (props: CheckBoxProps) => {
               onChange={handleChange}
               {...rest}
             />
-            <span className={styles.check}></span>
+            <span className={styles.check} />
             <span className={styles.name}>{item.name}</span>
           </label>
         ))}

src/components/universal/CheckBox/index.tsx

@@ -1,5 +1,5 @@
 import { Disclosure } from "@headlessui/react"
-import { PropsWithChildren } from "react"
+import type { PropsWithChildren } from "react"
 import styles from "./index.module.css"
 
 interface ICollapse {

src/components/universal/Collapse/index.tsx

@@ -46,7 +46,7 @@ export const Radio = (props: RadioProps) => {
               onChange={handleChange}
               {...rest}
             />
-            <span className={styles.check}></span>
+            <span className={styles.check} />
             <span className={styles.name}>{item.name}</span>
           </label>
         ))}

src/components/universal/Radio/index.tsx

@@ -0,0 +1,59 @@
+
+.button {
+  background: var(--secondary-color);
+  border: none;
+  border-radius: 5px;
+  padding: 10px 20px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  margin: 0 10px;
+  margin-bottom: -10px;
+  animation: fadeIn 0.5s ease;  
+  position: relative;
+}
+
+.button[data-label]:after {
+  content: attr(data-label);
+  opacity: 0;
+  position: absolute;
+  top: 100%;
+  margin-top: 5px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--tertiary-color);
+  color: var(--primary-color);
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: opacity 0.2s ease;
+}
+
+.button[data-label]:hover:after {
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.select, .button:hover {
+  background: var(--primary-color);
+}
+
+.select:hover {
+  background-color: var(--background-color-primary);
+}
+
+.confrim {
+  background: red !important;
+  color: #fff;
+}

src/components/widgets/ActionButtons/index.module.css

@@ -0,0 +1,102 @@
+import { Clear, Delete, Edit } from "@icon-park/react"
+import clsx from "clsx"
+import styles from "./index.module.css"
+
+interface ActionButtonsProps {
+  selectedClassName: string
+  setSelect: (value: React.SetStateAction<any>) => void
+  selected: any[]
+  editAction: (event: React.MouseEvent<HTMLButtonElement>) => void
+  deleteFunction: (e) => void
+}
+
+export const ActionButtons = (props: ActionButtonsProps) => {
+  const { selectedClassName, setSelect, selected, editAction, deleteFunction } = props
+  
+  const RemoveButton = () => {
+    return (
+      <ActionButton
+        icon={<Clear />}
+        label="取消选择"
+        action={() => {
+          setSelect([])
+          const items = document.querySelectorAll(".item")
+          items.forEach((item) => {
+            item.classList.remove(selectedClassName)
+          })
+        }}
+      />
+    )
+  }
+
+  const DeleteButton = () => {
+    return (
+      <ActionButton
+        icon={<Delete />}
+        label="删除"
+        action={(e) => {
+            deleteFunction(e)
+            setSelect([]);
+            document
+              .querySelectorAll(`.${selectedClassName}`)
+              .forEach((item) => {
+                item.remove();
+              });
+        }}
+        className={styles.delete}
+        doubleConfirm
+        doubleConfirmLabel="确认删除?"
+      />
+    )
+  }
+
+  const EditButton = () => {
+    return (
+      <ActionButton
+        icon={<Edit />}
+        label="编辑"
+        action={editAction}
+      />
+    )
+  }
+
+  return (
+    <>
+      {selected.length ? <RemoveButton /> : null}
+      {selected.length ? <DeleteButton /> : null}
+      {selected.length === 1 ? <EditButton /> : null} 
+    </>
+  )
+}
+
+interface ActionButtonProps {
+  icon: React.ReactNode
+  label: string
+  action: (event: React.MouseEvent<HTMLButtonElement>) => void
+  className?: string
+  doubleConfirm?: boolean
+  doubleConfirmLabel?: string
+}
+
+export const ActionButton = (props: ActionButtonProps) => {
+  const { icon, label, action, className, doubleConfirm, doubleConfirmLabel } = props
+
+  return (
+    <button className={clsx(styles["button"], className)} onClick={(e) => {
+      if (doubleConfirm) {
+        if (
+          e.currentTarget.classList.contains(styles.confrim)
+        ) {
+          action(e)
+        } else {
+          e.currentTarget.classList.add(styles.confrim);
+          if (doubleConfirmLabel) e.currentTarget.setAttribute("data-label", doubleConfirmLabel)
+        }
+      } else {
+        action(e)
+      }
+    }} data-label={label}>
+      {icon}
+    </button>
+  )
+}

src/components/widgets/ActionButtons/index.tsx

@@ -10,7 +10,6 @@ import {
   MenuFoldOne,
   MenuUnfoldOne,
   OpenDoor,
-  Page,
   Setting,
   Theme,
 } from "@icon-park/react";
@@ -29,6 +28,8 @@ import { useNavigate } from "react-router-dom";
 import { apiClient } from "@utils/request";
 import { removeCookie } from "@utils/cookie";
 import { jump } from "@utils/path";
+import { mutate } from "swr";
+import { toast } from "sonner";
 
 const Links = () => {
   const authenticated = useSnapshot(app).authenticated;
@@ -49,12 +50,6 @@ const Links = () => {
       })}
     >
       <SidebarItem icon={HomeTwo({})} title="仪表盘" href={jump("/dashboard")} />
-      <SidebarItem
-        icon={Page({})}
-        title="前往站点"
-        href={"https://github.com"}
-        outside
-      />
       <Space height={20} />
       <SidebarItem icon={Editor({})} title="文章" href={jump("/posts")} />
       <SidebarItem
@@ -92,6 +87,8 @@ const Links = () => {
             removeCookie("token")
             app.authenticated = false;
             navigate(jump("/login"))
+            mutate("/user/check")
+            toast("退出成功")
           }).catch((e) => {
             console.log(e)
           })

src/components/widgets/Sidebar/index.tsx

@@ -0,0 +1,38 @@
+export const MOG_OFFICIAL_SERVICES = [
+  {
+    name: "核心网关层",
+    url: "",
+  },
+  {
+    name: "用户服务",
+    url: "user",
+  },
+  {
+    name: "文章服务",
+    url: "post",
+  },
+  {
+    name: "页面服务",
+    url: "page",
+  },
+  {
+    name: "分类服务",
+    url: "category",
+  },
+  {
+    name: "评论服务",
+    url: "comments",
+  },
+  {
+    name: "友链服务",
+    url: "friends",
+  },
+  {
+    name: "通知服务",
+    url: "notification",
+  },
+  {
+    name: "主题服务",
+    url: "themes",
+  }
+];