Merge pull request #1550 from ecency/feature/chats

Feature/chats

src/common/components/comment/index.tsx

@@ -68,7 +68,7 @@ interface Props {
   updateActiveUser: (data?: Account) => void;
   deleteUser: (username: string) => void;
   toggleUIProp: (what: ToggleType) => void;
-  onSubmit: (text: string) => void;
+  onSubmit: (text: string) => Promise<any>;
   resetSelection?: () => void;
   onCancel?: () => void;
   inputRef?: Ref<any>;
@@ -154,10 +154,11 @@ export class Comment extends Component<Props, State> {
     }, 50);
   };
 
-  submit = () => {
+  submit = async () => {
     const { text } = this.state;
     const { onSubmit } = this.props;
-    onSubmit(text);
+    await onSubmit(text);
+    this.setState({ text: "" });
   };
 
   cancel = () => {

src/common/components/entry-index-menu/index.tsx

@@ -558,7 +558,7 @@ export class EntryIndexMenu extends Component<Props, States> {
                     ) : null}
                   </ul>
                 </div>
-                <div className="kebab-icon">
+                <div className="kebab-icon flex">
                   <DropDown {...kebabMenuConfig} float="left" />
                 </div>
               </div>

src/common/components/market-swap-form/index.scss

@@ -74,7 +74,9 @@
   }
 
   @keyframes rotate {
-    to { transform: rotate(-360deg); }
+    to {
+      transform: rotate(-360deg);
+    }
   }
 
   .swap-button {
@@ -86,6 +88,11 @@
     position: relative;
     color: $primary;
 
+    > div, > div > svg {
+      width: auto !important;
+      height: auto !important;
+    }
+
     &:hover, &:active, &:focus {
       color: darken($primary, 5);
     }

src/common/features/chats/components/chat-channel-messages.tsx

@@ -114,7 +114,7 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
                           publicMessages?.length - 1 === i
                             ? document
                                 .querySelector(`[data-message-id="${message.id}"]`)
-                                ?.scrollIntoView()
+                                ?.scrollIntoView({ block: "nearest" })
                             : {},
                         100
                       )

src/common/features/chats/components/chat-messages-view.tsx

@@ -41,7 +41,7 @@ export default function ChatsMessagesView({ currentContact, currentChannel }: Pr
     <>
       <div
         className={classNameObject({
-          "h-[100vh] md:h-full overflow-y-auto md:overflow-y-static": true
+          "h-[100vh] md:h-full overflow-y-auto md:overflow-y-visible": true
         })}
         ref={messagesBoxRef}
       >

src/common/features/chats/components/chats-direct-messages/index.tsx

@@ -66,7 +66,7 @@ export default function ChatsDirectMessages(props: Props) {
                         groupedDirectMessages?.length - 1 === i && messages.length - 1 === j
                           ? document
                               .querySelector(`[data-message-id="${message.id}"]`)
-                              ?.scrollIntoView()
+                              ?.scrollIntoView({ block: "nearest" })
                           : {},
                       300
                     )

src/common/features/chats/components/chats-sidebar/index.tsx

@@ -94,7 +94,7 @@ export default function ChatsSideBar(props: Props) {
               </div>
             )}
             {directContacts?.map((contact) => (
-              <ChatSidebarDirectContact key={contact.pubkey} contact={contact} />
+              <ChatSidebarDirectContact isLink={true} key={contact.pubkey} contact={contact} />
             ))}
           </>
         )}

src/common/features/chats/hooks/index.ts

@@ -1 +1,2 @@
 export * from "./use-create-temporary-contact";
+export * from "./use-create-temporary-contact-from-param";

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

