diff options
| -rw-r--r-- | FrontEnd/src/app/locales/en/translation.json | 5 | ||||
| -rw-r--r-- | FrontEnd/src/app/locales/zh/translation.json | 5 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/home/BoardWithUser.tsx | 61 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/home/BoardWithoutUser.tsx | 61 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/home/TimelineBoard.tsx | 50 |
5 files changed, 84 insertions, 98 deletions
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json index f07efafe..be80d21e 100644 --- a/FrontEnd/src/app/locales/en/translation.json +++ b/FrontEnd/src/app/locales/en/translation.json @@ -20,10 +20,9 @@ "loadImageError": "Failed to load image.", "home": { "go": "Go!", - "allTimeline": "All Timelines", + "highlightTimeline": "Highlight Timelines", "relatedTimeline": "Timelines Related To You", - "joinTimeline": "Joined Timelines", - "ownTimeline": "Owned Timelines", + "publicTimeline": "Public Timelines", "offlinePrompt": "Oh oh, it seems you are offline. Here list some timelines cached locally. You can view them or click <1>here</1> to refresh.", "createButton": "Create Timeline", "createDialog": { diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json index 5991f3cd..8c925eb9 100644 --- a/FrontEnd/src/app/locales/zh/translation.json +++ b/FrontEnd/src/app/locales/zh/translation.json @@ -20,10 +20,9 @@ "loadImageError": "加载图片失败", "home": { "go": "冲！", - "allTimeline": "所有的时间线", + "highlightTimeline": "高光时间线", "relatedTimeline": "关于你的时间线", - "joinTimeline": "加入的时间线", - "ownTimeline": "拥有的时间线", + "publicTimeline": "公开时间线", "offlinePrompt": "你好像处于离线状态。以下是一些缓存在本地的时间线。你可以查看它们或者<1>点击</1>重新获取在线信息。", "createButton": "创建时间线", "createDialog": { diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx index 16648820..9b2f395d 100644 --- a/FrontEnd/src/app/views/home/BoardWithUser.tsx +++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx @@ -3,61 +3,30 @@ import { Row, Col } from "react-bootstrap"; import { useTranslation } from "react-i18next"; import { AuthUser } from "@/services/user"; -import { TimelineInfo } from "@/services/timeline"; +import { getHttpHighlightClient } from "@/http/highlight"; import { getHttpTimelineClient } from "@/http/timeline"; import TimelineBoard from "./TimelineBoard"; -import OfflineBoard from "./OfflineBoard"; const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => { const { t } = useTranslation(); - const [relatedTimelines, setRelatedTimelines] = React.useState< - TimelineInfo[] | "offline" | "loading" - >("loading"); - - React.useEffect(() => { - let subscribe = true; - if (relatedTimelines === "loading") { - void getHttpTimelineClient() - .listTimeline({ relate: user.username }) - .then( - (timelines) => { - if (subscribe) { - setRelatedTimelines(timelines); - } - }, - () => { - setRelatedTimelines("offline"); - } - ); - } - return () => { - subscribe = false; - }; - }, [user, relatedTimelines]); - return ( <Row className="my-3 justify-content-center"> - {relatedTimelines === "offline" ? ( - <Col sm="8" lg="6"> - <OfflineBoard - onReload={() => { - setRelatedTimelines("loading"); - }} - /> - </Col> - ) : ( - <Col sm="6" lg="5"> - <TimelineBoard - title={t("home.relatedTimeline")} - timelines={relatedTimelines} - onReload={() => { - setRelatedTimelines("loading"); - }} - /> - </Col> - )} + <Col sm="6" lg="5"> + <TimelineBoard + title={t("home.highlightTimeline")} + load={() => getHttpHighlightClient().list()} + /> + </Col> + <Col sm="6" lg="5"> + <TimelineBoard + title={t("home.relatedTimeline")} + load={() => + getHttpTimelineClient().listTimeline({ relate: user.username }) + } + /> + </Col> </Row> ); }; diff --git a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx index 7e30f799..ad88af7a 100644 --- a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx +++ b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx @@ -1,58 +1,31 @@ import React from "react"; import { Row, Col } from "react-bootstrap"; +import { useTranslation } from "react-i18next"; -import { TimelineInfo } from "@/services/timeline"; +import { getHttpHighlightClient } from "@/http/highlight"; import { getHttpTimelineClient } from "@/http/timeline"; import TimelineBoard from "./TimelineBoard"; -import OfflineBoard from "./OfflineBoard"; const BoardWithoutUser: React.FC = () => { - const [publicTimelines, setPublicTimelines] = React.useState< - TimelineInfo[] | "offline" | "loading" - >("loading"); - - React.useEffect(() => { - let subscribe = true; - if (publicTimelines === "loading") { - void getHttpTimelineClient() - .listTimeline({ visibility: "Public" }) - .then( - (timelines) => { - if (subscribe) { - setPublicTimelines(timelines); - } - }, - () => { - setPublicTimelines("offline"); - } - ); - } - return () => { - subscribe = false; - }; - }, [publicTimelines]); + const { t } = useTranslation(); return ( <Row className="my-3 justify-content-center"> - {publicTimelines === "offline" ? ( - <Col sm="8" lg="6"> - <OfflineBoard - onReload={() => { - setPublicTimelines("loading"); - }} - /> - </Col> - ) : ( - <Col sm="8" lg="6"> - <TimelineBoard - timelines={publicTimelines} - onReload={() => { - setPublicTimelines("loading"); - }} - /> - </Col> - )} + <Col sm="6" lg="5"> + <TimelineBoard + title={t("home.highlightTimeline")} + load={() => getHttpHighlightClient().list()} + /> + </Col> + <Col sm="8" lg="6"> + <TimelineBoard + title={t("home.publicTimeline")} + load={() => + getHttpTimelineClient().listTimeline({ visibility: "Public" }) + } + /> + </Col> </Row> ); }; diff --git a/FrontEnd/src/app/views/home/TimelineBoard.tsx b/FrontEnd/src/app/views/home/TimelineBoard.tsx index c2a7e5fe..ae7783e6 100644 --- a/FrontEnd/src/app/views/home/TimelineBoard.tsx +++ b/FrontEnd/src/app/views/home/TimelineBoard.tsx @@ -8,14 +8,14 @@ import { TimelineInfo } from "@/services/timeline"; import TimelineLogo from "../common/TimelineLogo"; import UserTimelineLogo from "../common/UserTimelineLogo"; -export interface TimelineBoardProps { +interface TimelineBoardUIProps { title?: string; timelines: TimelineInfo[] | "offline" | "loading"; onReload: () => void; className?: string; } -const TimelineBoard: React.FC<TimelineBoardProps> = (props) => { +const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => { const { title, timelines, className } = props; return ( @@ -71,4 +71,50 @@ const TimelineBoard: React.FC<TimelineBoardProps> = (props) => { ); }; +export interface TimelineBoardProps { + title?: string; + className?: string; + load: () => Promise<TimelineInfo[]>; +} + +const TimelineBoard: React.FC<TimelineBoardProps> = ({ + className, + title, + load, +}) => { + const [timelines, setTimelines] = React.useState< + TimelineInfo[] | "offline" | "loading" + >("loading"); + + React.useEffect(() => { + let subscribe = true; + if (timelines === "loading") { + void load().then( + (timelines) => { + if (subscribe) { + setTimelines(timelines); + } + }, + () => { + setTimelines("offline"); + } + ); + } + return () => { + subscribe = false; + }; + }, [load, timelines]); + + return ( + <TimelineBoardUI + title={title} + className={className} + timelines={timelines} + onReload={() => { + setTimelines("loading"); + }} + /> + ); +}; + export default TimelineBoard; |