1 files changed, 131 insertions, 0 deletions
diff --git a/FrontEnd/src/migrating/center/CenterBoards.tsx b/FrontEnd/src/migrating/center/CenterBoards.tsx
new file mode 100644
index 00000000..f1c3fc6a
--- /dev/null
+++ b/FrontEnd/src/migrating/center/CenterBoards.tsx
@@ -0,0 +1,131 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import { highlightTimelineUsername } from "~src/common";
+
+import { pushAlert } from "~src/services/alert";
+import { useUserLoggedIn } from "~src/services/user";
+
+import { getHttpTimelineClient } from "~src/http/timeline";
+import { getHttpBookmarkClient } from "~src/http/bookmark";
+
+import TimelineBoard from "./TimelineBoard";
+
+const CenterBoards: React.FC = () => {
+  const { t } = useTranslation();
+
+  const user = useUserLoggedIn();
+
+  return (
+    <>
+      <div className="row justify-content-center">
+        <div className="col col-12 col-md-6">
+          <div className="row">
+            <div className="col col-12 my-2">
+              <TimelineBoard
+                title={t("home.bookmarkTimeline")}
+                load={() =>
+                  getHttpBookmarkClient()
+                    .list(user.username)
+                    .then((p) => p.items)
+                }
+                editHandler={{
+                  onDelete: (owner, timeline) => {
+                    return getHttpBookmarkClient()
+                      .delete(user.username, owner, timeline)
+                      .catch((e) => {
+                        pushAlert({
+                          message: "home.message.deleteBookmarkFail",
+                          type: "danger",
+                        });
+                        throw e;
+                      });
+                  },
+                  onMove: (owner, timeline, index, offset) => {
+                    return getHttpBookmarkClient()
+                      .move(
+                        user.username,
+                        owner,
+                        timeline,
+                        index + offset + 1 // +1 because backend contract: index starts at 1
+                      )
+                      .catch((e) => {
+                        pushAlert({
+                          message: "home.message.moveBookmarkFail",
+                          type: "danger",
+                        });
+                        throw e;
+                      })
+                      .then();
+                  },
+                }}
+              />
+            </div>
+            <div className="col col-12 my-2">
+              <TimelineBoard
+                title={t("home.highlightTimeline")}
+                load={() =>
+                  getHttpBookmarkClient()
+                    .list(highlightTimelineUsername)
+                    .then((p) => p.items)
+                }
+                editHandler={
+                  user.username === highlightTimelineUsername
+                    ? {
+                        onDelete: (owner, timeline) => {
+                          return getHttpBookmarkClient()
+                            .delete(highlightTimelineUsername, owner, timeline)
+                            .catch((e) => {
+                              pushAlert({
+                                message: "home.message.deleteHighlightFail",
+                                type: "danger",
+                              });
+                              throw e;
+                            });
+                        },
+                        onMove: (owner, timeline, index, offset) => {
+                          return getHttpBookmarkClient()
+                            .move(
+                              highlightTimelineUsername,
+                              owner,
+                              timeline,
+                              index + offset + 1 // +1 because backend contract: index starts at 1
+                            )
+                            .catch((e) => {
+                              pushAlert({
+                                message: "home.message.moveBookmarkFail",
+                                type: "danger",
+                              });
+                              throw e;
+                            })
+                            .then();
+                        },
+                      }
+                    : undefined
+                }
+              />
+            </div>
+          </div>
+        </div>
+        <div className="col-12 col-md-6 my-2">
+          <TimelineBoard
+            title={t("home.relatedTimeline")}
+            load={() =>
+              getHttpTimelineClient()
+                .listTimeline({ relate: user.username })
+                .then((l) =>
+                  l.map((t, index) => ({
+                    timelineOwner: t.owner.username,
+                    timelineName: t.nameV2,
+                    position: index + 1,
+                  }))
+                )
+            }
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CenterBoards;