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 (