Skip to content

Commit

Permalink
Merge pull request #29 from Abh1noob/master
Browse files Browse the repository at this point in the history 
hmm
  • Loading branch information
@Abh1noob
Abh1noob authored Mar 12, 2024
2 parents 09ff0c0 + d388643 commit 595ac07
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 100 deletions.
123 changes: 85 additions & 38 deletions devsoc24-portal-fe/src/components/team/leaveTeam.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,97 @@ import {
DialogTitle,
} from "@radix-ui/react-dialog";
import { Label } from "@radix-ui/react-label";
import React from "react";
import React, { useState } from "react";
import { Button } from "../ui/button";
import { DialogHeader, DialogFooter } from "../ui/dialog";
import { Input } from "../ui/input";
import {
useTeamStore,
useUserStore,
useIdeaStore,
useTeamEditStore,
useLeaderStore,
} from "@/store/store";
import axios from "axios";
import toast from "react-hot-toast";
import { userProps } from "@/interfaces";
import router from "next/navigation";
import { useRouter } from "next/navigation";

const LeaveTeam = () => {
const { team, setTeam } = useTeamStore();
const { user, setUser } = useUserStore();

const router = useRouter();

const fetchTeam = async () => {
try {
const response = await axios.get<userProps>(
`${process.env.NEXT_PUBLIC_API_URL}/team`,
{
withCredentials: true,
},
);
setUser(response.data);
} catch (e) {
if (axios.isAxiosError(e)) {
switch (e.response?.status) {
case 401:
void router.push("/");
break;
case 404:
console.log("Idea Not found, but in a team");
break;
case 409:
console.log("Not in team");
break;
default:
console.log(e);
break;
}
}
}
};

const leaveTeam = async () => {
const handleClick = async () => {
await axios.delete(`${process.env.NEXT_PUBLIC_API_URL}/team/leave`, {
withCredentials: true,
});
};

void toast.promise(handleClick(), {
loading: "Loading...",
success: (temp) => {
setTeam(true);
void fetchTeam();
return `Accepted`;
},
error: `Something went wrong`,
});
};
return (
<div>
<Dialog>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Create a team</DialogTitle>
</DialogHeader>
<div className="flex flex-col gap-y-2 py-4">
<Label
htmlFor="name"
className="text-sm font-normal text-[#53545C]"
>
Are you sure you want to leave the team?
</Label>
</div>
<div className="flex justify-center">
<DialogFooter className="sm:justify-start">
<DialogClose>
<Button
type="submit"
className="bg-[#458B71]"
// onClick={async () => {}}
>
Yes
</Button>
<Button
type="submit"
className="bg-[#458B71]"
// onClick={async () => {}}
>
No
</Button>
</DialogClose>
</DialogFooter>
</div>
</DialogContent>
</Dialog>
</div>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Are you sure you want to leave the team?</DialogTitle>
</DialogHeader>
<div className="flex justify-center">
<DialogFooter className="sm:justify-start">
<DialogClose asChild onClick={fetchTeam}>
<Button type="submit" className="bg-[#458B71]" onClick={leaveTeam}>
Yes
</Button>
</DialogClose>
</DialogFooter>
<DialogFooter className="sm:justify-start">
<DialogClose asChild onClick={fetchTeam}>
<Button type="submit" className="bg-[#458B71]">
No
</Button>
</DialogClose>
</DialogFooter>
</div>
</DialogContent>
);
};

