Merge pull request #1081 from kimbu-chat/develop

Develop

Author: remotenode

package.json

@@ -87,7 +87,7 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "file-loader": "6.2.0",
     "husky": "7.0.1",
-    "kimbu-models": "git://github.com/ravudi/frontend-types.git#fd7cc7c",
+    "kimbu-models": "git://github.com/kimbu-chat/frontend-types.git#fd7cc7c",
     "lint-staged": "11.1.2",
     "prettier": "2.3.2",
     "run-script-os": "1.1.6",

src/utils/constants.ts src/common/constants.ts

@@ -15,3 +15,6 @@ export const FULL_DATE_TIME = 'l LT';
 export const SHORT_TIME_AM_PM = 'LT';
 export const MINUTES_SECONDS = 'mm:ss';
 export const REQUEST_TIMEOUT = 10000;
+
+export const INTERSECTION_THROTTLE_FOR_MEDIA = 350;
+export const INTERSECTION_THRESHOLD_FOR_MEDIA = 0.0001;

src/common/constants/media.ts

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Rnd } from 'react-rnd';
 
+import { SECOND_DURATION } from '@common/constants';
 import { Avatar } from '@components/avatar';
 import { Dropdown } from '@components/dropdown';
 import { useActionWithDispatch } from '@hooks/use-action-with-dispatch';
@@ -48,7 +49,6 @@ import {
   getInterlocutorVideoTrack,
   tracks,
 } from '@store/calls/utils/user-media';
-import { SECOND_DURATION } from '@utils/constants';
 import { playSoundSafely } from '@utils/current-music';
 import { getHourMinuteSecond } from '@utils/date-utils';
 

src/components/active-call/active-call.tsx

@@ -58,7 +58,8 @@ export const ChatActions: React.FC = () => {
 
   const chat = useSelector(
     getInfoChatSelector,
-    (prev, next) => prev === next || prev?.draftMessage !== next?.draftMessage,
+    // todo: avoid unnecessary renders
+    (prev, next) => prev === next,
   );
 
   const isMe = useIsMe(chat.interlocutorId);

src/components/chat-info-right-panel/chat-actions/chat-actions.tsx

@@ -6,7 +6,7 @@ import { useSelector } from 'react-redux';
 import {
   INTERSECTION_THROTTLE_FOR_MEDIA,
   INTERSECTION_THRESHOLD_FOR_MEDIA,
-} from '@common/constants/media';
+} from '@common/constants';
 import { Avatar } from '@components/avatar';
 import { MediaModal } from '@components/image-modal';
 import { useActionWithDispatch } from '@hooks/use-action-with-dispatch';

src/components/chat-info-right-panel/chat-info-right-panel.tsx

@@ -35,7 +35,7 @@ export const AudioList: React.FC<IAudioListProps> = ({ rootRef }) => {
   }, [getAudios]);
 
   const audiosWithSeparators = setSeparators<IAudioAttachment>(
-    audiosForSelectedChat?.audios,
+    audiosForSelectedChat?.data,
     { separateByMonth: true, separateByYear: true },
     { separateByMonth: true, separateByYear: true },
   );

src/components/chat-info-right-panel/chat-media/audio-list/audio-list.tsx

@@ -28,7 +28,7 @@ export const FileList: React.FC<IFileListProps> = ({ rootRef }) => {
   }, [getRawAttachments]);
 
   const filesWithSeparators = setSeparators(
-    filesForSelectedChat?.files,
+    filesForSelectedChat?.data,
     { separateByMonth: true, separateByYear: true },
     { separateByMonth: true, separateByYear: true },
   );

src/components/chat-info-right-panel/chat-media/file-list/file-list.tsx

@@ -33,16 +33,16 @@ const PhotoList: React.FC<PhotoListProps> = ({ observeIntersection, rootRef }) =
   }, [getPhotoAttachments]);
 
   const photosWithSeparators = setSeparators<IPictureAttachment>(
-    photoForSelectedChat?.photos,
+    photoForSelectedChat?.data,
     { separateByMonth: true, separateByYear: true },
     { separateByMonth: true, separateByYear: true },
   );
 
   const PhotoAttachmentComponent: React.FC<IPictureAttachment> = ({ ...photo }) =>
-    photoForSelectedChat?.photos ? (
+    photoForSelectedChat?.data ? (
       <Photo
         photo={photo}
-        attachmentsArr={photoForSelectedChat.photos}
+        attachmentsArr={photoForSelectedChat.data}
         observeIntersection={observeIntersection}
       />
     ) : null;

src/components/chat-info-right-panel/chat-media/photo-list/photo-list.tsx

@@ -29,7 +29,7 @@ export const RecordingsList: React.FC<IRecordingsListProps> = ({ rootRef }) => {
   }, [getRecordings]);
 
   const recordingsWithSeparators = setSeparators<IVoiceAttachment>(
-    recordingsForSelectedChat?.recordings,
+    recordingsForSelectedChat?.data,
     { separateByMonth: true, separateByYear: true },
     { separateByMonth: true, separateByYear: true },
   );

