3 files changed, 38 insertions, 6 deletions
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index c86e1e33..408950b1 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -4,6 +4,10 @@
   "edit": "Edit",
   "done": "Done",
   "loadFailReload": "Load failed, click <1>here</1> to reload.",
+  "error": {
+    "network": "Network error.",
+    "unknown": "Unknown error."
+  },
   "serviceWorker": {
     "availableOffline": "Timeline is now cached in your computer and you can use it offline. 🎉🎉🎉",
     "upgradePrompt": "App is getting a new version!",
@@ -111,6 +115,11 @@
     "addBookmarkFail": "Failed to add bookmark.",
     "removeBookmarkFail": "Failed to remove bookmark."
   },
+  "searchPage": {
+    "loading": "Loading search result...",
+    "input": "Input something and search!",
+    "noResult": "Sorry, there is no satisfied results."
+  },
   "user": {
     "username": "username",
     "password": "password",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index 4c839387..498a74e4 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -4,6 +4,10 @@
   "edit": "编辑",
   "done": "完成",
   "loadFailReload": "加载失败，<1>点击</1>重试。",
+  "error": {
+    "network": "网络错误。",
+    "unknown": "未知错误。"
+  },
   "serviceWorker": {
     "availableOffline": "Timeline 已经缓存在本地，你可以离线使用它。🎉🎉🎉",
     "upgradePrompt": "App 有新版本！",
@@ -111,6 +115,11 @@
     "addBookmarkFail": "添加书签失败。",
     "removeBookmarkFail": "删除书签失败。"
   },
+  "searchPage": {
+    "loading": "加载搜索结果中...",
+    "input": "输入一些东西来搜索！",
+    "noResult": "对不起，没有符合条件的结果。"
+  },
   "user": {
     "username": "用户名",
     "password": "密码",
diff --git a/FrontEnd/src/app/views/search/index.tsx b/FrontEnd/src/app/views/search/index.tsx
index 8aff5f01..41f1e6b6 100644
--- a/FrontEnd/src/app/views/search/index.tsx
+++ b/FrontEnd/src/app/views/search/index.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 import { Container, Row } from "react-bootstrap";
 import { useHistory, useLocation } from "react-router";
 import { Link } from "react-router-dom";
@@ -41,6 +42,8 @@ const TimelineSearchResultItemView: React.FC<{ timeline: TimelineInfo }> = ({
 };
 
 const SearchPage: React.FC = () => {
+  const { t } = useTranslation();
+
   const history = useHistory();
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
@@ -51,7 +54,10 @@ const SearchPage: React.FC = () => {
     TimelineInfo[] | "init" | "loading" | "network-error" | "error"
   >("init");
 
+  const [forceResearchKey, setForceResearchKey] = React.useState<number>(0);
+
   React.useEffect(() => {
+    setState("init");
     if (queryParam != null && queryParam.length > 0) {
       setSearchText(queryParam);
       setState("loading");
@@ -70,7 +76,7 @@ const SearchPage: React.FC = () => {
           }
         );
     }
-  }, [queryParam]);
+  }, [queryParam, forceResearchKey]);
 
   return (
     <Container className="my-3">
@@ -81,7 +87,9 @@ const SearchPage: React.FC = () => {
           onChange={setSearchText}
           loading={state === "loading"}
           onButtonClick={() => {
-            if (searchText.length > 0) {
+            if (queryParam === searchText) {
+              setForceResearchKey((old) => old + 1);
+            } else {
               history.push(`/search?q=${searchText}`);
             }
           }}
@@ -90,18 +98,24 @@ const SearchPage: React.FC = () => {
       {(() => {
         switch (state) {
           case "init": {
-            return "Input something and search!";
+            if (queryParam == null || queryParam.length === 0) {
+              return <div>{t("searchPage.input")}</div>;
+            }
+            break;
           }
           case "loading": {
-            return "Loading!";
+            return <div>{t("searchPage.loading")}</div>;
           }
           case "network-error": {
-            return "Network error!";
+            return <div className="text-danger">{t("error.network")}</div>;
           }
           case "error": {
-            return "Unknown error!";
+            return <div className="text-danger">{t("error.unknown")}</div>;
           }
           default: {
+            if (state.length === 0) {
+              return <div>{t("searchPage.noResult")}</div>;
+            }
             return state.map((t) => (
               <TimelineSearchResultItemView key={t.name} timeline={t} />
             ));