Skip to content

Commit

Permalink
Merge pull request #30 from NishantGupt786/master
Browse files Browse the repository at this point in the history 
modal
  • Loading branch information
@NishantGupt786
NishantGupt786 authored Mar 12, 2024
2 parents 595ac07 + a9381fa commit 7257108
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 54 deletions.
4 changes: 4 additions & 0 deletions devsoc24-portal-fe/src/app/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
useTeamDataStore,
useTeamStore,
useUserStore,
showModalStore,
} from "@/store/store";
import Loading from "../loading";
import TrackComponent from "@/components/track/TrackComponent";
Expand All @@ -31,6 +32,7 @@ import { User } from "lucide-react";
import ToastContainer from "@/components/ToastContainer";
import Link from "next/link";
import TimelineComponent from "@/components/timeline/timelineComponent";
import LeaveTeam from "@/components/team/leaveTeam";

interface ideaProps {
message: string;
Expand Down Expand Up @@ -61,6 +63,7 @@ export default function HomePage() {
const [getIdea, SetIdea] = useState("");
const { teamData, setTeamData } = useTeamDataStore();
const { isLeader, setIsLeader } = useLeaderStore();
const { showModal, setShowModal } = showModalStore();
const logout = async () => {
try {
const response = await axios.post(
Expand Down Expand Up @@ -307,6 +310,7 @@ export default function HomePage() {
</DropdownMenu>
</div>
<div className="flex flex-col">
{showModal === "leave" && <LeaveTeam />}
<div className="my-8 px-4">
<TimelineComponent count={2} />
</div>
Expand Down
61 changes: 41 additions & 20 deletions devsoc24-portal-fe/src/components/team/leaveTeam.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
useIdeaStore,
useTeamEditStore,
useLeaderStore,
showModalStore,
} from "@/store/store";
import axios from "axios";
import toast from "react-hot-toast";
Expand All @@ -25,6 +26,7 @@ import { useRouter } from "next/navigation";
const LeaveTeam = () => {
const { team, setTeam } = useTeamStore();
const { user, setUser } = useUserStore();
const { showModal, setShowModal } = showModalStore();

const router = useRouter();

Expand Down Expand Up @@ -74,28 +76,47 @@ const LeaveTeam = () => {
error: `Something went wrong`,
});
};

return (
<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 className="fixed inset-0 flex items-center justify-center backdrop-blur-sm backdrop-filter backdrop-brightness-50 z-[60]">
<div className="rounded-lg bg-white p-8">
<button
className="absolute right-0 top-0 p-2 text-gray-500"
onClick={() => setShowModal("")}
>
<svg
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<h2 className="text-xl font-semibold text-gray-800">
Are you sure you want to leave the team?
</h2>
<div className="mt-4 flex justify-center">
<button
onClick={leaveTeam}
className="mr-4 rounded-md bg-[#458B71] px-4 py-2 text-white"
>
Yes
</button>
<button
onClick={() => setShowModal("")}
className="rounded-md bg-[#458B71] px-4 py-2 text-white"
>
No
</button>
</div>
</div>
</DialogContent>
</div>
);
};

Expand Down
58 changes: 25 additions & 33 deletions devsoc24-portal-fe/src/components/teamCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
useTeamEditStore,
useTeamStore,
useUserStore,
showModalStore
} from "@/store/store";
import { useRouter } from "next/navigation";
import editImg from "@/assets/images/edit.svg";
Expand All @@ -33,7 +34,7 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
const { idea, setIdea } = useIdeaStore();
const { edit, setEdit } = useTeamEditStore();
const { isLeader, setIsLeader } = useLeaderStore();
const [showModal, setShowModal] = useState("");
const {showModal, setShowModal} = showModalStore();

const handleDialogTriggerClick = (modalType: string) => {
setShowModal(modalType);
Expand Down Expand Up @@ -112,6 +113,7 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
return (
<>
<div>

<div className="h-fit w-full rounded-xl bg-white md:w-[32vw]">
<div className="flex w-full items-center justify-between pl-6 pt-4 font-semibold text-[#45464E]">
<p>Your Devsoc Team</p>
Expand All @@ -130,23 +132,18 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
Edit
</div>
) : (
<Dialog>
<DialogTrigger
onClick={() => handleDialogTriggerClick("leave")}
>
<div className="mx-2 flex flex-row items-center justify-between gap-3 rounded-lg border-2 border-[#AD1136] px-2 py-1 text-[#AD1136] transition-all duration-150 ease-in-out hover:cursor-pointer hover:bg-black/10">
<Image
src={editImg as HTMLImageElement}
alt="edit"
height={0}
width={0}
className="h-fit w-fit"
/>
Leave Team
</div>
{showModal === "leave" && <LeaveTeam />}
</DialogTrigger>
</Dialog>
<div onClick={() => handleDialogTriggerClick("leave")}>
<div className="mx-2 flex flex-row items-center justify-between gap-3 rounded-lg border-2 border-[#AD1136] px-2 py-1 text-[#AD1136] transition-all duration-150 ease-in-out hover:cursor-pointer hover:bg-black/10">
<Image
src={editImg as HTMLImageElement}
alt="edit"
height={0}
width={0}
className="h-fit w-fit"
/>
Leave Team
</div>
</div>
)}
</div>
<div className="flex flex-col items-center justify-center p-8">
Expand All @@ -166,16 +163,12 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
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>
{showModal === "leave" && <LeaveTeam />}
</Dialog>

<div onClick={() => handleDialogTriggerClick("leave")}>
<span className="text-[#AD1136] hover:scale-[1.05] hover:cursor-pointer">
{edit ? <BadgeMinus /> : <></>}
</span>
</div>
</div>
))}
<div className="flex w-full flex-row items-center justify-evenly ">
Expand All @@ -193,8 +186,8 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
</CopyToClipboard>
)}
{edit ? (
<Dialog>
<DialogTrigger
<>
<div
onClick={() => {
handleDialogTriggerClick("leave");
console.log("MODAL: ", showModal);
Expand All @@ -203,9 +196,8 @@ const TeamCard: React.FC<teamDataProps> = (props) => {
<Button className="mt-4 flex items-center gap-x-2 self-center bg-[#AD1136] hover:bg-[#AD1136]/80">
Delete Team
</Button>
</DialogTrigger>
{showModal === "leave" && <LeaveTeam />}
</Dialog>
</div>
</>
) : (
<></>
)}
Expand Down
2 changes: 1 addition & 1 deletion devsoc24-portal-fe/src/components/track/TrackComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const TrackComponent = () => {
return (
<div className="trackComponent h-fit w-full rounded-xl bg-white px-6 md:w-[32vw] lg:h-[52vh] lg:overflow-auto">
<div className="pt-3 font-semibold text-[#45464E]">Track Details</div>
<div className="my-6 flex w-full flex-col items-center gap-y-6">
<div className="my-6 flex w-full flex-col items-center gap-y-6 -z-10">
{tracks.map((item, index) => (
<Dialog>
<DialogTrigger key={index} className="w-full">
Expand Down
10 changes: 10 additions & 0 deletions devsoc24-portal-fe/src/store/store.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,3 +125,13 @@ export const useTeamDataStore = create<teamDataStore>((set) => ({
teamData: teamDataTemp,
})),
}));

interface showModalStore {
showModal: string;
setShowModal: (showModal: string) => void;
}

export const showModalStore = create<showModalStore>((set) => ({
showModal: "",
setShowModal: (showModal: string) => set({ showModal }),
}));

0 comments on commit 7257108

Please sign in to comment.