fix: ASC-21792 - comment list infinite scroll (#330)

* fix: hyperlink background * fix: hyperlink icon color * fix: css * fix: add scroller * fix: comment * fix: scroll * fix: comment list * fix: reaction list * fix: comment date css shrink * fix: type * fix: css * fix: color * fix: comment scroll * fix: comment list * fix: use intersection observer instead * fix: padding
AmityCo · May 13, 2024 · bbcd949 · bbcd949
1 parent 3c6cbf4
commit bbcd949
Show file tree

Hide file tree

Showing 11 changed files with 114 additions and 185 deletions.
diff --git a/src/v4/core/components/BottomSheet/BottomSheet.module.css b/src/v4/core/components/BottomSheet/BottomSheet.module.css
@@ -14,17 +14,18 @@ which have higher specificity.
 
 .react-modal-sheet-header {
   display: flex;
-  height: 2.5rem;
   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;
   background-color: var(--asc-color-base-background);
   padding: 1rem;
   color: var(--asc-color-base-default);

diff --git a/src/v4/core/components/BottomSheet/BottomSheet.tsx b/src/v4/core/components/BottomSheet/BottomSheet.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
+
 import Sheet from 'react-modal-sheet';
 import { Typography } from '~/v4/core/components/Typography';
-
 import styles from './BottomSheet.module.css';
 
 interface BottomSheetProps {
@@ -37,9 +37,7 @@ export const BottomSheet = ({ children, headerTitle, ...props }: BottomSheetProp
             <Typography.Title>{headerTitle}</Typography.Title>
           </Sheet.Header>
         )}
-        <Sheet.Content className={styles['react-modal-sheet-content']}>
-          <Sheet.Scroller>{children}</Sheet.Scroller>
-        </Sheet.Content>
+        <Sheet.Content className={styles['react-modal-sheet-content']}>{children}</Sheet.Content>
       </Sheet.Container>
       <Sheet.Backdrop className={styles['react-modal-sheet-backdrop']} onTap={props.onClose} />
     </Sheet>

diff --git a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css
@@ -41,3 +41,10 @@
 .chevronDownIcon {
   margin-left: 0.3125rem;
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+}
diff --git a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx
@@ -1,15 +1,14 @@
-import React, { useState, useEffect, ReactNode } from 'react';
+import React, { useState, useEffect, ReactNode, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import clsx from 'clsx';
 import { Button } from '~/v4/core/components';
 import styles from './LoadMoreWrapper.module.css';
-import { ChevronDownIcon } from '~/v4/social/icons';
 
 interface LoadMoreWrapperProps {
-  hasMore?: boolean;
-  loadMore?: () => void;
+  hasMore: boolean;
+  loadMore: () => void;
   text?: string;
-  contentSlot: ReactNode;
+  contentSlot: React.JSX.Element[];
   className?: string;
   prependIcon?: ReactNode;
   appendIcon?: ReactNode;
@@ -23,30 +22,44 @@ export const LoadMoreWrapper = ({
   contentSlot,
   className = '',
   prependIcon = null,
-  appendIcon = <ChevronDownIcon />,
+  appendIcon,
   isExpanded = true,
 }: LoadMoreWrapperProps) => {
   const { formatMessage } = useIntl();
   const [expanded, setExpanded] = useState(isExpanded);
+  const observerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => setExpanded(isExpanded), [isExpanded]);
+  useEffect(() => {
+    setExpanded(isExpanded);
+  }, [isExpanded]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore) {
+          loadMore();
+        }
+      },
+      { threshold: 1 },
+    );
+
+    if (observerRef.current) {
+      observer.observe(observerRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observer.unobserve(observerRef.current);
+      }
+    };
+  }, [hasMore, loadMore]);
 
   if (expanded) {
     return (
-      <>
+      <div className={styles.content}>
         {contentSlot}
-        {hasMore && (
-          <Button
-            className={clsx(styles.loadMoreButton, className)}
-            variant="secondary"
-            onClick={loadMore}
-          >
-            {prependIcon}
-            {text || formatMessage({ id: 'loadMore' })}
-            {appendIcon}
-          </Button>
-        )}
-      </>
+        <div ref={observerRef} />
+      </div>
     );
   }
 

diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css
@@ -76,7 +76,7 @@
 .styledSecondaryButton {
   border: none;
   color: var(--asc-color-base-default);
-  background: var(--asc-color-base-background)
+  background: var(--asc-color-base-background);
 }
 
 .removeIcon {
@@ -103,4 +103,5 @@
   height: 0.0625rem;
   align-self: stretch;
   background-color: var(--asc-color-base-shade4);
-}
+  margin: 1rem 0;
+}
diff --git a/src/v4/social/components/ReactionList/ReactionList.module.css b/src/v4/social/components/ReactionList/ReactionList.module.css
@@ -6,57 +6,67 @@
 
 .tabList {
   display: flex;
-  gap: var(--asc-spacing-s1);
-  border-bottom: 1px solid var(--asc-color-base-shade4);
-  padding-bottom: var(--asc-spacing-s1);
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1px solid var(--asc-color-neutral-shade2);
+  margin-bottom: 1rem;
 }
 
 .tabItem {
   cursor: pointer;
-  padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1);
-  border-radius: var(--asc-border-radius-sm);
-  background: var(--asc-color-base-background);
-  color: var(--asc-color-base-shade6);
+  padding: 0.5rem 1rem;
+  position: relative;
+  transition: color 0.3s ease;
+}
+
+.tabItem::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: transparent;
+  transition: background-color 0.3s ease;
 }
 
 .tabItem.active {
-  background-color: var(--asc-color-base-shade4);
   color: var(--asc-color-primary-default);
 }
 
+.tabItem.active::after {
+  background-color: var(--asc-color-primary-default);
+}
+
 .reactionEmoji {
   display: flex;
   align-items: center;
-  gap: var(--asc-spacing-s1);
+  gap: 0.5rem;
 }
 
 .tabCount {
-  font-size: 0.8rem;
-  background: var(--asc-color-base-background);
-  color: var(--asc-color-base-shade1);
-  padding: 0.1rem 0.3rem;
-  border-radius: var(--asc-border-radius-sm);
+  color: var(--asc-color-base-shade2);
+  transition: color 0.3s ease;
+}
+
+.tabItem.active .tabCount {
+  color: var(--asc-color-primary-default);
 }
 
 .userList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--asc-spacing-s1);
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
 }
 
 .userItem {
   display: flex;
   align-items: center;
-  gap: var(--asc-spacing-s1);
-  background: var(--asc-color-base-background);
-  padding: var(--asc-spacing-s1);
-  border-radius: var(--asc-border-radius-sm);
-  width: 100%;
+  gap: 0.5rem;
 }
 
 .userDetailsContainer {
   display: flex;
   align-items: center;
-  gap: var(--asc-spacing-s1);
-  color: var(--asc-color-base-default);
+  gap: 0.5rem;
 }
diff --git a/src/v4/social/components/ReactionList/ReactionList.tsx b/src/v4/social/components/ReactionList/ReactionList.tsx
@@ -1,5 +1,4 @@
 import React, { Fragment, useState } from 'react';
-
 import { FireIcon, HeartIcon, LikedIcon } from '~/icons';
 import styles from './ReactionList.module.css';
 import { useReactionsCollection } from '~/v4/social/hooks/collections/useReactionsCollection';

diff --git a/src/v4/social/components/ReactionList/styles.tsx b/src/v4/social/components/ReactionList/styles.tsx
diff --git a/src/v4/social/internal-components/Comment/UIComment.module.css b/src/v4/social/internal-components/Comment/UIComment.module.css
@@ -9,6 +9,7 @@
 }
 
 .commentDate {
+  flex-shrink: 0;
   color: var(--asc-color-base-shade2);
 }
 
@@ -43,10 +44,10 @@
 
 .interactionBar {
   display: flex;
+  width: 100%;
+  justify-content: space-between;
   padding: 0.25rem 1rem 0.75rem 0rem;
-  align-items: flex-start;
-  gap: 12.9375rem;
-  align-self: stretch;
+  align-items: center;
 }
 
 .commentEditContainer {
@@ -132,6 +133,7 @@
   display: inline-flex;
   flex-direction: column;
   gap: 0.25rem;
+  width: 100%;
 }
 
 .commentHeader {

diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx
@@ -102,7 +102,11 @@ export const Comment = ({ commentId, readonly, onClickReply }: CommentProps) =>
     return toggleFlagComment();
   };
 
-  const handleEditComment = async (text: string, mentionees: Mentionees, metadata: Metadata) =>
+  const handleEditComment = async (
+    text: string,
+    mentionees: Amity.UserMention[],
+    metadata: Metadata,
+  ) =>
     commentId &&
     CommentRepository.updateComment(commentId, {
       data: {