party-template/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 isMehrzahl = partyContext.self.grammatical_gender === "d";
    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>
                    wir laden {isMehrzahl ? 'euch' : 'dich'} am <strong>Freitag, den 19. Dezember</strong> herzlich ein, mit uns zu feiern!
                </p>
                <p>
                    Ab <strong>19:00</strong> veranstalten wir nämlich wieder unsere alljährliche Weihnachtsparty!
                </p>
                <p>
                    Wir würden uns sehr freuen, wenn auch {isMehrzahl ? 'ihr' : 'du'}, {dear} {name}, {isMehrzahl ? 'dabei seid.' : 'dabei bist :)'} 
                </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;19. Dezember, ab 19:00</strong>.  Bitte kommt nicht all zu spät.
                </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 (Iona, 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. Falls du ein Instrument spielst, bring es auch gerne mit.
                </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 auch sehr gerne Plätzchen, Weihnachtsdeko oder Ähnliches mitbringen.
                </p>
                <p>
                    Falls du ansonsten Wünsche oder Anregungen für einen gelungenen Abend hast, teil uns diese gerne mit!
                </p>

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