quickblox-react-ui-kit 0.4.4-alpha.9 → 0.4.5-beta.5

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 = {
@@ -346,7 +346,7 @@ export default function MessageItem({
             }
           >
             {message.attachments && message.attachments.length > 0 ? (
-              <div>
+              <>
                 {message.attachments.map((attachment) => {
                   return (
                     <AttachmentBubble
@@ -355,7 +355,7 @@ export default function MessageItem({
                     />
                   );
                 })}
-              </div>
+              </>
             ) : (
               <TextBubble
                 text={

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,

package/src/Presentation/Views/DialogList/DialogList.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { JSX } from 'react';
 import cn from 'classnames';
 import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
@@ -12,27 +11,27 @@ type DialogListProps = {
     dialog: BaseViewModel<DialogEntity>,
     index: number,
   ) => void;
-  renderHeader: JSX.Element | null; // Заменяем ReactNode
-  renderFilter?: JSX.Element | null; // Заменяем ReactNode
+  renderHeader: React.ReactNode;
+  renderFilter?: React.ReactNode;
   renderDialogList: (
     handleSelectDialog: (
       dialog: BaseViewModel<DialogEntity>,
       index: number,
     ) => void,
-  ) => JSX.Element | JSX.Element[] | null; // Заменяем ReactNode
+  ) => React.ReactNode;
   scrollableHeight?: number;
   canScrolling?: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
-const DialogList = ({
+const DialogList: React.FC<DialogListProps> = ({
   onDialogSelected,
   renderHeader,
   renderFilter,
   renderDialogList,
   scrollableHeight = 736,
   canScrolling = false,
-}: DialogListProps) => {
+}) => {
   const [isMobile] = useMobileLayout();
 
   return (