src/components/chat-info-right-panel/chat-media/recordings-list/recordings-list.tsx

@@ -31,14 +31,14 @@ export const VideoList: React.FC<IVideoListProps> = ({ rootRef }) => {
   }, [getVideoAttachmentss]);
 
   const videosWithSeparators = setSeparators<IVideoAttachment>(
-    videosForSelectedChat?.videos,
+    videosForSelectedChat?.data,
     { separateByMonth: true, separateByYear: true },
     { separateByMonth: true, separateByYear: true },
   );
 
   const VideoAttachmentComponent: React.FC<IVideoAttachment & IGroupable> = ({ ...video }) =>
-    videosForSelectedChat?.videos ? (
-      <VideoFromList video={video} attachmentsArr={videosForSelectedChat.videos} />
+    videosForSelectedChat?.data ? (
+      <VideoFromList video={video} attachmentsArr={videosForSelectedChat.data} />
     ) : null;
 
   return (

src/components/chat-info-right-panel/chat-media/video-list/video-list.tsx

@@ -121,13 +121,15 @@ const ChatItem: React.FC<IChatItemProps> = React.memo(({ chatId }) => {
     t,
   ]);
 
+  // TODO: Make this logic common across chat item and message item
   const messageStatIconMap = {
     [MessageState.QUEUED]: <MessageQeuedSvg />,
     [MessageState.SENT]: <MessageSentSvg />,
     [MessageState.READ]: <MessageReadSvg />,
     [MessageState.ERROR]: <MessageErrorSvg />,
     [MessageState.DELETED]: undefined,
     [MessageState.LOCALMESSAGE]: undefined,
+    [MessageState.DRAFT]: undefined,
   };
 
   return (

src/components/chat-list/chat-item/chat-item.tsx

@@ -30,21 +30,21 @@ const MessagesSearch = () => {
     if (isSearching) {
       setIsSearching(false);
       getMessages({
-        isFromScroll: false,
+        initializedByScroll: false,
       });
     }
   }, [isSearching, getMessages]);
 
   const resetSearch = useCallback(() => {
     getMessages({
-      isFromScroll: false,
+      initializedByScroll: false,
     });
   }, [getMessages]);
 
   const searchMessages = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       getMessages({
-        isFromScroll: false,
+        initializedByScroll: false,
         searchString: e.target.value,
       });
     },

src/components/chat-top-bar/messages-search/messages-search.tsx

@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
 import { InfiniteScroll } from '@components/infinite-scroll';
 import { CenteredLoader, LoaderSize } from '@components/loader';
 import { SearchBox } from '@components/search-box';
-import { useActionWithDeferred } from '@hooks/use-action-with-deferred';
 import { useActionWithDispatch } from '@hooks/use-action-with-dispatch';
 import { getFriendsAction, resetSearchFriendsAction } from '@store/friends/actions';
 import { getMyFriendsListSelector, getMySearchFriendsListSelector } from '@store/friends/selectors';
@@ -27,7 +26,7 @@ export const FriendList = () => {
     loading: searchFriendsLoading,
   } = searchFriendsList;
 
-  const loadFriends = useActionWithDeferred(getFriendsAction);
+  const loadFriends = useActionWithDispatch(getFriendsAction);
   const resetSearchFriends = useActionWithDispatch(resetSearchFriendsAction);
 
   useEffect(

src/components/friend-list/friend-list.tsx

@@ -43,8 +43,8 @@ const InitialGroupChatAddFriendModal: React.FC<
   const [name, setName] = useState('');
 
   const chat = useSelector(
+    // todo: avoid unnecessary renders
     getInfoChatSelector,
-    (prev, next) => prev === next || prev?.draftMessage !== next?.draftMessage,
   );
 
   const addUsersToGroupChat = useActionWithDeferred(addUsersToGroupChatAction);

src/components/group-chat-add-friend-modal/group-chat-add-friend-modal.tsx

@@ -15,14 +15,14 @@ import { ReactComponent as PlaySVG } from '@icons/play.svg';
 import { ReactComponent as VideoSVG } from '@icons/video.svg';
 import { ReactComponent as MicrophoneSvg } from '@icons/voice.svg';
 import { removeAttachmentAction } from '@store/chats/actions';
-import { IAttachmentToSend, IAttachmentCreation } from '@store/chats/models';
+import { IAttachmentCreation, IAttachmentToSend } from '@store/chats/models';
 import { INamedAttachment } from '@store/chats/models/named-attachment';
 import { getRawAttachmentSizeUnit } from '@utils/get-file-size-unit';
 
 import './message-input-attachment.scss';
 
 interface IMessageInputAttachmentProps {
-  attachment: IAttachmentToSend<IAttachmentBase>;
+  attachment: IAttachmentToSend | IAttachmentBase;
   isFromEdit?: boolean;
   removeSelectedAttachment?: (attachmentToRemove: IAttachmentCreation) => void;
 }
@@ -33,93 +33,87 @@ export const MessageInputAttachment: React.FC<IMessageInputAttachmentProps> = ({
   removeSelectedAttachment,
 }) => {
   const removeAttachment = useActionWithDispatch(removeAttachmentAction);
-
+  const newAttachment = attachment as IAttachmentToSend;
   const [previewUrl, setPreviewUr] = useState<string>('');
 
   const removeThisAttachment = useCallback(() => {
     if (removeSelectedAttachment) {
       removeSelectedAttachment({
-        type: attachment.attachment.type,
-        id: attachment.attachment.id,
+        type: attachment.type,
+        id: attachment.id,
       });
     } else {
       removeAttachment({
-        attachmentId: attachment.attachment.id,
+        attachmentId: attachment.id,
       });
     }
-  }, [
-    attachment.attachment.id,
-    attachment.attachment.type,
-    removeAttachment,
-    removeSelectedAttachment,
-  ]);
+  }, [attachment.id, attachment.type, removeAttachment, removeSelectedAttachment]);
 
   useEffect(() => {
-    if (attachment.attachment.type === AttachmentType.Picture && !isFromEdit) {
+    if (attachment.type === AttachmentType.Picture && !isFromEdit) {
       const reader = new FileReader();
 
       reader.onload = (e) => {
         setPreviewUr(e.target?.result as string);
       };
 
-      reader.readAsDataURL(attachment.file);
+      reader.readAsDataURL(newAttachment.file);
     }
-  }, [setPreviewUr, isFromEdit, attachment.attachment.type, attachment.file]);
+  }, [setPreviewUr, isFromEdit, attachment.type, newAttachment.file]);
 
   return (
     <div className="message-input-attachment">
-      {attachment.attachment.type === AttachmentType.Raw && (
+      {attachment.type === AttachmentType.Raw && (
         <FileSVG className="message-input-attachment__type-icon" />
       )}
-      {attachment.attachment.type === AttachmentType.Video && (
+      {attachment.type === AttachmentType.Video && (
         <>
-          {(attachment.attachment as IVideoAttachment).firstFrameUrl && (
+          {(attachment as unknown as IVideoAttachment).firstFrameUrl && (
             <img
-              src={(attachment.attachment as IVideoAttachment).firstFrameUrl}
+              src={(attachment as unknown as IVideoAttachment).firstFrameUrl}
               alt=""
               className="message-input-attachment__bg"
             />
           )}
           <VideoSVG className="message-input-attachment__type-icon" />
         </>
       )}
-      {attachment.attachment.type === AttachmentType.Picture && (
+      {attachment.type === AttachmentType.Picture && (
         <>
-          {((attachment.attachment as IPictureAttachment).previewUrl || previewUrl) && (
+          {((attachment as unknown as IPictureAttachment).previewUrl || previewUrl) && (
             <img
-              src={(attachment.attachment as IPictureAttachment).previewUrl || previewUrl}
+              src={(attachment as unknown as IPictureAttachment).previewUrl || previewUrl}
               alt=""
               className="message-input-attachment__bg"
             />
           )}
           <PhotoSVG className="message-input-attachment__type-icon" />
         </>
       )}
-      {attachment.attachment.type === AttachmentType.Audio && (
+      {attachment.type === AttachmentType.Audio && (
         <PlaySVG className="message-input-attachment__type-icon" />
       )}
 
-      {attachment.attachment.type === AttachmentType.Voice && (
+      {attachment.type === AttachmentType.Voice && (
         <MicrophoneSvg className="message-input-attachment__type-icon" />
       )}
 
       <div
-        style={{ width: `${attachment.progress}%` }}
+        style={{ width: `${newAttachment.progress}%` }}
         className={`message-input-attachment__progress ${
-          attachment.attachment.type === AttachmentType.Picture ||
-          attachment.attachment.type === AttachmentType.Video
+          attachment.type === AttachmentType.Picture || attachment.type === AttachmentType.Video
             ? 'message-input-attachment__progress--photo'
             : ''
         }`}
       />
 
       <div className="message-input-attachment__data">
         <div className="message-input-attachment__title">
-          {(attachment.attachment as INamedAttachment).fileName}
+          {(attachment as unknown as INamedAttachment).fileName}
         </div>
         <div className="message-input-attachment__size">{`${getRawAttachmentSizeUnit(
-          attachment.uploadedBytes || attachment.attachment.byteSize,
-        )}/${getRawAttachmentSizeUnit(attachment.attachment.byteSize)}}`}</div>
+          newAttachment.uploadedBytes || attachment.byteSize,
+        )}/${getRawAttachmentSizeUnit(attachment.byteSize)}}`}</div>
       </div>
 
       <button