Leave Team confirmation popup (#4254)

* wip: leave team popup

* fix: leave warning
chore/progress-sorting
Arik Chakma 1 year ago committed by GitHub
parent ac48f4c441
commit 8e945f5e1c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 9
      src/components/DeleteTeamPopup.tsx
  2. 52
      src/components/TeamMembers/LeaveTeamButton.tsx
  3. 124
      src/components/TeamMembers/LeaveTeamPopup.tsx
  4. 1
      src/components/TeamSettings/UpdateTeamForm.tsx

@ -4,6 +4,7 @@ import type { TeamDocument } from './CreateTeam/CreateTeamForm';
import { useTeamId } from '../hooks/use-team-id'; import { useTeamId } from '../hooks/use-team-id';
import { useOutsideClick } from '../hooks/use-outside-click'; import { useOutsideClick } from '../hooks/use-outside-click';
import { useKeydown } from '../hooks/use-keydown'; import { useKeydown } from '../hooks/use-keydown';
import { useToast } from '../hooks/use-toast';
type DeleteTeamPopupProps = { type DeleteTeamPopupProps = {
onClose: () => void; onClose: () => void;
@ -12,6 +13,7 @@ type DeleteTeamPopupProps = {
export function DeleteTeamPopup(props: DeleteTeamPopupProps) { export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
const { onClose } = props; const { onClose } = props;
const toast = useToast();
const popupBodyEl = useRef<HTMLDivElement>(null); const popupBodyEl = useRef<HTMLDivElement>(null);
const inputEl = useRef<HTMLInputElement>(null); const inputEl = useRef<HTMLInputElement>(null);
@ -53,6 +55,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
return; return;
} }
toast.success('Team deleted successfully');
window.location.href = '/account'; window.location.href = '/account';
}; };
@ -72,9 +75,9 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
ref={popupBodyEl} ref={popupBodyEl}
class="popup-body relative rounded-lg bg-white p-4 shadow" class="popup-body relative rounded-lg bg-white p-4 shadow"
> >
<p> <h2 class="text-2xl font-semibold text-black">Delete Team</h2>
This will permanently delete your account and all your associated <p className="text-gray-500">
data including your progress. This will permanently delete your team and all associated data.
</p> </p>
<p class="-mb-2 mt-3 text-base font-medium text-black"> <p class="-mb-2 mt-3 text-base font-medium text-black">

@ -1,40 +1,30 @@
import { useState } from "preact/hooks"; import { useState } from 'preact/hooks';
import { httpDelete } from "../../lib/http"; import { LeaveTeamPopup } from './LeaveTeamPopup';
import { Spinner } from "../ReactIcons/Spinner";
import { useToast } from "../../hooks/use-toast";
type LeaveTeamButtonProps = { type LeaveTeamButtonProps = {
teamId: string; teamId: string;
}; };
export function LeaveTeamButton(props: LeaveTeamButtonProps) { export function LeaveTeamButton(props: LeaveTeamButtonProps) {
const toast = useToast(); const [showLeaveTeamPopup, setShowLeaveTeamPopup] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const { teamId } = props;
async function leaveTeam() {
setIsLoading(true);
const { response, error } = await httpDelete(
`${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
{}
);
if (error || !response) {
setIsLoading(false);
toast.error(error?.message || 'Something went wrong');
return;
}
window.location.href = '/account';
}
return ( return (
<button <>
disabled={isLoading} {showLeaveTeamPopup && (
onClick={leaveTeam} <LeaveTeamPopup
className="bg-gray-50 text-red-600 text-sm font-medium px-2 leading-none py-1.5 rounded-md border border-gray-200 h-7 flex items-center justify-center min-w-[95px]"> onClose={() => {
{isLoading ? <Spinner isDualRing={false} /> : 'Leave team'} setShowLeaveTeamPopup(false);
</button> }}
) />
)}
<button
onClick={() => {
setShowLeaveTeamPopup(true);
}}
className="flex h-7 min-w-[95px] items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm font-medium leading-none text-red-600"
>
Leave team
</button>
</>
);
} }

@ -0,0 +1,124 @@
import { useEffect, useRef, useState } from 'preact/hooks';
import { httpDelete } from '../../lib/http';
import { useTeamId } from '../../hooks/use-team-id';
import { useOutsideClick } from '../../hooks/use-outside-click';
type LeaveTeamPopupProps = {
onClose: () => void;
};
export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
const { onClose } = props;
const popupBodyRef = useRef<HTMLDivElement>(null);
const confirmationEl = useRef<HTMLInputElement>(null);
const [confirmationText, setConfirmationText] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const { teamId } = useTeamId();
useEffect(() => {
setError('');
setConfirmationText('');
confirmationEl?.current?.focus();
}, []);
const handleSubmit = async (e: Event) => {
e.preventDefault();
setIsLoading(true);
setError('');
if (confirmationText.toUpperCase() !== 'LEAVE') {
setError('Verification text does not match');
setIsLoading(false);
return;
}
const { response, error } = await httpDelete(
`${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
{}
);
if (error || !response) {
setIsLoading(false);
setError(error?.message || 'Something went wrong');
return;
}
window.location.href = '/account';
};
const handleClosePopup = () => {
setIsLoading(false);
setError('');
setConfirmationText('');
onClose();
};
useOutsideClick(popupBodyRef, handleClosePopup);
return (
<div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
<div class="relative h-full w-full max-w-md p-4 md:h-auto">
<div
ref={popupBodyRef}
class="popup-body relative rounded-lg bg-white p-4 shadow"
>
<h2 class="text-2xl font-semibold text-black">
Leave Team
</h2>
<p className="text-gray-500">
You will lose access to the team, the roadmaps and progress of other team members.
</p>
<p className="-mb-2 mt-3 text-base font-medium text-black">
Please type "leave" to confirm.
</p>
<form onSubmit={handleSubmit}>
<div className="my-4">
<input
ref={confirmationEl}
type="text"
name="leave-team"
id="leave-team"
className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
placeholder={'Type "leave" to confirm'}
required
autoFocus
value={confirmationText}
onInput={(e) =>
setConfirmationText((e.target as HTMLInputElement).value)
}
/>
{error && (
<p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
{error}
</p>
)}
</div>
<div className="flex items-center gap-2">
<button
type="button"
disabled={isLoading}
onClick={handleClosePopup}
className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
>
Cancel
</button>
<button
type="submit"
disabled={
isLoading || confirmationText.toUpperCase() !== 'LEAVE'
}
className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
>
{isLoading ? 'Please wait ..' : 'Leave Team'}
</button>
</div>
</form>
</div>
</div>
</div>
);
}

@ -267,7 +267,6 @@ export function UpdateTeamForm() {
{isDeleting && ( {isDeleting && (
<DeleteTeamPopup <DeleteTeamPopup
onClose={() => { onClose={() => {
toast.success('Team deleted successfully');
setIsDeleting(false); setIsDeleting(false);
}} }}
/> />

Loading…
Cancel
Save