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}`); + }, + }); +};