Release/v3.6.0

src/i18n/en.json

@@ -359,12 +359,12 @@
   "storyCreation.hyperlink.form.linkTextLabel": "Customize link text",
   "storyCreation.hyperlink.form.linkTextPlaceholder": "Name your link",
   "storyCreation.hyperlink.form.linkTextDescription": "This text will show on the link instead of URL.",
-  "storyCreation.hyperlink.validation.invalidUrl": "Please enter a valid URL.",
   "storyCreation.hyperlink.form.removeButton": "Remove link",
   "storyCreation.hyperlink.removeConfirm.title": "Remove link",
   "storyCreation.hyperlink.removeConfirm.content": "This link will be removed from story.",
   "storyCreation.hyperlink.removeConfirm.cancel": "Cancel",
   "storyCreation.hyperlink.removeConfirm.confirm": "Remove",
+  "storyCreation.hyperlink.validation.error.invalidUrl": "Please enter a valid URL.",
   "storyCreation.hyperlink.validation.error.whitelisted": "Please enter a whitelisted URL.",
   "storyCreation.hyperlink.validation.error.blocked": "Your text contains a blocklisted word.",
 
@@ -381,10 +381,15 @@
   "storyViewer.commentSheet.disabled": "Comments are disabled for this story",
   "storyViewer.commentSheet.replyingTo": "Replying to",
   "storyViewer.toast.like.disabled": "Join community to interact with all stories",
+  "storyViewer.toast.comment.reported": "Comment reported",
+  "storyViewer.toast.comment.unreported": "Comment unreported",
 
   "storyViewer.commentComposeBar.submit": "Post",
 
   "storyDraft.button.shareStory": "Share story",
+  "storyDraft.notification.hyperlink.error": "Can’t add more than one link to your story.",
+
+  "storyTab.title": "Story",
 
   "storyTab.title": "Story",
 

src/social/components/CommentList/index.tsx

@@ -1,7 +1,9 @@
 import React, { memo } from 'react';
 import { useIntl } from 'react-intl';
+
 import Comment from '~/social/components/Comment';
-import { NoCommentsContainer, TabIcon, TabIconContainer } from './styles';
+
+import { TabIcon, TabIconContainer } from './styles';
 import LoadMoreWrapper from '../LoadMoreWrapper';
 import usePostSubscription from '~/social/hooks/usePostSubscription';
 import { SubscriptionLevels } from '@amityco/ts-sdk';
