compiles locally and somewhat works locally

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -10,6 +13,7 @@
     "@types/node": "^16.11.64",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "fortawesome": "^0.0.1-security",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

src/PartyPage.tsx

@@ -1,27 +1,121 @@
 
-import React, { useContext } from 'react';
-import logo from './logo.svg';
+import React, { ChangeEvent, useContext, useState } from 'react';
 import './PartyPage.css';
-import { PartyContext } from './PartyContext';
+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);
-    
-    return <div className="App" >
-        <header className="App-header" >
-            <img src={logo} className="App-logo" alt="logo" />
-            <p>
-                Edit <code> src/PartyPage.tsx </code> and save to reload.
-            </p>
-            <a
-                className="App-link"
-                href="https://reactjs.org"
-                target="_blank"
-                rel="noopener noreferrer"
-            >
-                Learn React
-            </a>
-            <span>Hello {partyContext.self.name}</span>
-        </header>
+    const dear = myDear[partyContext.self.grammatical_gender];
+    const name = partyContext.self.name;
+    const party = partyContext.party;
+
+    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 {
+            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 ein letztes Mal nutzen.
+                </p>
+                <p>
+                    Das wollen wir (Kai, Dominic, Jesko) uns natürlich nicht entgehen lassen.
+                    Also veranstalten wir eine <strong> mega krasse LAN-Party. </strong>
+                    {coming}
+                </p>
+                <p>
+                    Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start 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'>
+                    Mehr Infos
+                    <FontAwesomeIcon icon={faAngleDown} />
+                </div>
+            </div>
+            <div className='hero fullheight'>
+                <h2>Wann und Wo?</h2>
+                <p>
+                    <FontAwesomeIcon icon={faCalendarDays} /> <strong>29. Oktober, 19:00</strong> bis <strong>31. Oktober</strong> irgendwann.
+                </p>
+                <p>
+                    <FontAwesomeIcon icon={faLocationDot} /> <a href="https://www.openstreetmap.org/way/213757745"><strong>Mainzer Str. 28</strong>, 66111 Saarbrücken</a>
+                </p>
+                <p>
+                    Ja, der 30. ist ein Sonntag.
+                    Am 1. 11. ist aber Allerheiligen, also bietet es sich an am 31. nen Brückentag zu machen.
+                    So hat man dann auch genug Zeit um nach den 25+ Stunden ordentlich auszuschlafen.
+                </p>
+                <h2>Alter ernsthaft 25 Stunden?</h2>
+                <p>
+                    Prinzipiell ja.
+                    Wer möchte kann sich aber gerne auf eine unserer beiden Couches zurückziehen,
+                    oder eine Luftmatratze mitbringen, oder vorher gehen, oder später dazukommen,
+                    oder zwischendurch nach Hause fahren...
+                </p>
+                <h2>Und was wenn ich Hunger bekomme?</h2>
+                <p>
+                    Wir werden ein Curry, Chili o.Ä. kochen.
+                    Bring aber auch gerne Snacks, Getränke, Knoblauchdip oder Kuchen mit :)
+                </p>
+                <h2>Aber wo soll ich mein Auto hinstellen?</h2>
+                <p>
+                    Am Waldhaus gibt es einen kostenlosen <a href="https://www.openstreetmap.org/way/111250120">Parkplatz</a>.
+                    Wenn du mit dem Auto kommst sag Bescheid, wir planen uns dort zu treffen und dann mit einem Auto auf Kai's Premium-Parkplatz direkt neben der WG fahren.
+                </p>
+            </div>
+        </div>
     </div>
 };

src/partyApi.ts

@@ -1,16 +1,21 @@
 import { APIEndPoint, PartyStatus, SelfStatus, UpdatableSelfStatus } from "./PartyContext";
 
 export const parseURI = (uri: string): APIEndPoint | undefined => {
-    const x = uri.match(/https?:\/\/(?<partyName>.+)\.party\.leafbla\.de\/(?<token>.+)/);
+    // const x = uri.match(/https?:\/\/(?<partyName>.+)\.party\.leafbla\.de\/(?<token>.+)/);
+    const x = uri.match(/https?:\/\/[^\/]+\/(?<token>.+)/);
     if (x === null || x.groups === undefined) return;
-    const partyName = x.groups["partyName"];
+    // const partyName = x.groups["partyName"];
+    const partyName = "xmas";
     const token = x.groups["token"];
     if (!partyName || !token) return;
     return { partyName, token };
 };
 
 const apiUrl = (apiEndPoint : APIEndPoint): string => {
-    return `https://party.leafbla.de/api/${apiEndPoint.partyName}/${apiEndPoint.token}`;
+    
+    let a =  `https://party.leafbla.de/api/${apiEndPoint.partyName}/${apiEndPoint.token}`;
+    console.log(a);
+    return a;
 };
 
 export const getSelfStatusRequest = async (apiEndpoint: APIEndPoint): Promise<SelfStatus> => {