add context menu to guild icons

spacebarchat · Aug 31, 2023 · 1605f82 · 1605f82
1 parent 7b9c6dc
commit 1605f82
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/src/components/GuildItem.tsx b/src/components/GuildItem.tsx
@@ -1,14 +1,18 @@
+import { useModals } from "@mattjennings/react-modal-stack";
 import { CDNRoutes, ChannelType, ImageFormat } from "@spacebarchat/spacebar-api-types/v9";
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import { ContextMenuContext } from "../contexts/ContextMenuContext";
 import { useAppStore } from "../stores/AppStore";
 import REST from "../utils/REST";
 import Container from "./Container";
+import { IContextMenuItem } from "./ContextMenuItem";
 import GuildSidebarListItem from "./GuildSidebarListItem";
 import SidebarPill, { PillType } from "./SidebarPill";
 import Tooltip from "./Tooltip";
+import CreateInviteModal from "./modals/CreateInviteModal";
 
 const Wrapper = styled(Container)<{ active?: boolean; hasImage?: boolean }>`
 	display: flex;
@@ -38,12 +42,35 @@ interface Props {
 function GuildItem(props: Props) {
 	const app = useAppStore();
 	const navigate = useNavigate();
+	const { openModal } = useModals();
+
 	const guild = app.guilds.get(props.guildId);
 	const [pillType, setPillType] = React.useState<PillType>("none");
 	const [isHovered, setHovered] = React.useState(false);
 
 	if (!guild) return null;
 
+	const contextMenu = React.useContext(ContextMenuContext);
+	const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([
+		{
+			index: 1,
+			label: "Copy Guild ID",
+			onClick: () => {
+				navigator.clipboard.writeText(guild.id);
+			},
+			iconProps: {
+				icon: "mdiIdentifier",
+			},
+		},
+		{
+			index: 0,
+			label: "Create Invite",
+			onClick: () => {
+				openModal(CreateInviteModal, { guild_id: guild.id });
+			},
+		},
+	]);
+
 	const doNavigate = () => {
 		const channel = guild.channels.mapped.find((x) => x.type !== ChannelType.GuildCategory);
 		navigate(`/channels/${props.guildId}${channel ? `/${channel.id}` : ""}`);
@@ -57,7 +84,18 @@ function GuildItem(props: Props) {
 	}, [props.active, isHovered]);
 
 	return (
-		<GuildSidebarListItem>
+		<GuildSidebarListItem
+			onContextMenu={(e) => {
+				e.preventDefault();
+				contextMenu.open({
+					position: {
+						x: e.pageX,
+						y: e.pageY,
+					},
+					items: contextMenuItems,
+				});
+			}}
+		>
 			<SidebarPill type={pillType} />
 			<Tooltip
 				title={guild.name.length > 18 ? guild.name.substring(0, 18) + "..." : guild.name}

diff --git a/src/components/modals/CreateInviteModal.tsx b/src/components/modals/CreateInviteModal.tsx
@@ -104,7 +104,7 @@ const InputWrapper = styled.div`
 `;
 
 interface InviteModalProps extends AnimatedModalProps {
-	channel_id: string;
+	channel_id?: string;
 	guild_id: string;
 }
 
@@ -131,7 +131,7 @@ function CreateInviteModal(props: InviteModalProps) {
 	const [inviteExpiresAt, setInviteExpiresAt] = React.useState<Date | null>(null);
 
 	const guild = app.guilds.get(props.guild_id);
-	const channel = guild?.channels.get(props.channel_id) ?? guild?.channels.getAll()[0];
+	const channel = props.channel_id ? guild?.channels.get(props.channel_id) : guild?.channels.getAll()[0];
 
 	if (!guild || !channel) {
 		closeModal();