4 files changed, 152 insertions, 0 deletions
diff --git a/FrontEnd/src/views/timeline/TimelineCard.tsx b/FrontEnd/src/views/timeline/TimelineCard.tsx
new file mode 100644
index 00000000..e031b565
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineCard.tsx
@@ -0,0 +1,74 @@
+import React from "react";
+
+import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate";
+import TimelinePageCardTemplate from "../timeline-common/TimelinePageCardTemplate";
+
+import UserAvatar from "../common/user/UserAvatar";
+import TimelineDeleteDialog from "./TimelineDeleteDialog";
+
+const TimelineCard: React.FC<TimelinePageCardProps> = (props) => {
+  const { timeline } = props;
+
+  const [dialog, setDialog] = React.useState<
+    "member" | "property" | "delete" | null
+  >(null);
+
+  return (
+    <>
+      <TimelinePageCardTemplate
+        infoArea={
+          <>
+            <h3 className="tl-color-primary d-inline-block align-middle">
+              {timeline.title}
+              <small className="ms-3 text-secondary">{timeline.name}</small>
+            </h3>
+            <div className="align-middle">
+              <UserAvatar
+                username={timeline.owner.username}
+                className="avatar small rounded-circle me-3"
+              />
+              {timeline.owner.nickname}
+              <small className="ms-3 text-secondary">
+                @{timeline.owner.username}
+              </small>
+            </div>
+          </>
+        }
+        manageItems={
+          timeline.manageable
+            ? [
+                {
+                  type: "button",
+                  text: "timeline.manageItem.property",
+                  onClick: () => setDialog("property"),
+                },
+                { type: "divider" },
+                {
+                  type: "button",
+                  onClick: () => setDialog("delete"),
+                  color: "danger",
+                  text: "timeline.manageItem.delete",
+                },
+              ]
+            : undefined
+        }
+        dialog={dialog}
+        setDialog={setDialog}
+        {...props}
+      />
+      {(() => {
+        if (dialog === "delete") {
+          return (
+            <TimelineDeleteDialog
+              timeline={timeline}
+              open
+              close={() => setDialog(null)}
+            />
+          );
+        }
+      })()}
+    </>
+  );
+};
+
+export default TimelineCard;
diff --git a/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
new file mode 100644
index 00000000..8821507d
--- /dev/null
+++ b/FrontEnd/src/views/timeline/TimelineDeleteDialog.tsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { useHistory } from "react-router";
+import { Trans } from "react-i18next";
+
+import { getHttpTimelineClient, HttpTimelineInfo } from "http/timeline";
+
+import OperationDialog from "../common/OperationDialog";
+
+interface TimelineDeleteDialog {
+  timeline: HttpTimelineInfo;
+  open: boolean;
+  close: () => void;
+}
+
+const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
+  const history = useHistory();
+
+  const { timeline } = props;
+
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      title="timeline.deleteDialog.title"
+      themeColor="danger"
+      inputPrompt={() => {
+        return (
+          <Trans i18nKey="timeline.deleteDialog.inputPrompt">
+            0<code className="mx-2">{{ name }}</code>2
+          </Trans>
+        );
+      }}
+      inputScheme={[
+        {
+          type: "text",
+        },
+      ]}
+      inputValidator={([value]) => {
+        if (value !== timeline.name) {
+          return { 0: "timeline.deleteDialog.notMatch" };
+        } else {
+          return null;
+        }
+      }}
+      onProcess={() => {
+        return getHttpTimelineClient().deleteTimeline(timeline.name);
+      }}
+      onSuccessAndClose={() => {
+        history.replace("/");
+      }}
+    />
+  );
+};
+
+export default TimelineDeleteDialog;
diff --git a/FrontEnd/src/views/timeline/index.tsx b/FrontEnd/src/views/timeline/index.tsx
new file mode 100644
index 00000000..c5bfd7ab
--- /dev/null
+++ b/FrontEnd/src/views/timeline/index.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { useParams } from "react-router";
+
+import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
+import TimelineCard from "./TimelineCard";
+
+const TimelinePage: React.FC = () => {
+  const { name } = useParams<{ name: string }>();
+
+  const [reloadKey, setReloadKey] = React.useState<number>(0);
+
+  return (
+    <TimelinePageTemplate
+      timelineName={name}
+      notFoundI18nKey="timeline.timelineNotExist"
+      reloadKey={reloadKey}
+      CardComponent={TimelineCard}
+      onReload={() => setReloadKey(reloadKey + 1)}
+    />
+  );
+};
+
+export default TimelinePage;
diff --git a/FrontEnd/src/views/timeline/timeline.sass b/FrontEnd/src/views/timeline/timeline.sass
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/FrontEnd/src/views/timeline/timeline.sass