fix comment collapsing button works on second click on useless comment

web/app/components/comment/comment.tsx

@@ -50,7 +50,7 @@ export interface Props {
   setReplyEditState?(id: CommentType['id'], mode: CommentMode): void;
   getPreview?: (text: string) => Promise<string>;
   putCommentVote?(id: CommentType['id'], value: number): Promise<void>;
-  collapseToggle?: (id: CommentType['id']) => void;
+  setCollapse?: (id: CommentType['id'], value: boolean) => void;
   setPinState?(id: CommentType['id'], value: boolean): Promise<void>;
   blockUser?(id: User['id'], name: User['name'], ttl: BlockTTL): Promise<void>;
   unblockUser?(id: User['id']): Promise<void>;
@@ -285,7 +285,7 @@ export class Comment extends Component<Props, State> {
   toggleCollapse() {
     this.props.setReplyEditState!(this.props.data.id, CommentMode.None);
 
-    this.props.collapseToggle!(this.props.data.id);
+    this.props.setCollapse!(this.props.data.id, !this.props.collapsed);
   }
 
   copyComment({ username, time }: { username: string; time: string }) {

web/app/components/comment/connected-comment.ts

@@ -47,7 +47,7 @@ const mapDispatchToProps = (dispatch: StoreDispatch) => {
     | 'updateComment'
     | 'removeComment'
     | 'setReplyEditState'
-    | 'collapseToggle'
+    | 'setCollapse'
     | 'setPinState'
     | 'putCommentVote'
     | 'blockUser'
@@ -59,7 +59,7 @@ const mapDispatchToProps = (dispatch: StoreDispatch) => {
     updateComment: (id: CommentType['id'], text: string) => dispatch(updateComment(id, text)),
     removeComment: (id: CommentType['id']) => dispatch(removeComment(id)),
     setReplyEditState: (id: CommentType['id'], mode: CommentMode) => dispatch(setCommentMode({ id, state: mode })),
-    collapseToggle: (id: CommentType['id']) => dispatch(setCollapse(id)),
+    setCollapse: (id: CommentType['id'], value: boolean) => dispatch(setCollapse(id, value)),
     setPinState: (id: CommentType['id'], value: boolean) => dispatch(setPinState(id, value)),
     putCommentVote: (id: CommentType['id'], value: number) => dispatch(putVote(id, value)),
 

web/app/store/thread/actions.ts

@@ -5,12 +5,11 @@ import { StoreAction } from '../index';
 import { THREAD_SET_COLLAPSE } from './types';
 import { saveCollapsedComments } from './utils';
 
-export const setCollapse = (id: Comment['id']): StoreAction<void> => (dispatch, getState) => {
-  const collapsed = !getState().collapsedThreads[id];
+export const setCollapse = (id: Comment['id'], value: boolean): StoreAction<void> => (dispatch, getState) => {
   dispatch({
     type: THREAD_SET_COLLAPSE,
     id,
-    collapsed,
+    collapsed: value,
   });
   saveCollapsedComments(
     siteId!,

web/app/store/thread/reducers.test.ts

@@ -11,7 +11,7 @@ describe('collapsedThreads', () => {
 
     const dispatch = jest.fn();
     const getState = jest.fn(() => state) as any;
-    setCollapse(comment.id)(dispatch, getState, undefined);
+    setCollapse(comment.id, true)(dispatch, getState, undefined);
     expect(dispatch).toBeCalledWith({
       type: THREAD_SET_COLLAPSE,
       id: 'some-id',
@@ -26,7 +26,7 @@ describe('collapsedThreads', () => {
     const getState = jest.fn();
     getState.mockReturnValue({ collapsedThreads: { 'some-id': true }, comments: [node] });
 
-    setCollapse(comment.id)(dispatch, getState, undefined);
+    setCollapse(comment.id, false)(dispatch, getState, undefined);
     expect(dispatch).toBeCalledWith({
       type: THREAD_SET_COLLAPSE,
       id: 'some-id',