Feature/chats 1.1

package.json

@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/ns-query": "^1.0.4",
+    "@ecency/ns-query": "^1.0.5",
     "@ecency/render-helper": "^2.2.29",
     "@ecency/render-helper-amp": "^1.1.0",
     "@emoji-mart/data": "^1.1.2",

src/common/features/chats/components/chat-input.tsx

@@ -22,11 +22,10 @@ import {
   Channel,
   ChatContext,
   DirectContact,
-  getUserChatPublicKey,
   useChannelsQuery,
+  useGetPublicKeysQuery,
   useSendMessage
 } from "@ecency/ns-query";
-import { useGetAccountFullQuery } from "../../../api/queries";
 import Tooltip from "../../../components/tooltip";
 import { ChatInputFiles } from "./chat-input-files";
 import Gallery from "../../../components/gallery";
@@ -52,7 +51,9 @@ export default function ChatInput({ currentChannel, currentContact }: Props) {
   const [showGifPicker, setShowGifPicker] = useState(false);
   const [showGallery, setShowGallery] = useState(false);
 
-  const { data: contactData } = useGetAccountFullQuery(currentContact?.name);
+  const { data: contactKeys, isLoading: isContactKeysLoading } = useGetPublicKeysQuery(
+    currentContact?.name
+  );
   const { mutateAsync: sendMessage, isLoading: isSendMessageLoading } = useSendMessage(
     currentChannel,
     currentContact,
@@ -68,9 +69,10 @@ export default function ChatInput({ currentChannel, currentContact }: Props) {
     () => isCurrentUser && !receiverPubKey,
     [isCurrentUser, receiverPubKey]
   );
+  const isJoined = useMemo(() => (contactKeys ? contactKeys.pubkey : false), [contactKeys]);
   const isReadOnly = useMemo(
-    () => (contactData ? currentContact?.pubkey !== getUserChatPublicKey(contactData) : false),
-    [contactData, currentContact]
+    () => (contactKeys && isJoined ? currentContact?.pubkey !== contactKeys.pubkey : false),
+    [contactKeys, currentContact, isJoined]
   );
   const isFilesUploading = useMemo(
     () => (files.length > 0 ? files.length !== uploadedFileLinks.length : false),

src/common/features/chats/components/chat-popup/chat-popup-search-user.tsx

@@ -8,14 +8,16 @@ import { Community } from "../../../../store/communities";
 import { isCommunity } from "@ecency/ns-query";
 import { Reputations } from "../../../../api/hive";
 import { useCreateTemporaryChannel } from "../../hooks/user-create-temporary-channel";
+import useDebounce from "react-use/lib/useDebounce";
 
 interface Props {
   onCommunityClicked: (communityName: string) => void;
 }
 
 export function ChatPopupSearchUser({ onCommunityClicked }: Props) {
   const [searchQuery, setSearchQuery] = useState("");
-  const [selectedUser, setSelectedUser] = useState<string>("");
+  const [selectedUser, setSelectedUser] = useState("");
+  const [searchInput, setSearchInput] = useState("");
   const [selectedCommunity, setSelectedCommunity] = useState("");
 
   const { data: searchUsers } = useSearchUsersQuery(searchQuery);
@@ -24,16 +26,27 @@ export function ChatPopupSearchUser({ onCommunityClicked }: Props) {
   useCreateTemporaryContact(selectedUser);
   useCreateTemporaryChannel(selectedCommunity);
 
+  useDebounce(
+    () => {
+      if (searchInput) {
+        setSearchQuery(searchInput);
+      }
+    },
+    500,
+    [searchInput]
+  );
+
   return (
     <>
       <div className="w-full mb-3">
-        <ChatSidebarSearch setSearch={setSearchQuery} />
+        <ChatSidebarSearch setSearch={setSearchInput} />
       </div>
       <div className="user-search-suggestion-list">
         {[...searchUsers, ...searchCommunities].map((item) => (
           <ChatSidebarSearchItem
             item={item}
             onClick={async () => {
+              setSearchInput("");
               setSearchQuery("");
 
               const community = item as Community;

src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx

@@ -5,11 +5,10 @@ import {
   ChatContext,
   DirectContact,
   getRelativeDate,
-  getUserChatPublicKey,
+  useGetPublicKeysQuery,
   useKeysQuery,
   useLastMessageQuery
 } from "@ecency/ns-query";
-import { useGetAccountFullQuery } from "../../../../api/queries";
 import { _t } from "../../../../i18n";
 import Tooltip from "../../../../components/tooltip";
 import { informationOutlineSvg } from "../../../../img/svg";
@@ -27,42 +26,39 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
     useContext(ChatContext);
 
   const { publicKey } = useKeysQuery();
-  const { data: contactData, isLoading: isContactDataLoading } = useGetAccountFullQuery(
+  const { data: contactKeys, isLoading: isContactKeysLoading } = useGetPublicKeysQuery(
     contact.name
   );
   const lastMessage = useLastMessageQuery(contact);
   const lastMessageDate = useMemo(() => getRelativeDate(lastMessage?.created), [lastMessage]);
 
-  const isJoined = useMemo(
-    () => (contactData ? !!getUserChatPublicKey(contactData) : false),
-    [contactData]
-  );
+  const isJoined = useMemo(() => (contactKeys ? contactKeys.pubkey : false), [contactKeys]);
   const isReadOnly = useMemo(
-    () => (contactData && isJoined ? contact.pubkey !== getUserChatPublicKey(contactData) : false),
-    [contactData, contact, isJoined]
+    () => (contactKeys && isJoined ? contact.pubkey !== contactKeys.pubkey : false),
+    [contactKeys, contact, isJoined]
   );
 
   const content = (
     <>
       <div
         className={classNameObject({
-          grayscale: isContactDataLoading ? true : isReadOnly || !isJoined
+          grayscale: isContactKeysLoading ? true : isReadOnly || !isJoined
         })}
       >
         <UserAvatar username={contact.name} size="medium" />
       </div>
       <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
         <div className="flex justify-between w-full items-center">
           <div>
-            {isReadOnly && !isContactDataLoading && (
+            {isReadOnly && !isContactKeysLoading && (
               <div className="text-gray-600 flex items-center text-xs">
                 {_t("chat.read-only")}
                 <Tooltip content={_t("chat.why-read-only")}>
                   <Button icon={informationOutlineSvg} size="xxs" appearance="gray-link" />
                 </Tooltip>
               </div>
             )}
-            {!isJoined && !isContactDataLoading && (
+            {!isJoined && !isContactKeysLoading && (
               <div className="text-gray-600 flex items-center text-xs">
                 {_t("chat.user-not-joined")}
                 <Tooltip content={_t("chat.not-joined")}>

src/common/features/chats/components/chats-welcome.tsx

@@ -2,34 +2,24 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
 import { _t } from "../../../i18n";
 import { CodeInput } from "@ui/input";
 import OrDivider from "../../../components/or-divider";
-import { useGetAccountFullQuery } from "../../../api/queries";
-import { useMappedStore } from "../../../store/use-mapped-store";
 import { CreateAnAccount } from "./create-an-account";
 import { ChatsImport } from "./chats-import";
-import { ChatContext, getUserChatPublicKey, useRestoreChatByPin } from "@ecency/ns-query";
+import { ChatContext, useKeysQuery, useRestoreChatByPin } from "@ecency/ns-query";
 
 export function ChatsWelcome() {
-  const { activeUser } = useMappedStore();
-
   const [step, setStep] = useState(0);
   const [pin, setPin] = useState("");
 
   const { hasUserJoinedChat } = useContext(ChatContext);
-  const { data: fullAccount } = useGetAccountFullQuery(activeUser?.username);
+  const { publicKey } = useKeysQuery();
 
   const {
     mutateAsync: restoreByPin,
     isError: isRestoreFailed,
     isLoading: isRestoreLoading
   } = useRestoreChatByPin();
 
-  const isAlreadyRegisteredInChats = useMemo(() => {
-    if (!fullAccount) {
-      return false;
-    }
-    const publicKey = getUserChatPublicKey(fullAccount);
-    return !!publicKey;
-  }, [fullAccount]);
+  const isAlreadyRegisteredInChats = useMemo(() => !!publicKey, [publicKey]);
 
   useEffect(() => {
     // Handle PIN on account restoring

src/common/features/chats/hooks/use-create-temporary-contact.ts

@@ -1,18 +1,17 @@
 import { useContext, useEffect } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { ChatContext, ChatQueries, DirectContact, getUserChatPublicKey } from "@ecency/ns-query";
-import { useGetAccountFullQuery } from "../../../api/queries";
+import { ChatContext, ChatQueries, DirectContact, useGetPublicKeysQuery } from "@ecency/ns-query";
 
 export function useCreateTemporaryContact(selectedAccount: string) {
   const queryClient = useQueryClient();
   const { setReceiverPubKey, activeUsername } = useContext(ChatContext);
 
-  const { data: selectedAccountData } = useGetAccountFullQuery(selectedAccount);
+  const { data: contactKeys, isFetched, isError } = useGetPublicKeysQuery(selectedAccount);
 
   // Create temporary contact and select it when searching users
   // `not_joined_${selectedAccount}` – special constructor for creating a temporary contact
   return useEffect(() => {
-    if (selectedAccount && selectedAccountData) {
+    if (selectedAccount && (isFetched || isError)) {
       queryClient.setQueryData<DirectContact[]>(
         [ChatQueries.DIRECT_CONTACTS, activeUsername],
         [
@@ -22,13 +21,11 @@ export function useCreateTemporaryContact(selectedAccount: string) {
           ]) ?? []),
           {
             name: selectedAccount,
-            pubkey: getUserChatPublicKey(selectedAccountData) ?? `not_joined_${selectedAccount}`
+            pubkey: contactKeys?.pubkey ?? `not_joined_${selectedAccount}`
           }
         ]
       );
-      setReceiverPubKey(
-        getUserChatPublicKey(selectedAccountData) ?? `not_joined_${selectedAccount}`
-      );
+      setReceiverPubKey(contactKeys?.pubkey ?? `not_joined_${selectedAccount}`);
     }
-  }, [selectedAccount, selectedAccountData]);
+  }, [selectedAccount, contactKeys, isFetched, isError]);
 }

yarn.lock

@@ -1374,10 +1374,10 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
-"@ecency/ns-query@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.0.4.tgz#2086351741eb74bb7c7346af16275fd7edcd086a"
-  integrity sha512-5+S+9LoWNA7Mj/9UN8+cFVHMz/17IMAL7wFw4d2Yn7XvtD6AMU71iBXuAFvkZgjZaJXz5bnmbJrnpnPyrGUhXg==
+"@ecency/ns-query@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@ecency/ns-query/-/ns-query-1.0.5.tgz#ed89550dc0ec1999cfd620e4d6ed0b2275423d54"
+  integrity sha512-1ZAKyPnD/dQV95BQeE0N5xotWLMASRMg04P2sqCQ+NBU/tChC7dby12IjFIdI8ofJurMX8rSUSFY8bZtoK9kGA==
   dependencies:
     "@tanstack/react-query" "^4.29.7"
     axios "^0.21.2"