Channels creation and joining

package.json

@@ -13,7 +13,7 @@
     "start:prod": "NODE_ENV=production node build/server.js"
   },
   "dependencies": {
-    "@ecency/ns-query": "^1.0.8",
+    "@ecency/ns-query": "^1.1.0",
     "@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-channel-messages.tsx

@@ -10,14 +10,17 @@ import {
   checkContiguousMessage,
   PublicMessage,
   useHideMessageInChannel,
+  useJoinedCommunityTeamQuery,
   useKeysQuery,
-  usePublicMessagesQuery,
-  useUpdateChannelBlockedUsers
+  useMuteUserInChannel,
+  usePublicMessagesQuery
 } from "@ecency/ns-query";
 import { groupMessages } from "../utils";
 import { ChatFloatingDate } from "./chat-floating-date";
 import { differenceInCalendarDays } from "date-fns";
 import useDebounce from "react-use/lib/useDebounce";
+import { useCommunityCache } from "../../../core";
+import { ROLES } from "../../../store/communities";
 
 interface Props {
   publicMessages: PublicMessage[];
@@ -34,28 +37,36 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
   const [currentInteractingMessageId, setCurrentInteractingMessageId] = useState<string>();
   const [needFetchNextPage, setNeedFetchNextPage] = useState(false);
 
+  const { data: community } = useCommunityCache(currentChannel?.communityName);
+  const { data: joinedCommunityTeamKeys, isSuccess: isJoinedCommunityTeamKeysFetched } =
+    useJoinedCommunityTeamQuery(community ?? undefined);
   const { publicKey } = useKeysQuery();
-  const { fetchNextPage, refetch } = usePublicMessagesQuery(currentChannel);
+  const { fetchNextPage, refetch } = usePublicMessagesQuery(
+    currentChannel,
+    joinedCommunityTeamKeys
+  );
 
-  const { mutateAsync: updateBlockedUsers, isLoading: isUsersBlockingLoading } =
-    useUpdateChannelBlockedUsers(currentChannel);
+  const { mutateAsync: muteUserInChannel, isLoading: isUserMutingLoading } =
+    useMuteUserInChannel(currentChannel);
   const { mutateAsync: hideMessage, isLoading: isHideMessageLoading } =
     useHideMessageInChannel(currentChannel);
 
-  const messages = useMemo(
+  const isCommunityTeamMember = useMemo(
     () =>
-      publicMessages.filter((m) =>
-        currentChannel?.removedUserIds ? !currentChannel.removedUserIds.includes(m.creator) : true
-      ),
-    [publicMessages, currentChannel]
+      community?.team.some(
+        ([name, role]) =>
+          name === activeUser?.username &&
+          [ROLES.MOD, ROLES.ADMIN, ROLES.OWNER].includes(role as ROLES)
+      ) ?? false,
+    [community, activeUser]
   );
-  const groupedMessages = useMemo(() => groupMessages(messages), [messages]);
+  const groupedMessages = useMemo(() => groupMessages(publicMessages), [publicMessages]);
 
   useEffect(() => {
-    if (messages.length === 0) {
+    if (publicMessages.length === 0 && isJoinedCommunityTeamKeysFetched) {
       refetch();
     }
-  }, [messages]);
+  }, [publicMessages, isJoinedCommunityTeamKeysFetched]);
 
   useDebounce(
     () => {
@@ -73,13 +84,14 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
         {groupedMessages.map(([date, group], i) => (
           <React.Fragment key={date.getTime()}>
             {(i > 0 ? differenceInCalendarDays(date, groupedMessages[i - 1][0]) : 1) ? (
-              <ChatFloatingDate currentDate={date} isPage={isPage} />
+              <ChatFloatingDate key={date.getTime()} currentDate={date} isPage={isPage} />
             ) : (
               <></>
             )}
             {group.map((message, j) => (
               <>
                 <Dropdown
+                  key={message.id}
                   show={currentInteractingMessageId === message.id}
                   setShow={(v) =>
                     setCurrentInteractingMessageId(v ? currentInteractingMessageId : undefined)
@@ -89,9 +101,9 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
                     currentChannel={currentChannel}
                     type={message.creator !== publicKey ? "receiver" : "sender"}
                     message={message}
-                    isSameUser={checkContiguousMessage(message, i, messages)}
+                    isSameUser={checkContiguousMessage(message, i, publicMessages)}
                     onContextMenu={() => {
-                      if (currentChannel?.communityName === activeUser?.username) {
+                      if (isCommunityTeamMember) {
                         setCurrentInteractingMessageId(message.id);
                       }
                     }}
@@ -117,38 +129,21 @@ export function ChatsChannelMessages({ publicMessages, currentChannel, isPage }:
                     <DropdownItemWithIcon
                       icon={isHideMessageLoading ? <Spinner className="w-3.5 h-3.5" /> : hideSvg}
                       label={_t("chat.hide-message")}
-                      onClick={() =>
-                        hideMessage({
-                          hide:
-                            currentChannel?.hiddenMessageIds?.some((id) => id === message.id) ===
-                            false,
-                          messageId: message.id
-                        })
-                      }
+                      onClick={() => hideMessage({ messageId: message.id, status: 0 })}
                     />
                     <DropdownItemWithIcon
                       icon={
-                        isUsersBlockingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
+                        isUserMutingLoading ? <Spinner className="w-3.5 h-3.5" /> : removeUserSvg
                       }
                       label={_t("chat.block-author")}
-                      onClick={() =>
-                        updateBlockedUsers([
-                          ...(currentChannel?.removedUserIds ?? []),
-                          message.creator
-                        ])
-                      }
+                      onClick={() => muteUserInChannel({ pubkey: message.creator, status: 0 })}
                     />
                   </DropdownMenu>
                 </Dropdown>
               </>
             ))}
           </React.Fragment>
         ))}
-        {currentChannel?.removedUserIds?.includes(activeUser?.username!!) && (
-          <span className="flex justify-center items-center mt-3">
-            You have been blocked from this community
-          </span>
-        )}
       </div>
     </>
   );

src/common/features/chats/components/chat-channel-not-joined.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { _t } from "../../../i18n";
+import { Button } from "@ui/button";
+import { Channel, useAddCommunityChannel } from "@ecency/ns-query";
+import { Spinner } from "@ui/spinner";
+
+interface Props {
+  channel: Channel;
+}
+
+export function ChatChannelNotJoined({ channel }: Props) {
+  const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
+    useAddCommunityChannel(channel);
+  return (
+    <div className="h-[56px] flex items-center justify-between px-3 gap-4">
+      <span className="text-xs">{_t("chat.welcome.join-description")}</span>
+      <Button
+        disabled={isAddCommunityChannelLoading}
+        icon={isAddCommunityChannelLoading && <Spinner className="w-3.5 h-3.5" />}
+        className="whitespace-nowrap"
+        size="sm"
+        onClick={() => addCommunityChannel()}
+      >
+        {_t("chat.join-channel")}
+      </Button>
+    </div>
+  );
+}

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

@@ -22,7 +22,6 @@ import {
   Channel,
   ChatContext,
   DirectContact,
-  useChannelsQuery,
   useGetPublicKeysQuery,
   useSendMessage
 } from "@ecency/ns-query";
@@ -38,7 +37,6 @@ interface Props {
 
 export default function ChatInput({ currentChannel, currentContact }: Props) {
   const size = useWindowSize();
-  useChannelsQuery();
 
   const inputRef = useRef<HTMLInputElement | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);

src/common/features/chats/components/chat-message-box.tsx

@@ -1,16 +1,14 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { History } from "history";
 import ChatsMessagesHeader from "./chat-messages-header";
 import ChatsMessagesView from "./chat-messages-view";
-import { Button } from "@ui/button";
-import ChatsProfileBox from "./chat-profile-box";
-import { _t } from "../../../i18n";
 import {
   Channel,
   DirectContact,
-  useAddCommunityChannel,
   useAutoScrollInChatBox,
-  useLeftCommunityChannelsQuery
+  useDirectContactsQuery,
+  useUpdateChannelLastSeenDate,
+  useUpdateDirectContactsLastSeenDate
 } from "@ecency/ns-query";
 import { Community } from "../../../store/communities";
 import { ChatInvitation } from "./chat-invitation";
@@ -31,56 +29,55 @@ interface Props {
 }
 
 export default function ChatsMessagesBox(props: Props) {
-  const { data: leftCommunityChannelsIds } = useLeftCommunityChannelsQuery();
-
-  const { mutateAsync: addCommunityChannel, isLoading: isAddCommunityChannelLoading } =
-    useAddCommunityChannel(props.channel);
-
-  const hasLeftCommunity = useMemo(
-    () => leftCommunityChannelsIds?.includes(props.channel?.id ?? ""),
-    [props.channel]
-  );
   const isContactJoined = useMemo(
     () => !!props.currentContact?.pubkey && !props.currentContact.pubkey.startsWith("not_joined_"),
     [props.currentContact]
   );
 
+  const { isSuccess: isDirectContactsLoaded } = useDirectContactsQuery();
+  const updateDirectContactsLastSeenDate = useUpdateDirectContactsLastSeenDate();
+  const updateChannelLastSeenDate = useUpdateChannelLastSeenDate();
+
   useAutoScrollInChatBox(props.currentContact, props.channel);
 
+  // Whenever current contact is exists need to turn unread to 0
+  useEffect(() => {
+    if (props.currentContact && isDirectContactsLoaded) {
+      updateDirectContactsLastSeenDate.mutateAsync({
+        contact: props.currentContact,
+        lastSeenDate: new Date()
+      });
+    }
+  }, [props.currentContact, isDirectContactsLoaded]);
+
+  useEffect(() => {
+    if (props.channel) {
+      updateChannelLastSeenDate.mutateAsync({
+        channel: props.channel,
+        lastSeenDate: new Date()
+      });
+    }
+  }, [props.channel]);
+
   return (
     <div
       className="grid min-h-full"
       style={{
         gridTemplateRows: "min-content 1fr min-content"
       }}
     >
-      {(props.channel && !hasLeftCommunity) || props.currentContact ? (
-        <>
-          <ChatsMessagesHeader
-            username={props.community?.name ?? props.currentContact?.name ?? ""}
-            history={props.history}
-          />
-          {!props.currentContact || isContactJoined ? (
-            <ChatsMessagesView
-              currentContact={props.currentContact!!}
-              currentChannel={props.channel!!}
-            />
-          ) : (
-            <ChatInvitation currentContact={props.currentContact} />
-          )}
-        </>
+      <ChatsMessagesHeader
+        channel={props.channel}
+        username={props.community?.name ?? props.currentContact?.name ?? ""}
+        history={props.history}
+      />
+      {!props.currentContact || isContactJoined ? (
+        <ChatsMessagesView
+          currentContact={props.currentContact!!}
+          currentChannel={props.channel!!}
+        />
       ) : (
-        <>
-          <div />
-          <div className="flex flex-col justify-center items-center mb-4">
-            <ChatsProfileBox communityName={props.community?.name} />
-            <p className="mb-4 text-gray-600">{_t("chat.welcome.join-description")}</p>
-            <Button onClick={() => addCommunityChannel()} disabled={isAddCommunityChannelLoading}>
-              Join Community Chat
-            </Button>
-          </div>
-          <div />
-        </>
+        <ChatInvitation currentContact={props.currentContact} />
       )}
     </div>
   );

src/common/features/chats/components/chat-message-channel-item-extension.tsx

@@ -1,17 +1,10 @@
 import { Popover, PopoverContent } from "@ui/popover";
 import React, { PropsWithChildren, RefObject, useMemo, useRef } from "react";
 import FollowControls from "../../../components/follow-controls";
-import { Button } from "@ui/button";
-import { _t } from "../../../i18n";
 import UserAvatar from "../../../components/user-avatar";
 import { useMappedStore } from "../../../store/use-mapped-store";
-import { COMMUNITYADMINROLES } from "./chat-popup/chat-constants";
-import {
-  Channel,
-  CommunityModerator,
-  useNostrGetUserProfileQuery,
-  useUpdateChannelBlockedUsers
-} from "@ecency/ns-query";
+import { Channel, useNostrGetUserProfileQuery } from "@ecency/ns-query";
+import { useCommunityCache } from "../../../core";
 
 interface Props {
   currentChannel: Channel;
@@ -28,29 +21,14 @@ export function ChatMessageChannelItemExtension({
   const { activeUser, setActiveUser, updateActiveUser, deleteUser, toggleUIProp, ui, users } =
     useMappedStore();
 
+  const { data: community } = useCommunityCache(currentChannel?.communityName);
   const { data: nostrUserProfiles } = useNostrGetUserProfileQuery(creator);
 
   const profile = useMemo(
     () => nostrUserProfiles?.find((p) => p.creator === creator),
     [creator, nostrUserProfiles]
   );
-  const communityAdmins = useMemo(
-    () =>
-      currentChannel?.communityModerators
-        ?.filter((user: CommunityModerator) => COMMUNITYADMINROLES.includes(user.role))
-        .map((user: CommunityModerator) => user.name) ?? [],
-    [currentChannel]
-  );
-
-  const { mutateAsync: updateBlockedUsers } = useUpdateChannelBlockedUsers(currentChannel);
-
-  const block = (removedUserId: string) =>
-    updateBlockedUsers([...(currentChannel.removedUserIds ?? []), removedUserId]);
-
-  const unBlock = (removedUserId: string) =>
-    updateBlockedUsers(
-      currentChannel.removedUserIds?.filter((item) => item !== removedUserId) ?? []
-    );
+  const communityTeam = useMemo(() => community?.team.map(([name]) => name) ?? [], [community]);
 
   return (
     <>
@@ -67,7 +45,7 @@ export function ChatMessageChannelItemExtension({
               <p className="flex justify-center profile-name">{`@${profile?.name}`}</p>
               <div
                 className={`flex mb-3 ${
-                  communityAdmins.includes(activeUser?.username!) &&
+                  communityTeam.includes(activeUser?.username!) &&
                   profile?.name !== currentChannel.communityName
                     ? "justify-between"
                     : "justify-center"
@@ -84,25 +62,6 @@ export function ChatMessageChannelItemExtension({
                   ui={ui}
                   users={users}
                 />
-
-                {communityAdmins.includes(activeUser?.username!) &&
-                  profile?.name !== currentChannel.communityName && (
-                    <>
-                      {currentChannel?.removedUserIds?.includes(profile?.creator ?? "") ? (
-                        <>
-                          <Button onClick={() => unBlock(profile?.creator ?? "")}>
-                            {_t("chat.unblock")}
-                          </Button>
-                        </>
-                      ) : (
-                        <>
-                          <Button onClick={() => block(profile?.creator ?? "")}>
-                            {_t("chat.block")}
-                          </Button>
-                        </>
-                      )}
-                    </>
-                  )}
               </div>
             </div>
           </div>