Merge pull request #1104 from dm3-org/release-1.5-fix

Release 1.5 fix
dm3-org · Jul 16, 2024 · 95edb9a · 95edb9a
2 parents d5959c0 + 53240fa
commit 95edb9a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 45 deletions.
diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.css b/packages/messenger-widget/src/components/Contacts/Contacts.css
@@ -106,9 +106,12 @@
     font-weight: bolder;
 }
 
+.last-hidden-contact{
+    flex-grow: 1;
+}
 
-.infinite-scroll-component__outerdiv{
-    height: 100vh;
+.paginated-contacts{
+    height: 100% !important;
 }
 
 /* =================== Mobile Responsive CSS =================== */

diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.tsx b/packages/messenger-widget/src/components/Contacts/Contacts.tsx
@@ -38,9 +38,6 @@ export function Contacts() {
         boolean | null
     >(null);
 
-    /* Hidden content for highlighting css */
-    const [hiddenData, setHiddenData] = useState<number[]>([]);
-
     const [hasMoreContact, setHasMoreContact] = useState<boolean>(true);
 
     const getMoreContacts = async () => {
@@ -133,46 +130,30 @@ export function Contacts() {
         return contactIsSelected && contactIsLoading(contactName);
     };
 
-    // updates hidden contacts data for highlighted border
-    const setHiddenContentForHighlightedBorder = () => {
-        const element: HTMLElement = document.getElementById(
-            'chat-scroller',
-        ) as HTMLElement;
-        if (element) {
-            // fetch height of chat window
-            const height = element.clientHeight;
-            // divide it by each contact height to show in UI
-            const minimumContactCount = height / 64;
-            // get count of hidden contacts to add
-            const hiddenContacts = minimumContactCount - contacts.length + 10;
-            if (hiddenData.length !== hiddenContacts) {
-                setHiddenData(
-                    Array.from({ length: hiddenContacts }, (_, i) => i + 1),
-                );
-            }
-        }
-    };
-
-    // handles change in screen size
-    window.addEventListener('resize', setHiddenContentForHighlightedBorder);
-
-    // sets hidden content styles for higlighted border
-    useEffect(() => {
-        setHiddenContentForHighlightedBorder();
-    }, [contacts]);
+    /**
+     * Add height 100% to InfiniteScroll component.
+     * This is done through javascript & not with css directly using class name
+     * because it affects pagination window of chat screen
+     */
+    const element: HTMLElement | null =
+        document.getElementById('chat-scroller');
+    if (element && element.children.length) {
+        element.children[0].classList.add('paginated-contacts');
+    }
 
     return (
         <div
             id="chat-scroller"
             className={'contacts-scroller width-fill scroller-active'}
         >
             <InfiniteScroll
-                dataLength={contacts.length + hiddenData.length}
+                dataLength={contacts.length + 1}
                 next={getMoreContacts}
                 style={{
                     display: 'flex',
                     flexDirection: 'column',
                     overflow: 'unset',
+                    height: '100%',
                 }}
                 inverse={false}
                 hasMore={hasMoreContact}
@@ -332,18 +313,13 @@ export function Contacts() {
                     })}
 
                 {/* Hidden content for highlighting css */}
-                {hiddenData.map((data) => (
-                    <div
-                        key={data}
-                        className={
-                            selectedContact
-                                ? 'highlight-right-border'
-                                : 'highlight-right-border-none'
-                        }
-                    >
-                        <div className="hidden-data"></div>
-                    </div>
-                ))}
+                <div
+                    className={'last-hidden-contact '.concat(
+                        selectedContact ? 'highlight-right-border' : '',
+                    )}
+                >
+                    <div className="hidden-data"></div>
+                </div>
             </InfiniteScroll>
         </div>
     );