74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { createPaste } from "../api/client";
|
|
|
|
const MAX_LENGTH = 100_000;
|
|
|
|
export default function HomePage() {
|
|
const [content, setContent] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const navigate = useNavigate();
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!content.trim()) return;
|
|
setLoading(true);
|
|
setError("");
|
|
try {
|
|
const result = await createPaste(content);
|
|
navigate(`/paste/${result.id}?token=${result.delete_token}`);
|
|
} catch {
|
|
setError("Fehler beim Erstellen des Pastes.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h1>Neuen Paste erstellen</h1>
|
|
<form onSubmit={handleSubmit}>
|
|
<textarea
|
|
value={content}
|
|
onChange={(e) => setContent(e.target.value)}
|
|
maxLength={MAX_LENGTH}
|
|
placeholder="Dein Text hier..."
|
|
style={{
|
|
width: "100%",
|
|
minHeight: 300,
|
|
fontFamily: "monospace",
|
|
fontSize: 14,
|
|
padding: "0.5rem",
|
|
border: "1px solid #ccc",
|
|
borderRadius: 4,
|
|
resize: "vertical",
|
|
boxSizing: "border-box",
|
|
}}
|
|
/>
|
|
<div style={{ marginTop: "0.5rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
|
|
<span style={{ color: "#888", fontSize: 14 }}>
|
|
{content.length.toLocaleString()} / {MAX_LENGTH.toLocaleString()} Zeichen
|
|
</span>
|
|
<button
|
|
type="submit"
|
|
disabled={loading || !content.trim()}
|
|
style={{
|
|
padding: "0.5rem 1.5rem",
|
|
backgroundColor: "#0066cc",
|
|
color: "white",
|
|
border: "none",
|
|
borderRadius: 4,
|
|
cursor: loading ? "default" : "pointer",
|
|
opacity: loading || !content.trim() ? 0.6 : 1,
|
|
}}
|
|
>
|
|
{loading ? "Erstelle..." : "Paste erstellen"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{error && <p style={{ color: "red" }}>{error}</p>}
|
|
</div>
|
|
);
|
|
}
|