ref: links avatar and banner

src/entities/card-friends/ui/card-friends.tsx

@@ -31,6 +31,7 @@ const CardFriends: FC<ICardFriendsProps> = ({
 
   const avatar = (
     <UserAvatar
+      userId={friendId}
       link={friendId}
       src={friend?.avatar || null}
       className='w-[50px] h-[50px] usm:w-[75px] usm:h-[75px] lg:w-[100px] lg:h-[100px]'

src/entities/card-message/ui/card-message.tsx

@@ -35,6 +35,7 @@ const CardMessage: FC<ICardMessageProps> = ({
       )}
     >
       <UserAvatar
+        userId={friendId}
         src={friend?.avatar || null}
         className='w-[50px] h-[50px] lg:w-[60px] lg:h-[60px]'
       />

src/entities/card-notification/ui/card-notification.tsx

@@ -24,6 +24,7 @@ const CardNotification: FC<ICardNotificationProps> = ({ className, date, id, typ
       <div className='flex items-center gap-[15px]'>
         <div className='self-start'>
           <UserAvatar
+            userId={id}
             className='w-[60px] h-[60px] '
             src={user?.avatar || null}
             link={id}

src/entities/card-teammate/ui/card-teammate.tsx

@@ -24,6 +24,7 @@ const CardTeammate: FC<ICardTeammateProps> = ({
       }`}
     >
       <div className='flex flex-col gap-[10px] shrink-0 basis-[140px]'>
+        {/* @ts-expect-error Аватары берутся локально, userId не нужен */}
         <UserAvatar src={avatar} className='w-[80px] h-[80px]' />
         <h4 className={`dark:text-[#7070BF] text-redHover text-center`}>
           {firstName} <br /> ({telegram})

src/entities/message/ui/message.tsx

@@ -23,7 +23,7 @@ const Message: FC<IMessageProps> = ({ text, senderId, date }) => {
       }`}
     >
       <div className='flex flex-col items-center self-start'>
-        <UserAvatar src={user?.avatar || null} link={user?.id} />
+        <UserAvatar src={user?.avatar || null} link={user?.id} userId={senderId} />
         <span>{parseDateToTime(date)}</span>
       </div>
       <div

src/entities/post-news/ui/post-news.tsx

@@ -37,6 +37,7 @@ const PostNews: FC<IPostNewsProps> = ({ post, buttonLike, buttonDelete }) => {
             className='w-[50px] h-[50px] mr-[15px]'
             src={post?.createdBy?.avatar || null}
             link={post?.createdBy?.id}
+            userId={post?.createdById}
           />
           <div>
             <LinkName

src/entities/row-friends/ui/row-friends.tsx

@@ -1,18 +1,21 @@
+import { useTheme } from '@app/providers/theme-context'
+import { Theme } from '@app/providers/theme-context/lib/theme-context'
+import { icons } from '@shared/lib/button-icons'
 import { useWindowSize } from '@shared/lib/hooks/useWindowSize'
 import { cn } from '@shared/lib/merge-classes'
 import { UserAvatar } from '@shared/ui/user-avatar'
 import { type FC } from 'react'
 
-import { useTheme } from '@app/providers/theme-context'
-import { Theme } from '@app/providers/theme-context/lib/theme-context'
-import avatarLight from '@assets/avatar/default avatar light.svg'
-import { icons } from '@shared/lib/button-icons'
+interface IRowFriend {
+  avatar: string | null
+  userId: string | undefined
+}
 
 interface IRowFriendsProps {
-  avatars: Array<string | null> | undefined
+  friends: IRowFriend[] | undefined
 }
 
-const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
+const RowFriends: FC<IRowFriendsProps> = ({ friends }) => {
   const { theme } = useTheme()
   const isMobile = useWindowSize(500)
 
@@ -26,30 +29,31 @@ const RowFriends: FC<IRowFriendsProps> = ({ avatars }) => {
     'mr-[-20px] z-[5]'
   ]
 
-  const renderImg = (avatars: Array<string | null>): JSX.Element[] => {
-    return avatars.map((avatar, i) => {
+  const renderImg = (friends: IRowFriend[]): JSX.Element[] => {
+    return friends.map((friend, i) => {
       return (
         <UserAvatar
           key={i}
+          userId={friend.userId}
           className={cn(
             'w-[50px] h-[50px] border-2 rounded-full border-White dark:border-grayBlue',
-            avatars.length > 0 && imgClasses[i]
+            friends.length > 0 && imgClasses[i]
           )}
-          src={avatar || avatarLight}
-          isImgNotOnBackend={!avatar}
+          src={friend.avatar}
+          isImgNotOnBackend={!friend.avatar}
         />
       )
     })
   }
 
   return (
     <div className='w-full px-[20px] py-[10px] rounded-[10px] border border-smokyWhite dark:border-cadet flex items-center justify-between'>
-      <span>{avatars?.length ? `${avatars.length} друзей` : 'Пока нет друзей'}</span>
+      <span>{friends?.length ? `${friends.length} друзей` : 'Пока нет друзей'}</span>
 
       <div className='flex items-center  flex-row-reverse'>
-        {avatars?.length ? (
+        {friends?.length ? (
           renderImg(
-            avatars.slice(0, avatars.length > maxCount ? maxCount : avatars.length)
+            friends.slice(0, friends.length > maxCount ? maxCount : friends.length)
           )
         ) : (
           <div className='w-[50px] h-[50px] flex items-center justify-center border-2 rounded-full border-smokyWhite dark:border-cadet'>

src/features/input-create-post/ui/input-create-post.tsx

@@ -18,7 +18,7 @@ const InputCreatePost: FC<IInputCreatePostProps> = ({ className }) => {
   }
   return (
     <InputSendMessage
-      avatar={user?.avatar}
+      user={{ avatar: user?.avatar, userId: user?.id }}
       sendMessage={handleCreatePost}
       placeholder='Что у вас нового?'
       className={cn(className, 'border-none')}

src/pages/page-profile/ui/page-profile.tsx

@@ -35,7 +35,7 @@ const PageProfile: FC = () => {
     : allUsers.find((item) => item.id === currentUser?.id)?.friends
 
   // Поиск айди в массиве всех пользователей
-  const friends: IAllUser[] | undefined = currentUserFriends
+  const friends: IAllUser[] = currentUserFriends
     ? currentUserFriends
         .map((friendId) => allUsers?.find((item) => item.id === friendId))
         .filter((item) => item !== undefined)

src/shared/ui/input-send-message.tsx

@@ -10,7 +10,7 @@ import clip from '@assets/ui/clip.svg'
 import send from '@assets/ui/send.svg'
 
 interface IInputSendMessageProps extends IInputProps {
-  avatar?: string | null
+  user?: { avatar: string | null | undefined; userId: string | undefined }
   withPicture: boolean
   sendMessage: (message: string, pictures?: FileList) => Promise<void>
 }
@@ -19,15 +19,15 @@ interface IInputSendMessageProps extends IInputProps {
 
 const InputSendMessage: FC<IInputSendMessageProps> = ({
   withPicture = false,
-  avatar,
+  user,
   className,
   sendMessage,
   ...props
 }) => {
   const [message, setMessage] = useState('')
   const [previewUrls, setPreviewUrls] = useState<string[]>([])
 
-  const withAvatar = avatar !== undefined
+  const withAvatar = user !== undefined
 
   const handleInputFiles = (e: ChangeEvent<HTMLInputElement>): void => {
     const files = e.target.files as FileList
@@ -77,7 +77,8 @@ const InputSendMessage: FC<IInputSendMessageProps> = ({
       <div className='w-full relative flex'>
         {withAvatar && (
           <UserAvatar
-            src={avatar}
+            src={user.avatar}
+            userId={user.userId}
             className='absolute top-[10px] z-[2] left-[20px] w-[40px] h-[40px]'
           />
         )}

src/shared/ui/user-avatar.tsx

@@ -59,19 +59,21 @@ const AvatarFallback = forwardRef<
 AvatarFallback.displayName = Fallback.displayName
 
 interface IUserAvatarProps {
-  src: string | null
+  src: string | null | undefined
   isImgNotOnBackend?: boolean
   className?: string
   link?: string
+  userId: string | undefined
 }
 
 const UserAvatar: FC<IUserAvatarProps> = ({
   src,
   className,
   isImgNotOnBackend,
-  link
+  link,
+  userId
 }) => {
-  const img = isImgNotOnBackend ? src : URL_AVATARS + src
+  const img = isImgNotOnBackend ? src : `${URL_AVATARS}${userId}/${src}`
 
   if (link) {
     return (

src/widgets/block-profile-mobile/ui/block-profile-mobile.tsx

@@ -23,6 +23,7 @@ const BlockProfileMobile: FC<IBlockProfileMobileProps> = ({
       <div className='flex flex-row justify-between flex-[90px]'>
         <div className='flex flex-row justify-center sm:justify-start w-full'>
           <UserAvatar
+            userId={user?.id}
             src={user?.avatar || null}
             className='absolute w-[170px] sm:w-[200px] h-[170px] sm:h-[200px] sm:mr-[15px] inset-x-0 sm:inset-auto mx-auto top-[-100px] sm:left-[20px] sm:top-[-85px]'
           />
@@ -49,7 +50,12 @@ const BlockProfileMobile: FC<IBlockProfileMobileProps> = ({
           </div>
         )}
         <div className='w-full lg:flex-[50%] self-start flex flex-col gap-[15px]'>
-          <RowFriends avatars={friends?.map((friend) => friend?.avatar)} />
+          <RowFriends
+            friends={friends?.map((friend) => ({
+              avatar: friend?.avatar,
+              userId: friend.id
+            }))}
+          />
           {isMyProfile ? (
             <ButtonEditProfile type='text' className='sm:hidden' />
           ) : (

src/widgets/block-profile/ui/block-profile.tsx

@@ -16,13 +16,22 @@ const BlockProfile: FC<IBlockProfileProps> = ({ user, isMyProfile, friends }) =>
   return (
     <div className='hidden xxl:block w-1/3'>
       <div className='bg-white dark:bg-grayBlue xl:p-[30px] rounded-[10px] flex flex-col gap-[15px] relative'>
-        <UserAvatar className='w-[150px] h-[150px]' src={user?.avatar || null} />
+        <UserAvatar
+          className='w-[150px] h-[150px]'
+          src={user?.avatar || null}
+          userId={user?.id}
+        />
         <h4 className='text-[32px] leading-10 text-center'>
           {user?.firstName} {user?.lastName}
         </h4>
         {user?.description && <div className=' text-center'>{user?.description}</div>}
         {/* <CardProfileDesc /> */}
-        <RowFriends avatars={friends?.map((friend) => friend?.avatar)} />
+        <RowFriends
+          friends={friends?.map((friend) => ({
+            avatar: friend?.avatar,
+            userId: friend.id
+          }))}
+        />
         {isMyProfile ? (
           <ButtonEditProfile type='text' />
         ) : (

src/widgets/chat/ui/chat.tsx

@@ -129,7 +129,7 @@ const Chat: FC = () => {
           >{`${friend?.firstName} ${friend?.lastName}`}</LinkName>
         </div>
 
-        <UserAvatar src={friend?.avatar || null} link={friendId} />
+        <UserAvatar src={friend?.avatar || null} link={friendId} userId={friend?.id} />
       </div>
       <div
         ref={container}

src/widgets/edit-account/ui/avatar-change/avatar-change.tsx

@@ -55,6 +55,7 @@ const AvatarChange: FC = () => {
               className='h-[100%] w-[100%]'
               src={avatarImg || null}
               isImgNotOnBackend
+              userId={user?.id}
             />
             <Input
               type='file'

src/widgets/edit-account/ui/banner-change/banner-change.tsx

@@ -39,7 +39,7 @@ const BannerChange: FC = () => {
         }, [previewUrl, user?.banner])
         return (
           <div className='relative flex-grow h-[120px] usm:h-full w-full'>
-            <Banner src={bannerImg || null} isImgNotOnBackend />
+            <Banner src={bannerImg || null} isImgNotOnBackend userId={user?.id} />
             <Button
               variant='secondary'
               className='absolute bottom-[40px] right-[50%] translate-x-[50%] usm:translate-x-0 usm:right-[20px] usm:bottom-[20px] w-[190px] h-[40px] lg:right-[30px] lg:bottom-[30px] xxl:right-[20px]'

src/widgets/header/ui/header.tsx

@@ -31,6 +31,7 @@ const Header: FC<IHeaderProps> = ({ className, ...props }) => {
         <ButtonChangeTheme className='flex lg:hidden' />
         <ButtonOpenNotifications />
         <UserAvatar
+          userId={user?.id}
           link={user?.id}
           src={user?.avatar || null}
           className='w-[44px] h-[44px]'

src/widgets/toaster/ui/toaster.tsx

@@ -38,7 +38,7 @@ const Toaster: FC = () => {
               <div className='flex items-center gap-[15px]'>
                 {notificationType ? (
                   <>
-                    <UserAvatar src={user?.avatar || null} />
+                    <UserAvatar src={user?.avatar || null} userId={user?.id} />
                     <div className='flex flex-col gap-[5px]'>
                       <span className='font-bold text-twitter'>
                         {user?.firstName} {user?.lastName}