Merge pull request #1587 from ecency/bugfix/chats-issues

Bugfix/chats issues
ecency · Apr 12, 2024 · 3927a4a · 3927a4a
2 parents 4188095 + 31e54ae
commit 3927a4a
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/ns-query": "^1.1.8",
+    "@ecency/ns-query": "^1.2.3",
     "@ecency/render-helper": "^2.2.32",
     "@ecency/render-helper-amp": "^1.1.0",
     "@emoji-mart/data": "^1.1.2",

diff --git a/src/common/app.tsx b/src/common/app.tsx
@@ -121,6 +121,7 @@ const App = (props: any) => {
         <Tracker />
         <UserActivityRecorder />
         <ChatContextProvider
+          storage={typeof window !== "undefined" ? window.localStorage : undefined}
           privateApiHost={defaults.base}
           activeUsername={activeUser?.username}
           activeUserData={activeUserAccount}

diff --git a/src/common/features/chats/components/chat-floating-date.tsx b/src/common/features/chats/components/chat-floating-date.tsx
@@ -30,7 +30,7 @@ export function ChatFloatingDate({
         "top-[180px] md:top-[57px]": isPage
       })}
     >
-      <div className="bg-gray-200 my-3 dark:bg-gray-800 rounded-full p-1 ">
+      <div className="bg-gray-200 my-3 dark:bg-gray-800 rounded-full p-1 max-w-[100px] min-w-[100px] truncate">
         {currentFormattedDate}
       </div>
     </div>

diff --git a/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx b/src/common/features/chats/components/chat-popup/chat-popup-contacts-and-channels.tsx
@@ -5,6 +5,7 @@ import { Button } from "@ui/button";
 import { useChannelsQuery, useDirectContactsQuery, useKeysQuery } from "@ecency/ns-query";
 import { ChatSidebarDirectContact } from "../chats-sidebar/chat-sidebar-direct-contact";
 import { ChatSidebarChannel } from "../chats-sidebar/chat-sidebar-channel";