@@ -0,0 +1,49 @@
+import { useContext, useMemo } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  ChatContext,
+  ChatQueries,
+  DirectContact,
+  useDirectContactsQuery,
+  useGetPublicKeysQuery
+} from "@ecency/ns-query";
+import useDebounce from "react-use/lib/useDebounce";
+import { useLocation } from "react-router";
+
+export function useCreateTemporaryContactFromParam() {
+  const queryClient = useQueryClient();
+  const { setReceiverPubKey, activeUsername } = useContext(ChatContext);
+  const { search } = useLocation();
+  const usernameParam = useMemo(() => new URLSearchParams(search).get("username") ?? "", [search]);
+
+  const { isFetched: isContactsFetched } = useDirectContactsQuery();
+  const { data: contactKeys, isFetched, isError } = useGetPublicKeysQuery(usernameParam);
+
+  // Create temporary contact and select it when searching users
+  // `not_joined_${selectedAccount}` – special constructor for creating a temporary contact
+  return useDebounce(
+    () => {
+      if (usernameParam && isContactsFetched && (isFetched || isError)) {
+        const pubkey = contactKeys?.pubkey ?? `not_joined_${usernameParam}`;
+        queryClient.setQueryData<DirectContact[]>(
+          [ChatQueries.DIRECT_CONTACTS, activeUsername],
+          (data) => [
+            ...(
+              queryClient.getQueryData<DirectContact[]>([
+                ChatQueries.DIRECT_CONTACTS,
+                activeUsername
+              ]) ?? []
+            ).filter((dc) => dc.pubkey !== pubkey),
+            {
+              name: usernameParam,
+              pubkey
+            }
+          ]
+        );
+        setReceiverPubKey(pubkey);
+      }
+    },
+    1000,
+    [usernameParam, isContactsFetched, contactKeys, isFetched, isError]
+  );
+}

src/common/features/chats/screens/chats.tsx

@@ -24,6 +24,7 @@ import {
   useKeysQuery
 } from "@ecency/ns-query";
 import { useUnmount } from "react-use";
+import { useCreateTemporaryContactFromParam } from "../hooks";
 
 interface Props extends PageProps {
   match: match<{
@@ -41,6 +42,7 @@ export const Chats = ({ match, history }: Props) => {
   const { receiverPubKey, revealPrivateKey, setReceiverPubKey } = useContext(ChatContext);
   const { data: community } = useCommunityCache(match.params.username);
 
+  useCreateTemporaryContactFromParam();
   const { publicKey, privateKey } = useKeysQuery();
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
@@ -117,13 +119,13 @@ export const Chats = ({ match, history }: Props) => {
   }, []);
 
   return isMounted() ? (
-    <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] min-h-full-dynamic">
+    <div className="bg-blue-duck-egg dark:bg-transparent pt-[63px] md:pt-[69px] h-full-dynamic">
       <Feedback activeUser={activeUser} />
       <NavBar history={history} />
       <Meta title={title || _t("chat.page-title")} />
 
       <div className="container mx-auto md:py-6">
-        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white md:border border-[--border-color] relative min-h-full-dynamic md:h-auto">
+        <div className="grid grid-cols-12 overflow-hidden md:rounded-2xl bg-white md:border border-[--border-color] relative h-full-dynamic md:min-h-full md:max-h-full">
           <div className="col-span-12 md:col-span-4 xl:col-span-3 md:border-r border-[--border-color] md:h-[calc(100vh-69px-3rem)] overflow-y-auto">
             {isReady ? (
               <ChatsSideBar

src/style/style.scss

@@ -4,12 +4,22 @@
 @layer utilities {
   .w-full-dynamic {
     width: 100vw;
-    width: 100dvw;
+    @media screen and (max-width: 768px) {
+      width: 100vw;
+      width: 100dvw;
+    }
   }
 
-  .min-h-full-dynamic {
+  .h-full-dynamic {
     min-height: 100vh;
-    min-height: 100dvh;
+    max-height: 100vh;
+
+    @media screen and (max-width: 768px) {
+      min-height: 100vh;
+      max-height: 100vh;
+      max-height: 100dvh;
+      min-height: 100dvh;
+    }
   }
 }