1 files changed, 105 insertions, 81 deletions
diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx
index bbef835a..8afe440b 100644
--- a/FrontEnd/src/app/views/home/BoardWithUser.tsx
+++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx
@@ -3,98 +3,122 @@ import { Row, Col } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
 import { AuthUser } from "@/services/user";
-import { TimelineInfo } from "@/services/timeline";
+import { pushAlert } from "@/services/alert";
+
+import { getHttpHighlightClient } from "@/http/highlight";
 import { getHttpTimelineClient } from "@/http/timeline";
+import { getHttpBookmarkClient } from "@/http/bookmark";
 
 import TimelineBoard from "./TimelineBoard";
-import OfflineBoard from "./OfflineBoard";
 
 const BoardWithUser: React.FC<{ user: AuthUser }> = ({ user }) => {
   const { t } = useTranslation();
 
-  const [ownTimelines, setOwnTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
-  >("loading");
-  const [joinTimelines, setJoinTimelines] = React.useState<
-    TimelineInfo[] | "offline" | "loading"
-  >("loading");
-
-  React.useEffect(() => {
-    let subscribe = true;
-    if (ownTimelines === "loading") {
-      void getHttpTimelineClient()
-        .listTimeline({ relate: user.username, relateType: "own" })
-        .then(
-          (timelines) => {
-            if (subscribe) {
-              setOwnTimelines(timelines);
-            }
-          },
-          () => {
-            setOwnTimelines("offline");
-          }
-        );
-    }
-    return () => {
-      subscribe = false;
-    };
-  }, [user, ownTimelines]);
-
-  React.useEffect(() => {
-    let subscribe = true;
-    if (joinTimelines === "loading") {
-      void getHttpTimelineClient()
-        .listTimeline({ relate: user.username, relateType: "join" })
-        .then(
-          (timelines) => {
-            if (subscribe) {
-              setJoinTimelines(timelines);
-            }
-          },
-          () => {
-            setJoinTimelines("offline");
-          }
-        );
-    }
-    return () => {
-      subscribe = false;
-    };
-  }, [user, joinTimelines]);
-
   return (
-    <Row className="my-3 justify-content-center">
-      {ownTimelines === "offline" && joinTimelines === "offline" ? (
-        <Col sm="8" lg="6">
-          <OfflineBoard
-            onReload={() => {
-              setOwnTimelines("loading");
-              setJoinTimelines("loading");
+    <>
+      <Row className="my-3 justify-content-center">
+        <Col xs="12" md="6">
+          <TimelineBoard
+            title={t("home.bookmarkTimeline")}
+            load={() => getHttpBookmarkClient().list(user.token)}
+            editHandler={{
+              onDelete: (timeline) => {
+                return getHttpBookmarkClient()
+                  .delete(timeline, user.token)
+                  .catch((e) => {
+                    pushAlert({
+                      message: {
+                        type: "i18n",
+                        key: "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
+                    user.token
+                  )
+                  .catch((e) => {
+                    pushAlert({
+                      message: {
+                        type: "i18n",
+                        key: "home.message.moveBookmarkFail",
+                      },
+                      type: "danger",
+                    });
+                    throw e;
+                  });
+              },
             }}
           />
         </Col>
-      ) : (
-        <>
-          <Col sm="6" lg="5" className="mb-3 mb-sm-0">
-            <TimelineBoard
-              title={t("home.ownTimeline")}
-              timelines={ownTimelines}
-              onReload={() => {
-                setOwnTimelines("loading");
-              }}
-            />
-          </Col>
-          <Col sm="6" lg="5">
-            <TimelineBoard
-              title={t("home.joinTimeline")}
-              timelines={joinTimelines}
-              onReload={() => {
-                setJoinTimelines("loading");
-              }}
-            />
-          </Col>
-        </>
-      )}
-    </Row>
+        <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, user.token)
+                        .catch((e) => {
+                          pushAlert({
+                            message: {
+                              type: "i18n",
+                              key: "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
+                          user.token
+                        )
+                        .catch((e) => {
+                          pushAlert({
+                            message: {
+                              type: "i18n",
+                              key: "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>
+    </>
   );
 };