Implement feedback buttons

src/PartyPage.css

@@ -54,3 +54,32 @@ h2 {
 p {
   margin: 0.3em 0 0.3em 0;
 }
+
+.feedback {
+  line-height: 3em;
+  text-align: center;
+}
+
+input[type="radio"] {
+  display: none;
+}
+
+input[type="radio"]+label {
+  font-size: larger;
+  cursor: pointer;
+  padding: 0 1em 0 1em;
+  border-right: 0.1em solid white;
+}
+
+input[type="radio"]+label:hover {
+  text-shadow: 0 0 2em white;
+}
+
+input[type="radio"]+label:last-of-type {
+  border-right: none;
+}
+
+input[type="radio"]:checked+label {
+  color: #0f0;
+  text-shadow: 0 0 1em #0f0;
+}

src/PartyPage.tsx

@@ -1,10 +1,11 @@
 
-import React, { useContext } from 'react';
+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",
@@ -18,6 +19,21 @@ export const PartyPage: React.FC = () => {
     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
@@ -58,9 +74,12 @@ export const PartyPage: React.FC = () => {
                     Wir würden uns sehr freuen, wenn auch du, {dear} {name}, am Start wärst :)
                 </p>
                 <div className='feedback'>
-                    <button>Auf gehts</button>
-                    <button>Hmm vielleicht</button>
-                    <button>Nee sorry</button>
+                    <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