+import { useComposedContactsAndChannelsQuery } from "../../queries";
 
 interface Props {
   communityClicked: (v: string) => void;
@@ -18,44 +19,35 @@ export function ChatPopupContactsAndChannels({
   setShowSearchUser
 }: Props) {
   const { privateKey } = useKeysQuery();
+
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
+  const composedContactsAndChannels = useComposedContactsAndChannelsQuery();
 
   return (
     <>
       {(directContacts?.length !== 0 || (channels?.length !== 0 && channels?.length !== 0)) &&
       privateKey ? (
         <>
-          {channels?.length !== 0 && (
-            <>
-              <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
-                {_t("chat.communities")}
-              </div>
-              {channels?.map((channel) => (
-                <ChatSidebarChannel
-                  isChannel={false}
-                  key={channel.id}
-                  channel={channel}
-                  username={channel.communityName!!}
-                  onClick={() => communityClicked(channel.communityName!)}
-                  isLink={false}
-                />
-              ))}
-              {directContacts?.length !== 0 && (
-                <div className="px-3 pt-3 pb-2 text-xs uppercase font-bold text-gray-500">
-                  {_t("chat.dms")}
-                </div>
-              )}
-            </>
+          {composedContactsAndChannels.map((contactOrChannel) =>
+            "id" in contactOrChannel ? (
+              <ChatSidebarChannel
+                isChannel={false}
+                key={contactOrChannel.id}
+                channel={contactOrChannel}
+                username={contactOrChannel.communityName!!}
+                onClick={() => communityClicked(contactOrChannel.communityName!)}
+                isLink={false}
+              />
+            ) : (
+              <ChatSidebarDirectContact
+                isLink={false}
+                contact={contactOrChannel}
+                onClick={() => userClicked(contactOrChannel.name)}
+                key={contactOrChannel.pubkey}
+              />
+            )
           )}
-          {directContacts?.map((user) => (
-            <ChatSidebarDirectContact
-              isLink={false}
-              contact={user}
-              onClick={() => userClicked(user.name)}
-              key={user.pubkey}
-            />
-          ))}
         </>
       ) : !privateKey ? (
         <ChatsWelcome />

diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-channel.tsx
@@ -13,6 +13,7 @@ import {
 import { _t } from "../../../../i18n";
 import { Badge } from "@ui/badge";
 import { useCommunityCache } from "../../../../core";
+import { UilUsersAlt } from "@iconscout/react-unicons";
 
 interface Props {
   username: string;
@@ -42,6 +43,9 @@ export function ChatSidebarChannel({
   const content = (
     <>
       <UserAvatar username={channel.communityName!} size="medium" />
+      <div className="absolute bottom-2.5 left-2.5 w-5 h-5 text-blue-dark-sky flex items-center justify-center rounded-full bg-white">
+        <UilUsersAlt size={14} />
+      </div>
       <div className="flex flex-col w-[calc(100%-40px-0.75rem)]">
         <div className="flex justify-between w-full items-center">
           <div className="font-semibold truncate dark:text-white">{channel.name}</div>
@@ -63,7 +67,7 @@ export function ChatSidebarChannel({
   return isLink ? (
     <Link
       className={classNameObject({
-        "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
+        "flex items-center relative text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
           true,
         "bg-gray-100 dark:bg-gray-800": rawUsername === channel.communityName && isChannel
       })}
@@ -81,7 +85,7 @@ export function ChatSidebarChannel({
   ) : (
     <div
       className={classNameObject({
-        "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
+        "flex items-center relative text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800":
           true,
         "bg-gray-100 dark:bg-gray-800": rawUsername === channel.communityName && isChannel
       })}

diff --git a/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx b/src/common/features/chats/components/chats-sidebar/chat-sidebar-direct-contact.tsx
@@ -134,6 +134,7 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
 
   return (
     <Dropdown
+      className="border-b border-[--border-color] last:border-0"
       closeOnClickOutside={true}
       show={showContextMenu}
       setShow={(v) => setShowContextMenu(v)}
@@ -162,7 +163,6 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
         onTouchStart={() => setHoldStarted(true)}
         onTouchEnd={() => {
           setHoldStarted(false);
-          console.log("touch ended");
 
           setTimeout(() => {
             if (!holdStarted) {
@@ -186,7 +186,7 @@ export function ChatSidebarDirectContact({ contact, onClick, isLink = true }: Pr
           setShowContextMenu(true);
         }}
         className={classNameObject({
-          "flex items-center text-dark-200 gap-3 p-3 border-b border-[--border-color] last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer":
+          "flex items-center text-dark-200 gap-3 p-3 last:border-0 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer":
             true,
           "bg-gray-100 dark:bg-gray-800": receiverPubKey === contact.pubkey
         })}

diff --git a/src/common/features/chats/components/chats-sidebar/index.tsx b/src/common/features/chats/components/chats-sidebar/index.tsx
@@ -12,7 +12,7 @@ import {
   useChannelsQuery,
   useDirectContactsQuery
 } from "@ecency/ns-query";
-import { useSearchUsersQuery } from "../../queries";
+import { useComposedContactsAndChannelsQuery, useSearchUsersQuery } from "../../queries";
 import { useSearchCommunitiesQuery } from "../../queries/search-communities-query";
 import { Community } from "../../../../store/communities";
 import { Reputations } from "../../../../api/hive";
@@ -32,6 +32,7 @@ export default function ChatsSideBar(props: Props) {
 
   const { data: directContacts } = useDirectContactsQuery();
   const { data: channels } = useChannelsQuery();
+  const composedContactsAndChannels = useComposedContactsAndChannelsQuery();
   const chatsSideBarRef = React.createRef<HTMLDivElement>();
 
   const [selectedAccount, setSelectedAccount] = useState("");
@@ -75,27 +76,22 @@ export default function ChatsSideBar(props: Props) {
           ))
         ) : (
           <>
-            {channels?.length !== 0 && (
-              <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
-                {_t("chat.communities")}
-              </div>
+            {composedContactsAndChannels.map((contactOrChannel) =>
+              "id" in contactOrChannel ? (
+                <ChatSidebarChannel
+                  isChannel={props.isChannel}
+                  key={contactOrChannel.id}
+                  channel={contactOrChannel}
+                  username={username}
+                />
+              ) : (
+                <ChatSidebarDirectContact
+                  isLink={true}
+                  key={contactOrChannel.pubkey}
+                  contact={contactOrChannel}
+                />
+              )
             )}
-            {channels?.map((channel) => (
-              <ChatSidebarChannel
-                isChannel={props.isChannel}
-                key={channel.id}
-                channel={channel}
-                username={username}
-              />
-            ))}
-            {directContacts?.length !== 0 && (
-              <div className="mt-4 mb-2 text-xs font-semibold text-gray-500 uppercase px-3">
-                {_t("chat.direct-messages")}
-              </div>
-            )}
-            {directContacts?.map((contact) => (
-              <ChatSidebarDirectContact isLink={true} key={contact.pubkey} contact={contact} />
-            ))}
           </>
         )}
       </div>

diff --git a/src/common/features/chats/queries/composed-contacts-and-channels-query.ts b/src/common/features/chats/queries/composed-contacts-and-channels-query.ts
@@ -0,0 +1,73 @@
+import {
+  useChannelsQuery,
+  useDirectContactsQuery,
+  useKeysQuery,
+  useNostrGetUserProfileQuery
+} from "@ecency/ns-query";
+import { useMemo } from "react";
+import { isAfter } from "date-fns";
+
+export function useComposedContactsAndChannelsQuery() {
+  const { publicKey } = useKeysQuery();
+  const { data: contactsData } = useDirectContactsQuery();
+  const { data: channelsData } = useChannelsQuery();
+
+  const { data: activeUserNostrProfiles } = useNostrGetUserProfileQuery(publicKey);
+
+  const channelsLastSeenDate = useMemo(
+    () =>
+      channelsData.reduce<Record<string, Date>>((acc, channel) => {
+        if (activeUserNostrProfiles?.[0] && channel) {
+          const channelsLastSeenTimestamps =
+            activeUserNostrProfiles?.[0].channelsLastSeenDate ?? {};
+          const lastSeenTimestamp = channelsLastSeenTimestamps[channel.id];
+          return {
+            ...acc,
+            [channel.id]: lastSeenTimestamp
+          };
+        }
+        return acc;
+      }, {}),
+    [channelsData, activeUserNostrProfiles]
+  );
+
+  return useMemo(
+    () =>
+      [...(contactsData ?? []), ...channelsData]
+        .sort((a, b) => {
+          let lastSeenDateA: Date | undefined;
+          if ("lastSeenDate" in a) {
+            lastSeenDateA = a.lastSeenDate;
+          } else if ("id" in a) {
+            lastSeenDateA = channelsLastSeenDate[a.id];
+          }
+
+          let lastSeenDateB: Date | undefined;
+          if ("lastSeenDate" in b) {
+            lastSeenDateB = b.lastSeenDate;
+          } else if ("id" in b) {
+            lastSeenDateB = channelsLastSeenDate[b.id];
+          }
+
+          if (
+            lastSeenDateA instanceof Date &&
+            lastSeenDateB instanceof Date &&
+            isAfter(lastSeenDateA, lastSeenDateB)
+          ) {
+            return -1;
+          }
+          return 0;
+        })
+        .sort((a, b) => {
+          if ("pinned" in a && "pinned" in b) {
+            return +(b.pinned ?? false) - +(a.pinned ?? false);
+          } else if ("pinned" in a) {
+            return -1;
+          } else if ("pinned" in b) {
+            return 1;
+          }
+          return 0;
+        }),
+    [contactsData, channelsData, channelsLastSeenDate]
+  );
+}
diff --git a/src/common/features/chats/queries/index.ts b/src/common/features/chats/queries/index.ts
@@ -1 +1,2 @@
 export * from "./search-users-query";
+export * from "./composed-contacts-and-channels-query";
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from "./search-users-query";
		export * from "./composed-contacts-and-channels-query";