refactor: Refactor timeline card.

5 files changed, 98 insertions, 120 deletions

diff --git a/FrontEnd/src/app/views/timeline/TimelineCard.tsx b/FrontEnd/src/app/views/timeline/TimelineCard.tsx
new file mode 100644
index 00000000..a777cbbd
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline/TimelineCard.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+
+import TimelinePageCardTemplate, {
+  TimelineCardTemplateProps,
+} from "../timeline-common/TimelinePageCardTemplate";
+import { TimelinePageCardProps } from "../timeline-common/TimelinePageTemplate";
+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="text-primary d-inline-block align-middle">
+              {timeline.title}
+              <small className="ml-3 text-secondary">{timeline.name}</small>
+            </h3>
+            <div className="align-middle">
+              <UserAvatar
+                username={timeline.owner.username}
+                className="avatar small rounded-circle mr-3"
+              />
+              {timeline.owner.nickname}
+              <small className="ml-3 text-secondary">
+                @{timeline.owner.username}
+              </small>
+            </div>
+          </>
+        }
+        manageArea={((): TimelineCardTemplateProps["manageArea"] => {
+          if (!timeline.manageable) {
+            return { type: "member" };
+          } else {
+            return {
+              type: "manage",
+              items: [
+                {
+                  type: "button",
+                  text: "timeline.manageItem.property",
+                  onClick: () => setDialog("property"),
+                },
+                {
+                  type: "button",
+                  onClick: () => setDialog("member"),
+                  text: "timeline.manageItem.member",
+                },
+                { type: "divider" },
+                {
+                  type: "button",
+                  onClick: () => setDialog("delete"),
+                  color: "danger",
+                  text: "timeline.manageItem.delete",
+                },
+              ],
+            };
+          }
+        })()}
+        dialog={dialog}
+        setDialog={setDialog}
+        {...props}
+      />
+      {(() => {
+        if (dialog === "delete") {
+          return (
+            <TimelineDeleteDialog
+              timeline={timeline}
+              open
+              close={() => setDialog(null)}
+            />
+          );
+        }
+      })()}
+    </>
+  );
+};
+
+export default TimelineCard;
diff --git a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
index f472c16a..dbca62ca 100644
--- a/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
+++ b/FrontEnd/src/app/views/timeline/TimelineDeleteDialog.tsx
@@ -2,20 +2,20 @@ import React from "react";
 import { useHistory } from "react-router";
 import { Trans } from "react-i18next";
 
-import { getHttpTimelineClient } from "@/http/timeline";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
 
 import OperationDialog from "../common/OperationDialog";
 
 interface TimelineDeleteDialog {
+  timeline: HttpTimelineInfo;
   open: boolean;
-  name: string;
   close: () => void;
 }
 
 const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
   const history = useHistory();
 
