Merge pull request #312 from Reeywhaar/fix-useless-comment-collapse

Fix useless comment collapse

web/app/common/api.ts

@@ -133,6 +133,7 @@ export const getUser = (): Promise<User | null> =>
     .get<User | null>({
       url: '/user',
       withCredentials: true,
+      logError: false,
     })
     .catch(() => null);
 

web/app/common/fetcher.ts

@@ -10,6 +10,8 @@ interface FetcherInitBase {
   url: string;
   overriddenApiBase?: string;
   withCredentials?: boolean;
+  /** whether log error message to console */
+  logError?: boolean;
 }
 
 interface FetcherInitJSON extends FetcherInitBase {
@@ -34,6 +36,7 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
       withCredentials = false,
       overriddenApiBase = API_BASE,
       contentType = 'application/json',
+      logError = true,
     } = typeof data === 'string' ? { url: data } : data;
     const basename = `${BASE_URL}${overriddenApiBase}`;
 
@@ -81,8 +84,10 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
           try {
             err = JSON.parse(text);
           } catch (e) {
-            // eslint-disable-next-line no-console
-            console.error(err);
+            if (logError) {
+              // eslint-disable-next-line no-console
+              console.error(err);
+            }
             throw 'Something went wrong.';
           }
           throw err;

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

@@ -22,6 +22,7 @@ import { blockUser, unblockUser, setVirifiedStatus } from '@app/store/user/actio
 import { Comment, Props } from './comment';
 import { getCommentMode } from '@app/store/comments/getters';
 import { uploadImage } from '@app/common/api';
+import { getThreadIsCollapsed } from '@app/store/thread/getters';
 
 const mapProps = (state: StoreState, cprops: { data: CommentType }) => {
   const props: Pick<
@@ -34,7 +35,7 @@ const mapProps = (state: StoreState, cprops: { data: CommentType }) => {
     post_info: state.info,
     isCommentsDisabled: state.info.read_only || false,
     theme: state.theme,
-    collapsed: state.collapsedThreads[cprops.data.id] === true,
+    collapsed: getThreadIsCollapsed(state, cprops.data),
   };
   return props;
 };
@@ -46,7 +47,7 @@ const mapDispatchToProps = (dispatch: StoreDispatch) => {
     | 'updateComment'
     | 'removeComment'
     | 'setReplyEditState'
-    | 'collapseToggle'
+    | 'setCollapse'
     | 'setPinState'
     | 'putCommentVote'
     | 'blockUser'
@@ -58,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

@@ -4,14 +4,14 @@ import { setCollapse } from './actions';
 import { THREAD_SET_COLLAPSE } from './types';
 
 describe('collapsedThreads', () => {
-  const comment = { id: 'some-id' } as Comment;
-
   it('should set collapsed to true', () => {
-    const state = { collapsedThreads: {} };
+    const comment = { id: 'some-id' } as Comment;
+    const node = { comment, replies: [] };
+    const state = { collapsedThreads: {}, comments: [node] };
 
     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',
@@ -20,11 +20,13 @@ describe('collapsedThreads', () => {
   });
 
   it('should collapse toggled', () => {
+    const comment = { id: 'some-id' } as Comment;
+    const node = { comment, replies: [] };
     const dispatch = jest.fn();
     const getState = jest.fn();
-    getState.mockReturnValue({ collapsedThreads: { 'some-id': true } });
+    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',

web/app/testUtils/index.ts

@@ -1,3 +1,23 @@
+import { StaticStore } from '@app/common/static_store';
+
+require('document-register-element/pony')(window);
+
+beforeEach(() => {
+  StaticStore.config = {
+    admin_email: 'admin@remark42.com',
+    admins: ['admin'],
+    auth_providers: ['dev', 'google'],
+    critical_score: -15,
+    low_score: -5,
+    edit_duration: 300,
+    max_comment_size: 3000,
+    max_image_size: 5000,
+    positive_score: false,
+    readonly_age: 100,
+    version: 'jest-test',
+  };
+});
+
 export function createDomContainer(setup: (domContainer: HTMLElement) => void): void {
   let domContainer: HTMLElement | null = null;
   beforeAll(() => {

web/jest.config.js

@@ -11,5 +11,5 @@ module.exports = {
     '\\.scss$': '<rootDir>/app/testUtils/mockStyles.js',
     '@app/(.*)': '<rootDir>/app/$1',
   },
-  setupFilesAfterEnv: ['<rootDir>/setup-jest-env.js'],
+  setupFilesAfterEnv: ['<rootDir>/app/testUtils/index.ts'],
 };

web/setup-jest-env.js

@@ -1 +0,0 @@
-require('document-register-element/pony')(window);

web/tsconfig.json

@@ -23,5 +23,4 @@
   },
   "include": ["app/**/*"],
   "exclude": ["node_modules"],
-  "typeAcquisition": { "enable": true }
 }