removing peers

webui/src/PeerAvailableCard.scss

@@ -2,11 +2,4 @@
 
 .peerAvailableCard {
   @extend .peerCard;
-
-  @include card-with-actions;
-
-  .peerInfo {
-    flex-grow: 1;
-  }
-
 }

webui/src/PeerCardCommon.scss

@@ -6,4 +6,10 @@
   > * {
     padding: 0.5rem;
   }
+
+  @include card-with-actions;
+
+  .peerInfo {
+    flex-grow: 1;
+  }
 }

webui/src/PeerKnownCard.tsx

@@ -1,11 +1,30 @@
 import { TKnownPeerInfoTo } from "./api/dto";
 
 import "./PeerKnownCard.scss";
+import { useFetcher } from "react-router-dom";
 
 export interface TPeerKnownCardProps {
     peerInfo: TKnownPeerInfoTo;
 }
 
 export function PeerKnownCard({ peerInfo }: TPeerKnownCardProps) {
-    return <div className="peerKnownCard">{peerInfo.uuid}</div>;
+    const fetcher = useFetcher();
+
+    return (
+        <div className="peerKnownCard">
+            <div className={"peerInfo"}>
+                <span>UUID: </span>
+                <span>{peerInfo.uuid}</span>
+            </div>
+            <fetcher.Form
+                className="actions"
+                method="put"
+                action={"/home/peers"}
+            >
+                <button type="submit">remove</button>
+                <input name="intent" hidden={true} value={"remove_peer"} />
+                <input name="uuid" hidden={true} value={peerInfo.uuid} />
+            </fetcher.Form>
+        </div>
+    );
 }

webui/src/PeerStatePlumbing.ts

@@ -2,6 +2,7 @@ import {
     getAvailablePeers,
     getKnownPeers,
     putKnownPeer,
+    removeKnownPeer,
 } from "./api/PeerState";
 import { ActionFunctionArgs } from "react-router-dom";
 
@@ -12,13 +13,15 @@ export async function peerStateLoader() {
     };
 }
 
-export type PeerStateActionType = "add_peer" | unknown;
+export type PeerStateActionType = "add_peer" | "remove_peer" | unknown;
 
 export async function peerStateAction({ request }: ActionFunctionArgs) {
     const formData = await request.formData();
     const intent = formData.get("intent") as PeerStateActionType;
     if (intent === "add_peer") {
         return await putKnownPeer(formData.get("uuid") as string);
+    } else if (intent === "remove_peer") {
+        return await removeKnownPeer(formData.get("uuid") as string);
     } else {
         throw new Error("Malformed action: " + JSON.stringify(request));
     }

webui/src/api/PeerState.ts

@@ -30,3 +30,9 @@ export async function putKnownPeer(uuid: string): Promise<TNoContentToResp> {
         uuid,
     });
 }
+
+export async function removeKnownPeer(uuid: string): Promise<TNoContentToResp> {
+    return fetchJSON("/objects-manage/known-peers", "DELETE", NoContentToResp, {
+        uuid,
+    });
+}

webui/src/api/dto.ts

@@ -67,3 +67,7 @@ export type TKnownPeerInfoToResp = z.infer<typeof KnownPeerInfoToResp>;
 // KnownPeerPut
 export const KnownPeerPutTo = z.object({ uuid: z.string() });
 export type TKnownPeerPutTo = z.infer<typeof KnownPeerPutTo>;
+
+// KnownPeerDelete
+export const KnownPeerDeleteTo = z.object({ uuid: z.string() });
+export type TKnownPeerDeleteTo = z.infer<typeof KnownPeerDeleteTo>;