feat: add users avatar

Barresi · Apr 16, 2024 · b5af443 · b5af443
1 parent a944993
commit b5af443
Show file tree

Hide file tree

Showing 14 changed files with 51 additions and 33 deletions.
diff --git a/src/entities/card-friends/ui/card-friends.tsx b/src/entities/card-friends/ui/card-friends.tsx
@@ -29,7 +29,10 @@ const CardFriends: FC<ICardFriendsProps> = ({
   const friend = users.find((user) => user.id === friendId)
 
   const avatar = (
-    <UserAvatar className='w-[50px] h-[50px] usm:w-[75px] usm:h-[75px] lg:w-[100px] lg:h-[100px]' />
+    <UserAvatar
+      src={friend?.avatar || null}
+      className='w-[50px] h-[50px] usm:w-[75px] usm:h-[75px] lg:w-[100px] lg:h-[100px]'
+    />
   )
 
   const info = (

diff --git a/src/entities/card-message/ui/card-message.tsx b/src/entities/card-message/ui/card-message.tsx
@@ -34,7 +34,10 @@ const CardMessage: FC<ICardMessageProps> = ({
         className
       )}
     >
-      <UserAvatar className='w-[50px] h-[50px] lg:w-[60px] lg:h-[60px]' />
+      <UserAvatar
+        src={friend?.avatar || null}
+        className='w-[50px] h-[50px] lg:w-[60px] lg:h-[60px]'
+      />
 
       <div className='flex-1'>
         <h3 className='font-bold leading-6 whitespace-nowrap'>

diff --git a/src/entities/card-notification/ui/card-notification.tsx b/src/entities/card-notification/ui/card-notification.tsx
@@ -16,13 +16,13 @@ interface ICardNotificationProps {
 }
 
 const CardNotification: FC<ICardNotificationProps> = ({ className, date, id, type }) => {
-  const user = useAppSelector(selectAllUsers).filter((user) => user.id === id)[0]
+  const user = useAppSelector(selectAllUsers).find((user) => user.id === id)
 
   return (
     <Card className={cn('', className)}>
       <div className='flex items-center gap-[15px]'>
         <div className='self-start'>
-          <UserAvatar className='w-[60px] h-[60px] ' />
+          <UserAvatar className='w-[60px] h-[60px] ' src={user?.avatar || null} />
         </div>
 
         <div className='flex flex-col gap-[5px]'>

diff --git a/src/entities/message/message.tsx b/src/entities/message/message.tsx
@@ -1,29 +1,34 @@
+import { selectAllUsers } from '@app/store/reducers/friends/selectors'
+import { selectUser } from '@app/store/reducers/profileInfo/selectors'
+import { useAppSelector } from '@shared/lib/hooks/store-hooks'
 import { parseDateToTime } from '@shared/lib/parse-date'
 import { UserAvatar } from '@shared/ui/user-avatar'
 import { type FC } from 'react'
 
 interface IMessageProps {
+  senderId: string
   text: string
-  my: boolean
   date: string
-  firstName: string | undefined | null
-  lastName: string | undefined | null
 }
 
-const Message: FC<IMessageProps> = ({ text, my, date }) => {
+const Message: FC<IMessageProps> = ({ text, senderId, date }) => {
+  const allUsers = useAppSelector(selectAllUsers)
+  const userInfo = useAppSelector(selectUser)
+  const isMyMessage = senderId === userInfo?.id
+  const user = isMyMessage ? userInfo : allUsers.find((user) => user.id === senderId)
   return (
     <div
       className={`p-[15px] flex items-center gap-[10px] ${
-        my ? ' self-end  flex-row-reverse' : ' self-start'
+        isMyMessage ? ' self-end  flex-row-reverse' : ' self-start'
       }`}
     >
       <div className='flex flex-col items-center self-start'>
-        <UserAvatar />
+        <UserAvatar src={user?.avatar || null} />
         <span>{parseDateToTime(date)}</span>
       </div>
       <div
         className={`p-[15px] rounded-[5px] self-start break-words max-w-[250px] usm:max-w-[350px] lg:max-w-[500px] xxl:max-w-[600px] ${
-          my ? 'bg-water dark:bg-nickel' : 'bg-darkWhite dark:bg-brownBlack'
+          isMyMessage ? 'bg-water dark:bg-nickel' : 'bg-darkWhite dark:bg-brownBlack'
         }`}
       >
         {text}

diff --git a/src/pages/page-profile/ui/card-profile-mobile.tsx b/src/pages/page-profile/ui/card-profile-mobile.tsx
@@ -4,14 +4,20 @@ import { UserAvatar } from '@shared/ui/user-avatar'
 import { type FC } from 'react'
 import { CardProfileDesc } from './card-profile-desc'
 
+import { selectUser } from '@app/store/reducers/profileInfo/selectors'
 import avatarLight from '@assets/avatar/default avatar light.svg'
+import { useAppSelector } from '@shared/lib/hooks/store-hooks'
 
 const CardProfileMobile: FC = () => {
+  const user = useAppSelector(selectUser)
   return (
     <div className='block xxl:hidden relative bg-white dark:bg-grayBlue p-[30px] rounded-[10px]'>
       <div className='flex flex-row justify-between'>
         <div className='flex flex-row justify-start w-full'>
-          <UserAvatar 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]' />
+          <UserAvatar
+            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]'
+          />
           <div className='mt-[50px] mx-auto sm:mt-auto sm:mx-0 sm:ml-[200px]'>
             <h4 className='text-[32px] mb-[0] sm:mb-[10px] text-center sm:text-start'>
               Борис Маслов

diff --git a/src/pages/page-profile/ui/card-profile.tsx b/src/pages/page-profile/ui/card-profile.tsx
@@ -1,18 +1,24 @@
+import { selectUser } from '@app/store/reducers/profileInfo/selectors'
 import { RowFriends } from '@entities/row-friends'
+import { useAppSelector } from '@shared/lib/hooks/store-hooks'
 import { Button } from '@shared/ui/button'
 import { UserAvatar } from '@shared/ui/user-avatar'
 import { type FC } from 'react'
+import { CardProfileDesc } from './card-profile-desc'
 
 import avatarLight from '@assets/avatar/default avatar light.svg'
-import { CardProfileDesc } from './card-profile-desc'
 
 const CardProfile: FC = () => {
+  const user = useAppSelector(selectUser)
   return (
     <div className='hidden xxl:block w-[544px]'>
       <div className='bg-white dark:bg-grayBlue xl:p-[30px] rounded-[10px] flex flex-col gap-[20px]'>
         <div className='flex flex-row justify-between'>
           <div className='flex flex-row justify-start w-full'>
-            <UserAvatar className='w-[150px] h-[150px] mr-[15px]' />
+            <UserAvatar
+              className='w-[150px] h-[150px] mr-[15px]'
+              src={user?.avatar || null}
+            />
             <div className='grid gap-[10px]'>
               <h4 className='text-[32px]'>Борис Маслов</h4>
               <CardProfileDesc />

diff --git a/src/pages/page-profile/ui/post-news.tsx b/src/pages/page-profile/ui/post-news.tsx
@@ -7,7 +7,6 @@ import icon1 from './svg/icon1.svg'
 import EyeIcon from './svg/Eye.svg'
 
 import { ButtonAction } from '@shared/ui/button-action'
-import { InputSendMessage } from '@shared/ui/input-send-message'
 import Image1 from './image/image.png'
 
 interface IPostNewsProps {
@@ -61,9 +60,9 @@ const PostNews: FC<IPostNewsProps> = () => {
           </p>
         </div>
       </div>
-      <hr />
+      {/* <hr />
       <div className='flex flex-row justify-start w-full'>
-        <UserAvatar className='w-[50px] h-[50px] mr-[15px]' />
+        <UserAvatar src={} className='w-[50px] h-[50px] mr-[15px]' />
         <div>
           <h4 className='text-[#D22828] text-[18px] font-bold'>Борис Маслов</h4>
           <p className='text-[16px]'>Классное фото</p>
@@ -72,7 +71,7 @@ const PostNews: FC<IPostNewsProps> = () => {
           </p>
         </div>
       </div>
-      <InputSendMessage sendMessage={() => {}} placeholder='Написать сообщение...' />
+      <InputSendMessage sendMessage={() => {}} placeholder='Написать сообщение...' /> */}
     </div>
   )
 }

diff --git a/src/shared/lib/types/api.ts b/src/shared/lib/types/api.ts
@@ -127,6 +127,8 @@ export interface IReadUserNotificationsResponse {
 // UserInfo api
 
 export interface IUserInfoResponse {
+  avatar: null | string
+  banner: null | string
   id: string
   firstName: string
   lastName: string

diff --git a/src/shared/lib/types/types.ts b/src/shared/lib/types/types.ts
@@ -1,4 +1,6 @@
 export interface IUser {
+  avatar: null | string
+  banner: null | string
   id: string
   firstName: string
   lastName: string

diff --git a/src/shared/ui/user-avatar.tsx b/src/shared/ui/user-avatar.tsx
@@ -57,7 +57,7 @@ const AvatarFallback = forwardRef<
 AvatarFallback.displayName = Fallback.displayName
 
 interface IUserAvatarProps {
-  src?: string
+  src: string | null
   className?: string
 }
 

diff --git a/src/widgets/chat/ui/chat.tsx b/src/widgets/chat/ui/chat.tsx
@@ -92,18 +92,10 @@ const Chat: FC = () => {
 
   const renderMessages = (value: IMessage, ind: number): ReactNode => {
     const { text, senderId, createdAt, read } = value
-    const isMyMessage = senderId === user?.id
     return (
       <>
         {!read && senderId !== user?.id && renderNewMessagesBlock()}
-        <Message
-          text={text}
-          date={createdAt}
-          my={isMyMessage}
-          key={ind}
-          firstName={isMyMessage ? user?.firstName : friend?.firstName}
-          lastName={isMyMessage ? user?.lastName : friend?.lastName}
-        />
+        <Message text={text} date={createdAt} key={ind} senderId={senderId} />
       </>
     )
   }
@@ -132,7 +124,7 @@ const Chat: FC = () => {
           <span className='font-bold text-xl text-signalBlack dark:text-darkWhite text-center'>{`${friend?.firstName} ${friend?.lastName}`}</span>
         </div>
 
-        <UserAvatar />
+        <UserAvatar src={friend?.avatar || null} />
       </div>
       <div
         ref={container}

diff --git a/src/widgets/edit-account/ui/avatar-change/avatar-change.tsx b/src/widgets/edit-account/ui/avatar-change/avatar-change.tsx
@@ -36,7 +36,7 @@ const AvatarChange: FC = () => {
               <div className='z-10 flex justify-center items-center bg-black opacity-20 absolute left-0 right-0 top-0 bottom-0 rounded-full' />
             </div>
 
-            <UserAvatar className='h-[100%] w-[100%]' src={previewUrl || undefined} />
+            <UserAvatar className='h-[100%] w-[100%]' src={previewUrl || null} />
             <Input
               type='file'
               className='hidden'

diff --git a/src/widgets/header/ui/header.tsx b/src/widgets/header/ui/header.tsx
@@ -28,7 +28,7 @@ const Header: FC<IHeaderProps> = ({ className, avatar, ...props }) => {
       <div className='flex items-center justify-center gap-[15px]'>
         <ButtonChangeTheme className='flex lg:hidden' />
         <ButtonOpenNotifications />
-        <UserAvatar src={avatar} className='w-[44px] h-[44px]' />
+        <UserAvatar src={avatar || null} className='w-[44px] h-[44px]' />
       </div>
     </header>
   )

diff --git a/src/widgets/toaster/ui/toaster.tsx b/src/widgets/toaster/ui/toaster.tsx
@@ -26,7 +26,7 @@ const Toaster: FC = () => {
         userId,
         description
       }) {
-        const user = users.filter((user) => user.id === userId)[0]
+        const user = users.find((user) => user.id === userId)
 
         return (
           <Toast className='' key={id}>
@@ -38,7 +38,7 @@ const Toaster: FC = () => {
               <div className='flex items-center gap-[15px]'>
                 {notificationType ? (
                   <>
-                    <UserAvatar />
+                    <UserAvatar src={user?.avatar || null} />
                     <div className='flex flex-col gap-[5px]'>
                       <span className='font-bold text-twitter'>
                         {user?.firstName} {user?.lastName}