feat: app offline detection

app/src/api/quota.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export async function getQuota(): Promise<number> {
+  try {
+    const response = await axios.get("/quota");
+    if (response.data.status) {
+      return response.data.quota as number;
+    }
+  } catch (e) {
+    console.debug(e);
+  }
+
+  return NaN;
+}

app/src/components/app/MenuBar.tsx

@@ -15,6 +15,7 @@ import {
   Boxes,
   CalendarPlus,
   Cloud,
+  CloudOff,
   Cloudy,
   Gift,
   ListStart,
@@ -28,6 +29,7 @@ import { openDialog as openSharingDialog } from "@/store/sharing.ts";
 import { openDialog as openApiDialog } from "@/store/api.ts";
 import router from "@/router.tsx";
 import { useDeeptrain } from "@/utils/env.ts";
+import React from "react";
 
 type MenuBarProps = {
   children: React.ReactNode;
@@ -48,12 +50,17 @@ function MenuBar({ children, className }: MenuBarProps) {
         <DropdownMenuLabel className={`username`}>{username}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
-          <Cloud className={`h-4 w-4 mr-1`} />
-          {quota}
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => dispatch(openQuotaDialog())}>
-          <Cloudy className={`h-4 w-4 mr-1`} />
-          {t("quota")}
+          {!isNaN(quota) ? (
+            <>
+              <Cloud className={`h-4 w-4 mr-1`} />
+              {quota.toFixed(2)}
+            </>
+          ) : (
+            <>
+              <CloudOff className={`h-4 w-4 mr-1 text-red-500`} />
+              <p className={`text-red-500`}>{t("offline")}</p>
+            </>
+          )}
         </DropdownMenuItem>
         <DropdownMenuItem onClick={() => dispatch(openSub())}>
           <CalendarPlus className={`h-4 w-4 mr-1`} />

app/src/i18n.ts

@@ -23,6 +23,7 @@ const resources = {
       logout: "登出",
       quota: "点数",
       download: "下载",
+      offline: "应用离线",
       "try-again": "重试",
       "invalid-token": "无效的令牌",
       "invalid-token-prompt": "请重试。",
@@ -465,6 +466,7 @@ const resources = {
       logout: "Logout",
       quota: "Quota",
       download: "Download",
+      offline: "App offline",
       "try-again": "Try again",
       "invalid-token": "Invalid token",
       "invalid-token-prompt": "Please try again.",
@@ -930,6 +932,7 @@ const resources = {
       logout: "Выйти",
       quota: "Квота",
       download: "Скачать",
+      offline: "Приложение оффлайн",
       "try-again": "Попробуйте еще раз",
       "invalid-token": "Неверный токен",
       "invalid-token-prompt": "Пожалуйста, попробуйте еще раз.",

app/src/store/quota.ts

@@ -1,6 +1,6 @@
 import { createSlice } from "@reduxjs/toolkit";
 import { AppDispatch, RootState } from "./index.ts";
-import axios from "axios";
+import { getQuota } from "@/api/quota.ts";
 
 export const quotaSlice = createSlice({
   name: "quota",
@@ -47,14 +47,9 @@ export default quotaSlice.reducer;
 export const dialogSelector = (state: RootState): boolean => state.quota.dialog;
 export const quotaValueSelector = (state: RootState): number =>
   state.quota.quota;
-export const quotaSelector = (state: RootState): string =>
-  state.quota.quota.toFixed(2);
+export const quotaSelector = (state: RootState): number => state.quota.quota;
 
 export const refreshQuota = async (dispatch: AppDispatch) => {
-  try {
-    const response = await axios.get("/quota");
-    if (response.data.status) dispatch(setQuota(response.data.quota));
-  } catch (e) {
-    console.warn(e);
-  }
+  const quota = await getQuota();
+  dispatch(setQuota(quota));
 };