From 645a88e7e35d15cec6106709c42b071bec045e0d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 2 Aug 2023 02:52:07 +0800
Subject: ...

---
 .../src/migrating/center/TimelineCreateDialog.tsx  | 57 ++++++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 FrontEnd/src/migrating/center/TimelineCreateDialog.tsx

(limited to 'FrontEnd/src/migrating/center/TimelineCreateDialog.tsx')

diff --git a/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx b/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx
new file mode 100644
index 00000000..63742936
--- /dev/null
+++ b/FrontEnd/src/migrating/center/TimelineCreateDialog.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+
+import { validateTimelineName } from "@/services/timeline";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+
+import OperationDialog from "../common/dialog/OperationDialog";
+import { useUserLoggedIn } from "@/services/user";
+
+interface TimelineCreateDialogProps {
+  open: boolean;
+  close: () => void;
+}
+
+const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
+  const navigate = useNavigate();
+
+  const user = useUserLoggedIn();
+
+  return (
+    <OperationDialog
+      open={props.open}
+      onClose={props.close}
+      themeColor="success"
+      title="home.createDialog.title"
+      inputScheme={
+        [
+          {
+            type: "text",
+            label: "home.createDialog.name",
+            helperText: "home.createDialog.nameFormat",
+          },
+        ] as const
+      }
+      inputValidator={([name]) => {
+        if (name.length === 0) {
+          return { 0: "home.createDialog.noEmpty" };
+        } else if (name.length > 26) {
+          return { 0: "home.createDialog.tooLong" };
+        } else if (!validateTimelineName(name)) {
+          return { 0: "home.createDialog.badFormat" };
+        } else {
+          return null;
+        }
+      }}
+      onProcess={([name]): Promise<HttpTimelineInfo> =>
+        getHttpTimelineClient().postTimeline({ name })
+      }
+      onSuccessAndClose={(timeline: HttpTimelineInfo) => {
+        navigate(`${user.username}/${timeline.nameV2}`);
+      }}
+      failurePrompt={(e) => `${e as string}`}
+    />
+  );
+};
+
+export default TimelineCreateDialog;
-- 
cgit v1.2.3

