diff --git a/client/src/app/(main)/[username]/profile/page.tsx b/client/src/app/(main)/[username]/profile/page.tsx
index 364cfcd6..7c0a8fe9 100644
--- a/client/src/app/(main)/[username]/profile/page.tsx
+++ b/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() {
);
- if (user && me) {
+
+ if (user) {
body = (
<>
diff --git a/client/src/app/(main)/[username]/profile/ui/header.tsx b/client/src/app/(main)/[username]/profile/ui/header.tsx
index bdaf70f4..8b745063 100644
--- a/client/src/app/(main)/[username]/profile/ui/header.tsx
+++ b/client/src/app/(main)/[username]/profile/ui/header.tsx
@@ -1,6 +1,6 @@
'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';
@@ -8,14 +8,23 @@ 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 ;
}
@@ -25,21 +34,39 @@ export const Header = () => {
);
+
+ let friendButton = (
+
+ );
+
+ if (isMyFriend) {
+ friendButton = (
+
+ );
+ }
+
if (!isMyProfile) {
interactions = (
{' '}
-
+ {friendButton}
);
}
+ // Prohibit any interactions with a profile if a user is not logged in
+ if (!me) {
+ interactions = <>>;
+ }
+
const name = user.username ? '@' + user.username : '';
return (
diff --git a/client/src/entities/session/api/useRemoveFriend.tsx b/client/src/entities/session/api/useRemoveFriend.tsx
new file mode 100644
index 00000000..47fb1031
--- /dev/null
+++ b/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}`);
+ },
+ });
+};