party-template/src/PartyPage.tsx

import React, { ChangeEvent, useContext, useRef, useState } from 'react';
import './PartyPage.css';
import { APIEndPoint, PartyContext } from './PartyContext';
// import MatrixBackground from './MatrixBackground';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown, faCalendarDays, faLocationDot } from '@fortawesome/free-solid-svg-icons';
import { modifySelfRequest, parseURI } from './partyApi';

const myDear = {
    "m": "lieber",
    "f": "liebe",
    "d": "liebes",
};

export const PartyPage: React.FC = () => {
    const partyContext = useContext(PartyContext);
    const dear = myDear[partyContext.self.grammatical_gender];
    const name = partyContext.self.name;
    const party = partyContext.party;
    const wannUndWoRef = useRef<HTMLDivElement>(null)
    const executeScroll = () => {
        wannUndWoRef.current!.scrollIntoView({ behavior: 'smooth' })
    }
    const [comingState, setComingState] = useState(partyContext.self.coming);

    // SAFETY: If this is undefined, the contextProvider already fails
    // eslint-disable-next-line no-restricted-globals
    const endpoint = parseURI(location.href) as APIEndPoint;

    const handleSelect = async (e: ChangeEvent) => {
        const value = (e.target as HTMLInputElement).value;
        if (value !== "yes" && value !== "no" && value !== "maybe") {
            throw new Error("received invalid value?");
        }
        const status = await modifySelfRequest(endpoint, { coming: value });
        setComingState(status.coming);
    }

    let coming: string;
    if (party.maybe_coming === 0) {
        // exact number
        if (party.definitely_coming === 0) {
            coming = "Bisher hat noch niemand zugesagt."
        } else if (party.definitely_coming === 1) {
            coming = "Bisher hat ein Gast zugesagt."
        } else {
            coming = `Es haben schon ${party.definitely_coming} Gäste zugesagt.`
        }
    } else {
        // inexact
        if (party.definitely_coming === 0 && party.maybe_coming === 1) {
            coming = "Bisher hat ein Gast vorläufig zugesagt."
        } else if (party.definitely_coming === 0) {
            coming = `Bisher haben ${party.maybe_coming} Gäste vorläufig zugesagt.`
        } else {
            // eslint-disable-next-line
            coming = `Nach den bisherigen Zusagen kommen ${party.definitely_coming} bis ${party.definitely_coming + party.maybe_coming} Gäste.`
        }
    }

    return <div className="App">
        <div className='container'>
            <div className='hero fullheight'>
                <div className='hero-outer'></div>
                <h1>Hallo {dear} {name},</h1>
                <p>
                    am <strong> 16. Dezember </strong> wird die Heizung der Universität das letzte Mal angeschaltet...
                    Diese Chance, Energie zu schnorren, wollen wir noch einmal nutzen.
                </p>
                <p>
                    Daher veranstalten wir ab <strong> 18:00 </strong> eine Weihnachtsparty! Wir rechnen mit ca. 20 Teilnehmern.
                </p>
                <p>
                    Wir würden uns sehr freuen, wenn auch du, {dear} {name}, dabei wärst :)
                </p>
                <div className='feedback'>
                    <input type="radio" id="coming-yes" name="coming" value="yes" checked={comingState === "yes"} onChange={handleSelect} />
                    <label htmlFor='coming-yes'>Ja</label>
                    <input type="radio" id="coming-maybe" name="coming" value="maybe" checked={comingState === "maybe"} onChange={handleSelect} />
                    <label htmlFor='coming-maybe'>Vielleicht</label>
                    <input type="radio" id="coming-no" name="coming" value="no" checked={comingState === "no"} onChange={handleSelect} />
                    <label htmlFor='coming-no'>Nein</label>
                </div>
                <div className='hero-outer' >
                    <span onClick={executeScroll}>
                        <p>Mehr Infos</p>
                        <FontAwesomeIcon icon={faAngleDown} />
                    </span>

                </div>
            </div>
            <div className='hero fullheight' ref={wannUndWoRef}>
                <h2>Wann und Wo?</h2>
                <p>
                    <FontAwesomeIcon icon={faCalendarDays} /> <strong>16. Dezember, ab 18:00</strong>.  Bitte komme nach Möglichkeit pünktlich.
                </p>
                <p>
                    <FontAwesomeIcon icon={faLocationDot} /> <strong>Gebäude E1 1, Raum 407</strong>
                </p>
                <h2>Was ist geplant?</h2>
                <p>
                    Wir werden gemeinsam einen weihnachtlichen Abend verbringen.

                    Dazu gibt es natürlich Glühwein, Kinderpunsch, und weitere Getränke.
                </p>
                <h2>Was gibt es zu Essen?</h2>
                <p>
                    Potluck, etc.
                    Bitte uns schreiben was mitgebracht wird.
                </p>
                <h2>Noch Programmpunkte</h2>
                <p>
                    Willst du etwas anbieten? Gerne!
                </p>
            </div>
        </div>
    </div>
};