feat: added group delete dialog, and formatting

src/app/_components/dashboard/groups/CreateGroupDialog.tsx

@@ -90,7 +90,7 @@ export default function CreateGroupDialog({
                         value={groupDescription}
                         placeholder="Your group description..."
                         onChange={(e) => 
-                            setGroupName(e.target.value)
+                            setGroupDescription(e.target.value)
                         }
                         required
                         className="w-full"

src/app/_components/dashboard/groups/DeleteGroupDialog.tsx

@@ -1,32 +1,89 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 
-import { Button } from "@radix-ui/themes";
+import { Button, Flex, Text, Dialog, TextField } from "@radix-ui/themes";
 import { useAtom } from "jotai";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
-import { userAtom } from "~/server/lib/stores";
-import * as Dialog from "@radix-ui/react-dialog";
+import { selectedGroupId, userAtom } from "~/server/lib/stores";
 import { api } from "~/trpc/react";
 import React from "react";
 import { FiTrash2 } from "react-icons/fi";
 
-export default function DeleteGroupDialog() {
+interface DeleteGroupProps {
+    refetch: () => void;
+    groupId: string;
+}
+
+export default function DeleteGroupDialog({ refetch, groupId }: DeleteGroupProps) {
     const [user, setUser] = useAtom(userAtom);
 
     const [dialogOpen, setDialogOpen] = useState(false);
-    const [addingDevice, setAddingDevice] = useState(false);
+    const [deletingGroup, setDeletingGroup] = useState(false);
 
     const [groupName, setGroupName] = useState("");
-    const [groupDescription, setGroupDescription] = useState("");
 
-    const groupQuery = api.device.list.useQuery({
-        userId: user?.id || "",
+    const { mutate, error } = api.group.read.useMutation({
+        onSuccess: (group) => {
+            setGroupName(group.name);
+            setDialogOpen(true);
+        },
+        onError: () => {
+            toast.error("Failed to get group!");
+
+            setGroupName(groupName);
+        },
+    });
+
+    const groupDeleteQuery = api.group.delete.useMutation({
+        onSuccess: () => {
+            toast.success(`${groupName} has been deleted!`);
+            setGroupName("");
+
+            setDeletingGroup(false);
+            setDialogOpen(false);
+            refetch();
+        },
+        onError: () => {
+            toast.error(`Failed to update ${groupName}`);
+
+            setDeletingGroup(false);
+            setDialogOpen(false);
+        }
     });
 
+    useEffect(() => {
+        if (dialogOpen) {
+            readGroup();
+        }
+    }, [dialogOpen]);
+
+    const deleteGroup = () => {
+        if (deletingGroup) return;
+        if (!user) {
+            setDialogOpen(false);
+            return toast.error("You must be logged in to delete a device!");
+        }
+
+        setDeletingGroup(true);
+
+        groupDeleteQuery.mutate({
+            id: groupId,
+            userId: user.id,
+        });
+    };
+
+    const readGroup = () => {
+        mutate({ id: groupId, userId: user!.id });
+    };
+
+    if (error) {
+        toast.error("Couldn't get the group!");
+    }
+
     return (
         <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
-            <Dialog.Trigger asChild onClick={() => setDialogOpen(!dialogOpen)}>
+            <Dialog.Trigger onClick={() => setDialogOpen(!dialogOpen)}>
                 <Button
                     variant="ghost"
                     color="red"
@@ -35,6 +92,40 @@ export default function DeleteGroupDialog() {
                     <FiTrash2 />
                 </Button>
             </Dialog.Trigger>
+            <Dialog.Content maxWidth={"400px"}>
+                <Dialog.Title align={"center"}>
+                    Delete Your Group
+                </Dialog.Title>
+
+                <div className="flex flex-col gap-2">
+                    <div className="flex flex-col text-center">
+                        <span className="text-red-400">
+                            This is a destructive action.
+                        </span>{" "}
+                        <span>
+                            All group data, including places and 
+                            connected members, &#40;not member data&#41; 
+                            will be deleted. Are you sure you want to delete this group?
+                        </span>
+                    </div>
+                    <div className="mt-2 flex items-center justify-between">
+                        <Button
+                            onClick={() => setDialogOpen(false)}
+                            variant="ghost"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={deleteGroup}
+                            disabled={deletingGroup}
+                            variant="solid"
+                            color="red"
+                        >
+                            Yes, I&apos;m sure
+                        </Button>
+                    </div>
+                </div>
+            </Dialog.Content>
         </Dialog.Root>
     );
 }

src/app/_components/dashboard/groups/EditGroupDialog.tsx

@@ -7,7 +7,6 @@ import { useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { userAtom } from "~/server/lib/stores";
-// import * as Dialog from "@radix-ui/react-dialog";
 import { api } from "~/trpc/react";
 import { RxPencil1 } from "react-icons/rx";
 import { FaCheck } from "react-icons/fa";

src/app/_components/dashboard/groups/GroupButtons.tsx

@@ -19,7 +19,9 @@ export default function GroupButtons({ groupId }: { groupId: string }) {
                     refetch={() => groupQuery.refetch()}
                     groupId={groupId}
                 />
-                <DeleteGroupDialog />
+                <DeleteGroupDialog 
+                    refetch={() => groupQuery.refetch()}
+                    groupId={groupId} />
             </div>
         </>
     );

src/app/_components/dashboard/groups/GroupRow.tsx

@@ -38,7 +38,7 @@ export default function GroupRow({
                             <LuCrown className="text text-amber-400" />
                         </Tooltip>
                     ) : // <LuCrown className="text text-transparent" />
-                    null}
+                        null}
                     {name}
                 </Table.RowHeaderCell>
                 <Table.Cell className="h-full">

src/server/api/routers/group.ts

@@ -247,13 +247,21 @@ export const groupRouter = createTRPCRouter({
         .input(
             z.object({
                 id: z.string(),
+                userId: z.string(),
                 // TODO: add ownerid security.
             }),
         )
         .mutation(async ({ ctx, input }) => {
             // TODO: AHHHH REMEMBER WE NEED TO PROTECT ALL THESE ENDPOINTS
             try {
+                await ctx.db.place.deleteMany({
+                    where: {
+                        groupId: input.id,
+                    },
+                });
+
                 await redis.del(`group:${input.id}`);
+                await redis.del(`user:${input.userId}:groups`);
 
                 return await ctx.db.group.delete({
                     where: {

src/styles/globals.css

@@ -16,14 +16,15 @@ html {
     scroll-snap-type: y mandatory;
   }
 
-  h1 {
+  /* h1 {
     font-size: 56px;
     font-weight: 700;
     letter-spacing: -3px;
     line-height: 1.2;
     text-align: center;
     margin: 100px 0;
-  }
+  } */ 
+/* gonna make modals without the padding for now */
 
   h2 {
     margin: 0;