Merge pull request #2699 from daostack/staging

Merge Staging to Production

Author: MeyerPV

src/constants.scss

@@ -166,6 +166,7 @@ $success-300: #6ee569;
 $c-input-100: #f9fafa;
 $c-light-gray: #f4f5f5;
 $c-light-gray-2: #f8f8f8;
+$c-light-gray-3: #f4f5f5;
 $c-sidebar-shadow: rgba(0, 26, 54, 0.08);
 $c-sidebar-user-menu-shadow: rgba(0, 0, 0, 0.15259);
 $c-common-card-shadow: rgba(0, 26, 54, 0.08);
@@ -175,6 +176,8 @@ $split-view-resizer-border-hover-color: rgba(0, 0, 0, 0.5);
 $editor-checkbox-inactive: #99999d;
 $editor-checkbox-active: #d84ca0;
 $chat-checkbox-inactive: #cecece;
+$link-my-reply-bg: #943367;
+$link-my-reply: #ffa2ea;
 
 /* breakpoints */
 $small-laptop: 1366px;

src/pages/Auth/store/saga.tsx

@@ -301,6 +301,7 @@ const resetGlobalData = (fullReset: boolean) => {
   store.dispatch(inboxActions.resetInbox());
   store.dispatch(cacheActions.resetFeedStates());
   store.dispatch(cacheActions.resetDiscussionMessagesStates());
+  store.dispatch(cacheActions.resetChatChannelMessagesStates());
   store.dispatch(commonActions.resetCommon());
 };
 

src/pages/OldCommon/components/CommonDetailContainer/CommonWhitepaper/components/WhitepaperMembers/WhitepaperMembers.tsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import classNames from "classnames";
 import { selectGovernance } from "@/pages/OldCommon/store/selectors";
 import { ProposalsTypes } from "@/shared/constants";
-import { AllowedActions, AllowedProposals, CircleType } from "@/shared/models";
+import { AllowedActions, AllowedProposals } from "@/shared/models";
 import { getTextForProposalType } from "@/shared/utils";
 import { generateCirclesBinaryNumber } from "../../utils";
 import { getTextForAction, checkShouldRemoveAction } from "./helpers";
