CW-mention-streams

Added mentions streams Added Stream mention component
daostack · Nov 1, 2024 · 56b9da4 · 56b9da4
1 parent 1c1bc96
commit 56b9da4
Show file tree

Hide file tree

Showing 34 changed files with 297 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@floating-ui/react-dom-interactions": "^0.13.1",
     "@headlessui/react": "^1.7.4",
     "@storybook/addon-viewport": "^6.5.13",
+    "@tanstack/react-query": "4.5.0",
     "@tanstack/react-table": "^8.7.9",
     "@types/react-pdf": "^5.7.2",
     "axios": "^0.21.0",

diff --git a/src/pages/App/App.tsx b/src/pages/App/App.tsx
@@ -16,6 +16,13 @@ import {
   NotificationsHandler,
 } from "./handlers";
 import { Router } from "./router";
+import {
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query'
+
+// Create a client
+const queryClient = new QueryClient()
 
 const App = () => {
   const dispatch = useDispatch();
@@ -28,17 +35,19 @@ const App = () => {
   }, [dispatch, isDesktop]);
 
   return (
-    <ReactRouter history={history}>
-      <BackgroundNotificationModal />
-      <CommonHandler />
-      <TextDirectionHandler />
-      <ThemeHandler />
-      <UserNotificationsAmountHandler />
-      <WebViewLoginHandler />
-      <NotificationsHandler />
-      <LoginContainer />
-      <Router />
-    </ReactRouter>
+    <QueryClientProvider client={queryClient}>
+      <ReactRouter history={history}>
+        <BackgroundNotificationModal />
+        <CommonHandler />
+        <TextDirectionHandler />
+        <ThemeHandler />
+        <UserNotificationsAmountHandler />
+        <WebViewLoginHandler />
+        <NotificationsHandler />
+        <LoginContainer />
+        <Router />
+      </ReactRouter>
+    </QueryClientProvider>
   );
 };
 

diff --git a/src/pages/common/components/ChatComponent/ChatComponent.tsx b/src/pages/common/components/ChatComponent/ChatComponent.tsx
@@ -30,6 +30,7 @@ import {
   useZoomDisabling,
   useImageSizeCheck,
   useQueryParams,
+  useFetchDiscussionsByCommonId,
 } from "@/shared/hooks";
 import { ArrowInCircleIcon } from "@/shared/icons";
 import { LinkPreviewData } from "@/shared/interfaces";
