TEMP: Support native ID

src/_helpers/constants.js

@@ -16,6 +16,7 @@ const globalConstants = {
     "video/webm",
     "video/quicktime",
   ],
+  allowedAvatarFormats: [".heic", ".HEIC", "image/jpeg", "image/png"],
   defaultBlurHash:
     "|KO2?U%2Tw=wR6cErDEhOD]~RBVZRip0W9ofwxM_};RPxuwH%3s89]t8$%tLOtxZ%gixtQt8IUS#I.ENa0NZIVt6xFM{M{%1j^M_bcRPX9nht7n+j[rrW;ni%Mt7V@W;t7t8%1bbxat7WBIUR*RjRjRjxuRjs.MxbbV@WY",
   weekDays: {

src/api/api.js

@@ -174,6 +174,7 @@ class Api {
               }),
             }
           : {
+              application_id: 6783,
               login: data.login,
               password: data.password,
               deviceId: getBrowserFingerprint({

src/components/attach/AttachHub.js

@@ -19,9 +19,9 @@ import {
   setLastMessageField,
   updateLastMessageField,
 } from "@store/values/Conversations";
+import { selectCurrentUserId } from "@store/values/CurrentUserId";
 import { getIsMobileView } from "@store/values/IsMobileView";
 import { getNetworkState } from "@store/values/NetworkState";
-import { selectCurrentUser } from "@store/values/CurrentUser";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useKeyDown } from "@hooks/useKeyDown";
@@ -39,7 +39,7 @@ export default function AttachHub() {
   const messages = useSelector(selectAllMessages);
   const selectedConversation = useSelector(getConverastionById);
   const selectedCID = selectedConversation._id;
-  const currentUser = useSelector(selectCurrentUser);
+  const currentUserId = useSelector(selectCurrentUserId);
 
   const [isPending, setIsPending] = useState(false);
   const [isSendMessageDisable, setIsSendMessageDisable] = useState(false);
@@ -171,12 +171,12 @@ export default function AttachHub() {
 
       inputTextRef.current.value = "";
       const cid = selectedCID;
-      const mid = currentUser._id + Date.now();
+      const mid = `${currentUserId}${Date.now()}`;
 
       let msg = {
         _id: mid,
         body,
-        from: currentUser._id,
+        from: currentUserId,
         t: Date.now(),
         attachments: files.map((file) => ({
           file_id: file.name,
@@ -215,7 +215,7 @@ export default function AttachHub() {
         msg = {
           _id: response.server_mid,
           body,
-          from: currentUser._id,
+          from: currentUserId,
           status: "sent",
           t: response.t,
           attachments: attachments.map((obj, i) => ({
@@ -241,7 +241,7 @@ export default function AttachHub() {
     [
       closeModal,
       connectState,
-      currentUser,
+      currentUserId,
       files,
       isSendMessageDisable,
       messages,

src/components/attach/elements/ItemLoader.js

@@ -1,18 +1,18 @@
 import OvalLoader from "@components/_helpers/OvalLoader";
 import { Blurhash } from "react-blurhash";
 
-export default function ItemLoader({ blurHash }) {
+export default function ItemLoader({ blurHash, isShowLoader = true }) {
   return (
     <div className="blur-hash-preloader">
       <Blurhash
         className="canvas-preloader"
         hash={blurHash || "LEHLk~WB2yk8pyo0adR*.7kCMdnj"}
-        width={70}
-        height={70}
+        width={"100%"}
+        height={"100%"}
         resolutionX={32}
         resolutionY={32}
       />
-      <OvalLoader height={50} width={50} />
+      {isShowLoader ? <OvalLoader height={50} width={50} /> : null}
     </div>
   );
 }

src/components/auth/components/LoginLinks.js

@@ -4,7 +4,7 @@ import showCustomAlert from "@utils/show_alert";
 import subscribeForNotifications from "@services/notifications";
 import usersService from "@services/usersService";
 import { KEY_CODES } from "@helpers/keyCodes";
-import { setCurrentUser } from "@store/values/CurrentUser";
+import { setCurrentUserId } from "@store/values/CurrentUserId";
 import { setSelectedConversation } from "@store/values/SelectedConversation";
 import { setUserIsLoggedIn } from "@store/values/UserIsLoggedIn";
 import { upsertUser } from "@store/values/Participants";
@@ -25,7 +25,7 @@ export default function LoginLinks({ changePage, content }) {
       subscribeForNotifications();
       dispatch(setSelectedConversation({}));
       dispatch(setUserIsLoggedIn(true));
-      dispatch(setCurrentUser(userData));
+      dispatch(setCurrentUserId(userData._id));
       dispatch(upsertUser(userData));
     } catch (err) {
       localStorage.removeItem("sessionId");

src/components/auth/components/SignUpLinks.js

@@ -4,7 +4,7 @@ import showCustomAlert from "@utils/show_alert";
 import subscribeForNotifications from "@services/notifications";
 import usersService from "@services/usersService";
 import { KEY_CODES } from "@helpers/keyCodes";
-import { setCurrentUser } from "@store/values/CurrentUser";
+import { setCurrentUserId } from "@store/values/CurrentUserId";
 import { setSelectedConversation } from "@store/values/SelectedConversation";
 import { setUserIsLoggedIn } from "@store/values/UserIsLoggedIn";
 import { upsertUser } from "@store/values/Participants";
@@ -30,7 +30,7 @@ export default function SignUpLinks({ changePage, content }) {
         dispatch(setSelectedConversation({}));
         dispatch(setUserIsLoggedIn(true));
         dispatch(upsertUser(userData));
-        dispatch(setCurrentUser(userData));
+        dispatch(setCurrentUserId(userData._id));
       }
 
       showCustomAlert(

src/components/context/ContextMenuHub.js

@@ -32,7 +32,7 @@ export default function ContextMenuHub() {
     useSelector(getConverastionById) || {};
   const currentUser = useSelector(selectAllConversations);
   const currentPath = pathname + hash;
-  const isCurrentUserOwner = currentUser._id === owner_id;
+  const isCurrentUserOwner = currentUser.native_id === owner_id;
 
   const isTabletView = useSelector(getIsTabletView);
 
@@ -66,11 +66,11 @@ export default function ContextMenuHub() {
       infoUser: (
         <InfoUserLink
           key={"infoUser"}
-          uId={userObject?._id}
+          uId={userObject?.native_id}
           onClick={() => {
             isCurrentUserOwner
               ? addPrefix(currentPath, "/profile")
-              : addSuffix(currentPath, `/user?uid=${userObject?._id}`);
+              : addSuffix(currentPath, `/user?uid=${userObject?.native_id}`);
           }}
         />
       ),
@@ -91,7 +91,7 @@ export default function ContextMenuHub() {
       removeParticipant: (
         <RemoveParticipantLink
           key={"removeParticipant"}
-          onClick={() => conversationService.removeParticipant(userObject?._id)}
+          onClick={() => conversationService.removeParticipant(userObject?.native_id)}
         />
       ),
       newChat: (
@@ -100,7 +100,7 @@ export default function ContextMenuHub() {
           uObject={userObject}
           onClick={async () => {
             const chatId = await conversationService.createPrivateChat(
-              userObject?._id,
+              userObject?.native_id,
               userObject
             );
             navigateTo(`/#${chatId}`);

src/components/hub/chatForm/ChatFormHeader.js

@@ -9,7 +9,7 @@ import {
 } from "@store/values/Conversations";
 import { getIsTabletView } from "@store/values/IsTabletView";
 import { getIsMobileView } from "@store/values/IsMobileView";
-import { selectCurrentUser } from "@store/values/CurrentUser";
+import { selectCurrentUserId } from "@store/values/CurrentUserId";
 import { selectParticipantsEntities } from "@store/values/Participants";
 import { setAllParams } from "@store/values/ContextMenu";
 import { useDispatch, useSelector } from "react-redux";
@@ -32,12 +32,12 @@ export default function ChatFormHeader({ closeFormFunc }) {
 
   const participants = useSelector(selectParticipantsEntities);
   const conversations = useSelector(selectConversationsEntities);
-  const currentUser = useSelector(selectCurrentUser);
+  const currentUserId = useSelector(selectCurrentUserId);
   const selectedConversation = useSelector(getConverastionById);
   const selectedCID = selectedConversation?._id;
 
   const isCurrentUserOwner =
-    currentUser._id === selectedConversation.owner_id?.toString();
+    currentUserId === selectedConversation.owner_id;
   const isGroupChat = selectedConversation.type === "g";
 
   const opponentId = useMemo(() => {
@@ -47,9 +47,9 @@ export default function ChatFormHeader({ closeFormFunc }) {
     }
 
     const { owner_id, opponent_id } = conversation;
-    return participants[owner_id === currentUser._id ? opponent_id : owner_id]
-      ?._id;
-  }, [selectedCID, conversations, participants, currentUser]);
+    return participants[owner_id === currentUserId ? opponent_id : owner_id]
+      ?.native_id;
+  }, [selectedCID, conversations, participants, currentUserId]);
 
   const isOpponentExist = useMemo(
     () => !!participants[opponentId]?.login,
@@ -96,7 +96,7 @@ export default function ChatFormHeader({ closeFormFunc }) {
 
     const path = isGroupChat
       ? "/info"
-      : "/user?uid=" + participants[opponentId]._id;
+      : "/user?uid=" + participants[opponentId].native_id;
 
     const tmpPath =
       isTablet && path === "/info" && pathname.includes("/profile")

src/components/hub/chatForm/ChatFormInputs.js

@@ -13,7 +13,7 @@ import {
   updateLastMessageField,
 } from "@store/values/Conversations";
 import { getNetworkState } from "@store/values/NetworkState";
-import { selectCurrentUser } from "@store/values/CurrentUser";
+import { selectCurrentUserId } from "@store/values/CurrentUserId";
 import { selectParticipantsEntities } from "@store/values/Participants";
 import { setSelectedConversation } from "@store/values/SelectedConversation";
 import { useDispatch, useSelector } from "react-redux";
@@ -25,7 +25,7 @@ export default function ChatFormInputs({ chatMessagesBlockRef }) {
   const dispatch = useDispatch();
 
   const connectState = useSelector(getNetworkState);
-  const currentUser = useSelector(selectCurrentUser);
+  const currentUserId = useSelector(selectCurrentUserId);
   const messages = useSelector(selectActiveConversationMessages);
   const participants = useSelector(selectParticipantsEntities);
   const selectedConversation = useSelector(getConverastionById);
@@ -56,18 +56,18 @@ export default function ChatFormInputs({ chatMessagesBlockRef }) {
 
     setIsSendMessageDisable(true);
     inputRef.current.value = "";
-    const mid = currentUser._id + Date.now();
+    const mid = `${currentUserId}${Date.now()}`;
     const msg = {
       _id: mid,
       body,
-      from: currentUser._id,
+      from: currentUserId,
       t: Date.now(),
     };
 
     dispatch(addMessage(msg));
     dispatch(updateLastMessageField({ cid: selectedCID, msg }));
 
-    const mObject = { mid, body, cid: selectedCID, from: currentUser._id };
+    const mObject = { mid, body, cid: selectedCID, from: currentUserId };
     inputRef.current.focus(); //care..
 
     try {

src/components/hub/elements/ChatMessage.js

@@ -1,8 +1,10 @@
 import MessageAttachments from "@components/message/elements/MessageAttachments";
 import MessageStatus from "@components/message/elements/MessageStatus";
 import MessageUserIcon from "@components/hub/elements/MessageUserIcon";
+import addSuffix from "@utils/navigation/add_suffix";
 import getUserFullName from "@utils/user/get_user_full_name";
 import { urlify } from "@utils/text/urlify";
+import { useLocation } from "react-router-dom";
 import { useMemo } from "react";
 
 import "@styles/hub/elements/ChatMessage.css";
@@ -17,6 +19,8 @@ export default function ChatMessage({
   isPrevMesssageYours: prev,
   isNextMessageYours: next,
 }) {
+  const { pathname, hash } = useLocation();
+
   const { body, from, attachments, status, t } = message;
   const isCurrentUser = from === currentUserId;
 
@@ -27,15 +31,18 @@ export default function ChatMessage({
     }`;
   }, [t]);
 
+  const openUserProfile = () =>
+    sender ? addSuffix(pathname + hash, `/user?uid=${from}`) : {};
+
   return (
     <div
       className={`message__container${isCurrentUser ? "--my" : ""} ${
         prev ? "" : "mt-8"
       }`}
     >
-      <div className="message-photo">
+      <div className={`message-photo${sender ? "--hover" : ""}`}>
         {next ? null : (
-          <div className="photo__container fcc">
+          <div className="photo__container fcc" onClick={openUserProfile}>
             <MessageUserIcon
               userObject={sender}
               isCurrentUser={isCurrentUser}
@@ -50,7 +57,10 @@ export default function ChatMessage({
           <CornerLight className="message-content--corner" />
         )}
         {prev ? null : (
-          <div className="content__uname">
+          <div
+            className={`content__uname${sender ? "--hover" : ""}`}
+            onClick={openUserProfile}
+          >
             &zwnj;{getUserFullName(sender) || "Deleted account"}
           </div>
         )}

src/components/hub/elements/ConversationItem.js

@@ -1,4 +1,5 @@
 import LastMessage from "@components/message/LastMessage";
+import UserAvatar from "@components/info/elements/UserAvatar";
 import getLastUpdateTime from "@utils/conversation/get_last_update_time";
 import { useMemo } from "react";
 
@@ -11,6 +12,8 @@ export default function ConversationItem({
   chatName,
   chatObject,
   currentUserId,
+  chatAvatarUrl,
+  chatAvatarBlutHash,
 }) {
   const { updated_at, unread_messages_count, type, last_message } = chatObject;
 
@@ -22,8 +25,17 @@ export default function ConversationItem({
     if (type === "g") {
       return <Group />;
     }
-    return chatName ? chatName.slice(0, 2).toUpperCase() : <UnknownPhoto />;
-  }, [type, chatName]);
+
+    return (
+      <UserAvatar
+        avatarUrl={chatAvatarUrl}
+        avatarBlurHash={chatAvatarBlutHash}
+        defaultIcon={
+          chatName ? chatName.slice(0, 2).toUpperCase() : <UnknownPhoto />
+        }
+      />
+    );
+  }, [type, chatAvatarUrl, chatAvatarBlutHash, chatName]);
 
   return (
     <div

src/components/hub/elements/ConversationItemList.js

@@ -1,17 +1,17 @@
 import ConversationItem from "@components/hub/elements/ConversationItem";
-import getUserFullName from "@src/utils/user/get_user_full_name";
-import navigateTo from "@src/utils/navigation/navigate_to";
-import { getConverastionById } from "@src/store/values/Conversations";
-import { selectCurrentUser } from "@src/store/values/CurrentUser";
-import { selectParticipantsEntities } from "@src/store/values/Participants";
-import { setSelectedConversation } from "@src/store/values/SelectedConversation";
+import getUserFullName from "@utils/user/get_user_full_name";
+import navigateTo from "@utils/navigation/navigate_to";
+import { getConverastionById } from "@store/values/Conversations";
+import { selectCurrentUserId } from "@store/values/CurrentUserId";
+import { selectParticipantsEntities } from "@store/values/Participants";
+import { setSelectedConversation } from "@store/values/SelectedConversation";
 import { useDispatch, useSelector } from "react-redux";
 
 export default function ConversationItemList({ conversations }) {
   const dispatch = useDispatch();
 
   const participants = useSelector(selectParticipantsEntities);
-  const currentUser = useSelector(selectCurrentUser);
+  const currentUserId = useSelector(selectCurrentUserId);
   const selectedConversation = useSelector(getConverastionById);
   const activeConversationId = selectedConversation?._id;
 
@@ -23,7 +23,7 @@ export default function ConversationItemList({ conversations }) {
   return conversations.map((obj) => {
     const isSelected = activeConversationId === obj._id;
     const chatParticipantId =
-      obj.owner_id === currentUser._id ? obj.opponent_id : obj.owner_id;
+      obj.owner_id === currentUserId ? obj.opponent_id : obj.owner_id;
     const chatParticipant = participants[chatParticipantId] || {};
     const chatName = obj.name || getUserFullName(chatParticipant);
 
@@ -33,8 +33,10 @@ export default function ConversationItemList({ conversations }) {
         isSelected={isSelected}
         onClickFunc={() => convItemOnClickFunc(obj._id)}
         chatName={chatName}
+        chatAvatarUrl={chatParticipant.avatar_url}
+        chatAvatarBlutHash={chatParticipant.avatar_object?.file_blur_hash}
         chatObject={obj}
-        currentUserId={currentUser._id}
+        currentUserId={currentUserId}
       />
     );
   });

src/components/hub/elements/InformativeMessage.js

@@ -12,7 +12,7 @@ export default function InformativeMessage({
     <div
       className={"informative-message" + (isPrevMesssageUsers ? " mt-10" : "")}
       onClick={() =>
-        addSuffix(pathname + hash, `/user?uid=${params?.user?._id}`)
+        addSuffix(pathname + hash, `/user?uid=${params?.user?.native_id}`)
       }
     >
       {text}