Feat/delete team (#192)

* FEAT/delete handler added * FEAT/delete alert added * REFACOTR/return undefined from get team * CHORE/todos added
AugustinSorel · Jul 1, 2024 · b4d28b3 · b4d28b3
1 parent 4d4b9b7
commit b4d28b3
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 27 deletions.
diff --git a/src/app/account/_components/userTeams.tsx b/src/app/account/_components/userTeams.tsx
@@ -38,7 +38,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
 import {
   Form,
   FormControl,
@@ -121,7 +120,7 @@ const Content = () => {
 
               {!isAuthor && <LeaveTeam team={team.team} />}
               {isAuthor && <RenameTeam team={team.team} />}
-              {isAuthor && <DeleteTeam />}
+              {isAuthor && <DeleteTeam team={team.team} />}
             </TeamItem>
           </ErrorBoundary>
         );
@@ -402,24 +401,80 @@ const LeaveTeam = ({ team }: { team: Team }) => {
   );
 };
 
-const DeleteTeam = () => {
+const DeleteTeam = ({ team }: { team: Team }) => {
+  const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false);
+  const utils = api.useUtils();
+
+  const deleteTeam = api.team.delete.useMutation({
+    onSuccess: () => {
+      setIsAlertDialogOpen(false);
+    },
+    onMutate: async (variables) => {
+      await utils.team.all.cancel();
+      await utils.team.get.cancel({ id: variables.id });
+
+      utils.team.all.setData(
+        undefined,
+        (teams) => teams?.filter((team) => team.teamId !== variables.id),
+      );
+
+      utils.team.get.setData({ id: variables.id }, undefined);
+    },
+    onSettled: (_data, _error, variables) => {
+      void utils.team.all.invalidate();
+      void utils.team.get.invalidate({ id: variables.id });
+    },
+  });
+
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="text-destructive/80 hover:bg-destructive/10 hover:text-destructive"
+    <AlertDialog open={isAlertDialogOpen} onOpenChange={setIsAlertDialogOpen}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <AlertDialogTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="text-destructive/80 hover:bg-destructive/10 hover:text-destructive"
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+              </Button>
+            </AlertDialogTrigger>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p className="capitalize">delete</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Do you really want to delete the {team.name}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete{" "}
+            {team.name} from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            className="space-x-2 bg-destructive text-destructive-foreground hover:bg-destructive/80"
+            disabled={deleteTeam.isPending}
+            onClick={(e) => {
+              e.preventDefault();
+              deleteTeam.mutate({
+                id: team.id,
+              });
+            }}
           >
-            <Trash2 className="h-3.5 w-3.5" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>delete</p>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+            {deleteTeam.isPending && <Loader />}
+            <span>Delete</span>
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
   );
 };
 

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -462,13 +462,13 @@ const FeaturesGridBackground = () => {
   );
 };
 
-//TODO: refactor onMutate cb
-//TODO: deleting team
 //TODO: add random facts to team page eg heavier lifter or most active in team
 //TODO: update header ui
 //TODO: add teams feat in main page
 //TODO: better sign in and join team email
 //TODO: install t3 env and change drizzle config
+//TODO: reanme exercise router update to rename
+//TODO: move graphs to @/compnent
 //TODO: fix filtering that is slow
 //TODO: test with low end network
 //TODO: add e2e tests

diff --git a/src/app/teams/[id]/page.tsx b/src/app/teams/[id]/page.tsx
@@ -21,6 +21,10 @@ const Page = async (unsafeProps: Props) => {
   const helpers = await createSSRHelper();
   const team = await helpers.team.get.fetch({ id: unsafeProps.params.id });
 
+  if (!team) {
+    return redirect("/dashboard");
+  }
+
   const session = await getServerAuthSession();
 
   const userInTeam = team?.usersToTeams.find(

diff --git a/src/server/api/routers/team.router.ts b/src/server/api/routers/team.router.ts
@@ -66,7 +66,7 @@ export const teamRouter = createTRPCRouter({
   get: protectedProcedure
     .input(teamSchema.pick({ id: true }))
     .query(async ({ ctx, input }) => {
-      const team = await ctx.db.query.teams.findFirst({
+      return await ctx.db.query.teams.findFirst({
         where: (teams, { eq }) => eq(teams.id, input.id),
         with: {
           usersToTeams: {
@@ -91,12 +91,6 @@ export const teamRouter = createTRPCRouter({
           },
         },
       });
-
-      if (!team) {
-        throw new TRPCError({ code: "NOT_FOUND", message: "team not found" });
-      }
-
-      return team;
     }),
 
   invite: protectedProcedure
@@ -193,4 +187,14 @@ export const teamRouter = createTRPCRouter({
 
       return team;
     }),
+
+  delete: protectedProcedure
+    .input(teamSchema.pick({ id: true }))
+    .mutation(async ({ ctx, input }) => {
+      return await ctx.db
+        .delete(teams)
+        .where(
+          and(eq(teams.id, input.id), eq(teams.authorId, ctx.session.user.id)),
+        );
+    }),
 });