-  const { name } = props;
+  const { timeline } = props;
 
   return (
     <OperationDialog
@@ -36,14 +36,14 @@ const TimelineDeleteDialog: React.FC<TimelineDeleteDialog> = (props) => {
         },
       ]}
       inputValidator={([value]) => {
-        if (value !== name) {
+        if (value !== timeline.name) {
           return { 0: "timeline.deleteDialog.notMatch" };
         } else {
           return null;
         }
       }}
       onProcess={() => {
-        return getHttpTimelineClient().deleteTimeline(name);
+        return getHttpTimelineClient().deleteTimeline(timeline.name);
       }}
       onSuccessAndClose={() => {
         history.replace("/");
diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
deleted file mode 100644
index 63da6f3c..00000000
--- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from "react";
-
-import TimelineCardTemplate, {
-  TimelineCardTemplateProps,
-} from "../timeline-common/TimelineCardTemplate";
-import { TimelineCardComponentProps } from "../timeline-common/TimelinePageTemplateUI";
-import UserAvatar from "../common/user/UserAvatar";
-
-export type OrdinaryTimelineManageItem = "delete";
-
-export type TimelineInfoCardProps = TimelineCardComponentProps<OrdinaryTimelineManageItem>;
-
-const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => {
-  const { timeline, operations } = props;
-  const { onManage, onMember } = operations;
-
-  return (
-    <TimelineCardTemplate
-      infoArea={
-        <>
-          <h3 className="text-primary d-inline-block align-middle">
-            {timeline.title}
-            <small className="ml-3 text-secondary">{timeline.name}</small>
-          </h3>
-          <div className="align-middle">
-            <UserAvatar
-              username={timeline.owner.username}
-              className="avatar small rounded-circle mr-3"
-            />
-            {timeline.owner.nickname}
-            <small className="ml-3 text-secondary">
-              @{timeline.owner.username}
-            </small>
-          </div>
-        </>
-      }
-      manageArea={((): TimelineCardTemplateProps["manageArea"] => {
-        if (onManage == null) {
-          return { type: "member", onMember };
-        } else {
-          return {
-            type: "manage",
-            items: [
-              {
-                type: "button",
-                text: "timeline.manageItem.property",
-                onClick: () => onManage("property"),
-              },
-              {
-                type: "button",
-                onClick: onMember,
-                text: "timeline.manageItem.member",
-              },
-              { type: "divider" },
-              {
-                type: "button",
-                onClick: () => onManage("delete"),
-                color: "danger",
-                text: "timeline.manageItem.delete",
-              },
-            ],
-          };
-        }
-      })()}
-      {...props}
-    />
-  );
-};
-
-export default TimelineInfoCard;
diff --git a/FrontEnd/src/app/views/timeline/TimelinePageUI.tsx b/FrontEnd/src/app/views/timeline/TimelinePageUI.tsx
deleted file mode 100644
index 67ea699e..00000000
--- a/FrontEnd/src/app/views/timeline/TimelinePageUI.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-
-import TimelinePageTemplateUI, {
-  TimelinePageTemplateUIProps,
-} from "../timeline-common/TimelinePageTemplateUI";
-
-import TimelineInfoCard, {
-  OrdinaryTimelineManageItem,
-} from "./TimelineInfoCard";
-
-export type TimelinePageUIProps = Omit<
-  TimelinePageTemplateUIProps<OrdinaryTimelineManageItem>,
-  "CardComponent"
->;
-
-const TimelinePageUI: React.FC<TimelinePageUIProps> = (props) => {
-  return <TimelinePageTemplateUI {...props} CardComponent={TimelineInfoCard} />;
-};
-
-export default TimelinePageUI;
diff --git a/FrontEnd/src/app/views/timeline/index.tsx b/FrontEnd/src/app/views/timeline/index.tsx
index 8048dd12..c5bfd7ab 100644
--- a/FrontEnd/src/app/views/timeline/index.tsx
+++ b/FrontEnd/src/app/views/timeline/index.tsx
@@ -2,38 +2,21 @@ import React from "react";
 import { useParams } from "react-router";
 
 import TimelinePageTemplate from "../timeline-common/TimelinePageTemplate";
-
-import TimelinePageUI from "./TimelinePageUI";
-import { OrdinaryTimelineManageItem } from "./TimelineInfoCard";
-import TimelineDeleteDialog from "./TimelineDeleteDialog";
+import TimelineCard from "./TimelineCard";
 
 const TimelinePage: React.FC = () => {
   const { name } = useParams<{ name: string }>();
 
-  const [dialog, setDialog] = React.useState<OrdinaryTimelineManageItem | null>(
-    null
-  );
   const [reloadKey, setReloadKey] = React.useState<number>(0);
 
-  let dialogElement: React.ReactElement | undefined;
-  if (dialog === "delete") {
-    dialogElement = (
-      <TimelineDeleteDialog open close={() => setDialog(null)} name={name} />
-    );
-  }
-
   return (
-    <>
-      <TimelinePageTemplate
-        name={name}
-        UiComponent={TimelinePageUI}
-        onManage={(item) => setDialog(item)}
-        notFoundI18nKey="timeline.timelineNotExist"
-        reloadKey={reloadKey}
-        onReload={() => setReloadKey(reloadKey + 1)}
-      />
-      {dialogElement}
-    </>
+    <TimelinePageTemplate
+      timelineName={name}
+      notFoundI18nKey="timeline.timelineNotExist"
+      reloadKey={reloadKey}
+      CardComponent={TimelineCard}
+      onReload={() => setReloadKey(reloadKey + 1)}
+    />
   );
 };