leave server functionality, context menu item visibility

src/components/ChannelHeader.tsx

@@ -1,3 +1,4 @@
+import { Routes } from "@spacebarchat/spacebar-api-types/v9";
 import React from "react";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
@@ -31,18 +32,21 @@ interface Props {
 	text: string;
 }
 
-async function ChannelHeader({ text }: Props) {
+function ChannelHeader({ text }: Props) {
 	const app = useAppStore();
 	const contextMenu = React.useContext(ContextMenuContext);
 	const { guildId } = useParams<{
 		guildId: string;
 	}>();
+	const guild = app.guilds.get(guildId!);
+
 	const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([
 		{
 			label: "Leave Server",
 			color: "var(--danger)",
-			onClick: () => {
+			onClick: async () => {
 				console.log("Leave server", guildId);
+				await app.rest.delete(Routes.userGuild(guildId!));
 			},
 			iconProps: {
 				icon: "mdiLocationExit",
@@ -52,6 +56,7 @@ async function ChannelHeader({ text }: Props) {
 				color: "var(--text)",
 				backgroundColor: "var(--danger)",
 			},
+			visible: guild?.ownerId !== app.account?.id,
 		},
 	]);
 

src/components/ChannelSidebar.tsx

@@ -28,7 +28,7 @@ function ChannelSidebar() {
 	return (
 		<Wrapper>
 			{/* TODO: replace with dm search if no guild */}
-			<ChannelHeader text={guild?.name ?? "Channel Header"} />
+			<ChannelHeader key={guildId} text={guild?.name ?? "Channel Header"} />
 			<ChannelList />
 			<UserPanel />
 		</Wrapper>

src/components/ContextMenu.tsx

@@ -42,9 +42,11 @@ function ContextMenu({ position, close, items, style }: Props) {
 				left: position.x,
 			}}
 		>
-			{items.map((item, index) => {
-				return <ContextMenuItem key={index} item={item} close={close} index={index} />;
-			})}
+			{items
+				.filter((a) => a.visible !== false)
+				.map((item, index) => {
+					return <ContextMenuItem key={index} item={item} close={close} index={index} />;
+				})}
 		</Container>
 	);
 }

src/components/ContextMenuItem.tsx

@@ -4,6 +4,7 @@ import Container from "./Container";
 import Icon, { IconProps } from "./Icon";
 
 export interface IContextMenuItem {
+	index?: number;
 	label: string;
 	color?: string;
 	onClick: React.MouseEventHandler<HTMLDivElement>;
@@ -12,6 +13,7 @@ export interface IContextMenuItem {
 		color?: string;
 		backgroundColor?: string;
 	};
+	visible?: boolean;
 }
 
 const ContextMenuContainer = styled(Container)`
@@ -47,8 +49,8 @@ function ContextMenuItem({ item, index, close }: Props) {
 	return (
 		<ContextMenuContainer
 			key={index}
-			onClick={(e) => {
-				item.onClick(e);
+			onClick={async (e) => {
+				await item.onClick(e);
 				close();
 			}}
 			onMouseEnter={() => setIsHovered(true)}

src/utils/REST.ts

@@ -134,4 +134,24 @@ export default class REST {
 				.catch(reject);
 		});
 	}
+
+	public async delete(
+		path: string,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		queryParams: Record<string, any> = {},
+	): Promise<void> {
+		return new Promise((resolve, reject) => {
+			const url = REST.makeAPIUrl(path, queryParams);
+			// this.logger.debug(`DELETE ${url}`);
+			return (
+				fetch(url, {
+					method: "DELETE",
+					headers: this.headers,
+				})
+					// .then((res) => res.json())
+					.then(() => resolve())
+					.catch(reject)
+			);
+		});
+	}
 }