# Dokumentation des Ablaufs und der Funktionsweise des Codes

## Einleitung / Problemstellung

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.

# Hauptteil

## Ablauf der Registrierung

### 1. Frontend-Komponente (SpendenForm)

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.

- Wenn der Benutzer **Abholung** auswählt, muss er zusätzlich eine **Abholadresse** und eine **Postleitzahl (PLZ)** eingeben.
- Bei der **Übergabe an der Geschäftsstelle** werden diese Felder ausgeblendet.

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.

#### Formik-Funktionalität:

- **`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.

### 2. Bestätigungsseite (ConfirmationPage)

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.

### 3. Backend-Komponente

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.

#### Ablauf im Backend:

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.

## Validierung und Fehlerbehandlung

- **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.

## Benutzerinteraktion / Ergebnis

- **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.