xmas/src/PartyPage.tsx

import React, { ChangeEvent, useContext, useRef, useState } from 'react';
import './PartyPage.css';
import { APIEndPoint, PartyContext, PartyStatus } 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",
};

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

export const PartyPage: React.FC = () => {
    const partyContext = useContext(PartyContext);
    const dear = myDear[partyContext.self.grammatical_gender];
    const name = partyContext.self.name;
    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
    const endpoint = parseURI(window.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);
    }

    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...
                    Diesen letzten warmen Tag vor Weihnachten wollen wir gerne nutzen.
                </p>
                <p>
                    Daher veranstalten wir ab <strong> 18:00 </strong> eine Weihnachtsparty! 
                </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 className='hooverdam' 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>&nbsp;16. Dezember, ab 18:00</strong>.  Bitte komme nach Möglichkeit pünktlich.
                </p>
                <p>
                    <FontAwesomeIcon icon={faLocationDot} /> <strong>&nbsp;Gebäude E1 1, Raum 407</strong>, Universität des Saarlandes
                </p>
                <h2>Was ist geplant?</h2>
                <p>
                    Wir (Sebastian &amp; Simon) wollen uns mit euch auf Weihnachten einstimmen. 
                    Wir planen ein weihnachtliches Programm, mit Geschichten, Liedern, Essen, und der einen oder anderen Überraschung.  
                </p>
                <p>                   
                    Natürlich haben wir auch genügend Zeit, uns gemütlich bei einem Heißgetränk zu unterhalten. 
                </p>
                <h2>Was gibt es zu Essen?</h2>
                <p>
                    Wir planen ein Potluck-Event. Damit sollte für alle genug Essen dabei sein.

                    Getränke, insbesondere Glühwein, Kinderpunsch und ähnliches wird von uns organisiert.

                </p>
                <h2>Was soll ich mitbringen?</h2>
                <p>
                    Es wäre super, wenn du zum Potluck ein Gericht mitbringen kannst. Für Inspirationen kannst du uns natürlich gerne fragen, oder schon einmal <a href="https://www.tasteofhome.com/collection/vegetarian-potluck-recipes/">hier</a> vorbeischauen.
                    Bitte informiere uns kurz, was du gerne mitbringen würdest, damit wir besser kalkulieren können.    
                    Ansonsten darfst du sehr gerne Plätzchen, Weihnachtsdeko oder Ähnliches mitbringen.
                </p>
                <p>
                    Falls du ansonsten Wünsche oder Anregungen für einen gelungenen Abend hast, teil diese uns gerne mit!
                </p>

            </div>
        </div>
    </div>
};