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