From ac569fc8497becf8a7078988c3e606980eabd935 Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Tue, 16 Jul 2024 19:11:32 +0530 Subject: [PATCH 1/3] contacts scroll fix --- .../src/components/Contacts/Contacts.css | 7 ++- .../src/components/Contacts/Contacts.tsx | 62 ++++++------------- 2 files changed, 24 insertions(+), 45 deletions(-) diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.css b/packages/messenger-widget/src/components/Contacts/Contacts.css index d79be03d0..f595e456d 100644 --- 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 index c6b98aba7..b01e023d3 100644 --- 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([]); - const [hasMoreContact, setHasMoreContact] = useState(true); const getMoreContacts = async () => { @@ -133,33 +130,16 @@ 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 by 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 (
); From 9e7f5fe80ccef98e1bd313f9b8eea7162efb4f28 Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Tue, 16 Jul 2024 19:16:49 +0530 Subject: [PATCH 2/3] modified comment --- .../src/components/Contacts/Contacts.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.tsx b/packages/messenger-widget/src/components/Contacts/Contacts.tsx index b01e023d3..304dedb6d 100644 --- a/packages/messenger-widget/src/components/Contacts/Contacts.tsx +++ b/packages/messenger-widget/src/components/Contacts/Contacts.tsx @@ -132,7 +132,7 @@ export function Contacts() { /** * Add height 100% to InfiniteScroll component. - * This is done through javascript & not with css by directly using class name + * This is done through javascript & not with css directly using class name * because it affects pagination window of chat screen */ const element: HTMLElement | null = @@ -174,7 +174,7 @@ export function Contacts() { ' ', selectedContact ? selectedContact.contactDetails - .account.ensName !== id + .account.ensName !== id ? 'highlight-right-border' : 'contact-details-container-active' : '', @@ -226,9 +226,9 @@ export function Contacts() { title={ data.contactDetails ? data - .contactDetails - .account - .ensName + .contactDetails + .account + .ensName : '' } > @@ -256,7 +256,7 @@ export function Contacts() { {/* //TODO add loading state for message */} {isContactSelected(id) ? ( isContactLoading(id) && - !messages[id].length ? ( + !messages[id].length ? (
From 53240fad1274e475c67f292d4d1df6379e26e107 Mon Sep 17 00:00:00 2001 From: Bhupesh-MS Date: Tue, 16 Jul 2024 19:23:09 +0530 Subject: [PATCH 3/3] prettified --- .../src/components/Contacts/Contacts.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/messenger-widget/src/components/Contacts/Contacts.tsx b/packages/messenger-widget/src/components/Contacts/Contacts.tsx index 304dedb6d..004843c06 100644 --- a/packages/messenger-widget/src/components/Contacts/Contacts.tsx +++ b/packages/messenger-widget/src/components/Contacts/Contacts.tsx @@ -174,7 +174,7 @@ export function Contacts() { ' ', selectedContact ? selectedContact.contactDetails - .account.ensName !== id + .account.ensName !== id ? 'highlight-right-border' : 'contact-details-container-active' : '', @@ -226,9 +226,9 @@ export function Contacts() { title={ data.contactDetails ? data - .contactDetails - .account - .ensName + .contactDetails + .account + .ensName : '' } > @@ -256,7 +256,7 @@ export function Contacts() { {/* //TODO add loading state for message */} {isContactSelected(id) ? ( isContactLoading(id) && - !messages[id].length ? ( + !messages[id].length ? (