Dieser Code beschreibt eine Anwendung für die **Registrierung von Kleiderspenden** mit einem Frontend, das in **React** entwickelt wurde, und einem Backend, das mit **Node.js/Express** läuft. Der Benutzer kann entweder eine Spende per **Abholung** oder durch **Übergabe an der Geschäftsstelle** registrieren. Nach erfolgreicher Registrierung wird der Benutzer auf eine **Bestätigungsseite** weitergeleitet, auf der er eine **JSON-Datei** mit den Details der Spende herunterladen kann. Im Backend wird die Spende außerdem als JSON-Datei auf dem Server gespeichert.
Die **`SpendenForm`** ist die zentrale Komponente für die Eingabe der Spendeninformationen. Sie enthält ein Formular, das vom Benutzer ausgefüllt werden muss. Abhängig von der **Lieferart** (Abholung oder Übergabe an der Geschäftsstelle) erscheinen unterschiedliche Eingabefelder.
Die Validierung der Eingaben erfolgt direkt im Formular durch die **Formik-Bibliothek**, die sicherstellt, dass alle erforderlichen Felder korrekt ausgefüllt sind, bevor die Daten abgeschickt werden.
- **`validate`**: Diese Funktion validiert die Benutzereingaben und stellt sicher, dass Felder wie Kleidungsart, Krisengebiet und Abholadresse korrekt ausgefüllt sind.
- **`onSubmit`**: Diese Funktion wird aufgerufen, wenn der Benutzer das Formular absendet. Die Daten werden an das Backend geschickt, und bei Erfolg wird der Benutzer auf eine **Bestätigungsseite** weitergeleitet.
Nach erfolgreicher Registrierung wird der Benutzer auf die **Bestätigungsseite** weitergeleitet, wo ihm die eingegebenen Spendeninformationen angezeigt werden.
- **Download der JSON-Datei**: Der Benutzer kann über einen Button die Bestätigung der Spende als JSON-Datei herunterladen. Diese Datei wird im Browser des Benutzers generiert und basiert auf den eingegebenen Daten.
- **Dynamische Dateinamenerstellung**: Abhängig von der Lieferart wird der Dateiname dynamisch erstellt. Bei einer Abholung wird die Abholadresse in den Dateinamen eingefügt, bei einer Übergabe an der Geschäftsstelle wird das Wort `uebergabe` verwendet.
Das Backend ist mit **Node.js/Express** realisiert und verarbeitet die vom Frontend gesendeten Daten. Es führt einige Validierungen durch und speichert die Spendeninformationen in einer **JSON-Datei** auf dem Server.
1.**Datenvalidierung**: Es wird geprüft, ob die PLZ im gleichen Gebiet liegt wie die Geschäftsstelle, wenn die Lieferart "Abholung" ist. Wenn dies nicht der Fall ist, wird ein Fehler zurückgegeben.
2.**Dateinamenerstellung**:
- **Abholung**: Der Dateiname basiert auf der Abholadresse, wobei Leerzeichen durch Unterstriche ersetzt werden.
- **Übergabe an der Geschäftsstelle**: Der Dateiname basiert auf dem **Erstellungsdatum und der Uhrzeit** im Format `YYYY-MM-DDTHH-mm-ss.json`.
3.**Speichern der Daten**: Die Spendeninformationen werden in eine **JSON-Datei** geschrieben und im Verzeichnis `./spenden` gespeichert.
- **Frontend**: Die Eingaben werden durch die **Formik-Bibliothek** validiert. Nur bei vollständigen und gültigen Eingaben wird das Formular abgeschickt.
- **Backend**: Das Backend validiert, ob die PLZ bei der Abholung im richtigen Bereich liegt und erstellt eine JSON-Datei auf dem Server. Es wird eine **Fehlerantwort** zurückgegeben, wenn ein Problem auftritt, wie z. B. eine falsche PLZ oder ein Fehler beim Speichern der Datei.
- **Erstregistrierung**: Der Benutzer gibt die Spendeninformationen ein, wählt die Lieferart und übermittelt das Formular.
- **Bestätigungsseite**: Nach erfolgreicher Registrierung wird die Bestätigung angezeigt, und der Benutzer kann die Spendeninformationen als **JSON-Datei** herunterladen.