@@ -22,20 +22,17 @@ export default function WhitepaperMembers({ isSubCommon }: Props) {
 
   const members = Object.values(governance?.circles || {})
     .slice(0, 5)
-    .map((circle, index) => {
-      if (circle?.type !== CircleType.Project)
-        return (
-          <li
-            key={index}
-            onClick={() => setSelectedMember({ ...circle, index })}
-            className={classNames({
-              active: selectedMember?.name === circle.name,
-            })}
-          >
-            {circle.name}
-          </li>
-        );
-    });
+    .map((circle, index) => (
+      <li
+        key={index}
+        onClick={() => setSelectedMember({ ...circle, index })}
+        className={classNames({
+          active: selectedMember?.name === circle.name,
+        })}
+      >
+        {circle.name}
+      </li>
+    ));
 
   const renderContent = () => {
     const circle = Object.values(governance?.circles || {}).filter(

src/pages/OldCommon/components/CommonDetailContainer/MembersComponent/CommonMemberComponent.tsx

@@ -17,7 +17,6 @@ import {
   getCirclesWithHighestTier,
   getFilteredByIdCircles,
   getUserName,
-  removeProjectCircles,
 } from "@/shared/utils";
 import { selectRecentAssignedCircle } from "@/store/states";
 import { UserAvatar, UserInfoPopup } from "../../../../../shared/components";
@@ -92,10 +91,8 @@ const CommonMember: FC<CommonMemberProps> = ({
     }
   });
 
-  const notMemberCircles = removeProjectCircles(
-    governanceCircles.filter(
-      ({ id }) => !memberCircles.map((circle) => circle.id).includes(id),
-    ),
+  const notMemberCircles = governanceCircles.filter(
+    ({ id }) => !memberCircles.map((circle) => circle.id).includes(id),
   );
 
   const circlesString = getCirclesWithHighestTier(memberCircles)

src/pages/OldCommon/hooks/useCommonMember.ts

@@ -72,11 +72,6 @@ export const useCommonMember = (options: Options = {}): Return => {
   const dispatch = useDispatch();
   const currentLoadingIdRef = useRef("");
   const isMounted = useIsMounted();
-  const [state, setState] = useState<State>({
-    loading: false,
-    fetched: false,
-    data: null,
-  });
   const [missingCirclesError, setMissingCirclesError] = useState(false);
   const user = useSelector(selectUser());
   const userId = options.userId || user?.uid;
@@ -94,6 +89,7 @@ export const useCommonMember = (options: Options = {}): Return => {
         identificationInfo || { userId: "", commonId: "" },
       ),
     ) || DEFAULT_STATE;
+  const [state, setState] = useState<State>(commonMemberState);
   const commonMemberId = state.data?.id;
 
   const fetchCommonMember = useCallback(
@@ -264,24 +260,31 @@ export const useCommonMember = (options: Options = {}): Return => {
       CommonService.subscribeToCommonMemberByCommonIdAndUserId(
         commonId,
         userId,
-        (commonMember, { isAdded, isRemoved }) => {
+        (subscriptionData) => {
           try {
             let data: State["data"] = null;
 
-            if (isAdded) {
-              CommonEventEmitter.emit(CommonEvent.ProjectUpdated, {
-                commonId,
-                hasMembership: true,
-              });
-            }
-            if (!isRemoved) {
-              data = {
-                ...commonMember,
-                ...generateCirclesDataForCommonMember(
-                  governanceCircles,
-                  commonMember.circleIds,
-                ),
-              };
+            if (subscriptionData) {
+              const {
+                commonMember,
+                statuses: { isAdded, isRemoved },
+              } = subscriptionData;
+
+              if (isAdded) {
+                CommonEventEmitter.emit(CommonEvent.ProjectUpdated, {
+                  commonId,
+                  hasMembership: true,
+                });
+              }
+              if (!isRemoved) {
+                data = {
+                  ...commonMember,
+                  ...generateCirclesDataForCommonMember(
+                    governanceCircles,
+                    commonMember.circleIds,
+                  ),
+                };
+              }
             }
 
             const finalState = {

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -15,17 +15,24 @@ import { debounce, delay, omit } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import { ChatService, DiscussionMessageService, FileService } from "@/services";
+import { Separator } from "@/shared/components";
 import {
   ChatType,
   DiscussionMessageOwnerType,
   GovernanceActions,
   LastSeenEntity,
+  QueryParamKey,
 } from "@/shared/constants";
 import { FILES_ACCEPTED_EXTENSIONS } from "@/shared/constants";
 import { HotKeys } from "@/shared/constants/keyboardKeys";
 import { ChatMessageToUserDiscussionMessageConverter } from "@/shared/converters";
-import { useZoomDisabling, useImageSizeCheck } from "@/shared/hooks";
+import {
+  useZoomDisabling,
+  useImageSizeCheck,
+  useQueryParams,
+} from "@/shared/hooks";
 import { ArrowInCircleIcon, PlusIcon, SendIcon } from "@/shared/icons";
+import { LinkPreviewData } from "@/shared/interfaces";
 import { CreateDiscussionMessageDto } from "@/shared/interfaces/api/discussionMessages";
 import {
   ChatChannel,
@@ -69,9 +76,12 @@ import { ChatContentContext, ChatContentData } from "../CommonContent/context";
 import {
   ChatContent,
   ChatContentRef,
+  MessageLinkPreview,
   MessageReply,
   ChatFilePreview,
+  MessageInfoWithDateList,
 } from "./components";
+import { checkIsLastSeenInPreviousDay } from "./components/ChatContent/utils";
 import { useChatChannelChatAdapter, useDiscussionChatAdapter } from "./hooks";
 import { getLastNonUserMessage } from "./utils";
 import styles from "./ChatComponent.module.scss";
@@ -150,6 +160,9 @@ export default function ChatComponent({
   onInternalLinkClick,
 }: ChatComponentInterface) {
   const dispatch = useDispatch();
+  const queryParams = useQueryParams();
+  const shouldDisplayMessagesOnlyWithUncheckedItems =
+    queryParams[QueryParamKey.Unchecked] === "true";
   const { checkImageSize } = useImageSizeCheck();
   useZoomDisabling();
   const editorRef = useRef<HTMLElement>(null);
@@ -197,7 +210,10 @@ export default function ChatComponent({
     markChatChannelAsSeen,
     chatUsers,
     fetchChatUsers,
-  } = useChatChannelChatAdapter({ participants: chatChannel?.participants });
+  } = useChatChannelChatAdapter({
+    chatChannelId: chatChannel?.id || "",
+    participants: chatChannel?.participants,
+  });
   const users = chatChannel ? chatUsers : discussionUsers;
   const discussionMessages = chatChannel
     ? chatMessagesData.data
@@ -207,13 +223,18 @@ export default function ChatComponent({
   const areInitialMessagesLoading = isChatChannel
     ? chatMessagesData.loading
     : discussionMessagesData.loading;
-  const areMessagesLoading = discussionMessagesData.isBatchLoading;
+  const areMessagesLoading = chatChannel
+    ? chatMessagesData.isBatchLoading
+    : discussionMessagesData.isBatchLoading;
   const currentFilesPreview = useSelector(selectFilesPreview());
   const chatContentRef = useRef<ChatContentRef>(null);
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);
   const chatInputWrapperRef = useRef<HTMLDivElement>(null);
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const [isScrolling, setIsScrolling] = useState(false);
+  const [linkPreviewData, setLinkPreviewData] = useState<
+    LinkPreviewData | null | undefined
+  >();
   const chatContentContextValue: ChatContentData = useMemo(
     () => ({
       isScrolling,
@@ -279,7 +300,43 @@ export default function ChatComponent({
       ),
     [discussionMessages],
   );
-  const dateList = useMemo(() => Object.keys(messages), [messages]);
+
+  const dateList: MessageInfoWithDateList = useMemo(() => {
+    const messagesDates = Object.keys(messages);
+    const messagesWithInfo = messagesDates.map((day, dayIndex) => {
+      const date = new Date(Number(day));
+      const currentMessages = shouldDisplayMessagesOnlyWithUncheckedItems
+        ? messages[Number(day)].filter((message) => message.hasUncheckedItems)
+        : messages[Number(day)];
+      const previousDayMessages =
+        messages[Number(messagesDates[dayIndex + 1])] || [];
+      const isLastSeenInPreviousDay = checkIsLastSeenInPreviousDay(
+        previousDayMessages,
+        lastSeenItem?.id,
+      );
+      const isMyMessageFirst =
+        checkIsUserDiscussionMessage(currentMessages[0]) &&
+        currentMessages[0].ownerId === userId;
+      const newSeparatorEl = (
+        <li>
+          <Separator>New</Separator>
+        </li>
+      );
+
+      return {
+        day,
+        date,
+        currentMessages,
+        isLastSeenInPreviousDay,
+        isMyMessageFirst,
+        newSeparatorEl,
+      };
+    });
+
+    return messagesWithInfo;
+  }, [messages]);
+
+  // const dateListWith
 
   const [newMessages, setMessages] = useState<
     CreateDiscussionMessageDtoWithFilesPreview[]
@@ -338,6 +395,7 @@ export default function ChatComponent({
               hasUncheckedItems: checkUncheckedItemsInTextEditorValue(
                 parseStringToTextEditorValue(payload.text),
               ),
+              linkPreviews: payload.linkPreviews,
             });
             chatMessagesData.updateChatMessage(response);
 
@@ -442,6 +500,12 @@ export default function ChatComponent({
           tags: mentionTags,
           mentions: mentionTags.map((tag) => tag.value),
           hasUncheckedItems: checkUncheckedItemsInTextEditorValue(message),
+          linkPreviews:
+            typeof linkPreviewData === "undefined"
+              ? undefined
+              : linkPreviewData
+              ? [linkPreviewData]
+              : [],
         };
 
         const filePreviewPayload: CreateDiscussionMessageDtoWithFilesPreview[] =
@@ -512,6 +576,7 @@ export default function ChatComponent({
             ),
             tags: mentionTags,
             hasUncheckedItems: checkUncheckedItemsInTextEditorValue(message),
+            linkPreviews: payload.linkPreviews,
           });
         }
 
@@ -557,6 +622,7 @@ export default function ChatComponent({
       discussionId,
       discussionMessages,
       isChatChannel,
+      linkPreviewData,
     ],
   );
 
@@ -847,6 +913,10 @@ export default function ChatComponent({
         </div>
       )}
       <MessageReply users={users} />
+      <MessageLinkPreview
+        message={message}
+        onLinkPreviewDataChange={setLinkPreviewData}
+      />
       <ChatFilePreview />
       <div
         ref={chatInputWrapperRef}