Merge branch 'feat/dpu' into 'main'

add progress for loading mdpro deck

See merge request !386

src/api/mdproDeck/personalList.ts

 import { useConfig } from "@/config";
+import { pfetch } from "@/infra";
 
 import { MdproDeck, MdproResp } from "./schema";
 import { handleHttps, mdproHeaders } from "./util";
@@ -15,14 +16,18 @@ export interface PersonalListReq {
 
 export async function getPersonalList(
   req: PersonalListReq,
+  progressCallback?: (progress: number) => void,
 ): Promise<MdproResp<MdproDeck[]> | undefined> {
   const myHeaders = mdproHeaders();
   myHeaders.append("token", req.token);
 
-  const resp = await fetch(`${mdproServer}/${API_PATH}/${req.userID}`, {
-    method: "GET",
-    headers: myHeaders,
-    redirect: "follow",
+  const resp = await pfetch(`${mdproServer}/${API_PATH}/${req.userID}`, {
+    init: {
+      method: "GET",
+      headers: myHeaders,
+      redirect: "follow",
+    },
+    progressCallback,
   });
 
   return await handleHttps(resp, API_PATH);

src/api/mdproDeck/pull.ts

 import { useConfig } from "@/config";
+import { pfetch } from "@/infra";
 
 import { MdproDeckLike, MdproResp } from "./schema";
 import { handleHttps, mdproHeaders } from "./util";
@@ -30,6 +31,7 @@ interface RespData {
 
 export async function pullDecks(
   req: PullReq = defaultPullReq,
+  progressCallback?: (progress: number) => void,
 ): Promise<MdproResp<RespData> | undefined> {
   const myHeaders = mdproHeaders();
 
@@ -43,10 +45,13 @@ export async function pullDecks(
   const url = new URL(`${mdproServer}/${API_PATH}`);
   url.search = params.toString();
 
-  const resp = await fetch(url.toString(), {
-    method: "GET",
-    headers: myHeaders,
-    redirect: "follow",
+  const resp = await pfetch(url.toString(), {
+    init: {
+      method: "GET",
+      headers: myHeaders,
+      redirect: "follow",
+    },
+    progressCallback,
   });
 
   return await handleHttps(resp, API_PATH);

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

@@ -10,7 +10,7 @@ import { deleteDeck, 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 { IconFont, Loading } from "@/ui/Shared";
 
 import { setSelectedDeck } from "../..";
 import { editDeckStore } from "../../store";
@@ -25,6 +25,7 @@ interface Props {
   decks: MdproDeckLike[];
   total: number;
   onlyMine: boolean;
+  progress: number;
 }
 
 // TODO: useConfig
@@ -37,6 +38,7 @@ const store = proxy<Props>({
   decks: [],
   total: 0,
   onlyMine: false,
+  progress: 0.01,
 });
 
 export const DeckResults: React.FC = memo(() => {
@@ -44,29 +46,13 @@ export const DeckResults: React.FC = memo(() => {
   const { message } = App.useApp();
   const { t: i18n } = useTranslation("DeckResults");
   useEffect(() => {
+    resetProgress();
     if (snap.onlyMine) {
       // show only decks uploaded by myself
 
       updatePersonalList(message);
     } 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();
+      updateMdproDeck();
     }
   }, [snap.query, snap.page, snap.onlyMine]);
 
@@ -92,32 +78,38 @@ export const DeckResults: React.FC = memo(() => {
 
   return (
     <>
-      {snap.decks.length ? (
-        <div className={styles.container}>
-          <div className={styles["search-decks"]}>
-            {snap.decks.map((deck) => (
-              <MdproDeckBlock
-                key={deck.deckId}
-                deck={deck}
-                onlyMine={snap.onlyMine}
+      {snap.progress === 1 ? (
+        snap.decks.length ? (
+          <div className={styles.container}>
+            <div className={styles["search-decks"]}>
+              {snap.decks.map((deck) => (
+                <MdproDeckBlock
+                  key={deck.deckId}
+                  deck={deck}
+                  onlyMine={snap.onlyMine}
+                />
+              ))}
+            </div>
+            <div style={{ textAlign: "center", padding: "0.625rem 0 1.25rem" }}>
+              <Pagination
+                current={snap.page}
+                onChange={onChangePage}
+                total={snap.total}
+                pageSize={PAGE_SIZE}
+                showLessItems
+                hideOnSinglePage
               />
-            ))}
+            </div>
           </div>
-          <div style={{ textAlign: "center", padding: "0.625rem 0 1.25rem" }}>
-            <Pagination
-              current={snap.page}
-              onChange={onChangePage}
-              total={snap.total}
-              pageSize={PAGE_SIZE}
-              showLessItems
-              hideOnSinglePage
-            />
+        ) : (
+          <div className={styles.empty}>
+            <IconFont type="icon-empty" size={40} />
+            <div>{i18n("NoDeckGroupFound")}</div>
           </div>
-        </div>
+        )
       ) : (
         <div className={styles.empty}>
-          <IconFont type="icon-empty" size={40} />
-          <div>{i18n("NoDeckGroupFound")}</div>
+          <Loading progress={snap.progress * 100} />
         </div>
       )}
     </>
@@ -182,13 +174,38 @@ const MdproDeckBlock: React.FC<{
   );
 };
 
+const updateMdproDeck = async () => {
+  const resp = await pullDecks(
+    {
+      page: store.page,
+      size: PAGE_SIZE,
+      keyWord: store.query !== "" ? store.query : undefined,
+      sortLike: SORT_LIKE,
+    },
+    updateProgress,
+  );
+
+  if (resp?.data) {
+    const { total, records: newDecks } = resp.data;
+    store.total = total;
+    store.decks = newDecks;
+  } else {
+    store.decks = [];
+  }
+
+  finishProgress();
+};
+
 const updatePersonalList = async (message: MessageInstance) => {
   const user = accountStore.user;
   if (user) {
-    const resp = await getPersonalList({
-      userID: user.id,
-      token: user.token,
-    });
+    const resp = await getPersonalList(
+      {
+        userID: user.id,
+        token: user.token,
+      },
+      updateProgress,
+    );
 
     if (resp) {
       if (resp.code !== 0 || resp.data === undefined) {
@@ -231,8 +248,14 @@ const updatePersonalList = async (message: MessageInstance) => {
     store.decks = [];
     store.total = 0;
   }
+
+  finishProgress();
 };
 
+const resetProgress = () => (store.progress = 0.01);
+const updateProgress = (progress: number) => (store.progress = progress * 0.9);
+const finishProgress = () => (store.progress = 1);
+
 const copyMdproDeckToEditing = async (mdproDeck: MdproDeckLike) => {
   // currently the content of the deck, which we named `Ydk`,
   // haven't been downloaded, so we need to fetch from server again by `mgetDeck`

src/ui/I18N/Source/Brazilian/translation.json

@@ -198,5 +198,8 @@
     "TurnOnSoundEffects": "Efeitos sonoros",
     "SwitchMusicAccordingToTheEnvironment": "Trocar música conforme o ambiente",
     "LanguageSettings": "Idioma"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "Não foi possível encontrar o baralho correspondente"
   }
 }

src/ui/I18N/Source/Chinese/translation.json

@@ -200,5 +200,8 @@
     "TurnOnSoundEffects": "开启音效",
     "SwitchMusicAccordingToTheEnvironment": "根据环境切换音乐",
     "LanguageSettings": "语言"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "找不到相应卡组"
   }
 }

src/ui/I18N/Source/English/translation.json

@@ -200,5 +200,8 @@
     "TurnOnSoundEffects": "Sound effects",
     "SwitchMusicAccordingToTheEnvironment": "Switch music according to the environment",
     "LanguageSettings": "Language"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "Cannot find the corresponding card deck"
   }
 }

src/ui/I18N/Source/French/translation.json

@@ -198,5 +198,8 @@
     "TurnOnSoundEffects": "Effets sonores",
     "SwitchMusicAccordingToTheEnvironment": "Changer la musique en fonction de l'environnement",
     "LanguageSettings": "Langue"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "Impossible de trouver le jeu de cartes correspondant"
   }
 }

src/ui/I18N/Source/Japanese/translation.json

@@ -198,5 +198,8 @@
     "TurnOnSoundEffects": "効果音をオンにする",
     "SwitchMusicAccordingToTheEnvironment": "環境に応じて音楽を切り替える",
     "LanguageSettings": "言語"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "対応するカードデッキが見つかりません"
   }
 }

src/ui/I18N/Source/Portuguese/translation.json

@@ -197,5 +197,8 @@
     "TurnOnMusic": "Música",
     "TurnOnSoundEffects": "Efeitos sonoros",
     "SwitchMusicAccordingToTheEnvironment": "Trocar música conforme o ambiente"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "Não foi possível encontrar o baralho correspondente"
   }
 }

src/ui/I18N/Source/Spanish/translation.json

@@ -198,5 +198,8 @@
     "TurnOnSoundEffects": "Efectos de sonido",
     "SwitchMusicAccordingToTheEnvironment": "Cambiar la música según el entorno",
     "LanguageSettings": "Idioma"
+  },
+  "DeckResults": {
+    "NoDeckGroupFound": "No se puede encontrar el mazo de cartas correspondiente"
   }
 }

src/ui/I18N/index.ts

@@ -32,6 +32,7 @@ const resources = {
     Menu: translationChinese.Menu,
     SelectCardModal: translationChinese.SelectCardModal,
     SystemSettings: translationChinese.SystemSettings,
+    DeckResults: translationChinese.DeckResults,
   },
   en: {
     Header: translationEnglish.Header,
@@ -51,6 +52,7 @@ const resources = {
     Menu: translationEnglish.Menu,
     SelectCardModal: translationEnglish.SelectCardModal,
     SystemSettings: translationEnglish.SystemSettings,
+    DeckResults: translationEnglish.DeckResults,
   },
   es: {
     Header: translationSpanish.Header,
@@ -70,6 +72,7 @@ const resources = {
     Menu: translationSpanish.Menu,
     SelectCardModal: translationSpanish.SelectCardModal,
     SystemSettings: translationSpanish.SystemSettings,
+    DeckResults: translationSpanish.DeckResults,
   },
   fr: {
     Header: translationFrench.Header,
@@ -89,6 +92,7 @@ const resources = {
     Menu: translationFrench.Menu,
     SelectCardModal: translationFrench.SelectCardModal,
     SystemSettings: translationFrench.SystemSettings,
+    DeckResults: translationFrench.DeckResults,
   },
   ja: {
     Header: translationJapanese.Header,
@@ -108,6 +112,7 @@ const resources = {
     Menu: translationJapanese.Menu,
     SelectCardModal: translationJapanese.SelectCardModal,
     SystemSettings: translationJapanese.SystemSettings,
+    DeckResults: translationJapanese.DeckResults,
   },
   br: {
     Header: translationBrazilian.Header,
@@ -127,6 +132,7 @@ const resources = {
     Menu: translationBrazilian.Menu,
     SelectCardModal: translationBrazilian.SelectCardModal,
     SystemSettings: translationBrazilian.SystemSettings,
+    DeckResults: translationBrazilian.DeckResults,
   },
   pt: {
     Header: translationPortuguese.Header,
@@ -146,6 +152,7 @@ const resources = {
     Menu: translationPortuguese.Menu,
     SelectCardModal: translationPortuguese.SelectCardModal,
     SystemSettings: translationPortuguese.SystemSettings,
+    DeckResults: translationPortuguese.DeckResults,
   },
 };