quickblox-react-ui-kit 0.4.5-beta.2 → 0.4.5

package/src/Domain/use_cases/SyncDialogsUseCase.ts

@@ -19,7 +19,7 @@ export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
 
   private timer2Id: NodeJS.Timer | undefined;
 
-  private timerId: NodeJS.Timeout | null = null;
+  private timerId: NodeJS.Timer | undefined;
 
   constructor(
     dialogRepository: DialogsRepository,
@@ -171,7 +171,7 @@ export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
   override release() {
     super.release();
     if (this.timerId) {
-      clearInterval(this.timerId as NodeJS.Timeout);
+      clearTimeout(this.timerId);
     }
   }
 }

package/src/Domain/use_cases/UserTypingMessageUseCase.ts

@@ -11,7 +11,7 @@ export class UserTypingMessageUseCase implements IUseCase<void, void> {
 
   private typingTimeout = 3;
 
-  private _typingTimer: NodeJS.Timeout | null = null;
+  private _typingTimer: NodeJS.Timer | undefined;
 
   private _typingTime = 0;
 
@@ -38,8 +38,8 @@ export class UserTypingMessageUseCase implements IUseCase<void, void> {
       this._typingTimer = setInterval(() => {
         if ((Date.now() - this._typingTime) / 1000 >= this.typingTimeout) {
           this.messagesRepository.typingMessageStop(this.dialog, this.senderId);
-          clearInterval(this._typingTimer as NodeJS.Timeout);
-          this._typingTimer = null;
+          clearInterval(this._typingTimer);
+          this._typingTimer = undefined;
           this._typingTime = 0;
         }
       }, 500);

package/src/Presentation/Views/Dialog/AIComponents/AIAssist/AIAssist.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import RobotSvg from '../../../../icons/actions/robot.svg?react';
+import { ReactComponent as RobotSvg } from '../../../../icons/actions/robot.svg';
 import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
 import { AIUtils } from '../../../../../utils/utils';

package/src/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.tsx

@@ -1,6 +1,6 @@
 import cn from 'classnames';
 import Dropdown from '../../../../ui-components/Dropdown/Dropdown';
-import TranslateSvg from '../../../../icons/actions/translate.svg?react';
+import { ReactComponent as TranslateSvg } from '../../../../icons/actions/translate.svg';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
 import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
 import { AIUtils } from '../../../../../utils/utils';

package/src/Presentation/Views/Dialog/AIWidgets/AIRephraseWidget/AIRephraseWidget.tsx

@@ -40,7 +40,7 @@ type AIRephraseWidgetProps = {
   disableActions?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
-const AIRephraseWidget = ({
+const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
   messageText,
   waitAIWidget,
   setWaitAIWidget,

package/src/Presentation/Views/Dialog/AIWidgets/SliderMenu.tsx

@@ -23,7 +23,7 @@ type SliderMenuProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const SliderMenu = ({
+const SliderMenu: React.FC<SliderMenuProps> = ({
   items,
   width,
   arrowColor = 'black',
@@ -37,7 +37,7 @@ const SliderMenu = ({
   fontSize = 14,
   activeItemBorderColor = 'blue',
   activeItemBoxShadow = '2px 2px 4px rgba(0, 0, 0, 0.2)',
-}:SliderMenuProps) => {
+}) => {
   const [currentIndex, setCurrentIndex] = useState(-1);
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
 

package/src/Presentation/Views/Dialog/Dialog.tsx

@@ -18,18 +18,18 @@ type DialogProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const Dialog = ({
-                  messagesViewModel,
-                  maxWidthToResize = undefined,
-                  warningErrorText,
-                  renderHeader,
-                  renderMessageList,
-                  renderMessageInput,
-                  theme = undefined,
-                  headerContent = undefined,
-                  rootStyles = {},
-                  messagesContainerStyles = {},
-                }: DialogProps) => {
+const Dialog: React.FC<DialogProps> = ({
+  messagesViewModel,
+  maxWidthToResize = undefined,
+  warningErrorText,
+  renderHeader,
+  renderMessageList,
+  renderMessageInput,
+  theme = undefined,
+  headerContent = undefined,
+  rootStyles = {},
+  messagesContainerStyles = {},
+}: DialogProps) => {
   const [currentWarningErrorText, setCurrentWarningErrorText] =
     useState<string>('');
 

package/src/Presentation/Views/Dialog/DialogHeader/DialogBackIcon/DialogBackIcon.tsx

@@ -8,7 +8,10 @@ type RenderLeftActionsProps = {
   onClickBack: FunctionTypeVoidToVoid;
 };
 
-const DialogBackIcon = ({ onClickBack }: RenderLeftActionsProps) => {
+const DialogBackIcon: React.FC<
+  RenderLeftActionsProps
+  // eslint-disable-next-line react/function-component-definition
+> = ({ onClickBack }: RenderLeftActionsProps) => {
   return (
     <div className="dialog-header-left-icon">
       <ActiveSvg

package/src/Presentation/Views/Dialog/DialogHeader/DialogHeader.tsx

@@ -11,7 +11,7 @@ type DialogHeaderProps = {
   theme?: UiKitTheme;
 };
 // eslint-disable-next-line react/function-component-definition
-const DialogHeader = ({
+const DialogHeader: React.FC<DialogHeaderProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   dialogName,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/Presentation/Views/Dialog/DialogHeader/DialogInfoIcon/DialogInfoIcon.tsx

@@ -9,7 +9,10 @@ type RenderRightActionsProps = {
   onClickInfo: FunctionTypeVoidToVoid;
   theme?: UiKitTheme;
 };
-const DialogInfoIcon = ({
+const DialogInfoIcon: React.FC<
+  RenderRightActionsProps
+  // eslint-disable-next-line react/function-component-definition
+> = ({
   onClickInfo,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,

package/src/Presentation/Views/Dialog/DropDownMenu/DropDownMenu.tsx

@@ -67,7 +67,7 @@ type DropDownMenuProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const DropDownMenu = ({
+export const DropDownMenu: React.FC<DropDownMenuProps> = ({
   items,
 }: // itemsAI,
 DropDownMenuProps) => {

package/src/Presentation/Views/Dialog/DropDownMenu/ItemDropDownMenu/ItemDropDownMenu.tsx

@@ -10,7 +10,7 @@ type ItemDropDownMenuProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const ItemDropDownMenu = ({
+export const ItemDropDownMenu: React.FC<ItemDropDownMenuProps> = ({
   item,
   icon,
   touchAction,

package/src/Presentation/Views/Dialog/ErrorToast/ErrorToast.tsx

@@ -7,7 +7,7 @@ type ErrorToastProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const ErrorToast = ({
+export const ErrorToast: React.FC<ErrorToastProps> = ({
   messageText,
 }: // displayTimeout,
 ErrorToastProps) => {

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.tsx

@@ -64,7 +64,7 @@ const renderAvatar = (urlAvatar: string, typeDialog: DialogType) => {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogListItem = ({
+const DialogListItem: React.FC<DialogListItemProps> = ({
   name,
   avatar,
   typeDialog,

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.tsx

@@ -17,7 +17,7 @@ type DialogsWithSearchProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogsWithSearch = ({
+const DialogsWithSearch: React.FC<DialogsWithSearchProps> = ({
   dialogs,
   currentDialog,
   selectedDialogs,

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.tsx

@@ -9,7 +9,7 @@ type SearchComponentProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const SearchComponent = ({
+const SearchComponent: React.FC<SearchComponentProps> = ({
   onChange,
 }: SearchComponentProps) => {
   const [stringForFilter, setStringForFilter] = useState('');

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessageFlow.tsx

@@ -21,7 +21,7 @@ type ForwardMessageFlowProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const ForwardMessageFlow = ({
+const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
   messages,
   dialogs,
   currentDialog,

package/src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessagePreview/ForwardMessagePreview.tsx

@@ -17,7 +17,7 @@ function trimMessage(messageText: string) {
 }
 
 // eslint-disable-next-line react/function-component-definition
-const ForwardMessagePreview = ({
+const ForwardMessagePreview: React.FC<ForwardMessagePreviewProps> = ({
   messages,
   userNameSentMessage,
 }: ForwardMessagePreviewProps) => {

package/src/Presentation/Views/Dialog/ForwardMessageFlow/InputForForwarding/InputForForwarding.tsx

@@ -14,7 +14,7 @@ type InputForForwardingProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const InputForForwarding = ({
+const InputForForwarding: React.FC<InputForForwardingProps> = ({
   inputText,
   onChange,
   onSend,

package/src/Presentation/Views/Dialog/InputMessage/InputMessage.tsx

@@ -21,7 +21,7 @@ type MessageInputProps = {
   theme?: UiKitTheme;
 };
 // eslint-disable-next-line react/function-component-definition
-const InputMessage = ({
+const InputMessage: React.FC<MessageInputProps> = ({
   messageText,
   onChangeText,
   sendText,

package/src/Presentation/Views/Dialog/Message/HighLightLink/HighLightLink.tsx

@@ -75,7 +75,7 @@ type HighLightLinkProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const HighLightLink = ({
+export const HighLightLink: React.FC<HighLightLinkProps> = ({
   messageText,
 }: HighLightLinkProps) => {
   /*

package/src/Presentation/Views/Dialog/Message/Message.tsx

@@ -39,7 +39,7 @@ type MessageProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-const Message = ({
+const Message: React.FC<MessageProps> = ({
   message,
   userId,
   setWaitAIWidget,

package/src/Presentation/Views/Dialog/Message/MessageAttachment/AudioAttachment/AudioAttachment.tsx

@@ -8,7 +8,7 @@ type AudioAttachmentComponentProps = {
   audioFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const AudioAttachment = ({
+const AudioAttachment: React.FC<AudioAttachmentComponentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   audioFile,
 }: AudioAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/Message/MessageAttachment/DefaultAttachment/DefaultAttachment.tsx

@@ -17,7 +17,7 @@ type DefaultAttachmentComponentProps = {
   fileUrl: string;
 };
 // eslint-disable-next-line react/function-component-definition
-const DefaultAttachment = ({
+const DefaultAttachment: React.FC<DefaultAttachmentComponentProps> = ({
   fileName,
   fileUrl,
 }: DefaultAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/Message/MessageAttachment/ImageAttachment/ImageAttachment.tsx

@@ -7,7 +7,7 @@ type ImageAttachmentComponentProps = {
   imageFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const ImageAttachment = ({
+const ImageAttachment: React.FC<ImageAttachmentComponentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   imageFile,
 }: ImageAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/Message/MessageAttachment/VideoAttachment/VideoAttachment.tsx

@@ -7,7 +7,7 @@ type VideoAttachmentComponentProps = {
   videoFile: FileEntity;
 };
 // eslint-disable-next-line react/function-component-definition
-const VideoAttachment = ({
+const VideoAttachment: React.FC<VideoAttachmentComponentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   videoFile,
 }: VideoAttachmentComponentProps) => {

package/src/Presentation/Views/Dialog/MessageContextMenu/MessageContextMenu.tsx

@@ -1,7 +1,7 @@
 import Dropdown from '../../../ui-components/Dropdown/Dropdown';
 import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
 import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
-import MoreSvg from '../../../icons/navigation/more.svg?react';
+import { ReactComponent as MoreSvg } from '../../../icons/navigation/more.svg';
 import { Option } from '../../../ui-components/Dropdown/DropdownOption';
 import './MessageContextMenu.scss';
 

package/src/Presentation/Views/Dialog/MessageItem/MessageItem.tsx

@@ -13,7 +13,7 @@ import Loader from '../../../ui-components/Loader/Loader';
 import MessageSeparator from '../../../ui-components/MessageSeparator/MessageSeparator';
 import { MessageDTOMapper } from '../../../../Data/source/remote/Mapper/MessageDTOMapper';
 import Avatar from '../../../ui-components/Avatar/Avatar';
-import UserSvg from '../../../icons/contents/user.svg?react';
+import { ReactComponent as UserSvg } from '../../../icons/contents/user.svg';
 import './MessageItem.scss';
 
 export type MessageItemProps = {

package/src/Presentation/Views/Dialog/SystemDateBanner/SystemDateBanner.tsx

@@ -6,7 +6,7 @@ type SystemDateBannerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const SystemDateBanner = ({
+export const SystemDateBanner: React.FC<SystemDateBannerProps> = ({
   text,
 }: SystemDateBannerProps) => {
   return (

package/src/Presentation/Views/Dialog/SystemMessageBanner/SystemMessageBanner.tsx

@@ -6,7 +6,7 @@ type SystemMessageBannerProps = {
 };
 
 // eslint-disable-next-line react/function-component-definition
-export const SystemMessageBanner = ({
+export const SystemMessageBanner: React.FC<SystemMessageBannerProps> = ({
   messageText,
 }: SystemMessageBannerProps) => {
   return (

package/src/Presentation/Views/Dialog/VoiceMessage/VoiceMessage.tsx

@@ -7,7 +7,7 @@ type VoiceMessageProps = {
   onClick: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition
-const VoiceMessage = ({
+const VoiceMessage: React.FC<VoiceMessageProps> = ({
   icon,
   onClick,
 }: VoiceMessageProps) => {

package/src/Presentation/Views/Dialog/useDialogViewModel.ts

@@ -90,11 +90,38 @@ export default function useDialogViewModel(
     });
   }
 
+  const getSender = async (sender_id: number) => {
+    const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
+      new UsersRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        currentContext.storage.REMOTE_DATA_SOURCE,
+      ),
+      [sender_id],
+    );
+
+    let userEntity: UserEntity | undefined;
+
+    await getUser
+      .execute()
+      // eslint-disable-next-line promise/always-return
+      .then((data) => {
+        // eslint-disable-next-line prefer-destructuring
+        userEntity = data[0];
+      })
+      .catch((e) => {
+        console.log('have ERROR get users :', JSON.stringify(e));
+      });
+
+    return userEntity;
+  };
+
   async function getMessages(currentPagination?: Pagination) {
     setLoading(true);
 
     let participants: Array<number> = [];
     let userDictionary: Record<number, UserEntity> = {};
+    let userMissingDictionary: Record<number, UserEntity> = {};
+    let messagesDialog: MessageEntity[] = [];
 
     if (dialog?.type === DialogType.group) {
       participants = (dialog as GroupDialogEntity).participantIds;
@@ -124,7 +151,6 @@ export default function useDialogViewModel(
           return obj;
         }, {});
 
-        setLoading(false);
         setError('');
       })
       .catch((e) => {
@@ -152,88 +178,84 @@ export default function useDialogViewModel(
           } messages:${JSON.stringify(data)}`,
         );
 
-        const ResultMessages = data.ResultData.map((message) => {
-          const obj = { ...message };
-
-          console.log('have sender id:', message.sender_id);
-
-          if (userDictionary) {
-            obj.sender = userDictionary[message.sender_id];
-            if (
-              obj.sender &&
-              obj.sender.full_name &&
-              regex &&
-              !regex.test(obj.sender.full_name)
-            ) {
-              obj.sender.full_name = 'Unknown';
-            }
-          }
-
-          return obj;
-        });
-
-        console.log(`result messages:${JSON.stringify(ResultMessages)}`);
-        // setMessages(ResultMessages);
-        setMessages((prevState) => {
-          const newItems: MessageEntity[] =
-            currentPagination === undefined ||
-            currentPagination?.getCurrentPage() === 0
-              ? [...ResultMessages]
-              : [...prevState, ...ResultMessages];
-
-          return newItems;
-        });
-        // eslint-disable-next-line promise/always-return
-        // if (
-        //   dialog?.type === DialogType.private ||
-        //   dialog?.type === DialogType.group
-        // ) {
-        //   const updDialog = { ...dialog };
-        //
-        //   updDialog.unreadMessageCount = 0;
-        //   setDialog(updDialog);
-        //
-        //   informDataSources(updDialog);
-        //
-        // }
-        setLoading(false);
+        messagesDialog = data.ResultData;
         setPagination(data.CurrentPagination);
         setError('');
       })
       .catch((e) => {
-        console.log('have ERROR get users :', JSON.stringify(e));
+        console.log('have ERROR get messages :', JSON.stringify(e));
         setLoading(false);
         setError((e as unknown as Error).message);
       });
-    //
 
-    console.log('EXECUTE USE CASE MessagesViewModelWithMockUseCase EXECUTED');
-  }
+    //
 
-  const getSender = async (sender_id: number) => {
-    const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
-      new UsersRepository(
-        currentContext.storage.LOCAL_DATA_SOURCE,
-        currentContext.storage.REMOTE_DATA_SOURCE,
-      ),
-      [sender_id],
+    const senderIds = Array.from(
+      new Set(messagesDialog.map((msg) => msg.sender_id)),
     );
+    const missingSenderIds = senderIds.filter((id) => !(id in userDictionary));
 
-    let userEntity: UserEntity | undefined;
+    const getMissingSenderUsersFromDialogByIdsUseCase: GetUsersByIdsUseCase =
+      new GetUsersByIdsUseCase(
+        new UsersRepository(LOCAL_DATA_SOURCE, REMOTE_DATA_SOURCE),
+        missingSenderIds,
+      );
 
-    await getUser
+    await getMissingSenderUsersFromDialogByIdsUseCase
       .execute()
       // eslint-disable-next-line promise/always-return
       .then((data) => {
-        // eslint-disable-next-line prefer-destructuring
-        userEntity = data[0];
+        userMissingDictionary = data.reduce((acc, item) => {
+          const obj = acc;
+
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          acc[item.id] = item;
+
+          return obj;
+        }, {});
+
+        setError('');
       })
       .catch((e) => {
-        console.log('have ERROR get users :', JSON.stringify(e));
+        console.log('have ERROR get missing users :', JSON.stringify(e));
+        setLoading(false);
+        setError((e as unknown as Error).message);
       });
 
-    return userEntity;
-  };
+    userDictionary = { ...userDictionary, ...userMissingDictionary };
+
+    const ResultMessages = messagesDialog.map((message) => {
+      const obj = { ...message };
+
+      if (userDictionary) {
+        obj.sender = userDictionary[message.sender_id];
+        if (
+          obj.sender &&
+          obj.sender.full_name &&
+          regex &&
+          !regex.test(obj.sender.full_name)
+        ) {
+          obj.sender.full_name = 'Unknown';
+        }
+      }
+
+      return obj;
+    });
+
+    console.log(`result messages:${JSON.stringify(ResultMessages)}`);
+    setMessages((prevState) => {
+      const newItems: MessageEntity[] =
+        currentPagination === undefined ||
+        currentPagination?.getCurrentPage() === 0
+          ? [...ResultMessages]
+          : [...prevState, ...ResultMessages];
+
+      return newItems;
+    });
+    setLoading(false);
+    console.log('EXECUTE USE CASE MessagesViewModelWithMockUseCase EXECUTED');
+  }
 
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogViewModel');

package/src/Presentation/Views/DialogInfo/DialogInfo.tsx

@@ -44,7 +44,7 @@ type HeaderDialogsProps = {
   disableAction?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
-const DialogInfo = ({
+const DialogInfo: React.FC<HeaderDialogsProps> = ({
   dialog,
   dialogViewModel,
   onCloseDialogInformationHandler,

package/src/Presentation/Views/DialogInfo/DialogMemberButton/DialogMembersButton.tsx

@@ -9,11 +9,11 @@ type DialogMembersButtonProps = {
   touchHandler: FunctionTypeVoidToVoid;
 };
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const DialogMembersButton = ({
+const DialogMembersButton: React.FC<DialogMembersButtonProps> = ({
   content,
   clickHandler,
   touchHandler,
-}:DialogMembersButtonProps) => {
+}) => {
   return (
     <ActiveButton
       content={<div className="dialog-members-btn">{content}</div>}

package/src/Presentation/Views/DialogInfo/MembersList/MembersList.tsx

@@ -14,7 +14,7 @@ type MembersListProps = {
   maxHeight?: number;
 };
 // eslint-disable-next-line react/function-component-definition
-const MembersList = ({
+const MembersList: React.FC<MembersListProps> = ({
   closeInformationHandler,
   members,
   maxHeight = 0,

package/src/Presentation/Views/DialogInfo/UsersList/SingleUser/SingleUser.tsx

@@ -9,7 +9,7 @@ type UserSingleProps = {
   keyValue?: number;
 };
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
-const UserSingle = ({ user, keyValue }:UserSingleProps) => {
+const UserSingle: React.FC<UserSingleProps> = ({ user, keyValue }) => {
   // const [dialogAvatarUrl, setDialogAvatarUrl] = React.useState('');
   // const getUserAvatarUid = () => {
   //   let result = '';

package/src/Presentation/Views/DialogInfo/UsersList/UsersList.tsx

@@ -11,12 +11,12 @@ type UsersListProps = {
   maxHeight?: number;
 };
 // eslint-disable-next-line react/function-component-definition
-const UsersList = ({
+const UsersList: React.FC<UsersListProps> = ({
   usersFirstPageToView,
   allUsers,
   usersInDialogCount = 0,
   maxHeight = 0,
-}: UsersListProps) => {
+}) => {
   const [hasMore, setHasMore] = React.useState(false);
   const [usersToView, setUsersToView] = React.useState<UserEntity[]>([
     ...usersFirstPageToView,
@@ -56,7 +56,7 @@ const UsersList = ({
       data={usersToView}
       renderItem={(user) => (
         <UserListItem
-          userName={user.full_name}
+          userName={user.full_name || user.login || user.email || ''}
           avatarUrl={user.photo!}
           key={user.id}
         />