@@ -108,6 +109,7 @@ interface ChatComponentInterface {
   directParent?: DirectParent | null;
   renderChatInput?: () => ReactNode;
   onUserClick?: (userId: string) => void;
+  onStreamMentionClick?: (feedItemId: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
 }
@@ -156,6 +158,7 @@ export default function ChatComponent({
   directParent,
   renderChatInput: renderChatInputOuter,
   onUserClick,
+  onStreamMentionClick,
   onFeedItemClick,
   onInternalLinkClick,
 }: ChatComponentInterface) {
@@ -202,6 +205,7 @@ export default function ChatComponent({
     },
     onFeedItemClick,
     onUserClick,
+    onStreamMentionClick,
     commonId,
     onInternalLinkClick,
   });
@@ -215,6 +219,9 @@ export default function ChatComponent({
     chatChannelId: chatChannel?.id || "",
     participants: chatChannel?.participants,
   });
+
+  const {data: discussionsData} = useFetchDiscussionsByCommonId(commonId);
+
   const users = useMemo(
     () => (chatChannel ? chatUsers : discussionUsers),
     [chatUsers, discussionUsers, chatChannel],
@@ -827,6 +834,7 @@ export default function ChatComponent({
             onMessageDelete={handleMessageDelete}
             directParent={directParent}
             onUserClick={onUserClick}
+            onStreamMentionClick={onStreamMentionClick}
             onFeedItemClick={onFeedItemClick}
             onInternalLinkClick={onInternalLinkClick}
             isEmpty={
@@ -864,6 +872,7 @@ export default function ChatComponent({
           onClearFinished={onClearFinished}
           shouldReinitializeEditor={shouldReinitializeEditor}
           users={users}
+          discussions={discussionsData ?? []}
           onEnterKeyDown={onEnterKeyDown}
           emojiCount={emojiCount}
           setMessage={setMessage}

diff --git a/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx b/src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx
@@ -68,6 +68,7 @@ interface ChatContentInterface {
   onMessageDelete?: (messageId: string) => void;
   directParent?: DirectParent | null;
   onUserClick?: (userId: string) => void;
+  onStreamMentionClick?: (link: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
   isEmpty?: boolean;
@@ -106,6 +107,7 @@ const ChatContent: ForwardRefRenderFunction<
     onMessageDelete,
     directParent,
     onUserClick,
+    onStreamMentionClick,
     onFeedItemClick,
     onInternalLinkClick,
     isEmpty,
@@ -292,6 +294,7 @@ const ChatContent: ForwardRefRenderFunction<
                         onMessageDelete={onMessageDelete}
                         directParent={directParent}
                         onUserClick={onUserClick}
+                        onStreamMentionClick={onStreamMentionClick}
                         onFeedItemClick={onFeedItemClick}
                         onInternalLinkClick={onInternalLinkClick}
                         chatChannelId={chatChannelId}
@@ -312,6 +315,7 @@ const ChatContent: ForwardRefRenderFunction<
                         onMessageDelete={onMessageDelete}
                         directParent={directParent}
                         onUserClick={onUserClick}
+                        onStreamMentionClick={onStreamMentionClick}
                         onFeedItemClick={onFeedItemClick}
                         onInternalLinkClick={onInternalLinkClick}
                         isMessageEditAllowed={isMessageEditAllowed}

diff --git a/src/pages/common/components/ChatComponent/components/ChatInput/ChatInput.tsx b/src/pages/common/components/ChatComponent/components/ChatInput/ChatInput.tsx
@@ -8,7 +8,7 @@ import React, {
 import classNames from "classnames";
 import { FILES_ACCEPTED_EXTENSIONS } from "@/shared/constants";
 import { PlusIcon, SendIcon } from "@/shared/icons";
-import { User } from "@/shared/models";
+import { Discussion, User } from "@/shared/models";
 import {
   BaseTextEditor,
   ButtonIcon,
@@ -30,6 +30,7 @@ interface ChatInputProps {
   emojiCount: EmojiCount;
   onEnterKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
   users: User[];
+  discussions: Discussion[];
   shouldReinitializeEditor: boolean;
   onClearFinished: () => void;
   canSendMessage?: boolean;
@@ -58,6 +59,7 @@ export const ChatInput = React.memo(forwardRef<BaseTextEditorHandles, ChatInputP
     emojiCount,
     onEnterKeyDown,
     users,
+    discussions,
     shouldReinitializeEditor,
     onClearFinished,
   } = props;
@@ -114,6 +116,7 @@ export const ChatInput = React.memo(forwardRef<BaseTextEditorHandles, ChatInputP
         placeholder="Message"
         onKeyDown={onEnterKeyDown}
         users={users}
+        discussions={discussions}
         shouldReinitializeEditor={shouldReinitializeEditor}
         onClearFinished={onClearFinished}
         scrollSelectionIntoView={emptyFunction}

diff --git a/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts b/src/pages/common/components/ChatComponent/hooks/useDiscussionChatAdapter.ts
@@ -13,6 +13,7 @@ import { InternalLinkData } from "@/shared/utils";
 interface Options {
   hasPermissionToHide: boolean;
   onUserClick?: (userId: string) => void;
+  onStreamMentionClick?: (feedItemId: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
   directParent?: DirectParent | null;
@@ -37,6 +38,7 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
     discussionId,
     onFeedItemClick,
     onUserClick,
+    onStreamMentionClick,
     commonId,
     onInternalLinkClick,
   } = options;
@@ -63,6 +65,7 @@ export const useDiscussionChatAdapter = (options: Options): Return => {
     textStyles,
     onFeedItemClick,
     onUserClick,
+    onStreamMentionClick,
     onInternalLinkClick,
   });
   const { markFeedItemAsSeen } = useUpdateFeedItemSeenState();

diff --git a/src/pages/common/components/FeedItem/FeedItem.tsx b/src/pages/common/components/FeedItem/FeedItem.tsx
@@ -174,6 +174,7 @@ const FeedItem = forwardRef<FeedItemRef, FeedItemProps>((props, ref) => {
       shouldPreLoadMessages,
       withoutMenu,
       onUserClick: handleUserClick,
+      onStreamMentionClick: onFeedItemClick, 
       onFeedItemClick,
       onInternalLinkClick,
     }),

diff --git a/src/pages/commonFeed/CommonFeed.tsx b/src/pages/commonFeed/CommonFeed.tsx
@@ -129,7 +129,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
   const anotherCommonId =
     userCommonIds[0] === commonId ? userCommonIds[1] : userCommonIds[0];
   const pinnedItemIds = useMemo(
-    () => commonData?.common.pinnedFeedItems.map((item) => item.feedObjectId),
+    () => (commonData?.common.pinnedFeedItems ?? []).map((item) => item.feedObjectId),
     [commonData?.common.pinnedFeedItems],
   );
 

diff --git a/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/DesktopChat/DesktopChat.tsx
@@ -131,6 +131,7 @@ const DesktopChat: FC<ChatProps> = (props) => {
         directParent={directParent}
         renderChatInput={renderChatInput}
         onUserClick={onUserClick}
+        onStreamMentionClick={onFeedItemClick}
         onFeedItemClick={onFeedItemClick}
         onInternalLinkClick={onInternalLinkClick}
       />

diff --git a/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx b/src/pages/commonFeed/components/FeedLayout/components/MobileChat/MobileChat.tsx
@@ -167,6 +167,7 @@ const MobileChat: FC<ChatProps> = (props) => {
             directParent={directParent}
             renderChatInput={renderChatInput}
             onUserClick={onUserClick}
+            onStreamMentionClick={onFeedItemClick}
             onFeedItemClick={onFeedItemClick}
             onInternalLinkClick={onInternalLinkClick}
           />

diff --git a/src/services/CommonFeed.ts b/src/services/CommonFeed.ts
@@ -19,6 +19,7 @@ import {
   CommonFeedObjectUserUnique,
   CommonFeedType,
   CommonMember,
+  FeedItemFollow,
   SubCollections,
   Timestamp,
 } from "@/shared/models";
@@ -318,6 +319,20 @@ class CommonFeedService {
       }
     });
   };
+
+
+  public getFeedItemByCommonAndDiscussionId = async ({commonId, discussionId}: {commonId: string; discussionId: string}): Promise<CommonFeed | null> => {
+    try {
+      const feedItems = await this.getCommonFeedSubCollection(commonId)
+        .where("data.id", "==", discussionId)
+        .get();
+
+      const data = feedItems.docs.map(doc => doc.data());
+      return data?.[0];
+    } catch (error) {
+      return null;
+    }
+  };
 }
 
 export default new CommonFeedService();
diff --git a/src/services/Discussion.ts b/src/services/Discussion.ts
@@ -112,6 +112,17 @@ class DiscussionService {
   public deleteDiscussion = async (discussionId: string): Promise<void> => {
     await Api.delete(ApiEndpoint.DeleteDiscussion(discussionId));
   };
+
+  public getDiscussionsByCommonId = async (commonId: string) => {
+    const discussionCollection = await this.getDiscussionCollection()
+      .where("commonId", "==", commonId) // Query for documents where commonId matches
+      .get();
+
+    // Map the Firestore document data
+    const data = discussionCollection.docs.map(doc => doc.data());
+    return data;
+  };
+
 }
 
 export default new DiscussionService();
diff --git a/src/shared/components/Chat/ChatMessage/ChatMessage.tsx b/src/shared/components/Chat/ChatMessage/ChatMessage.tsx
@@ -78,6 +78,7 @@ interface ChatMessageProps {
   onMessageDelete?: (messageId: string) => void;
   directParent?: DirectParent | null;
   onUserClick?: (userId: string) => void;
+  onStreamMentionClick?: (feedItemID: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
   isMessageEditAllowed: boolean;
@@ -109,6 +110,7 @@ const ChatMessage = ({
   onMessageDelete,
   directParent,
   onUserClick,
+  onStreamMentionClick,
   onFeedItemClick,
   onInternalLinkClick,
   isMessageEditAllowed,
@@ -165,6 +167,7 @@ const ChatMessage = ({
         directParent,
         onUserClick,
         onFeedItemClick,
+        onStreamMentionClick,
         onInternalLinkClick,
       });
 
@@ -177,6 +180,7 @@ const ChatMessage = ({
     isNotCurrentUserMessage,
     discussionMessage.commonId,
     onUserClick,
+    onStreamMentionClick,
     onInternalLinkClick,
   ]);
 
@@ -302,6 +306,7 @@ const ChatMessage = ({
       commonId: discussionMessage.commonId,
       directParent,
       onUserClick,
+      onStreamMentionClick,
       onFeedItemClick,
       onInternalLinkClick,
     });

diff --git a/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx b/src/shared/components/Chat/ChatMessage/DMChatMessage.tsx
@@ -76,6 +76,7 @@ interface ChatMessageProps {
   onMessageDelete?: (messageId: string) => void;
   directParent?: DirectParent | null;
   onUserClick?: (userId: string) => void;
+  onStreamMentionClick?: (feedItemId: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
   chatChannelId?: string;
@@ -112,6 +113,7 @@ export default function DMChatMessage({
   onMessageDelete,
   directParent,
   onUserClick,
+  onStreamMentionClick,
   onFeedItemClick,
   onInternalLinkClick,
   chatChannelId,
@@ -181,6 +183,7 @@ export default function DMChatMessage({
           getCommonPageAboutTabPath,
           directParent,
           onUserClick,
+          onStreamMentionClick,
           onFeedItemClick,
           onInternalLinkClick,
         });
@@ -201,6 +204,7 @@ export default function DMChatMessage({
     getCommonPagePath,
     getCommonPageAboutTabPath,
     onUserClick,
+    onStreamMentionClick,
   ]);
 
   useEffect(() => {
@@ -217,6 +221,7 @@ export default function DMChatMessage({
         commonId: discussionMessage.commonId,
         directParent,
         onUserClick,
+        onStreamMentionClick,
         onFeedItemClick,
         onInternalLinkClick,
       });
@@ -229,6 +234,7 @@ export default function DMChatMessage({
     isNotCurrentUserMessage,
     discussionMessage.commonId,
     onUserClick,
+    onStreamMentionClick,
     discussionMessageUserId,
     userId,
     onInternalLinkClick,