aah/client/pages/Home.tsx
2023-08-07 18:36:33 -05:00

46 lines
1.2 KiB
TypeScript

import { FormEvent, useState } from "react";
import { Button, InputGroup, TextArea } from "@blueprintjs/core";
import { useNavigate } from "react-router";
import { useMutation, useQueryClient } from "react-query";
export default function Home() {
const navigate = useNavigate();
const queryClient = useQueryClient();
const [name, setName] = useState("");
const [content, setContent] = useState("");
const submitCreate = async (evt: FormEvent) => {
evt.stopPropagation();
evt.preventDefault();
const formData = new FormData();
formData.append("name", name);
formData.append("config", content);
const result = await fetch("/api/upload", {
method: "POST",
body: formData,
});
const { id } = await result.json();
queryClient.invalidateQueries("service/list");
navigate(`/service/${id}`);
};
return (
<>
<form onSubmit={submitCreate}>
<InputGroup
onChange={(evt) => setName(evt.target.value)}
placeholder="Service name..."
/>
<TextArea
onChange={(evt) => setContent(evt.target.value)}
placeholder="Service config (YML)..."
/>
<Button type="submit">Submit</Button>
</form>
</>
);
}