feat: add friend removal

client/src/app/(main)/[username]/profile/page.tsx

@@ -15,7 +15,6 @@ export default function Page() {
   const { data: me } = useGetMe();
   const { username } = useParams();
   const { data: user } = useGetUserByName(username as string);
-
   const isMyProf = me?.username === username;
 
   let body = (
@@ -24,7 +23,8 @@ export default function Page() {
       <CardSkeleton borderRadius={15} width={'100%'} height={'227px'} />
     </Flex>
   );
-  if (user && me) {
+
+  if (user) {
     body = (
       <>
         <Header />

client/src/app/(main)/[username]/profile/ui/header.tsx

@@ -1,21 +1,30 @@
 'use client';
 import styles from './header.module.scss';
-import { useGetMe } from '@/entities/session';
+import { useGetFriends, useGetMe } from '@/entities/session';
 import { ChatCircleDotsIcon, PlusIcon, UserPlusIcon } from '@/shared/assets';
 import { Button, CardSkeleton, Flex, ImageLoader, Typography } from '@/shared/ui';
 import { useParams } from 'next/navigation';
 import { useGetUserByName } from '../lib/useGetUserByName';
 import { useContext } from 'react';
 import { ProfileContext } from '@/app/(main)/[username]/profile/lib/profile-context';
 import { useAddFriend } from '@/entities/session/api/useAddFriend';
+import { useRemoveFriend } from '@/entities/session/api/useRemoveFriend';
 export const Header = () => {
   const { username } = useParams();
   const { data: me } = useGetMe();
   const { data: user } = useGetUserByName(username as string);
   const isMyProfile = useContext(ProfileContext);
   const { mutate: addFriend } = useAddFriend(String(me?.id), String(user!.id));
+  const { mutate: removeFriend } = useRemoveFriend(String(user!.id));
+  const { data: friendships } = useGetFriends(user!.id);
 
-  if (!user || !me) {
+  const isMyFriend =
+    me &&
+    friendships?.data.some(
+      friendship => friendship.creator.id === me.id || friendship.receiver.id === me.id
+    );
+
+  if (!user) {
     return <CardSkeleton width={'100%'} height={'248px'} borderRadius={15} />;
   }
 
@@ -25,21 +34,39 @@ export const Header = () => {
       <PlusIcon />
     </Button>
   );
+
+  let friendButton = (
+    <Button onClick={() => addFriend()} size={'m'}>
+      Add friend
+      <UserPlusIcon />
+    </Button>
+  );
+
+  if (isMyFriend) {
+    friendButton = (
+      <Button onClick={() => removeFriend()} size={'m'} typeBtn='danger'>
+        Remove friend
+      </Button>
+    );
+  }
+
   if (!isMyProfile) {
     interactions = (
       <Flex gap={'8px'}>
         <Button typeBtn={'secondary'} size={'m'}>
           Message
           <ChatCircleDotsIcon />
-        </Button>{' '}
-        <Button onClick={() => addFriend()} size={'m'}>
-          Add friend
-          <UserPlusIcon />
         </Button>
+        {friendButton}
       </Flex>
     );
   }
 
+  // Prohibit any interactions with a profile if a user is not logged in
+  if (!me) {
+    interactions = <></>;
+  }
+
   const name = user.username ? '@' + user.username : '';
   return (
     <div className={styles.container}>

client/src/entities/session/api/useRemoveFriend.tsx

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+import { API } from '@/shared/api';
+import { API_FRIENDSHIP } from '@/shared/constant';
+import { toast } from 'sonner';
+
+export const useRemoveFriend = (userId: string) => {
+  return useMutation({
+    mutationFn: async () => await API.delete(`${API_FRIENDSHIP}/${userId}`),
+    onSuccess: () => {
+      toast('User is removed from the friends list');
+    },
+    onError: err => {
+      toast(`Error occurred: ${err}`);
+    },
+  });
+};