mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-11 19:53:59 +02:00
Remove friend
This commit is contained in:
Kamran Ahmed
@@ -9,6 +9,7 @@ import { CheckIcon } from './ReactIcons/CheckIcon';
|
|||||||
import { DeleteUserIcon } from './ReactIcons/DeleteUserIcon';
|
import { DeleteUserIcon } from './ReactIcons/DeleteUserIcon';
|
||||||
import { useToast } from '../hooks/use-toast';
|
import { useToast } from '../hooks/use-toast';
|
||||||
import { useAuth } from '../hooks/use-auth';
|
import { useAuth } from '../hooks/use-auth';
|
||||||
|
import { AddedUserIcon } from './ReactIcons/AddedUserIcon';
|
||||||
|
|
||||||
export type FriendshipStatus =
|
export type FriendshipStatus =
|
||||||
| 'none'
|
| 'none'
|
||||||
@@ -170,7 +171,7 @@ export function Befriend() {
|
|||||||
|
|
||||||
{user.status === 'sent' && (
|
{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">
|
<span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
|
||||||
<CheckIcon additionalClasses="mr-2 h-4 w-4" />
|
<CheckIcon additionalClasses="mr-2 h-4 w-4" />
|
||||||
Request Sent
|
Request Sent
|
||||||
</span>
|
</span>
|
||||||
@@ -215,6 +216,134 @@ export function Befriend() {
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{user.status === 'accepted' && (
|
||||||
|
<>
|
||||||
|
<span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
|
||||||
|
<AddedUserIcon additionalClasses="mr-2 h-5 w-5" />
|
||||||
|
You are friends
|
||||||
|
</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]" />
|
||||||
|
Remove Friend
|
||||||
|
</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 removed').finally(
|
||||||
|
() => {
|
||||||
|
pageProgressMessage.set('');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</button>{' '}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setIsConfirming(false);
|
||||||
|
}}
|
||||||
|
className="ml-2 text-red-600 underline"
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{user.status === 'rejected' && (
|
||||||
|
<>
|
||||||
|
<span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
|
||||||
|
<DeleteUserIcon additionalClasses="mr-2 h-4 w-4" />
|
||||||
|
Request Rejected
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
Changed your mind?{' '}
|
||||||
|
<button
|
||||||
|
className="ml-2 text-red-700 underline"
|
||||||
|
onClick={() => {
|
||||||
|
addFriend(user.id, 'Friend request accepted').finally(
|
||||||
|
() => {
|
||||||
|
pageProgressMessage.set('');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Click here to Accept
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{user.status === 'received' && (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
addFriend(user.id, 'Friend request accepted').finally(() => {
|
||||||
|
pageProgressMessage.set('');
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
|
||||||
|
>
|
||||||
|
<CheckIcon additionalClasses="mr-2 h-4 w-4" />
|
||||||
|
Accept Request
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{!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-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
|
||||||
|
>
|
||||||
|
<DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
|
||||||
|
Reject 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 rejected').finally(
|
||||||
|
() => {
|
||||||
|
pageProgressMessage.set('');
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Yes
|
||||||
|
</button>{' '}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
setIsConfirming(false);
|
||||||
|
}}
|
||||||
|
className="ml-2 text-red-600 underline"
|
||||||
|
>
|
||||||
|
No
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
26
src/components/ReactIcons/AddedUserIcon.tsx
Normal file
26
src/components/ReactIcons/AddedUserIcon.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
type CheckIconProps = {
|
||||||
|
additionalClasses?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function AddedUserIcon(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="M14 19a6 6 0 0 0-12 0" />
|
||||||
|
<circle cx="8" cy="9" r="4" />
|
||||||
|
<polyline points="16 11 18 13 22 9" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user