Merge branch 'main' of https://git.leafbla.de/partypages/party-template

src/PartyContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react';
 import { getPartyStatusRequest, getSelfStatusRequest, parseURI } from './partyApi';
 import './PartyPage.css';
 
@@ -20,11 +20,16 @@ export type PartyStatus = {
 export type SelfStatus = {
     token: string,
     name: string,
-    coming: "yes" | "no" | "maybe",
+    coming: "yes" | "no" | "maybe" | null,
     "grammatical_gender": "m" | "f" | "d",
     extra?: SelfStatusExtraData,
 }
 
+export type UpdatableSelfStatus = {
+    coming?: "yes" | "no" | "maybe" | null,
+    extra?: SelfStatusExtraData,
+}
+
 export type APIEndPoint = { partyName: string, token: string };
 
 // Adapt this type to your desires
@@ -43,18 +48,17 @@ export const PartyContextProvider: React.FC<{ children: React.ReactNode }> = (pr
         return p;
     }, []);
 
-    const loadData = async () => {
+    const loadData = useCallback(async () => {
         if (partyContext !== undefined) return;
         const selfStatus = await getSelfStatusRequest(apiEndpoint);
         const partyStatus = await getPartyStatusRequest(apiEndpoint);
         const ctx = { party: partyStatus, self: selfStatus };
         setPartyContext(ctx);
-    };
+    }, [apiEndpoint, partyContext]);
 
     useEffect(() => {
         loadData();
-        // eslint-disable-next-line
-    }, [apiEndpoint]);
+    }, [apiEndpoint, loadData]);
 
     return partyContext ?
         <PartyContext.Provider value={partyContext}>

src/partyApi.ts

@@ -1,4 +1,4 @@
-import { APIEndPoint, PartyStatus, SelfStatus } from "./PartyContext";
+import { APIEndPoint, PartyStatus, SelfStatus, UpdatableSelfStatus } from "./PartyContext";
 
 export const parseURI = (uri: string): APIEndPoint | undefined => {
     const x = uri.match(/https?:\/\/(?<partyName>\w+)\.(?<host>.+)\/(?<token>.+)/);
@@ -22,7 +22,14 @@ export const getSelfStatusRequest = async (apiEndpoint: APIEndPoint): Promise<Se
 
 export const getPartyStatusRequest = async (apiEndpoint: APIEndPoint): Promise<PartyStatus> => {
     const result = await fetch(`${apiUrl(apiEndpoint)}/status`);
-    if (!result.ok) throw new Error("Error sending getSelfRequest");
+    if (!result.ok) throw new Error("Error sending getPartyRequest");
     const data = await result.json();
     return data as PartyStatus;
 };
+
+export const modifySelfRequest = async (apiEndpoint: APIEndPoint, payload: UpdatableSelfStatus): Promise<SelfStatus> => {
+    const result = await fetch(`${apiUrl(apiEndpoint)}/me`, { method: "PATCH", body: JSON.stringify(payload), headers: { "Content-Type": "application/json" } });
+    if (!result.ok) throw new Error("Error sending modifySelfRequest");
+    const data = await result.json();
+    return data as SelfStatus;
+};