refactor(feed-view-container): prevent post fetches if posts have loa…

…ded when switching conversations, and enhance tests
zer0-os · Aug 23, 2024 · b4007e4 · b4007e4
1 parent e940ea7
commit b4007e4
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 6 deletions.
diff --git a/src/components/messenger/feed/feed-view-container/feed-view-container.test.tsx b/src/components/messenger/feed/feed-view-container/feed-view-container.test.tsx
@@ -45,24 +45,60 @@ describe('FeedViewContainer', () => {
     expect(wrapper.find(FeedView).prop('postMessages')).toStrictEqual([]);
   });
 
-  it('fetches posts on mount', () => {
+  it('fetches posts on mount if posts are not loaded', () => {
     const fetchPosts = jest.fn();
 
     subject({ fetchPosts, channelId: 'the-channel-id', channel: { hasLoadedMessages: false } });
 
     expect(fetchPosts).toHaveBeenCalledWith({ channelId: 'the-channel-id' });
   });
 
-  it('fetches posts when channel id is set or updated', () => {
+  it('does not fetch posts on mount if posts are already loaded', () => {
+    const fetchPosts = jest.fn();
+
+    subject({ fetchPosts, channelId: 'the-channel-id', channel: { hasLoadedMessages: true } });
+
+    expect(fetchPosts).not.toHaveBeenCalled();
+  });
+
+  it('fetches posts when channel id is set or updated if posts are not loaded', () => {
     const fetchPosts = jest.fn();
 
     const wrapper = subject({
       fetchPosts,
       channelId: '',
-      channel: { name: 'first channel', shouldSyncChannels: false },
+      channel: { hasLoadedMessages: false },
+    });
+
+    wrapper.setProps({ channelId: 'the-channel-id', channel: { hasLoadedMessages: false } });
+
+    expect(fetchPosts).toHaveBeenCalledWith({ channelId: 'the-channel-id' });
+  });
+
+  it('does not fetch posts when channel id is updated if posts are already loaded', () => {
+    const fetchPosts = jest.fn();
+
+    const wrapper = subject({
+      fetchPosts,
+      channelId: 'the-channel-id',
+      channel: { hasLoadedMessages: true },
+    });
+
+    wrapper.setProps({ channelId: 'new-channel-id', channel: { hasLoadedMessages: true } });
+
+    expect(fetchPosts).not.toHaveBeenCalled();
+  });
+
+  it('fetches posts when user data becomes available', () => {
+    const fetchPosts = jest.fn();
+    const wrapper = subject({
+      fetchPosts,
+      channelId: 'the-channel-id',
+      channel: { hasLoadedMessages: false },
+      user: { isLoading: false, data: null },
     });
 
-    wrapper.setProps({ channelId: 'the-channel-id' });
+    wrapper.setProps({ user: { isLoading: false, data: { id: 'user-id' } } });
 
     expect(fetchPosts).toHaveBeenCalledWith({ channelId: 'the-channel-id' });
   });

diff --git a/src/components/messenger/feed/feed-view-container/feed-view-container.tsx b/src/components/messenger/feed/feed-view-container/feed-view-container.tsx
@@ -49,9 +49,9 @@ export class Container extends React.Component<Properties> {
   }
 
   componentDidUpdate(prevProps: Properties) {
-    const { channelId } = this.props;
+    const { channel, channelId } = this.props;
 
-    if (channelId && channelId !== prevProps.channelId) {
+    if (channelId && channelId !== prevProps.channelId && !channel.hasLoadedMessages) {
       this.props.fetchPosts({ channelId });
     }