Add error messages

Author: slhmy

src/hooks/judge.ts

@@ -1,6 +1,9 @@
 import { useEffect, useState } from "react";
 import * as JudgeServiceModel from "@/models/service/judge";
 import * as JudgeService from "@/apis/judge";
+import { useDispatch } from "react-redux";
+import { AddMessageSagaPattern } from "@/store/sagas/message";
+import { useTranslation } from "react-i18next";
 
 export const useJudge = (uid: string) => {
   const [judge, setJudge] = useState<JudgeServiceModel.JudgeInfo>();
@@ -22,6 +25,8 @@ export const useJudge = (uid: string) => {
 };
 
 export const useRunJudge = (slug: string) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [src, setSrc] = useState<string>("");
   const [src_language, setSrcLanguage] = useState<string>("");
 
@@ -33,7 +38,16 @@ export const useRunJudge = (slug: string) => {
         afterJudgePosted(res);
       })
       .catch((err) => {
-        console.log(err);
+        dispatch({
+          type: AddMessageSagaPattern,
+          payload: {
+            id: "judge-fetch-error",
+            content: `${t("Failed to fetch judge")}`,
+            duration: 3000,
+            level: "error",
+            err: err.toString(),
+          },
+        });
       });
   }
 
@@ -45,6 +59,8 @@ export const useRunJudge = (slug: string) => {
 };
 
 export const useJudgeList = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [total, setTotal] = useState<number>(0);
   const [limit, setLimit] = useState<number>(10);
   const [offset, setOffset] = useState<number>(0);
@@ -57,11 +73,20 @@ export const useJudgeList = () => {
         setTotal(res.total);
       })
       .catch((err) => {
-        console.log(err);
+        dispatch({
+          type: AddMessageSagaPattern,
+          payload: {
+            id: "judge-list-fetch-error",
+            content: `${t("Failed to fetch judge list")}`,
+            duration: 3000,
+            level: "error",
+            err: err.toString(),
+          },
+        });
       });
   };
 
-  useEffect(getJudgeListFromServer, [limit, offset]);
+  useEffect(getJudgeListFromServer, [dispatch, limit, offset, t]);
 
   function getJudgeList() {
     return judgeList;

src/hooks/problem.ts

@@ -3,13 +3,15 @@ import * as ProblemServiceModel from "@/models/service/problem";
 import * as ProblemService from "@/apis/problem";
 import { useDispatch } from "react-redux";
 import { AddMessageSagaPattern } from "@/store/sagas/message";
+import { useTranslation } from "react-i18next";
 
 export const useProblem = (slug: string, fallback?: () => void) => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [problem, setProblem] = useState<ProblemServiceModel.Problem | null>(
     null,
   );
   const fallbackRef = useRef(fallback);
-  const dispatch = useDispatch();
 
   useEffect(() => {
     fallbackRef.current = fallback;
@@ -25,9 +27,10 @@ export const useProblem = (slug: string, fallback?: () => void) => {
           type: AddMessageSagaPattern,
           payload: {
             id: "problem-fetch-error",
-            content: "Failed to fetch problem",
+            content: `${t("Failed to fetch problem")}`,
             duration: 3000,
             err: err.toString(),
+            level: "error",
           },
         });
         fallbackRef.current?.();
@@ -43,6 +46,8 @@ export const useProblem = (slug: string, fallback?: () => void) => {
 };
 
 export const useProblemInfoList = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [problemList, setProblemList] = useState<
     ProblemServiceModel.ProblemInfo[]
   >([]);
@@ -64,9 +69,18 @@ export const useProblemInfoList = () => {
         setTotal(res.total);
       })
       .catch((err) => {
-        console.log(err);
+        dispatch({
+          type: AddMessageSagaPattern,
+          payload: {
+            id: "problem-list-fetch-error",
+            content: `${t("Failed to fetch problem list")}`,
+            duration: 3000,
+            level: "error",
+            err: err.toString(),
+          },
+        });
       });
-  }, [limit, offset, titleQuery, difficultyQuery]);
+  }, [limit, offset, titleQuery, difficultyQuery, dispatch, t]);
 
   useEffect(() => {
     getProblemInfoListFromServer();

src/hooks/rank.ts

@@ -1,8 +1,13 @@
 import { useEffect, useState } from "react";
 import * as RankServiceModel from "@/models/service/rank";
 import * as RankService from "@/apis/rank";
+import { useDispatch } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { AddMessageSagaPattern } from "@/store/sagas/message";
 
 export const useRankList = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [rankList, setRankList] = useState<RankServiceModel.RankInfo[]>([]);
 
   useEffect(() => {
@@ -13,11 +18,18 @@ export const useRankList = () => {
         }
       })
       .catch((err) => {
-        console.log(err);
+        dispatch({
+          type: AddMessageSagaPattern,
+          payload: {
+            id: "rank-fetch-error",
+            content: `${t("Failed to fetch rank list")}`,
+            duration: 3000,
+            level: "error",
+            err: err.toString(),
+          },
+        });
       });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [dispatch, t]);
 
   function getRankList() {
     return rankList;

src/hooks/user.ts

@@ -1,8 +1,13 @@
 import * as UserServiceModel from "@/models/service/user";
 import * as UserService from "@/apis/user";
 import { useEffect, useState } from "react";
+import { AddMessageSagaPattern } from "@/store/sagas/message";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
 
 export const useUserInfoList = () => {
+  const dispatch = useDispatch();
+  const { t } = useTranslation();
   const [userInfoList, setUserInfoList] = useState<UserServiceModel.UserInfo[]>(
     [],
   );
@@ -11,11 +16,24 @@ export const useUserInfoList = () => {
   const [offset, setOffset] = useState<number>(0);
 
   useEffect(() => {
-    UserService.getUserInfoList(limit, offset).then((res) => {
-      setUserInfoList(res.list);
-      setTotal(res.total);
-    });
-  }, [limit, offset]);
+    UserService.getUserInfoList(limit, offset)
+      .then((res) => {
+        setUserInfoList(res.list);
+        setTotal(res.total);
+      })
+      .catch((err) => {
+        dispatch({
+          type: AddMessageSagaPattern,
+          payload: {
+            id: "user-list-fetch-error",
+            content: `${t("Failed to fetch user list")}`,
+            duration: 3000,
+            level: "error",
+            err: err.toString(),
+          },
+        });
+      });
+  }, [dispatch, limit, offset, t]);
 
   function getUserInfoList() {
     return userInfoList;

src/i18n/resources/zh_CN.ts

@@ -20,6 +20,9 @@ const ZH_CN_TRANSLATIONS: Resource = {
     Logout: "登出",
     Submit: "提交",
     Copy: "复制",
+    Theme: "主题",
+    Create: "创建",
+    Cancel: "取消",
 
     "or Register": "或注册",
     "Welcome!": "欢迎！",
@@ -34,11 +37,13 @@ const ZH_CN_TRANSLATIONS: Resource = {
     "Click and confirm submission": "点击并确认提交",
     "Please login first": "请先登录",
 
-    Theme: "主题",
+    "Failed to fetch rank list": "获取排名列表失败",
+    "Failed to fetch user list": "获取用户列表失败",
+    "Failed to fetch problem list": "获取题目列表失败",
+    "Failed to fetch problem": "获取题目失败",
+    "Failed to fetch judge list": "获取评测列表失败",
+    "Failed to fetch judge": "获取评测失败",
 
-    Create: "创建",
-    Cancel: "取消",
-    "Sign out": "登出",
     "Show actions": "显示操作",
 
     Raw: "原始",