170 lines
4.3 KiB
JavaScript
170 lines
4.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import TextInput from "../TextInput";
|
|
import SubmitInput from "../SubmitInput";
|
|
import TextAreaInput from "../TextAreaInput";
|
|
import "../../App.css";
|
|
|
|
function Home() {
|
|
const [currentTime, setCurrentTime] = useState(0);
|
|
|
|
const [state, setState] = useState({
|
|
senderGender: "",
|
|
senderPrename: "",
|
|
senderSurname: "",
|
|
senderStreet: "",
|
|
senderHouse: "",
|
|
senderPlz: "",
|
|
senderPlace: "",
|
|
receiverGender: "",
|
|
receiverPrename: "",
|
|
receiverSurname: "",
|
|
receiverStreet: "",
|
|
receiverHouse: "",
|
|
receiverPlz: "",
|
|
receiverPlace: "",
|
|
subject: "",
|
|
message: "",
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
const value = e.target.value;
|
|
setState({
|
|
...state,
|
|
[e.target.name]: value,
|
|
});
|
|
};
|
|
|
|
const onSubmitClick = (e) => {
|
|
e.preventDefault();
|
|
let opts = {
|
|
state: state
|
|
};
|
|
fetch("api/generate-letter", {
|
|
method: "post",
|
|
body: JSON.stringify(opts),
|
|
}).then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("An error occured");
|
|
}
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetch("/time")
|
|
.then((res) => res.json())
|
|
.then((data) => {
|
|
setCurrentTime(data.time);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<div className="App">
|
|
<form onSubmit={onSubmitClick}>
|
|
<div className="letter-adresses">
|
|
<div className="adress-sender">
|
|
<h2>Absender</h2>
|
|
<TextInput
|
|
label="Geschlecht"
|
|
name="senderGender"
|
|
placeholder="Frau"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Vorname"
|
|
name="senderPrename"
|
|
placeholder="Max"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Nachname"
|
|
name="senderSurname"
|
|
placeholder="Muster"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Strasse"
|
|
name="senderStreet"
|
|
placeholder="Musterstrasse"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Hausnummer"
|
|
name="senderHouse"
|
|
placeholder="12"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="PLZ"
|
|
name="senderPlz"
|
|
placeholder="1234"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Ort"
|
|
name="senderPlace"
|
|
placeholder="Musterhausen"
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<div className="adress-receiver">
|
|
<h2>Empfänger</h2>
|
|
<TextInput
|
|
label="Geschlecht"
|
|
name="receiverGender"
|
|
placeholder="Frau"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Vorname"
|
|
name="receiverPrename"
|
|
placeholder="Max"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Nachname"
|
|
name="receiverSurname"
|
|
placeholder="Muster"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Strasse"
|
|
name="receiverStreet"
|
|
placeholder="Musterstrasse"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Hausnummer"
|
|
name="receiverHouse"
|
|
placeholder="12"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="PLZ"
|
|
name="receiverPlz"
|
|
placeholder="1234"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextInput
|
|
label="Ort"
|
|
name="receiverPlace"
|
|
placeholder="Musterhausen"
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<h2>Nachricht</h2>
|
|
<TextInput
|
|
label="Betreff"
|
|
name="subject"
|
|
placeholder="Betreff"
|
|
onChange={handleChange}
|
|
/>
|
|
<TextAreaInput name="message" onChange={handleChange} />
|
|
<SubmitInput value="Brief generieren" />
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Home;
|