Kamran Ahmed
1 year ago
parent
9ed60d836a
commit
0a5eeae68c
9 changed files with 291 additions and 18 deletions
@ -0,0 +1,226 @@ |
||||
import { useEffect, useState } from 'preact/hooks'; |
||||
import { httpDelete, httpGet, httpPatch, httpPost } from '../lib/http'; |
||||
import ErrorIcon from '../icons/error.svg'; |
||||
import { pageProgressMessage } from '../stores/page'; |
||||
import { isLoggedIn } from '../lib/jwt'; |
||||
import { showLoginPopup } from '../lib/popup'; |
||||
import { getUrlParams } from '../lib/browser'; |
||||
import { CheckIcon } from './ReactIcons/CheckIcon'; |
||||
import { DeleteUserIcon } from './ReactIcons/DeleteUserIcon'; |
||||
import { useToast } from '../hooks/use-toast'; |
||||
import { useAuth } from '../hooks/use-auth'; |
||||
|
||||
export type FriendshipStatus = |
||||
| 'none' |
||||
| 'sent' |
||||
| 'received' |
||||
| 'accepted' |
||||
| 'rejected' |
||||
| 'got_rejected'; |
||||
|
||||
type UserResponse = { |
||||
id: string; |
||||
links: Record<string, string>; |
||||
avatar: string; |
||||
name: string; |
||||
status: FriendshipStatus; |
||||
}; |
||||
|
||||
export function Befriend() { |
||||
const { u: inviteId } = getUrlParams(); |
||||
|
||||
const toast = useToast(); |
||||
const currentUser = useAuth(); |
||||
|
||||
const [isConfirming, setIsConfirming] = useState(false); |
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [error, setError] = useState(''); |
||||
const [user, setUser] = useState<UserResponse>(); |
||||
const isAuthenticated = isLoggedIn(); |
||||
|
||||
async function loadUser(userId: string) { |
||||
const { response, error } = await httpGet<UserResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-get-friend/${userId}` |
||||
); |
||||
if (error || !response) { |
||||
setError(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
setUser(response); |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (inviteId) { |
||||
loadUser(inviteId).finally(() => { |
||||
pageProgressMessage.set(''); |
||||
setIsLoading(false); |
||||
}); |
||||
} else { |
||||
setIsLoading(false); |
||||
setError('Missing invite ID in URL'); |
||||
pageProgressMessage.set(''); |
||||
} |
||||
}, [inviteId]); |
||||
|
||||
async function addFriend(userId: string, successMessage: string) { |
||||
pageProgressMessage.set('Please wait...'); |
||||
setError(''); |
||||
const { response, error } = await httpPost<UserResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-add-friend/${userId}`, |
||||
{} |
||||
); |
||||
|
||||
if (error || !response) { |
||||
setError(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
setUser(response); |
||||
toast.success(successMessage); |
||||
} |
||||
|
||||
async function deleteFriend(userId: string, successMessage: string) { |
||||
pageProgressMessage.set('Please wait...'); |
||||
setError(''); |
||||
const { response, error } = await httpDelete<UserResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-delete-friend/${userId}`, |
||||
{} |
||||
); |
||||
|
||||
if (error || !response) { |
||||
setError(error?.message || 'Something went wrong'); |
||||
return; |
||||
} |
||||
|
||||
setUser(response); |
||||
toast.success(successMessage); |
||||
} |
||||
|
||||
if (isLoading) { |
||||
return null; |
||||
} |
||||
|
||||
if (!user) { |
||||
return ( |
||||
<div className="container text-center"> |
||||
<img |
||||
alt={'error'} |
||||
src={ErrorIcon} |
||||
className="mx-auto mb-4 mt-24 w-20 opacity-20" |
||||
/> |
||||
|
||||
<h2 className={'mb-1 text-2xl font-bold'}>Error</h2> |
||||
<p class="mb-4 text-base leading-6 text-gray-600"> |
||||
{error || 'There was a problem, please try again.'} |
||||
</p> |
||||
|
||||
<div> |
||||
<a |
||||
href="/" |
||||
className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center" |
||||
> |
||||
Back to home |
||||
</a> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
const userAvatar = user.avatar |
||||
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}` |
||||
: '/images/default-avatar.png'; |
||||
|
||||
const isMe = currentUser?.id === user.id; |
||||
|
||||
return ( |
||||
<div className="container max-w-[400px] text-center"> |
||||
<img |
||||
alt={'join team'} |
||||
src={userAvatar} |
||||
className="mx-auto mb-4 mt-24 w-28 rounded-full" |
||||
/> |
||||
|
||||
<h2 className={'mb-1 text-3xl font-bold'}>{user.name}</h2> |
||||
<p class="mb-6 text-base leading-6 text-gray-600"> |
||||
After you add {user.name} as a friend, you will be able to view each |
||||
other's skills and progress. |
||||
</p> |
||||
|
||||
<div class="mx-auto w-full duration-500 sm:max-w-md"> |
||||
<div class="flex w-full flex-col items-center gap-2"> |
||||
{user.status === 'none' && ( |
||||
<button |
||||
disabled={isMe} |
||||
onClick={() => { |
||||
if (!isAuthenticated) { |
||||
return showLoginPopup(); |
||||
} |
||||
|
||||
addFriend(user.id, 'Friend request sent').finally(() => { |
||||
pageProgressMessage.set(''); |
||||
}); |
||||
}} |
||||
type="button" |
||||
class="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40" |
||||
> |
||||
{isMe ? "You can't add yourself" : 'Add Friend'} |
||||
</button> |
||||
)} |
||||
|
||||
{user.status === 'sent' && ( |
||||
<> |
||||
<span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 bg-gray-100 px-3 py-2 text-center text-black"> |
||||
<CheckIcon additionalClasses="mr-2 h-4 w-4" /> |
||||
Request Sent |
||||
</span> |
||||
|
||||
{!isConfirming && ( |
||||
<button |
||||
onClick={() => { |
||||
setIsConfirming(true); |
||||
}} |
||||
type="button" |
||||
class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700" |
||||
> |
||||
<DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" /> |
||||
Withdraw Request |
||||
</button> |
||||
)} |
||||
|
||||
{isConfirming && ( |
||||
<span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600"> |
||||
Are you sure?{' '} |
||||
<button |
||||
className="ml-2 text-red-700 underline" |
||||
onClick={() => { |
||||
deleteFriend(user.id, 'Friend request withdrawn').finally( |
||||
() => { |
||||
pageProgressMessage.set(''); |
||||
} |
||||
); |
||||
}} |
||||
> |
||||
Yes |
||||
</button>{' '} |
||||
<button |
||||
onClick={() => { |
||||
setIsConfirming(false); |
||||
}} |
||||
className="ml-2 text-red-600 underline" |
||||
> |
||||
No |
||||
</button> |
||||
</span> |
||||
)} |
||||
</> |
||||
)} |
||||
</div> |
||||
</div> |
||||
|
||||
{error && ( |
||||
<p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,27 @@ |
||||
type CheckIconProps = { |
||||
additionalClasses?: string; |
||||
}; |
||||
|
||||
export function DeleteUserIcon(props: CheckIconProps) { |
||||
const { additionalClasses = 'mr-2 w-[20px] h-[20px]' } = props; |
||||
|
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
width="24" |
||||
height="24" |
||||
viewBox="0 0 24 24" |
||||
fill="none" |
||||
className={`relative ${additionalClasses}`} |
||||
stroke="currentColor" |
||||
stroke-width="2" |
||||
stroke-linecap="round" |
||||
stroke-linejoin="round" |
||||
> |
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /> |
||||
<circle cx="9" cy="7" r="4" /> |
||||
<line x1="17" x2="22" y1="8" y2="13" /> |
||||
<line x1="22" x2="17" y1="8" y2="13" /> |
||||
</svg> |
||||
); |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
--- |
||||
import AccountLayout from '../layouts/AccountLayout.astro'; |
||||
import { Befriend } from '../components/Befriend'; |
||||
import LoginPopup from "../components/AuthenticationFlow/LoginPopup.astro"; |
||||
--- |
||||
|
||||
<AccountLayout |
||||
title='Respond Invite' |
||||
noIndex={true} |
||||
initialLoadingMessage={'Loading invite'} |
||||
> |
||||
<LoginPopup /> |
||||
<Befriend client:only /> |
||||
</AccountLayout> |
||||
Loading…
Reference in new issue