Feat/387

src/app/api/teams/members/[id]/route.ts

@@ -6,23 +6,49 @@ export async function GET(
   request: Request,
   { params }: { params: { id: string } }
 ) {
-   const {id} = params;
-
-
-   if (!id) return new Response('Parameters missing!!',{status: 401});
-
-   const client = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
-
-   const teamInfo = await client.query(api.teams.getTeamById,{_id:id as Id<"teams">});
-
-   const memberDataPromises = teamInfo.teamMembers.map((mem:string) =>
+  const { id } = params;
+
+  if (!id) return new Response("Parameters missing!!", { status: 401 });
+
+  const client = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+
+  const teamInfo = await client.query(api.teams.getTeamById, {
+    _id: id as Id<"teams">,
+  });
+
+  const memberDataPromises = teamInfo.teamMembers.map((mem: string) =>
     client.query(api.user.getUser, { email: mem })
   );
 
   const results = await Promise.all(memberDataPromises);
 
   const memberData = results.flatMap((result) => result || []);
 
-  return Response.json({memberData});
+  return Response.json({ memberData });
+}
+
+export async function PUT(
+  request: Request,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+
+  const {email} = await request.json();
+
+  if (!id) return new Response("Parameters missing!!", { status: 401 });
+
+  const client = new ConvexHttpClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
+
+  const teamInfo = await client.query(api.teams.getTeamById,{_id:id as Id<"teams">});
+
+  if(!teamInfo.teamMembers.includes(email)) return new Response("Not the member of team!!", { status: 404 });
+
+  if(teamInfo.createdBy === email) return new Response("Owner of the team!!", { status: 404 });
+
+  const updatedTeamMembers = teamInfo.teamMembers.filter((writer: any) => writer !== email);
+
+  await client.mutation(api.teams.addMember, { _id: id as Id<"teams">, memberArray:updatedTeamMembers });
+
+  return new Response("Member removd!!", { status: 200 });
 
 }

src/app/dashboard/_components/SideNavTopSection.tsx

@@ -48,6 +48,8 @@ function SideNavTopSection({ user, setActiveTeamInfo }: any) {
   const [teamMembersData, setTeamData] = useState<any[]>([]);
   const [ActiveTeamMembers, setActiveTeamMembers] = useState<string[]>([]);
 
+  console.log(activeTeam)
+
   useEffect(() => {
     user && getTeamList();
   }, [user]);

src/components/shared/DeleteTeamMember.tsx

@@ -0,0 +1,113 @@
+"use client";
+import React, { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { Button } from "../ui/button";
+import { CheckCircle2, Trash2 } from "lucide-react";
+import axiosInstance from "@/config/AxiosInstance";
+import { deleteTeamMemberUrl } from "@/lib/API-URLs";
+import { useSelector } from "react-redux";
+import { RootState } from "@/app/store";
+import { useRouter } from "next/navigation";
+
+type Props = {
+  email: string;
+};
+
+export default function DeleteTeamMember({ email }: Props) {
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const router = useRouter();
+  const teamId = useSelector((state: RootState) => state.team.teamId);
+  const [isError,setIsError] = useState(false);
+  const [errorMsg, setErrorMsg] = useState("");
+
+  const DeleteHandler = async () => {
+    try {
+      axiosInstance.put(`${deleteTeamMemberUrl}/${teamId}`, { email })
+      .then((res)=>{
+        if(res.status === 200) setIsSubmitted(true);
+      }).catch((err)=>{
+        setIsError(true);
+        setErrorMsg(err.response.data)
+      })
+    } catch (err:any) {
+      setIsError(true);
+      setErrorMsg(err.response.data)
+    }
+  };
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <Button size={"icon"} className=" bg-red-600 hover:bg-red-700">
+          <Trash2 className="w-5 h-5" />
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        {!isSubmitted && !isError && (
+          <>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This action cannot be undone. This will remove the member from
+                the team and files created by the member will be permanently
+                deleted.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <Button onClick={() => DeleteHandler()}>Continue</Button>
+            </AlertDialogFooter>
+          </>
+        )}
+        {isSubmitted && (
+          <>
+            <AlertDialogHeader>
+              <AlertDialogTitle className="flex gap-2">
+                <p>Team Member Removed Successfully!!</p>{" "}
+                <CheckCircle2 className="w-6 h-6" />
+              </AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogAction
+                onClick={() => {
+                  router.push('/dashboard')
+                }}
+              >
+                Continue
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </>
+        )}
+        {isError && (
+          <>
+            <AlertDialogHeader>
+              <AlertDialogTitle className="flex gap-2">
+                <p>{errorMsg}</p>{" "}
+                <CheckCircle2 className="w-6 h-6" />
+              </AlertDialogTitle>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogAction
+                onClick={() => {
+                  router.push('/dashboard')
+                }}
+              >
+                Continue
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </>
+        )}
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

src/components/shared/MemberCarousel.tsx

@@ -13,9 +13,8 @@ import {
   CardHeader,
 } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
-import { Button } from "../ui/button";
-import { Trash2 } from "lucide-react";
-import { SetStateAction, useState } from "react";
+import { SetStateAction } from "react";
+import DeleteTeamMember from "./DeleteTeamMember";
 
  export type USER = {
   name: string;
@@ -31,7 +30,6 @@ type Props = {
 };
 
 export default function MemberCarousel({ teamMembersData,focusedUser,setFocusedUser }: Props) {
-
   return (
     <div className="flex flex-col items-center justify-center p-10 w-[75%]">
       <Carousel className="w-full">
@@ -60,12 +58,7 @@ export default function MemberCarousel({ teamMembersData,focusedUser,setFocusedU
                   <CardContent>
                     <CardDescription className="flex items-center justify-between">
                       <h1>Email : {user.email}</h1>
-                      <Button
-                        size={"icon"}
-                        className=" bg-red-600 hover:bg-red-700"
-                      >
-                        <Trash2 className="w-5 h-5" />
-                      </Button>
+                      <DeleteTeamMember email={user.email} />
                     </CardDescription>
                   </CardContent>
                 </Card>

src/lib/API-URLs.ts

@@ -1,3 +1,4 @@
 export const changeToPrivateUrl = "/api/files/private"
 export const changeToPublicUrl = "/api/files/public"
-export const getTeamMembersData = "/api/teams/members";
+export const getTeamMembersData = "/api/teams/members";
+export const deleteTeamMemberUrl = "/api/teams/members";