add chain ui

src/features/add-chain/index.ts

@@ -0,0 +1 @@
+export { default as AddChainButton } from "./ui/AddChainButton";

src/features/add-chain/ui/AddChainButton.tsx

@@ -0,0 +1,103 @@
+import { useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { chainSchema } from "@/entities/chain/schema";
+import { upsertChain } from "@/entities/chain/api/upsert";
+import { useChainState } from "@/entities/chain/model";
+
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import { TextField } from "@mui/material";
+import { Button } from "@mui/material";
+
+interface AddChainButtonProps {
+  children?: React.ReactNode;
+}
+
+export default function AddChainButton({ children }: AddChainButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const navigate = useNavigate({ from: "/$namespace/$chainId" });
+  const addChain = useChainState((state) => state.addChain);
+
+  async function handleOnSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    setLoading(true);
+
+    const formData = new FormData(event.currentTarget);
+    const validatedData = chainSchema.parse(Object.fromEntries(formData));
+
+    const createdChain = await upsertChain(validatedData);
+    setLoading(false);
+
+    if (createdChain) {
+      addChain(createdChain);
+      setIsOpen(false);
+      navigate({ to: `/$namespace/${createdChain._id}` });
+      return;
+    }
+
+    setIsError(true);
+  }
+
+  return (
+    <>
+      <Button
+        onClick={() => setIsOpen(true)}
+        variant="outlined"
+        sx={{ width: "100%", fontWeight: "semibold" }}
+      >
+        {children}
+      </Button>
+
+      <Dialog
+        open={isOpen}
+        onClose={() => {
+          if (!loading) setIsOpen(false);
+        }}
+        PaperProps={{
+          component: "form",
+          onSubmit: handleOnSubmit,
+        }}
+      >
+        <DialogTitle className="select-none">
+          Введите название цепочки
+        </DialogTitle>
+
+        <DialogContent>
+          <TextField
+            error={isError}
+            className="select-none"
+            autoFocus
+            required
+            id="name"
+            name="name"
+            fullWidth
+            variant="standard"
+            label="Название"
+          />
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            color="error"
+            onClick={() => setIsOpen(false)}
+            disabled={loading}
+          >
+            Отменить
+          </Button>
+          <Button
+            variant="contained"
+            type="submit"
+            disabled={loading || isError}
+          >
+            Создать
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

src/widgets/sidebar/ui/Sidebar.tsx

@@ -2,7 +2,7 @@ import { useParams } from "@tanstack/react-router";
 import { useChainState } from "@/entities/chain/model";
 
 import List from "@/shared/ui/List";
-import { Button } from "@mui/material";
+import { AddChainButton } from "@/features/add-chain";
 
 export default function Sidebar() {
   const params = useParams({ strict: false });
@@ -26,12 +26,9 @@ export default function Sidebar() {
       </List.Root>
 
       <div className="mt-4">
-        <Button
+        <AddChainButton>
-          variant="outlined"
-          sx={{ width: "100%", fontWeight: "semibold" }}
-        >
           <span className="mr-2 text-2xl font-light">+</span>Добавить
-        </Button>
+        </AddChainButton>
       </div>
     </div>
   );