Leave Team confirmation popup (#4254)
* wip: leave team popup * fix: leave warningchore/progress-sorting
Arik Chakma
1 year ago
committed by
GitHub
parent
ac48f4c441
commit
8e945f5e1c
4 changed files with 151 additions and 35 deletions
@ -1,40 +1,30 @@ |
||||
import { useState } from "preact/hooks"; |
||||
import { httpDelete } from "../../lib/http"; |
||||
import { Spinner } from "../ReactIcons/Spinner"; |
||||
import { useToast } from "../../hooks/use-toast"; |
||||
import { useState } from 'preact/hooks'; |
||||
import { LeaveTeamPopup } from './LeaveTeamPopup'; |
||||
|
||||
type LeaveTeamButtonProps = { |
||||
teamId: string; |
||||
}; |
||||
|
||||
export function LeaveTeamButton(props: LeaveTeamButtonProps) { |
||||
const toast = useToast(); |
||||
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'; |
||||
} |
||||
const [showLeaveTeamPopup, setShowLeaveTeamPopup] = useState(false); |
||||
|
||||
return ( |
||||
<button |
||||
disabled={isLoading} |
||||
onClick={leaveTeam} |
||||
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]"> |
||||
{isLoading ? <Spinner isDualRing={false} /> : 'Leave team'} |
||||
</button> |
||||
) |
||||
|
||||
<> |
||||
{showLeaveTeamPopup && ( |
||||
<LeaveTeamPopup |
||||
onClose={() => { |
||||
setShowLeaveTeamPopup(false); |
||||
}} |
||||
/> |
||||
)} |
||||
<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> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue