feat(feed-view): implement and test conditional waypoint rendering ba…

…sed on content height in feedview component
zer0-os · Aug 23, 2024 · 5f852a3 · 5f852a3
1 parent aa6f042
commit 5f852a3
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 7 deletions.
diff --git a/src/components/messenger/chat/index.tsx b/src/components/messenger/chat/index.tsx
@@ -223,15 +223,15 @@ export class Container extends React.Component<Properties> {
             )}
           </div>
 
-          {!this.props.isJoiningConversation && (
+          {/* {!this.props.isJoiningConversation && (
             <ChatViewContainer
               key={this.props.directMessage.optimisticId || this.props.directMessage.id} // Render new component for a new chat
               channelId={this.props.activeConversationId}
               className='direct-message-chat__channel'
               showSenderAvatar={!this.isOneOnOne()}
               ref={this.chatViewContainerRef}
             />
-          )}
+          )} */}
 
           <div className='direct-message-chat__footer-position'>
             <div className='direct-message-chat__footer'>

diff --git a/src/components/messenger/feed/feed-view-container/feed-view.test.tsx b/src/components/messenger/feed/feed-view-container/feed-view.test.tsx
@@ -45,17 +45,35 @@ describe('FeedView', () => {
     expect(wrapper).toHaveElement(Spinner);
   });
 
-  it('renders a waypoint if posts are present', () => {
+  it('renders a waypoint if posts are present and content exceeds viewport height', () => {
     const onFetchMoreSpy = jest.fn();
     const wrapper = subject({ postMessages: POST_MESSAGES_TEST, onFetchMore: onFetchMoreSpy });
 
+    wrapper.setState({ shouldRenderWaypoint: true });
+
     const waypoint = wrapper.find(Waypoint);
     expect(waypoint.exists()).toBe(true);
-    expect(wrapper).toHaveElement(Waypoint);
-
     expect(waypoint.prop('onEnter')).toEqual(onFetchMoreSpy);
   });
 
+  it('does not render a waypoint if content does not exceed viewport height', () => {
+    const wrapper = subject({ postMessages: POST_MESSAGES_TEST });
+
+    wrapper.setState({ shouldRenderWaypoint: false });
+
+    expect(wrapper.find(Waypoint).exists()).toBe(false);
+  });
+
+  it('renders a waypoint if posts are present and content height changes after update', () => {
+    const onFetchMoreSpy = jest.fn();
+    const wrapper = subject({ postMessages: POST_MESSAGES_TEST, onFetchMore: onFetchMoreSpy });
+
+    wrapper.setState({ shouldRenderWaypoint: true });
+
+    const waypoint = wrapper.find(Waypoint);
+    expect(waypoint.exists()).toBe(true);
+  });
+
   it('does not render a waypoint if no posts are present', () => {
     const wrapper = subject({ postMessages: [] });
 
@@ -76,4 +94,31 @@ describe('FeedView', () => {
 
     expect(wrapper.text()).toEqual('Test Message');
   });
+
+  it('updates shouldRenderWaypoint state based on content height after mount', () => {
+    const wrapper = subject({ postMessages: POST_MESSAGES_TEST });
+
+    const instance = wrapper.instance() as FeedView;
+    jest.spyOn(instance, 'checkContentHeight');
+
+    instance.componentDidMount();
+
+    expect(instance.checkContentHeight).toHaveBeenCalled();
+  });
+
+  it('updates shouldRenderWaypoint state based on content height after update', () => {
+    const wrapper = subject({ postMessages: POST_MESSAGES_TEST });
+
+    const instance = wrapper.instance() as FeedView;
+    jest.spyOn(instance, 'checkContentHeight');
+
+    wrapper.setProps({
+      postMessages: [
+        ...POST_MESSAGES_TEST,
+        { id: 'post-three', message: 'Third post', createdAt: 1659018545429, isPost: true },
+      ],
+    });
+
+    expect(instance.checkContentHeight).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/messenger/feed/feed-view-container/feed-view.tsx b/src/components/messenger/feed/feed-view-container/feed-view.tsx
@@ -22,16 +22,51 @@ export interface Properties {
 }
 
 export class FeedView extends React.Component<Properties> {
+  contentRef: React.RefObject<HTMLDivElement>;
+
+  state = {
+    shouldRenderWaypoint: false,
+  };
+
+  constructor(props: Properties) {
+    super(props);
+    this.contentRef = React.createRef();
+  }
+
+  componentDidMount() {
+    this.checkContentHeight();
+  }
+
+  componentDidUpdate(prevProps: Properties) {
+    if (
+      prevProps.postMessages !== this.props.postMessages ||
+      prevProps.hasLoadedMessages !== this.props.hasLoadedMessages
+    ) {
+      this.checkContentHeight();
+    }
+  }
+
+  checkContentHeight() {
+    if (this.contentRef.current) {
+      const contentHeight = this.contentRef.current.clientHeight;
+      const viewportHeight = window.innerHeight;
+
+      this.setState({
+        shouldRenderWaypoint: contentHeight > viewportHeight,
+      });
+    }
+  }
+
   render() {
     return (
-      <div {...cn('')}>
+      <div {...cn('')} ref={this.contentRef}>
         {this.props.hasLoadedMessages && (
           <>
             {this.props.postMessages.length > 0 ? (
               <>
                 <Posts postMessages={this.props.postMessages} />
 
-                {this.props.messagesFetchStatus === MessagesFetchState.SUCCESS && (
+                {this.props.messagesFetchStatus === MessagesFetchState.SUCCESS && this.state.shouldRenderWaypoint && (
                   <Waypoint onEnter={this.props.onFetchMore} />
                 )}
               </>