Merge branch 'dev' into CW-2256-unread-filtretation-inbox

src/pages/Landing/components/LandingContainer/VideoSection/VideoSection.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
-import landingVideoPosterSrc from "@/shared/assets/images/landing-video-poster.jpg";
+import landingVideoPosterSrc from "@/shared/assets/images/landing-video-poster.jpeg";
 import landingVideoSrc from "@/shared/assets/videos/landing-video.mp4";
 import { useIsBigPhoneView } from "@/shared/hooks/viewport";
 import { Button, ButtonVariant } from "@/shared/ui-kit";

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

@@ -79,7 +79,7 @@ const CommonMember: FC<CommonMemberProps> = ({
     circlesWithHighestTier[circlesWithHighestTier.length - 1];
 
   governanceCircles.forEach((circle) => {
-    if (!highestMemberCircle.hierarchy) {
+    if (!highestMemberCircle?.hierarchy) {
       return;
     }
     if (!circle.hierarchy) {

src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx

@@ -250,7 +250,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       }
 
       const circleVisibility = governanceCircles
-        ? getVisibilityString(governanceCircles, discussion?.circleVisibility)
+        ? getVisibilityString(governanceCircles, item?.circleVisibility)
         : undefined;
 
       return (

src/pages/common/components/DiscussionFeedCard/utils/checkIsPinUnpinAllowed.ts

@@ -3,6 +3,8 @@ import { PredefinedTypes } from "@/shared/models";
 import { hasPermission } from "@/shared/utils";
 import { FeedItemPinAction, GetAllowedItemsOptions } from "../../FeedItem";
 
+const PINNED_ITEMS_LIMIT = 7;
+
 export function checkIsPinUnpinAllowed(
   action: FeedItemPinAction,
   options: GetAllowedItemsOptions,
@@ -17,7 +19,7 @@ export function checkIsPinUnpinAllowed(
   }
 
   if (action === FeedItemPinAction.Pin) {
-    const hasReachedPinLimit = pinnedFeedItems.length >= 3;
+    const hasReachedPinLimit = pinnedFeedItems.length >= PINNED_ITEMS_LIMIT;
 
     if (isDiscussionPinned || hasReachedPinLimit) {
       return false;

src/pages/commonFeed/CommonFeed.tsx

@@ -161,6 +161,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     loading: areCommonFeedItemsLoading,
     hasMore: hasMoreCommonFeedItems,
     fetch: fetchCommonFeedItems,
+    batchNumber,
   } = useCommonFeedItems(commonId, commonFeedItemIdsForNotListening);
 
   const {
@@ -508,6 +509,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
         topFeedItems={topFeedItems}
         feedItems={commonFeedItems}
         loading={areCommonFeedItemsLoading}
+        batchNumber={batchNumber}
         onFetchNext={fetchMoreCommonFeedItems}
         renderFeedItemBaseContent={renderFeedItemBaseContent}
         onFeedItemUpdate={handleFeedItemUpdate}

src/pages/commonFeed/components/FeedLayout/FeedLayout.module.scss

@@ -1,6 +1,7 @@
 @import "../../../../styles/sizes";
 
 .content {
+  position: relative;
   flex: 1;
   padding: 0 1.5rem;
   display: flex;
@@ -17,6 +18,11 @@
   justify-content: center;
 }
 
+.infiniteScrollMarker {
+  position: absolute;
+  bottom: 50rem;
+}
+
 .emptyText {
   margin: 0;
   font-weight: 500;

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -79,6 +79,7 @@ import {
   MobileProfile,
   SplitView,
 } from "./components";
+import { BATCHES_AMOUNT_TO_PRELOAD } from "./constants";
 import { useUserForProfile } from "./hooks";
 import {
   checkShouldAutoOpenPreview,
@@ -114,6 +115,7 @@ interface FeedLayoutProps {
   topFeedItems?: FeedLayoutItem[];
   loading: boolean;
   shouldHideContent?: boolean;
+  batchNumber?: number;
   onFetchNext: (feedItemId?: string) => void;
   renderFeedItemBaseContent: (props: FeedItemBaseContentProps) => ReactNode;
   renderChatChannelItem?: (props: ChatChannelFeedLayoutItemProps) => ReactNode;
@@ -153,6 +155,7 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     topFeedItems = [],
     loading,
     shouldHideContent = false,
+    batchNumber,
     onFetchNext,
     renderFeedItemBaseContent,
     renderChatChannelItem,
@@ -603,6 +606,16 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     }
   }, [isTabletView, shouldAutoExpandItem, activeFeedItemId]);
 
+  useEffect(() => {
+    if (
+      batchNumber &&
+      batchNumber >= 1 &&
+      batchNumber <= BATCHES_AMOUNT_TO_PRELOAD
+    ) {
+      onFetchNext();
+    }
+  }, [batchNumber]);
+
   useImperativeHandle(
     ref,
     () => ({
@@ -640,6 +653,11 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
             {topContent}
             {isContentEmpty && <p className={styles.emptyText}>{emptyText}</p>}
             <InfiniteScroll
+              markerClassName={
+                allFeedItems && allFeedItems.length > 7
+                  ? styles.infiniteScrollMarker
+                  : ""
+              }
               onFetchNext={onFetchNext}
               isLoading={loading}
               loaderDelay={LOADER_APPEARANCE_DELAY}

src/pages/commonFeed/components/FeedLayout/constants/index.ts

@@ -0,0 +1 @@
+export const BATCHES_AMOUNT_TO_PRELOAD = 2;

src/pages/commonFeed/components/HeaderContent/components/NewStreamButton/NewStreamButton.tsx

@@ -2,11 +2,10 @@ import React, { FC } from "react";
 import { useHistory } from "react-router";
 import { useMenuItems } from "@/pages/common/components/CommonTabPanels/components/FeedTab/components/NewStreamButton";
 import { useRoutesContext } from "@/shared/contexts";
-import { BoldPlusIcon, PlusIcon } from "@/shared/icons";
+import { PlusIcon } from "@/shared/icons";
 import { CirclesPermissions, CommonMember, Governance } from "@/shared/models";
 import {
   ButtonIcon,
-  ButtonVariant,
   DesktopMenu,
   MobileMenu,
 } from "@/shared/ui-kit";

src/pages/inbox/BaseInbox.tsx

@@ -92,6 +92,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
     hasMore: hasMoreInboxItems,
     fetch: fetchInboxItems,
     refetch: refetchInboxItems,
+    batchNumber,
   } = useInboxItems(feedItemIdsForNotListening, {
     unread: isActiveUnreadInboxItemsQueryParam,
   });
@@ -265,6 +266,7 @@ const InboxPage: FC<InboxPageProps> = (props) => {
         feedItems={inboxItems}
         loading={areInboxItemsLoading || !user}
         shouldHideContent={!user}
+        batchNumber={batchNumber}
         onFetchNext={fetchMoreInboxItems}
         renderFeedItemBaseContent={renderFeedItemBaseContent}
         renderChatChannelItem={renderChatChannelItem}

src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.module.scss

@@ -1,9 +1,17 @@
 @import "../../../../../../constants";
 @import "../../../../../../styles/sizes";
 
+.buttonIcon {
+  background-color: transparent;
+
+  &:hover {
+    background-color: $light-gray-1;
+  }
+}
+
 .icon {
-  width: 0.625rem;
-  height: 0.625rem;
+  width: 1rem;
+  height: 1rem;
   color: $c-gray-800;
 
   @include tablet {

src/pages/inbox/components/HeaderContent/components/PlusButton/PlusButton.tsx

@@ -1,30 +1,23 @@
 import React, { FC } from "react";
-import { BoldPlusIcon, PlusIcon } from "@/shared/icons";
-import { ButtonIcon, ButtonVariant } from "@/shared/ui-kit";
+import classnames from "classnames";
+import { PlusIcon } from "@/shared/icons";
+import { ButtonIcon } from "@/shared/ui-kit";
 import styles from "./PlusButton.module.scss";
 
 interface PlusButtonProps {
   className?: string;
-  isMobileVersion?: boolean;
   onClick?: () => void;
 }
 
 const PlusButton: FC<PlusButtonProps> = (props) => {
-  const { className, isMobileVersion, onClick } = props;
+  const { className, onClick } = props;
 
   return (
     <ButtonIcon
-      className={className}
-      variant={
-        isMobileVersion ? ButtonVariant.Transparent : ButtonVariant.PrimaryGray
-      }
+      className={classnames(styles.buttonIcon, className)}
       onClick={onClick}
     >
-      {isMobileVersion ? (
-        <PlusIcon className={styles.icon} />
-      ) : (
-        <BoldPlusIcon className={styles.icon} />
-      )}
+      <PlusIcon className={styles.icon} />
     </ButtonIcon>
   );
 };

src/shared/components/Chat/ChatMessage/ChatMessage.module.scss

@@ -91,6 +91,7 @@
   text-align: center;
   font-size: $xxsmall-2;
   color: $c-gray-60;
+  direction: ltr;
 }
 
 .messageName {

src/shared/components/Chat/ChatMessage/ChatMessage.tsx

@@ -381,7 +381,8 @@ export default function ChatMessage({
               <div
                 className={classNames(styles.messageContent, {
                   [styles.messageContentCurrentUser]: !isNotCurrentUserMessage,
-                  [styles.messageContentRtl]: isRtlText(discussionMessage.text),
+                  [styles.messageContentRtl]:
+                    !isSystemMessage && isRtlText(discussionMessage.text),
                 })}
               >
                 {filePreview && (

src/shared/components/Chat/ChatMessage/utils/getTextFromSystemMessage.tsx

@@ -7,7 +7,6 @@ import {
   CommonCreatedSystemMessage,
   CommonEditedSystemMessage,
   CommonFeedItemCreatedSystemMessage,
-  CommonFeedType,
   CommonMemberAddedSystemMessage,
   SystemMessageCommonType,
   User,
@@ -73,8 +72,8 @@ const getCommonCreatedSystemMessageText = async (
 
   if (isThisCommonCreated) {
     return [
+      `This ${getCommonTypeText(systemMessageData.commonType)} was created by `,
       userEl,
-      ` created this ${getCommonTypeText(systemMessageData.commonType)}`,
     ];
   }
 
@@ -91,7 +90,7 @@ const getCommonCreatedSystemMessageText = async (
     ""
   );
 
-  return [userEl, " created the space", commonEl].filter(Boolean);
+  return ["The ", commonEl, " space was created by ", userEl].filter(Boolean);
 };
 
 const getCommonEditedSystemMessageText = async (
@@ -102,14 +101,15 @@ const getCommonEditedSystemMessageText = async (
   const userEl = renderUserMention(user, data);
 
   return [
-    userEl,
-    ` edited this ${getCommonTypeText(systemMessageData.commonType)}’s `,
+    `This ${getCommonTypeText(systemMessageData.commonType)}’s `,
     renderLink(
       (data.getCommonPageAboutTabPath || getCommonPageAboutTabPath)(
         systemMessageData.commonId,
       ),
       "info",
     ),
+    " was edited by ",
+    userEl,
   ];
 };
 
@@ -156,15 +156,7 @@ const getFeedItemCreatedSystemMessageText = async (
     ""
   );
 
-  return [
-    userEl,
-    ` created the ${
-      systemMessageData.feedItemType === CommonFeedType.Discussion
-        ? "discussion"
-        : "proposal"
-    }`,
-    titleEl,
-  ].filter(Boolean);
+  return [titleEl, " was created by ", userEl].filter(Boolean);
 };
 
 export const getTextFromSystemMessage = async (

src/shared/hooks/useCases/useCommonFeedItems.ts

@@ -3,7 +3,8 @@ import { useDispatch, useSelector } from "react-redux";
 import { CommonFeedService } from "@/services";
 import { commonActions, FeedItems, selectFeedItems } from "@/store/states";
 
-interface Return extends Pick<FeedItems, "data" | "loading" | "hasMore"> {
+interface Return
+  extends Pick<FeedItems, "data" | "loading" | "hasMore" | "batchNumber"> {
   fetch: (feedItemId?: string) => void;
 }
 

src/shared/hooks/useCases/useInboxItems.ts

@@ -13,7 +13,8 @@ import { FeedLayoutItemWithFollowData } from "@/shared/interfaces";
 import { FeedItemFollow, FeedItemFollowWithMetadata } from "@/shared/models";
 import { inboxActions, InboxItems, selectInboxItems } from "@/store/states";
 
-interface Return extends Pick<InboxItems, "data" | "loading" | "hasMore"> {
+interface Return
+  extends Pick<InboxItems, "data" | "loading" | "hasMore" | "batchNumber"> {
   fetch: () => void;
   refetch: () => void;
 }

src/shared/ui-kit/InfiniteScroll/InfiniteScroll.tsx

@@ -6,11 +6,13 @@ import styles from "./InfiniteScroll.module.scss";
 interface InfiniteScrollProps {
   isLoading: boolean;
   loaderDelay?: number;
+  markerClassName?: string;
   onFetchNext: () => void;
 }
 
 const InfiniteScroll: FC<InfiniteScrollProps> = (props) => {
-  const { isLoading, loaderDelay, onFetchNext, children } = props;
+  const { isLoading, loaderDelay, markerClassName, onFetchNext, children } =
+    props;
   const [isInnerLoading, setIsInnerLoading] = useState(isLoading);
   const markerRef = useRef<HTMLDivElement>(null);
   const isMarkerOnScreen = useIntersectionObserver(markerRef.current);
@@ -39,7 +41,7 @@ const InfiniteScroll: FC<InfiniteScrollProps> = (props) => {
   return (
     <>
       {children}
-      <div ref={markerRef} />
+      <div className={markerClassName} ref={markerRef} />
       {isLoading && (
         <div className={styles.loaderWrapper}>
           <Loader delay={loaderDelay} />

src/store/states/common/actions.ts

@@ -119,7 +119,7 @@ export const getFeedItems = createAsyncAction(
     feedItemId?: string;
     limit?: number;
   },
-  Omit<FeedItems, "loading">,
+  Omit<FeedItems, "loading" | "batchNumber">,
   Error,
   string
 >();

src/store/states/common/reducer.ts

@@ -15,6 +15,7 @@ const initialFeedItems: FeedItems = {
   hasMore: false,
   firstDocTimestamp: null,
   lastDocTimestamp: null,
+  batchNumber: 0,
 };
 
 const initialPinnedFeedItems: PinnedFeedItems = {
@@ -428,6 +429,7 @@ export const reducer = createReducer<CommonState, Action>(initialState)
         data:
           payloadData && (nextState.feedItems.data || []).concat(payloadData),
         loading: false,
+        batchNumber: nextState.feedItems.batchNumber + 1,
       };
     }),
   )

src/store/states/common/types.ts

@@ -18,6 +18,7 @@ export interface FeedItems {
   hasMore: boolean;
   firstDocTimestamp: Timestamp | null;
   lastDocTimestamp: Timestamp | null;
+  batchNumber: number;
 }
 
 export interface PinnedFeedItems {

src/store/states/inbox/actions.ts

@@ -16,7 +16,7 @@ export const getInboxItems = createAsyncAction(
     limit?: number;
     unread?: boolean;
   },
-  Omit<InboxItems, "loading">,
+  Omit<InboxItems, "loading" | "batchNumber">,
   Error,
   string
 >();