diff --git a/webapp/channels/src/components/threading/thread_viewer/thread_viewer.test.tsx b/webapp/channels/src/components/threading/thread_viewer/thread_viewer.test.tsx index b53b31ca53..ff9eb9713a 100644 --- a/webapp/channels/src/components/threading/thread_viewer/thread_viewer.test.tsx +++ b/webapp/channels/src/components/threading/thread_viewer/thread_viewer.test.tsx @@ -66,6 +66,7 @@ describe('components/threading/ThreadViewer', () => { isCollapsedThreadsEnabled: false, postIds: [post.id], appsEnabled: true, + rootPostId: post.id, }; test('should match snapshot', async () => { @@ -102,6 +103,18 @@ describe('components/threading/ThreadViewer', () => { }).not.toThrowError("Cannot read property 'reply_count' of undefined"); }); + test('should not break if root post is ID only', () => { + const props = { + ...baseProps, + rootPostId: post.id, + selected: undefined, + }; + + expect(() => { + shallow(); + }).not.toThrowError("Cannot read property 'reply_count' of undefined"); + }); + test('should call fetchThread when no thread on mount', (done) => { const {actions} = baseProps; diff --git a/webapp/channels/src/components/threading/thread_viewer/thread_viewer.tsx b/webapp/channels/src/components/threading/thread_viewer/thread_viewer.tsx index bca19f239a..08fcb1821d 100644 --- a/webapp/channels/src/components/threading/thread_viewer/thread_viewer.tsx +++ b/webapp/channels/src/components/threading/thread_viewer/thread_viewer.tsx @@ -30,7 +30,7 @@ export type Props = Attrs & { appsEnabled: boolean; userThread?: UserThread | null; channel: Channel | null; - selected: Post | FakePost; + selected?: Post | FakePost; currentUserId: string; currentTeamId: string; socketConnectionStatus: boolean; @@ -49,6 +49,7 @@ export type Props = Attrs & { selectedPostFocusedAt?: number; isThreadView?: boolean; inputPlaceholder?: string; + rootPostId: string; }; type State = { @@ -72,7 +73,7 @@ export default class ThreadViewer extends React.PureComponent { this.onInit(); if (this.props.appsEnabled) { - this.props.actions.fetchRHSAppsBindings(this.props.channel?.id || '', this.props.selected.id); + this.props.actions.fetchRHSAppsBindings(this.props.channel?.id || '', this.props.selected?.id || this.props.rootPostId); } } @@ -83,7 +84,7 @@ export default class ThreadViewer extends React.PureComponent { return; } - const selectedChanged = this.props.selected.id !== prevProps.selected.id; + const selectedChanged = this.props.selected.id !== prevProps.selected?.id; if (reconnected || selectedChanged) { this.onInit(reconnected); @@ -97,7 +98,7 @@ export default class ThreadViewer extends React.PureComponent { } if (this.props.appsEnabled && ( - this.props.channel?.id !== prevProps.channel?.id || this.props.selected.id !== prevProps.selected.id + this.props.channel?.id !== prevProps.channel?.id || this.props.selected.id !== prevProps.selected?.id )) { this.props.actions.fetchRHSAppsBindings(this.props.channel?.id || '', this.props.selected.id); } @@ -105,7 +106,7 @@ export default class ThreadViewer extends React.PureComponent { public morePostsToFetch(): boolean { const replyCount = this.getReplyCount(); - return this.props.selected && this.props.postIds.length < (replyCount + 1); + return Boolean(this.props.selected) && this.props.postIds.length < (replyCount + 1); } public getReplyCount(): number { @@ -150,7 +151,7 @@ export default class ThreadViewer extends React.PureComponent { this.props.actions.updateThreadRead( this.props.currentUserId, this.props.currentTeamId, - this.props.selected.id, + this.props.selected?.id || this.props.rootPostId, Date.now(), ); } @@ -163,9 +164,9 @@ export default class ThreadViewer extends React.PureComponent { private onInit = async (reconnected = false): Promise => { this.setState({isLoading: !reconnected}); if (reconnected || this.morePostsToFetch()) { - await this.props.actions.getPostThread(this.props.selected.id, !reconnected); + await this.props.actions.getPostThread(this.props.selected?.id || this.props.rootPostId, !reconnected); } else { - await this.props.actions.getNewestPostThread(this.props.selected.id); + await this.props.actions.getNewestPostThread(this.props.selected?.id || this.props.rootPostId); } if (