...

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