@@ -11,6 +13,7 @@ interface CommentListProps {
   parentId?: string;
   referenceId?: string;
   referenceType: Amity.CommentReferenceType;
+  // filterByParentId?: boolean;
   readonly?: boolean;
   isExpanded?: boolean;
   limit?: number;
@@ -21,6 +24,8 @@ const CommentList = ({
   referenceId,
   referenceType,
   limit = 5,
+  // TODO: breaking change
+  // filterByParentId = false,
   readonly = false,
   isExpanded = true,
 }: CommentListProps) => {
@@ -41,7 +46,7 @@ const CommentList = ({
   });
 
   const loadMoreText = isReplyComment
-    ? formatMessage({ id: 'collapsible.viewMoreReplies' })
+    ? formatMessage({ id: 'collapsible.viewMoreReplies' }, { count: comments.length })
     : formatMessage({ id: 'collapsible.viewMoreComments' });
 
   const prependIcon = isReplyComment ? (
@@ -50,14 +55,6 @@ const CommentList = ({
     </TabIconContainer>
   ) : null;
 
-  if (comments.length === 0 && referenceType === 'story' && !isReplyComment) {
-    return (
-      <NoCommentsContainer>
-        {formatMessage({ id: 'storyViewer.commentSheet.empty' })}
-      </NoCommentsContainer>
-    );
-  }
-
   if (comments.length === 0) return null;
 
   return (

src/social/components/CommentList/styles.tsx

@@ -7,13 +7,3 @@ export const TabIconContainer = styled.div`
   display: flex;
   margin-right: 8px;
 `;
-
-export const NoCommentsContainer = styled.div`
-  ${({ theme }) => theme.typography.body};
-  color: ${({ theme }) => theme.palette.base.shade2};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-`;

src/social/components/EngagementBar/UIEngagementBar.tsx

@@ -73,7 +73,7 @@ const UIEngagementBar = ({
               <CommentIcon /> <FormattedMessage id="comment" />
             </SecondaryButton>
           </InteractionBar>
-          {latestComments.length > 0 ? (
+          {latestComments?.length > 0 ? (
             <CommentList referenceId={postId} referenceType={'post'} limit={COMMENTS_PER_PAGE} />
           ) : null}
 
@@ -91,7 +91,7 @@ const UIEngagementBar = ({
           <NoInteractionMessage>
             <FormattedMessage id="community.cannotInteract" />
           </NoInteractionMessage>
-          {latestComments.length > 0 ? (
+          {latestComments?.length > 0 ? (
             <CommentList
               referenceId={postId}
               referenceType={'post'}

src/social/components/Feed/index.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useCallback } from 'react';
 import DefaultPostRenderer from '~/social/components/post/Post/DefaultPostRenderer';
 
+import useCommunitiesList from '~/social/hooks/useCommunitiesList';
 import PostCreator from '~/social/components/post/Creator';
 import Post from '~/social/components/post/Post';
 

src/social/components/community/CategoryCommunitiesList/styles.tsx

@@ -2,10 +2,9 @@ import styled from 'styled-components';
 import EmptyState from '~/core/components/EmptyState';
 
 export const Grid = styled.div`
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
 `;
 
 export const ListEmptyState = styled(EmptyState)`

src/social/components/post/Post/index.tsx

@@ -3,9 +3,10 @@ import React, { memo } from 'react';
 import usePost from '~/social/hooks/usePost';
 import usePoll from '~/social/hooks/usePoll';
 import DefaultPostRenderer from './DefaultPostRenderer';
-
+import useSDK from '~/core/hooks/useSDK';
+import useUser from '~/core/hooks/useUser';
 import { PollRepository, PostRepository, SubscriptionLevels } from '@amityco/ts-sdk';
-
+import usePostByIds from '~/social/hooks/usePostByIds';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
 import useImage from '~/core/hooks/useImage';
 import usePostFlaggedByMe from '~/social/hooks/usePostFlaggedByMe';
@@ -23,11 +24,13 @@ interface PostProps {
 
 const Post = ({ postId, className, hidePostTarget, readonly, onDeleted }: PostProps) => {
   const post = usePost(postId);
-  const avatarFileUrl = useImage({ fileId: post?.creator?.avatarFileId, imageSize: 'small' });
-
-  const { isFlaggedByMe, flagPost, unflagPost } = usePostFlaggedByMe(post);
-
+  const postedUser = useUser(post?.postedUserId);
+  const avatarFileUrl = useImage({ fileId: postedUser?.avatarFileId, imageSize: 'small' });
+  const childrenPosts = usePostByIds(post?.children);
+  const { userRoles } = useSDK();
+  const { isFlaggedByMe, toggleFlagPost } = usePostFlaggedByMe(post);
   const postRenderFn = usePostRenderer(post?.dataType);
+  const { currentUserId } = useSDK();
 
   usePostSubscription({
     postId,
@@ -40,9 +43,7 @@ const Post = ({ postId, className, hidePostTarget, readonly, onDeleted }: PostPr
     shouldSubscribe: () => !!post,
   });
 
-  const pollPost = (post?.latestComments || []).find(
-    (childPost: Amity.Post) => childPost.dataType === 'poll',
-  );
+  const pollPost = (childrenPosts || []).find((childPost) => childPost.dataType === 'poll');
 
   const poll = usePoll((pollPost?.data as Amity.ContentDataPoll)?.pollId);
   const isPollClosed = poll?.status === 'closed';
@@ -74,21 +75,21 @@ const Post = ({ postId, className, hidePostTarget, readonly, onDeleted }: PostPr
   return (
     <>
       {postRenderFn({
-        childrenPosts: post?.latestComments || [],
+        childrenPosts: childrenPosts || [],
         handleClosePoll,
         isPollClosed,
         avatarFileUrl,
-        user: post?.creator,
+        user: postedUser,
         poll,
         className,
-        currentUserId: post?.postedUserId || undefined,
+        currentUserId: currentUserId || undefined,
         hidePostTarget,
         post,
-        userRoles: post?.creator?.roles || [],
+        userRoles,
         readonly,
         isFlaggedByMe,
-        handleReportPost: flagPost,
-        handleUnreportPost: unflagPost,
+        handleReportPost: toggleFlagPost,
+        handleUnreportPost: toggleFlagPost,
         handleApprovePost,
         handleDeclinePost,
         handleDeletePost,

src/social/hooks/collections/useCommentsCollection.ts

@@ -7,7 +7,6 @@ type useCommentsParams = {
   referenceId?: string | null;
   referenceType: Amity.CommentReferenceType;
   limit?: number;
-  shouldCall?: () => boolean;
   // breaking changes
   // first?: number;
   // last?: number;
@@ -18,7 +17,6 @@ export default function useCommentsCollection({
   referenceId,
   referenceType,
   limit = 10,
-  shouldCall = () => true,
 }: useCommentsParams) {
   const { items, ...rest } = useLiveCollection({
     fetcher: CommentRepository.getComments,
@@ -28,7 +26,7 @@ export default function useCommentsCollection({
       referenceType,
       limit,
     },
-    shouldCall: () => shouldCall() && !!referenceId && !!referenceType,
+    shouldCall: () => !!referenceId && !!referenceType,
   });
 
   return {

src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx

@@ -129,7 +129,8 @@ export const AmityLiveChatMessageComposeBar = ({
             multiline
             disabled={disabled}
             placeholder={
-              componentConfig?.placeholder_text ||
+              (typeof componentConfig?.placeholder_text === 'string' &&
+                componentConfig?.placeholder_text) ||
               formatMessage({
                 id: 'livechat.composebar.placeholder',
               })

src/v4/chat/components/MessageQuickReaction/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { useCustomization } from '~/v4/core/providers/CustomizationProvider';
-import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider';
+import { AmityReactionType, useCustomReaction } from '~/v4/core/providers/CustomReactionProvider';
 import { QuickReactionIcon } from '~/v4/icons/QuickReactionIcon';
 import { selectMessageReaction } from '~/v4/utils/selectMessageReaction';
 import styles from './styles.module.css';
@@ -30,7 +30,10 @@ export const MessageQuickReaction = ({
       elementConfig.reaction &&
       reactionConfig.find((config) => config.name === elementConfig.reaction)
     ) {
-      selectMessageReaction({ reactionName: elementConfig.reaction, message });
+      selectMessageReaction({
+        reactionName: elementConfig.reaction as AmityReactionType['name'],
+        message,
+      });
     }
 
     onSelectReaction && onSelectReaction();

src/v4/core/components/BottomSheet/BottomSheet.module.css

@@ -4,29 +4,24 @@ Note that you might need to use !important for style overrides since the inner s
 which have higher specificity. 
 */
 
-.react-modal-sheet-container {
-  color: var(--asc-color-base-default);
-}
-
-.react-modal-sheet-backdrop {
-  background-color: var(--asc-color-base-inverse, rgba(0, 0, 0, 0.5));
+.bottomSheet__container {
+  background-color: var(--asc-color-base-background);
 }
 
-.react-modal-sheet-header {
+.bottomSheet__header {
+  padding: 1rem;
   display: flex;
-  padding-bottom: 1rem;
   justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  align-self: stretch;
-  background-color: var(--asc-color-base-background);
-  color: var(--asc-color-base-default);
-  border-bottom: 1px solid var(--asc-color-base-shade4);
 }
 
-.react-modal-sheet-content {
-  display: flex;
+.bottomSheet__drag-indicator {
+}
+
+.bottomSheet__content {
   background-color: var(--asc-color-base-background);
   padding: 1rem;
-  color: var(--asc-color-base-default);
+}
+
+.bottomSheet__backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
 }

src/v4/core/components/BottomSheet/BottomSheet.tsx

@@ -14,32 +14,29 @@ interface BottomSheetProps {
   headerTitle?: string;
   cancelText?: string;
   okText?: string;
+  className?: string;
 }
 
 export const BottomSheet = ({ children, headerTitle, ...props }: BottomSheetProps) => {
   return (
     <Sheet {...props}>
-      <Sheet.Container
-        className={styles['react-modal-sheet-container']}
-        style={{
-          backgroundColor: 'var(--asc-color-base-background)',
-        }}
-      >
+      <Sheet.Container className={styles.bottomSheet__container}>
         <Sheet.Header
           style={{
             borderTopLeftRadius: '1.25rem',
             borderTopRightRadius: '1.25rem',
-            backgroundColor: 'var(--asc-color-base-background)',
           }}
-        />
-        {headerTitle && (
-          <Sheet.Header className={styles['react-modal-sheet-header']}>
-            <Typography.Title>{headerTitle}</Typography.Title>
-          </Sheet.Header>
-        )}
-        <Sheet.Content className={styles['react-modal-sheet-content']}>{children}</Sheet.Content>
+        >
+          <Sheet.Header />
+          {headerTitle && (
+            <Sheet.Header className={styles.bottomSheet__header}>
+              <Typography.Title>{headerTitle}</Typography.Title>
+            </Sheet.Header>
+          )}
+        </Sheet.Header>
+        <Sheet.Content className={styles.bottomSheet__content}>{children}</Sheet.Content>
       </Sheet.Container>
-      <Sheet.Backdrop className={styles['react-modal-sheet-backdrop']} onTap={props.onClose} />
+      <Sheet.Backdrop onTap={props.onClose} />
     </Sheet>
   );
 };

src/v4/core/components/ConfirmModal/index.tsx

@@ -42,7 +42,7 @@ const Confirm = ({
     }
     onCancel={onCancel}
   >
-    <div className={styles.confirmModalContent}>{content}</div>
+    <div>{content}</div>
   </Modal>
 );
 
@@ -61,7 +61,7 @@ export const ConfirmComponent = () => {
     confirmData?.onOk && confirmData.onOk();
   };
 
-  return <Confirm {...confirmData} onCancel={onCancel} onOk={onOk} />;
+  return <Confirm {...confirmData} onCancel={onCancel} onOk={onOk} className={styles.background} />;
 };
 
 export default Confirm;

src/v4/core/components/ConfirmModal/styles.module.css

@@ -2,6 +2,10 @@
   max-width: 22.5rem !important;
 }
 
+.background {
+  background-color: var(--asc-color-base-background);
+}
+
 .footer {
   display: flex;
   justify-content: flex-end;

src/v4/core/components/Modal/styles.module.css

@@ -39,10 +39,11 @@
 
 .modalWindow {
   margin: auto;
-  background-color: var(--asc-color-base-background);
   border-radius: var(--asc-border-radius-lg);
   max-width: 32.5rem;
   min-width: 20rem;
+  /* TOFIX --asc-color-base-background is not defined some how */
+  background-color: var(--asc-color-white);
 }
 
 .modalWindow:focus {
@@ -71,4 +72,4 @@
 .footer {
   padding: var(--asc-spacing-m2) var(--asc-spacing-s2);
   padding-top: var(--asc-spacing-xxs2);
-}
+}