aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--FrontEnd/src/app/App.tsx8
-rw-r--r--FrontEnd/src/app/locales/en/translation.json5
-rw-r--r--FrontEnd/src/app/locales/zh/translation.json5
-rw-r--r--FrontEnd/src/app/views/center/BoardWithUser.tsx111
-rw-r--r--FrontEnd/src/app/views/center/BoardWithoutUser.tsx33
-rw-r--r--FrontEnd/src/app/views/center/CenterBoards.tsx107
-rw-r--r--FrontEnd/src/app/views/center/index.tsx17
-rw-r--r--FrontEnd/src/app/views/common/AppBar.tsx2
-rw-r--r--FrontEnd/src/app/views/home/TimelineListView.tsx18
-rw-r--r--FrontEnd/src/app/views/home/home.sass16
10 files changed, 139 insertions, 183 deletions
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index 39ef78f2..6431ebbb 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -45,9 +45,11 @@ const App: React.FC = () => {
<Route exact path="/home">
<Home />
</Route>
- <Route exact path="/center">
- <Center />
- </Route>
+ {user != null ? (
+ <Route exact path="/center">
+ <Center />
+ </Route>
+ ) : null}
<Route exact path="/login">
<Login />
</Route>
diff --git a/FrontEnd/src/app/locales/en/translation.json b/FrontEnd/src/app/locales/en/translation.json
index a878badd..73cee2e6 100644
--- a/FrontEnd/src/app/locales/en/translation.json
+++ b/FrontEnd/src/app/locales/en/translation.json
@@ -30,10 +30,9 @@
"loadingHighlightTimelines": "Loading highlight timelines...",
"loadedHighlightTimelines": "Here are some highlight timelines💡",
"errorHighlightTimelines": "Failed to load highlight timelines, please try reloading!",
- "highlightTimeline": "Highlight Timelines",
- "relatedTimeline": "Timelines Related To You",
- "publicTimeline": "Public Timelines",
"bookmarkTimeline": "Bookmark Timelines",
+ "highlightTimeline": "Highlight Timelines",
+ "relatedTimeline": "Timelines You Participate",
"message": {
"moveHighlightFail": "Failed to move highlight timeline.",
"deleteHighlightFail": "Failed to delete highlight timeline.",
diff --git a/FrontEnd/src/app/locales/zh/translation.json b/FrontEnd/src/app/locales/zh/translation.json
index 3f956d3d..1a1a70ab 100644
--- a/FrontEnd/src/app/locales/zh/translation.json
+++ b/FrontEnd/src/app/locales/zh/translation.json
@@ -30,10 +30,9 @@
"loadingHighlightTimelines": "正在加载高光时间线...",
"loadedHighlightTimelines": "康康以下这些高光时间线💡",
"errorHighlightTimelines": "加载高光时间线失败，刷新试试！",
- "highlightTimeline": "高光时间线",
- "relatedTimeline": "关于你的时间线",
- "publicTimeline": "公开时间线",
"bookmarkTimeline": "书签时间线",
+ "highlightTimeline": "高光时间线",
+ "relatedTimeline": "参与的时间线",
"message": {
"moveHighlightFail": "移动高光时间线失败。",
"deleteHighlightFail": "删除高光时间线失败。",
diff --git a/FrontEnd/src/app/views/center/BoardWithUser.tsx b/FrontEnd/src/app/views/center/BoardWithUser.tsx
deleted file mode 100644
index 3263c745..00000000
--- a/FrontEnd/src/app/views/center/BoardWithUser.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from "react";
-import { Row, Col } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-
-import { AuthUser } from "@/services/user";
-import { pushAlert } from "@/services/alert";
-
-import { getHttpHighlightClient } from "@/http/highlight";
-import { getHttpTimelineClient } from "@/http/timeline";
-import { getHttpBookmarkClient } from "@/http/bookmark";
-
-import TimelineBoard from "./TimelineBoard";
-
-const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
- const { t } = useTranslation();
-
- return (
- <>
- <Row className="my-3 justify-content-center">
- <Col xs="12" md="6">
- <TimelineBoard
- title={t("home.bookmarkTimeline")}
- load={() => getHttpBookmarkClient().list()}
- editHandler={{
- onDelete: (timeline) => {
- return getHttpBookmarkClient()
- .delete(timeline)
- .catch((e) => {
- pushAlert({
- message: "home.message.deleteBookmarkFail",
- type: "danger",
- });
- throw e;
- });
- },
- onMove: (timeline, index, offset) => {
- return getHttpBookmarkClient()
- .move(
- { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1
- )
- .catch((e) => {
- pushAlert({
- message: "home.message.moveBookmarkFail",
- type: "danger",
- });
- throw e;
- });
- },
- }}
- />
- </Col>
- <Col xs="12" md="6" className="my-3 my-md-0">
- <TimelineBoard
- title={t("home.relatedTimeline")}
- load={() =>
- getHttpTimelineClient().listTimeline({ relate: user.username })
- }
- />
- </Col>
- </Row>
- <Row className="my-3 justify-content-center">
- <Col xs="12" md="6">
- <TimelineBoard
- title={t("home.highlightTimeline")}
- load={() => getHttpHighlightClient().list()}
- editHandler={
- user.hasHighlightTimelineAdministrationPermission
- ? {
- onDelete: (timeline) => {
- return getHttpHighlightClient()
- .delete(timeline)
- .catch((e) => {
- pushAlert({
- message: "home.message.deleteHighlightFail",
- type: "danger",
- });
- throw e;
- });
- },
- onMove: (timeline, index, offset) => {
- return getHttpHighlightClient()
- .move(
- { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1
- )
- .catch((e) => {
- pushAlert({
- message: "home.message.moveHighlightFail",
- type: "danger",
- });
- throw e;
- });
- },
- }
- : undefined
- }
- />
- </Col>
- <Col xs="12" md="6" className="my-3 my-md-0">
- <TimelineBoard
- title={t("home.publicTimeline")}
- load={() =>
- getHttpTimelineClient().listTimeline({ visibility: "Public" })
- }
- />
- </Col>
- </Row>
- </>
- );
-};
-
-export default BoardWithUser;
diff --git a/FrontEnd/src/app/views/center/BoardWithoutUser.tsx b/FrontEnd/src/app/views/center/BoardWithoutUser.tsx
deleted file mode 100644
index d9c7fcf4..00000000
--- a/FrontEnd/src/app/views/center/BoardWithoutUser.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { Row, Col } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-
-import { getHttpHighlightClient } from "@/http/highlight";
-import { getHttpTimelineClient } from "@/http/timeline";
-
-import TimelineBoard from "./TimelineBoard";
-
-const BoardWithoutUser: React.FC = () => {
- const { t } = useTranslation();
-
- return (
- <Row className="my-3 justify-content-center">
- <Col xs="12" md="6">
- <TimelineBoard
- title={t("home.highlightTimeline")}
- load={() => getHttpHighlightClient().list()}
- />
- </Col>
- <Col xs="12" md="6" className="my-3 my-md-0">
- <TimelineBoard
- title={t("home.publicTimeline")}
- load={() =>
- getHttpTimelineClient().listTimeline({ visibility: "Public" })
- }
- />
- </Col>
- </Row>
- );
-};
-
-export default BoardWithoutUser;
diff --git a/FrontEnd/src/app/views/center/CenterBoards.tsx b/FrontEnd/src/app/views/center/CenterBoards.tsx
new file mode 100644
index 00000000..f5200415
--- /dev/null
+++ b/FrontEnd/src/app/views/center/CenterBoards.tsx
@@ -0,0 +1,107 @@
+import React from "react";
+import { Row, Col } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+
+import { pushAlert } from "@/services/alert";
+import { useUserLoggedIn } from "@/services/user";
+
+import { getHttpTimelineClient } from "@/http/timeline";
+import { getHttpBookmarkClient } from "@/http/bookmark";
+import { getHttpHighlightClient } from "@/http/highlight";
+
+import TimelineBoard from "./TimelineBoard";
+
+const CenterBoards: React.FC = () => {
+ const { t } = useTranslation();
+
+ const user = useUserLoggedIn();
+
+ return (
+ <>
+ <Row className="justify-content-center">
+ <Col xs="12" md="6">
+ <Row>
+ <Col xs="12" className="my-2">
+ <TimelineBoard
+ title={t("home.bookmarkTimeline")}
+ load={() => getHttpBookmarkClient().list()}
+ editHandler={{
+ onDelete: (timeline) => {
+ return getHttpBookmarkClient()
+ .delete(timeline)
+ .catch((e) => {
+ pushAlert({
+ message: "home.message.deleteBookmarkFail",
+ type: "danger",
+ });
+ throw e;
+ });
+ },
+ onMove: (timeline, index, offset) => {
+ return getHttpBookmarkClient()
+ .move(
+ { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1
+ )
+ .catch((e) => {
+ pushAlert({
+ message: "home.message.moveBookmarkFail",
+ type: "danger",
+ });
+ throw e;
+ });
+ },
+ }}
+ />
+ </Col>
+ <Col xs="12" className="my-2">
+ <TimelineBoard
+ title={t("home.highlightTimeline")}
+ load={() => getHttpHighlightClient().list()}
+ editHandler={
+ user.hasHighlightTimelineAdministrationPermission
+ ? {
+ onDelete: (timeline) => {
+ return getHttpHighlightClient()
+ .delete(timeline)
+ .catch((e) => {
+ pushAlert({
+ message: "home.message.deleteHighlightFail",
+ type: "danger",
+ });
+ throw e;
+ });
+ },
+ onMove: (timeline, index, offset) => {
+ return getHttpHighlightClient()
+ .move(
+ { timeline, newPosition: index + offset + 1 } // +1 because backend contract: index starts at 1
+ )
+ .catch((e) => {
+ pushAlert({
+ message: "home.message.moveHighlightFail",
+ type: "danger",
+ });
+ throw e;
+ });
+ },
+ }
+ : undefined
+ }
+ />
+ </Col>
+ </Row>
+ </Col>
+ <Col xs="12" md="6" className="my-2">
+ <TimelineBoard
+ title={t("home.relatedTimeline")}
+ load={() =>
+ getHttpTimelineClient().listTimeline({ relate: user.username })
+ }
+ />
+ </Col>
+ </Row>
+ </>
+ );
+};
+
+export default CenterBoards;
diff --git a/FrontEnd/src/app/views/center/index.tsx b/FrontEnd/src/app/views/center/index.tsx
index bcf6ad6e..0a2abb2c 100644
--- a/FrontEnd/src/app/views/center/index.tsx
+++ b/FrontEnd/src/app/views/center/index.tsx
@@ -3,11 +3,10 @@ import { useHistory } from "react-router";
import { useTranslation } from "react-i18next";
import { Row, Container, Button, Col } from "react-bootstrap";
-import { useUser } from "@/services/user";
-import SearchInput from "../common/SearchInput";
+import { useUserLoggedIn } from "@/services/user";
-import BoardWithoutUser from "./BoardWithoutUser";
-import BoardWithUser from "./BoardWithUser";
+import SearchInput from "../common/SearchInput";
+import CenterBoards from "./CenterBoards";
import TimelineCreateDialog from "./TimelineCreateDialog";
const HomePage: React.FC = () => {
@@ -15,7 +14,7 @@ const HomePage: React.FC = () => {
const { t } = useTranslation();
- const user = useUser();
+ const user = useUserLoggedIn();
const [navText, setNavText] = React.useState<string>("");
@@ -48,13 +47,7 @@ const HomePage: React.FC = () => {
/>
</Col>
</Row>
- {(() => {
- if (user == null) {
- return <BoardWithoutUser />;
- } else {
- return <BoardWithUser user={user} />;
- }
- })()}
+ <CenterBoards />
</Container>
{dialog === "create" && (
<TimelineCreateDialog
diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index da39e09b..4b165427 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -69,7 +69,7 @@ const AppBar: React.FC = (_) => {
</Nav>
<Nav className="ml-auto md-mr-2">
{user != null ? (
- <LinkContainer to={`/users/${user.username}`}>
+ <LinkContainer to="/">
<UserAvatar
username={user.username}
className="avatar small rounded-circle bg-white cursor-pointer ml-auto"
diff --git a/FrontEnd/src/app/views/home/TimelineListView.tsx b/FrontEnd/src/app/views/home/TimelineListView.tsx
index 9c44a0c2..819e2322 100644
--- a/FrontEnd/src/app/views/home/TimelineListView.tsx
+++ b/FrontEnd/src/app/views/home/TimelineListView.tsx
@@ -20,8 +20,8 @@ const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
);
return (
- <div className="home-v2-timeline-list-item home-v2-timeline-list-item-timeline">
- <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 100">
+ <div className="home-timeline-list-item home-timeline-list-item-timeline">
+ <svg className="home-timeline-list-item-line" viewBox="0 0 120 100">
<path
d="M 80,50 m 0,-12 a 12 12 180 1 1 0,24 12 12 180 1 1 0,-24 z M 60,0 h 40 v 100 h -40 z"
fillRule="evenodd"
@@ -44,14 +44,14 @@ const TimelineListItem: React.FC<TimelineListItemProps> = ({ timeline }) => {
const TimelineListArrow: React.FC = () => {
return (
<div>
- <div className="home-v2-timeline-list-item">
- <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 60">
+ <div className="home-timeline-list-item">
+ <svg className="home-timeline-list-item-line" viewBox="0 0 120 60">
<path d="M 60,0 h 40 v 20 l -20,20 l -20,-20 z" fill="#007bff" />
</svg>
</div>
- <div className="home-v2-timeline-list-item">
+ <div className="home-timeline-list-item">
<svg
- className="home-v2-timeline-list-item-line home-v2-timeline-list-loading-head"
+ className="home-timeline-list-item-line home-timeline-list-loading-head"
viewBox="0 0 120 40"
>
<path
@@ -78,9 +78,9 @@ const TimelineListView: React.FC<TimelineListViewProps> = ({
const { t } = useTranslation();
return (
- <div className="home-v2-timeline-list">
- <div className="home-v2-timeline-list-item">
- <svg className="home-v2-timeline-list-item-line" viewBox="0 0 120 120">
+ <div className="home-timeline-list">
+ <div className="home-timeline-list-item">
+ <svg className="home-timeline-list-item-line" viewBox="0 0 120 120">
<path
d="M 0,20 Q 80,20 80,80 l 0,40"
stroke="#007bff"
diff --git a/FrontEnd/src/app/views/home/home.sass b/FrontEnd/src/app/views/home/home.sass
index 56049994..b4cda586 100644
--- a/FrontEnd/src/app/views/home/home.sass
+++ b/FrontEnd/src/app/views/home/home.sass
@@ -1,23 +1,23 @@
-.home-v2-timeline-list-item
+.home-timeline-list-item
display: flex
align-items: center
-.home-v2-timeline-list-item-timeline
+.home-timeline-list-item-timeline
transition: background 0.8s
- animation: 0.8s home-v2-timeline-list-item-timeline-enter
+ animation: 0.8s home-timeline-list-item-timeline-enter
&:hover
background: $gray-200
-@keyframes home-v2-timeline-list-item-timeline-enter
+@keyframes home-timeline-list-item-timeline-enter
from
transform: translate(-100%,0)
opacity: 0
-.home-v2-timeline-list-item-line
+.home-timeline-list-item-line
width: 80px
flex-shrink: 0
-@keyframes home-v2-timeline-list-loading-head-animation
+@keyframes home-timeline-list-loading-head-animation
from
transform: translate(0,-30px)
opacity: 1
@@ -25,5 +25,5 @@
to
opacity: 0
-.home-v2-timeline-list-loading-head
- animation: 1s infinite home-v2-timeline-list-loading-head-animation
+.home-timeline-list-loading-head
+ animation: 1s infinite home-timeline-list-loading-head-animation
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 21:10:25 +0000