Update party page

package.json

@@ -17,6 +17,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "serve": "webpack-dev-server --mode development --allowed-hosts all",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "webpack-cli": "^5.1.4"
   }
 }

src/PartyContext.tsx

@@ -4,12 +4,16 @@ import './PartyPage.css';
 
 export const PartyContext = createContext<PartyContextType>({
     party: { definitely_coming: 0, maybe_coming: 0 },
-    self: { token: "", name: "", coming: "yes", grammatical_gender: "m" }
+    self: { token: "", name: "", coming: "yes", grammatical_gender: "m" },
+    endpoint: { partyName: "test", token: "void" },
+    refresh: async () => {},
 });
 
 export type PartyContextType = {
     party: PartyStatus,
     self: SelfStatus,
+    endpoint: APIEndPoint,
+    refresh: () => Promise<void>,
 }
 
 export type PartyStatus = {
@@ -52,7 +56,12 @@ export const PartyContextProvider: React.FC<{ children: React.ReactNode }> = (pr
         if (partyContext !== undefined) return;
         const selfStatus = await getSelfStatusRequest(apiEndpoint);
         const partyStatus = await getPartyStatusRequest(apiEndpoint);
-        const ctx = { party: partyStatus, self: selfStatus };
+        const refresh = async () => {
+            const selfStatus = await getSelfStatusRequest(apiEndpoint);
+            const partyStatus = await getPartyStatusRequest(apiEndpoint);
+            setPartyContext({party: partyStatus, self: selfStatus, endpoint: apiEndpoint, refresh: refresh});
+        };
+        const ctx: PartyContextType = { party: partyStatus, self: selfStatus, endpoint: apiEndpoint, refresh };
         setPartyContext(ctx);
     }, [apiEndpoint, partyContext]);
 

src/PartyPage.css

@@ -42,3 +42,15 @@
     transform: rotate(360deg);
   }
 }
+
+body {
+  background-image: url("https://media.istockphoto.com/id/1037003086/photo/a-hairy-back.jpg?s=612x612&w=0&k=20&c=EO8hrgM2cXyOi0ZCkDjMBapbgX1_yEVW03tWVr738Ts=");
+  background-size: cover;
+  transition: transform 120s ease-in;
+  transform: translate(100vw, 0);
+}
+
+input:checked {
+  transition: transform 500ms ease-in-out;
+  transform: rotate(720deg);
+}

src/PartyPage.tsx

@@ -1,27 +1,56 @@
 
-import React, { useContext } from 'react';
-import logo from './logo.svg';
+import React, { useContext, useMemo } from 'react';
 import './PartyPage.css';
-import { PartyContext } from './PartyContext';
+import { PartyContext, PartyStatus, SelfStatus } from './PartyContext';
+import { modifySelfRequest } from './partyApi';
 
 export const PartyPage: React.FC = () => {
-    const partyContext = useContext(PartyContext);
+    const {party, self: me, endpoint, refresh} = useContext(PartyContext);
+    const setComing = async (value: SelfStatus["coming"]) => {
+        await modifySelfRequest(endpoint, { coming: value });
+        await refresh();
+    }
     
-    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>
+    return <div>
+        <p>
+            <h1>
+                Jesko`s Back!!!!
+            </h1>
+        </p>
+        <p>
+            <h3>
+                Hello {me.name},
+            </h3>
+        </p>
+        <p>
+            from the 1<sup>st<sup>th</sup></sup> of August, Jesko's back &mdash; finally!
+        </p>
+        <p>
+            We will celebrate his back on the 4<sup>st</sup> of August and <i>you</i> are invited!!!!
+        </p>
+        <p>
+            Come to <span style={{color: "blue", textDecoration: "underline", cursor: "pointer"}}>Mainzer Straße 28</span> from 19:00pm.
+        </p>
+        <p>
+            Please tell us, if you are coming:
+            <table>
+                <tr>
+                    <th>Coming</th>
+                    <th>Click</th>
+                </tr>
+                <tr>
+                    <td>Yes</td>
+                    <td><input type="checkbox" onClick={() =>setComing("yes")} checked={me.coming === "yes"} /></td>
+                </tr>
+                <tr>
+                    <td>No</td>
+                    <td><input type="checkbox" onClick={() =>setComing("no")} checked={me.coming === "no"} /></td>
+                </tr>
+                <tr>
+                    <td>Maybe</td>
+                    <td><input type="checkbox" onClick={() =>setComing("maybe")} checked={me.coming === "maybe" || !me.coming} /></td>
+                </tr>
+            </table>
+        </p>
     </div>
 };

src/partyApi.ts

@@ -55,4 +55,4 @@ const debugData: { me: SelfStatus, status: PartyStatus } = {
         definitely_coming: 10,
         maybe_coming: 5,
     }
-};
+};