Merge pull request #2762 from daostack/CW-mention-streams

In-chat mention and creation of new stream

Author: MeyerPV

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",
@@ -33,7 +34,6 @@
     "lodash": "^4.17.20",
     "millify": "^3.5.2",
     "moment": "^2.29.1",
-    "node-sass": "^4.14.1",
     "openpgp": "4.10.4",
     "pluralize": "^8.0.0",
     "query-string": "^7.1.0",
@@ -67,6 +67,7 @@
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
+    "node-sass": "^4.14.1",
     "slate": "0.94.1",
     "slate-history": "0.93.0",
     "slate-react": "0.98.1",

src/globals.d.ts

@@ -21,3 +21,8 @@ declare global {
     };
   }
 }
+
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

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>
   );
 };
 

src/pages/App/router/components/LayoutRoute/types.ts

@@ -9,6 +9,7 @@ export interface RenderFunctionOptions<T extends Route = Route>
   configuration: T;
   userRoles?: UserRole[];
   authenticated: boolean;
+  component?: React.ComponentType<any>; 
 }
 
 export type RenderRouteContentFunction<T extends Route = Route> = (

src/pages/OldCommon/components/CommonDetailContainer/AddDiscussionComponent/Select/CirclesSelect.tsx

@@ -18,7 +18,7 @@ interface CirclesSelectProps {
   value: CircleSelectType | CircleSelectType[] | null;
   selectStyles?: StylesConfig<CircleSelectType>;
   error?: string;
-  onBlur: (e: React.FocusEvent<any, Element>) => void;
+  onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
   isOptionDisabled?: (option: CircleSelectType) => boolean;
 }
 

src/pages/OldCommon/containers/ProposalContainer/VotingCard.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useMemo } from "react";
+import React, { FC, useMemo, ReactElement } from "react";
 import classNames from "classnames";
-import { ReactElement } from "hoist-non-react-statics/node_modules/@types/react";
 import { ProgressBar } from "@/shared/components";
 import { VotingCardType } from "@/shared/models";
 

src/pages/OldCommon/hooks/useCommonMembers.ts

@@ -116,7 +116,7 @@ export const useCommonMembers = ({ commonId }: Options): Return => {
         const useCommonMembersTrace = trace(perf, 'useCommonMembers');
         useCommonMembersTrace.start();
 
-        const cachedUserStates = selectUserStates()(store.getState());
+        const cachedUserStates = selectUserStates(store.getState());
         const hasUsersFromCache = commonMembers.some(
           ({ userId }) => cachedUserStates[userId]?.data,
         );

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";
@@ -113,6 +114,7 @@ interface ChatComponentInterface {
   directParent?: DirectParent | null;
   renderChatInput?: () => ReactNode;
   onUserClick?: (userId: string) => void;
+  onStreamMentionClick?: (feedItemId: string) => void;
   onFeedItemClick?: (feedItemId: string) => void;
   onInternalLinkClick?: (data: InternalLinkData) => void;
 }
@@ -161,6 +163,7 @@ export default function ChatComponent({
   directParent,
   renderChatInput: renderChatInputOuter,
   onUserClick,
+  onStreamMentionClick,
   onFeedItemClick,
   onInternalLinkClick,
 }: ChatComponentInterface) {
@@ -207,6 +210,7 @@ export default function ChatComponent({
     },
     onFeedItemClick,
     onUserClick,
+    onStreamMentionClick,
     commonId,
     onInternalLinkClick,
   });
@@ -220,6 +224,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],
@@ -877,6 +884,7 @@ export default function ChatComponent({
             onMessageDelete={handleMessageDelete}
             directParent={directParent}
             onUserClick={onUserClick}
+            onStreamMentionClick={onStreamMentionClick}
             onFeedItemClick={onFeedItemClick}
             onInternalLinkClick={onInternalLinkClick}
             isEmpty={
@@ -914,6 +922,7 @@ export default function ChatComponent({
           onClearFinished={onClearFinished}
           shouldReinitializeEditor={shouldReinitializeEditor}
           users={users}
+          discussions={discussionsData ?? []}
           onEnterKeyDown={onEnterKeyDown}
           emojiCount={emojiCount}
           setMessage={setMessage}
@@ -929,6 +938,10 @@ export default function ChatComponent({
           canSendMessage={Boolean(canSendMessage)}
           inputContainerRef={inputContainerRef}
           editorRef={editorRef}
+          user={user}
+          commonId={commonId}
+          circleVisibility={discussion?.circleVisibility}
+          onInternalLinkClick={onInternalLinkClick}
         />
       </div>
     </div>

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}