Expand Down
132 changes: 70 additions & 62 deletions devsoc24-portal-fe/src/components/teamCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
const fetchTeam = async () => {
try {
const response = await axios.get<userProps>(
`${process.env.NEXT_PUBLIC_API_URL}/user/me`,
`${process.env.NEXT_PUBLIC_API_URL}/team`,
{
withCredentials: true,
},
Expand Down Expand Up @@ -113,24 +113,24 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
<>
<div>
<div className="h-fit w-full rounded-xl bg-white md:w-[32vw]">
<Dialog>
<div className="flex w-full items-center justify-between pl-6 pt-4 font-semibold text-[#45464E]">
<p>Your Devsoc Team</p>
{isLeader ? (
<div
className="mx-2 flex flex-row items-center justify-between gap-3 rounded-lg border-2 border-[#53545C] px-2 py-1 transition-all duration-150 ease-in-out hover:cursor-pointer hover:bg-black/10"
onClick={toggleEdit}
>
<Image
src={editImg as HTMLImageElement}
alt="edit"
height={0}
width={0}
className="h-fit w-fit"
/>
Edit
</div>
) : (
<div className="flex w-full items-center justify-between pl-6 pt-4 font-semibold text-[#45464E]">
<p>Your Devsoc Team</p>
{isLeader ? (
<div
className="mx-2 flex flex-row items-center justify-between gap-3 rounded-lg border-2 border-[#53545C] px-2 py-1 transition-all duration-150 ease-in-out hover:cursor-pointer hover:bg-black/10"
onClick={toggleEdit}
>
<Image
src={editImg as HTMLImageElement}
alt="edit"
height={0}
width={0}
className="h-fit w-fit"
/>
Edit
</div>
) : (
<Dialog>
<DialogTrigger
onClick={() => handleDialogTriggerClick("leave")}
>
Expand All @@ -144,65 +144,73 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
/>
Leave Team
</div>
{showModal === "leave" && <LeaveTeam />}
</DialogTrigger>
)}
</Dialog>
)}
</div>
<div className="flex flex-col items-center justify-center p-8">
<p className="text-2xl font-semibold">{props.team?.team_name}</p>
<p className="pb-4 text-sm text-[#8B8D97]">Team Members</p>
<div className="mb-2 flex w-full items-center justify-between rounded-lg border-2 border-[#B6B6B6] p-3">
<span>{Leader}</span>
<span className="text-[#FFBE3D]">
<Crown />
</span>
</div>
<div className="flex flex-col items-center justify-center p-8">
<p className="text-2xl font-semibold">{props.team?.team_name}</p>
<p className="pb-4 text-sm text-[#8B8D97]">Team Members</p>
<div className="mb-2 flex w-full items-center justify-between rounded-lg border-2 border-[#B6B6B6] p-3">
<span>{Leader}</span>
<span className="text-[#FFBE3D]">
<Crown />
</span>
</div>
{props.team?.users
.filter((member) => member.name !== Leader)
.map((member, index) => (
<div
key={index}
className="mb-2 flex w-full items-center justify-between rounded-lg border-2 border-[#B6B6B6] p-3"
>
<span>{member.name}</span>

{props.team?.users
.filter((member) => member.name !== Leader)
.map((member, index) => (
<div
key={index}
className="mb-2 flex w-full items-center justify-between rounded-lg border-2 border-[#B6B6B6] p-3"
>
<span>{member.name}</span>
<Dialog>
<DialogTrigger
onClick={() => handleDialogTriggerClick("leave")}
>
<span className="text-[#AD1136] hover:scale-[1.05] hover:cursor-pointer">
{edit ? <BadgeMinus /> : <></>}
</span>
</DialogTrigger>
</div>
))}
<div className="flex w-full flex-row items-center justify-evenly ">
{props.team && (
<CopyToClipboard
text={props.team?.team_code}
onCopy={onCopyText}
>
<Button className="mt-4 flex items-center gap-x-2 self-center">
<span className="text-white">
{isCopied ? <Check size={20} /> : <Files size={20} />}
</span>
{props.team?.team_code}
</Button>
</CopyToClipboard>
)}
{edit ? (
{showModal === "leave" && <LeaveTeam />}
</Dialog>
</div>
))}
<div className="flex w-full flex-row items-center justify-evenly ">
{props.team && (
<CopyToClipboard
text={props.team?.team_code}
onCopy={onCopyText}
>
<Button className="mt-4 flex items-center gap-x-2 self-center">
<span className="text-white">
{isCopied ? <Check size={20} /> : <Files size={20} />}
</span>
{props.team?.team_code}
</Button>
</CopyToClipboard>
)}
{edit ? (
<Dialog>
<DialogTrigger
onClick={() => handleDialogTriggerClick("leave")}
onClick={() => {
handleDialogTriggerClick("leave");
console.log("MODAL: ", showModal);
}}
>
<Button className="mt-4 flex items-center gap-x-2 self-center bg-[#AD1136] hover:bg-[#AD1136]/80">
Delete Team
</Button>
</DialogTrigger>
) : (
<></>
)}
</div>
{showModal === "leave" && <LeaveTeam />}
</Dialog>
) : (
<></>
)}
</div>
{showModal === "leave" && <LeaveTeam />}
</Dialog>
</div>
</div>
</div>
</>
Expand Down

0 comments on commit 595ac07

Please sign in to comment.