show only my decks

src/api/mdproDeck/schema.ts

@@ -32,7 +32,7 @@ export interface MdproDeckLike {
   deckId: string;
   deckContributor: string;
   deckName: string;
-  deckLike: string;
+  deckLike?: number;
   deckCase: number;
-  lastDate: string;
+  lastDate?: string;
 }

src/ui/BuildDeck/DeckDatabase/DeckResults/index.tsx

-import { message, Pagination } from "antd";
+import { App, message, Pagination } from "antd";
 import React, { memo, useEffect } from "react";
 import { type INTERNAL_Snapshot as Snapshot, proxy, useSnapshot } from "valtio";
 import YGOProDeck from "ygopro-deck-encode";
 
-import { mgetDeck, pullDecks } from "@/api";
+import { getPersonalList, mgetDeck, pullDecks } from "@/api";
 import { MdproDeckLike } from "@/api/mdproDeck/schema";
 import { useConfig } from "@/config";
+import { accountStore } from "@/stores";
 import { IconFont } from "@/ui/Shared";
 
 import { setSelectedDeck } from "../..";
@@ -20,37 +21,91 @@ interface Props {
   page: number;
   decks: MdproDeckLike[];
   total: number;
+  onlyMine: boolean;
 }
 
 // TODO: useConfig
 const PAGE_SIZE = 30;
 const SORT_LIKE = true;
 
-const store = proxy<Props>({ query: "", page: 1, decks: [], total: 0 });
+const store = proxy<Props>({
+  query: "",
+  page: 1,
+  decks: [],
+  total: 0,
+  onlyMine: false,
+});
 
 export const DeckResults: React.FC = memo(() => {
   const snap = useSnapshot(store);
+  const { message } = App.useApp();
 
   useEffect(() => {
-    const update = async () => {
-      const resp = await pullDecks({
-        page: snap.page,
-        size: PAGE_SIZE,
-        keyWord: snap.query !== "" ? snap.query : undefined,
-        sortLike: SORT_LIKE,
-      });
-
-      if (resp?.data) {
-        const { total, records: newDecks } = resp.data;
-        store.total = total;
-        store.decks = newDecks;
-      } else {
-        store.decks = [];
-      }
-    };
-
-    update();
-  }, [snap.query, snap.page]);
+    if (snap.onlyMine) {
+      // show only decks uploaded by myself
+
+      const update = async () => {
+        const user = accountStore.user;
+        if (user) {
+          const resp = await getPersonalList({
+            userID: user.id,
+            token: user.token,
+          });
+
+          if (resp) {
+            if (resp.code !== 0 || resp.data === undefined) {
+              message.error(resp.message);
+            } else {
+              const decks = resp.data;
+
+              const total = decks.length;
+              store.total = total;
+              if (total === 0) {
+                store.page = 1;
+                store.decks = [];
+              } else {
+                if (total <= (store.page - 1) * PAGE_SIZE)
+                  store.page = Math.floor((total - 1) / PAGE_SIZE) + 1;
+                store.decks = decks.slice(
+                  (store.page - 1) * PAGE_SIZE,
+                  store.page * PAGE_SIZE,
+                );
+              }
+            }
+          } else {
+            message.error("获取个人卡组列表失败，请检查自己的网络状况。");
+          }
+        } else {
+          message.error("需要先登录萌卡账号才能查看自己的在线卡组");
+          // set to default
+          store.page = 1;
+          store.decks = [];
+          store.total = 0;
+        }
+      };
+
+      update();
+    } else {
+      const update = async () => {
+        const resp = await pullDecks({
+          page: snap.page,
+          size: PAGE_SIZE,
+          keyWord: snap.query !== "" ? snap.query : undefined,
+          sortLike: SORT_LIKE,
+        });
+
+        if (resp?.data) {
+          const { total, records: newDecks } = resp.data;
+          store.total = total;
+          store.decks = newDecks;
+        } else {
+          store.decks = [];
+        }
+      };
+
+      update();
+    }
+  }, [snap.query, snap.page, snap.onlyMine]);
 
   const onChangePage = async (page: number) => {
     const resp = await pullDecks({
@@ -160,4 +215,8 @@ function truncateString(str: string, maxLen: number): string {
   return `${start}...${end}`;
 }
 
-export const freshMdrpoDecks = (query: string) => (store.query = query);
+export const freshMdrpoDecks = (query: string, onlyMine?: boolean) => {
+  store.query = query;
+
+  if (onlyMine !== undefined) store.onlyMine = onlyMine;
+};

src/ui/BuildDeck/DeckDatabase/index.tsx

@@ -15,7 +15,7 @@ import { useDrop } from "react-dnd";
 import { CardMeta, searchCards } from "@/api";
 import { isToken } from "@/common";
 import { emptySearchConditions, FtsConditions } from "@/middleware/sqlite/fts";
-import { ScrollableArea, Type } from "@/ui/Shared";
+import { ScrollableArea, Select, Type } from "@/ui/Shared";
 
 import { Filter } from "../Filter";
 import styles from "../index.module.scss";
@@ -149,19 +149,35 @@ export const DeckDatabase: React.FC = () => {
         </Button>
       </Space>
       <div className={styles["select-btns"]}>
-        <Button
-          block
-          type={
-            isEqual(emptySearchConditions, searchConditions)
-              ? "text"
-              : "primary"
-          }
-          disabled={showMdproDecks}
-          icon={<FilterOutlined />}
-          onClick={showFilterModal}
-        >
-          筛选
-        </Button>
+        {showMdproDecks ? (
+          <Select
+            title=""
+            style={{ width: "18.90rem" }}
+            defaultValue={false}
+            options={[
+              { value: true, label: "只显示我上传的卡组" },
+              { value: false, label: "显示全部在线卡组" },
+            ]}
+            onChange={
+              // @ts-ignore
+              (value) => freshMdrpoDecks(searchWord, value)
+            }
+          />
+        ) : (
+          <Button
+            block
+            type={
+              isEqual(emptySearchConditions, searchConditions)
+                ? "text"
+                : "primary"
+            }
+            disabled={showMdproDecks}
+            icon={<FilterOutlined />}
+            onClick={showFilterModal}
+          >
+            筛选
+          </Button>
+        )}
         <Dropdown
           menu={{ items: dropdownOptions }}
           disabled={showMdproDecks}