add group deletion

src/components/NewUI/GroupSettingsLink.tsx

@@ -1,7 +1,46 @@
 import { useCallback, useState } from 'react';
 import { IGroup } from './Group';
+import UILink from './UILink';
+import UIPressable from './UIPressable';
 import UISecondaryBox from './UISecondaryBox';
 
+function GroupSettings({ group }: { group: IGroup }) {
+	const [deletionSuccessful, setDeletionSuccessful] =
+		useState<boolean | null>(null);
+
+	const deleteGroup = useCallback(() => {
+		fetch('http://localhost:5000/api/groups/' + group.id, { method: 'delete' })
+			.then((res) => res.json())
+			.then(({ status }) => {
+				setDeletionSuccessful(status === 'success');
+			})
+			.catch(() => {
+				setDeletionSuccessful(false);
+			});
+	}, [group.id]);
+
+	return (
+		<UISecondaryBox>
+			<h1>Settings</h1>
+			{deletionSuccessful !== true && (
+				<UIPressable onClick={deleteGroup}>Delete Group</UIPressable>
+			)}
+			{deletionSuccessful !== null &&
+				(deletionSuccessful ? (
+					<span>
+						<b>{group.name}</b> was deleted.
+						<br />
+						<UILink href="/">Home</UILink>
+					</span>
+				) : (
+					<span>
+						For some reason, <b>{group.name}</b> was not successfully deleted.
+					</span>
+				))}
+		</UISecondaryBox>
+	);
+}
+
 export default function GroupSettingsLink({ group }: { group: IGroup }) {
 	const [open, setOpen] = useState(false);
 	const toggle = useCallback(() => {
@@ -20,11 +59,7 @@ export default function GroupSettingsLink({ group }: { group: IGroup }) {
 			>
 				Settings
 			</div>
-			{open && (
-				<UISecondaryBox>
-					<h1>Settings</h1>
-				</UISecondaryBox>
-			)}
+			{open && <GroupSettings group={group} />}
 		</div>
 	);
 }

src/components/NewUI/UIPressable.tsx

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode, useMemo } from 'react';
+
+const baseStyle: CSSProperties = {
+	textDecoration: 'none',
+	cursor: 'pointer',
+	userSelect: 'none',
+};
+
+export default function UIPressable({
+	onClick,
+	style,
+	children,
+}: {
+	onClick: () => void;
+	style?: CSSProperties;
+	children: ReactNode;
+}) {
+	const computedStyle = useMemo(() => {
+		return !style ? baseStyle : { ...baseStyle, ...style };
+	}, [style]);
+
+	return (
+		<div onClick={onClick} style={computedStyle}>
+			{children}
+		</div>
+	);
+}