bump frontend deps

frontend/app/__stubs__/jwt.ts

@@ -1,2 +1,4 @@
-export const validToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJyZW1hcmsiLCJleHAiOjE1Nzk5ODY5ODIsImlzcyI6InJlbWFyazQyIiwibmJmIjoxNTc5OTg1MTIyLCJoYW5kc2hha2UiOnsiaWQiOiJkZXZfdXNlcjo6YXNkQHgxMDEucHcifX0.SLXLOE0Z8HQb2JwAvLS9fdrghwf8ndpuEjDsZvVE9O4' as const;
-export const invalidToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJyZW1hcmsiLCJleHAiOjE1Nzk5ODY5ODIsImlzcyI6InJlbWFyazQyIiwibmJmIjoxNTc5OTg1MTIyLCJoYW5kc2hha2UiOnsiaWQiOiJkZXZfdXNlcjo6YXNkQHgxM' as const;
+export const validToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJyZW1hcmsiLCJleHAiOjE1Nzk5ODY5ODIsImlzcyI6InJlbWFyazQyIiwibmJmIjoxNTc5OTg1MTIyLCJoYW5kc2hha2UiOnsiaWQiOiJkZXZfdXNlcjo6YXNkQHgxMDEucHcifX0.SLXLOE0Z8HQb2JwAvLS9fdrghwf8ndpuEjDsZvVE9O4' as const;
+export const invalidToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJyZW1hcmsiLCJleHAiOjE1Nzk5ODY5ODIsImlzcyI6InJlbWFyazQyIiwibmJmIjoxNTc5OTg1MTIyLCJoYW5kc2hha2UiOnsiaWQiOiJkZXZfdXNlcjo6YXNkQHgxM' as const;

frontend/app/common/settings.ts

@@ -18,7 +18,7 @@ export const querySettings: Partial<QuerySettingsType> = parseQuery();
 
 if (querySettings.max_shown_comments) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  querySettings.max_shown_comments = parseInt((querySettings.max_shown_comments as any) as string, 10);
+  querySettings.max_shown_comments = parseInt(querySettings.max_shown_comments as any as string, 10);
 } else {
   querySettings.max_shown_comments = MAX_SHOWN_ROOT_COMMENTS;
 }

frontend/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.test.tsx

@@ -20,13 +20,13 @@ import { LS_EMAIL_KEY } from 'common/constants';
 
 import { SubscribeByEmail, SubscribeByEmailForm } from '.';
 
-const emailVerificationForSubscribeMock = (emailVerificationForSubscribe as unknown) as jest.Mock<
+const emailVerificationForSubscribeMock = emailVerificationForSubscribe as unknown as jest.Mock<
   ReturnType<typeof emailVerificationForSubscribe>
 >;
-const emailConfirmationForSubscribeMock = (emailConfirmationForSubscribe as unknown) as jest.Mock<
+const emailConfirmationForSubscribeMock = emailConfirmationForSubscribe as unknown as jest.Mock<
   ReturnType<typeof emailConfirmationForSubscribe>
 >;
-const unsubscribeFromEmailUpdatesMock = (unsubscribeFromEmailUpdates as unknown) as jest.Mock<
+const unsubscribeFromEmailUpdatesMock = unsubscribeFromEmailUpdates as unknown as jest.Mock<
   ReturnType<typeof unsubscribeFromEmailUpdates>
 >;
 

frontend/app/components/profile/components/counter/counter.module.css

@@ -9,5 +9,5 @@
 }
 
 :global(.dark) .container {
-  background-color: rgba(var(--white-color), .12);
+  background-color: rgba(var(--white-color), 0.12);
 }

frontend/app/store/comments/actions.ts

@@ -18,87 +18,98 @@ import { setItem } from 'common/local-storage';
 import { LS_SORT_KEY } from 'common/constants';
 
 /** sets comments, and put pinned comments in cache */
-export const setComments = (comments: Node[]): StoreAction<void> => (dispatch) => {
-  dispatch({
-    type: COMMENTS_SET,
-    comments,
-  });
-};
+export const setComments =
+  (comments: Node[]): StoreAction<void> =>
+  (dispatch) => {
+    dispatch({
+      type: COMMENTS_SET,
+      comments,
+    });
+  };
 
 /** appends comment to tree */
-export const addComment = (text: string, title: string, pid?: Comment['id']): StoreAction<Promise<void>> => async (
-  dispatch
-) => {
-  const comment = await api.addComment({ text, title, pid });
-  dispatch({ type: COMMENTS_APPEND, pid: pid || null, comment });
-};
+export const addComment =
+  (text: string, title: string, pid?: Comment['id']): StoreAction<Promise<void>> =>
+  async (dispatch) => {
+    const comment = await api.addComment({ text, title, pid });
+    dispatch({ type: COMMENTS_APPEND, pid: pid || null, comment });
+  };
 
 /** edits comment in tree */
-export const updateComment = (id: Comment['id'], text: string): StoreAction<Promise<void>> => async (dispatch) => {
-  const comment = await api.updateComment({ id, text });
-  dispatch({ type: COMMENTS_EDIT, comment });
-};
+export const updateComment =
+  (id: Comment['id'], text: string): StoreAction<Promise<void>> =>
+  async (dispatch) => {
+    const comment = await api.updateComment({ id, text });
+    dispatch({ type: COMMENTS_EDIT, comment });
+  };
 
 /** edits comment in tree */
-export const putVote = (id: Comment['id'], value: number): StoreAction<Promise<void>> => async (dispatch) => {
-  await api.putCommentVote({ id, value });
-  const comment = await api.getComment(id);
-  dispatch({ type: COMMENTS_EDIT, comment });
-};
+export const putVote =
+  (id: Comment['id'], value: number): StoreAction<Promise<void>> =>
+  async (dispatch) => {
+    await api.putCommentVote({ id, value });
+    const comment = await api.getComment(id);
+    dispatch({ type: COMMENTS_EDIT, comment });
+  };
 
 /** edits comment in tree */
-export const setPinState = (id: Comment['id'], value: boolean): StoreAction<Promise<void>> => async (
-  dispatch,
-  getState
-) => {
-  if (value) {
-    await api.pinComment(id);
-  } else {
-    await api.unpinComment(id);
-  }
-  let comment = getState().comments.allComments[id];
-  comment = { ...comment, pin: value, edit: { summary: '', time: new Date().toISOString() } };
-  dispatch({ type: COMMENTS_EDIT, comment });
-};
+export const setPinState =
+  (id: Comment['id'], value: boolean): StoreAction<Promise<void>> =>
+  async (dispatch, getState) => {
+    if (value) {
+      await api.pinComment(id);
+    } else {
+      await api.unpinComment(id);
+    }
+    let comment = getState().comments.allComments[id];
+    comment = { ...comment, pin: value, edit: { summary: '', time: new Date().toISOString() } };
+    dispatch({ type: COMMENTS_EDIT, comment });
+  };
 
 /** edits comment in tree */
-export const removeComment = (id: Comment['id']): StoreAction<Promise<void>> => async (dispatch, getState) => {
-  const user = getState().user;
-  if (!user) return;
-  if (user.admin) {
-    await api.removeComment(id);
-  } else {
-    await api.removeMyComment(id);
-  }
-  let comment = getState().comments.allComments[id];
-  comment = { ...comment, delete: true, edit: { summary: '', time: new Date().toISOString() } };
-  dispatch({ type: COMMENTS_EDIT, comment });
-};
+export const removeComment =
+  (id: Comment['id']): StoreAction<Promise<void>> =>
+  async (dispatch, getState) => {
+    const user = getState().user;
+    if (!user) return;
+    if (user.admin) {
+      await api.removeComment(id);
+    } else {
+      await api.removeMyComment(id);
+    }
+    let comment = getState().comments.allComments[id];
+    comment = { ...comment, delete: true, edit: { summary: '', time: new Date().toISOString() } };
+    dispatch({ type: COMMENTS_EDIT, comment });
+  };
 
 /** fetches comments from server */
-export const fetchComments = (sort?: Sorting): StoreAction<Promise<Tree>> => async (dispatch, getState) => {
-  const { hiddenUsers, comments } = getState();
-  const hiddenUsersIds = Object.keys(hiddenUsers);
-  dispatch({ type: COMMENTS_REQUEST_FETCHING });
-  const data = await api.getPostComments(sort || comments.sort);
-  dispatch({ type: COMMENTS_REQUEST_SUCCESS });
-  if (hiddenUsersIds.length > 0) {
-    data.comments = filterTree(data.comments, (node) => hiddenUsersIds.indexOf(node.comment.user.id) === -1);
-  }
+export const fetchComments =
+  (sort?: Sorting): StoreAction<Promise<Tree>> =>
+  async (dispatch, getState) => {
+    const { hiddenUsers, comments } = getState();
+    const hiddenUsersIds = Object.keys(hiddenUsers);
+    dispatch({ type: COMMENTS_REQUEST_FETCHING });
+    const data = await api.getPostComments(sort || comments.sort);
+    dispatch({ type: COMMENTS_REQUEST_SUCCESS });
+    if (hiddenUsersIds.length > 0) {
+      data.comments = filterTree(data.comments, (node) => hiddenUsersIds.indexOf(node.comment.user.id) === -1);
+    }
 
-  dispatch(setComments(data.comments));
-  dispatch(setPostInfo(data.info));
+    dispatch(setComments(data.comments));
+    dispatch(setPostInfo(data.info));
 
-  return data;
-};
+    return data;
+  };
 
 /** sets mode for comment, either reply or edit */
-export const setCommentMode = (mode: StoreState['comments']['activeComment']): StoreAction<void> => (dispatch) => {
-  if (mode !== null && mode.state === CommentMode.None) {
-    mode = null;
-  }
-  dispatch(unsetCommentMode(mode));
-};
+export const setCommentMode =
+  (mode: StoreState['comments']['activeComment']): StoreAction<void> =>
+  (dispatch) => {
+    if (mode !== null && mode.state === CommentMode.None) {
+      mode = null;
+    }
+    dispatch(unsetCommentMode(mode));
+  };
 
 /** unsets comment mode */
 export function unsetCommentMode(mode: StoreState['comments']['activeComment'] = null) {

frontend/app/store/comments/getters.ts

@@ -1,10 +1,12 @@
 import { Comment, CommentMode } from 'common/types';
 import { StoreState } from '../index';
 
-export const getCommentMode = (id: Comment['id']) => (state: StoreState): CommentMode => {
-  if (state.comments.activeComment === null || state.comments.activeComment.id !== id) {
-    return CommentMode.None;
-  }
+export const getCommentMode =
+  (id: Comment['id']) =>
+  (state: StoreState): CommentMode => {
+    if (state.comments.activeComment === null || state.comments.activeComment.id !== id) {
+      return CommentMode.None;
+    }
 
-  return state.comments.activeComment.state;
-};
+    return state.comments.activeComment.state;
+  };

frontend/app/store/theme/actions.ts

@@ -3,8 +3,10 @@ import { Theme } from 'common/types';
 import { StoreAction } from '../';
 import { THEME_SET } from './types';
 
-export const setTheme = (theme: Theme): StoreAction<void> => (dispatch) =>
-  dispatch({
-    type: THEME_SET,
-    theme,
-  });
+export const setTheme =
+  (theme: Theme): StoreAction<void> =>
+  (dispatch) =>
+    dispatch({
+      type: THEME_SET,
+      theme,
+    });

frontend/app/store/thread/actions.ts

@@ -10,20 +10,22 @@ export const restoreCollapsedThreads = (): THREAD_RESTORE_COLLAPSE_ACTION => ({
   ids: getCollapsedComments(),
 });
 
-export const setCollapse = (id: Comment['id'], value: boolean): StoreAction<void> => (dispatch, getState) => {
-  dispatch({
-    type: THREAD_SET_COLLAPSE,
-    id,
-    collapsed: value,
-  });
-  saveCollapsedComments(
-    siteId!,
-    url!,
-    Object.entries(getState().collapsedThreads).reduce((acc: string[], [key, value]) => {
-      if (value) {
-        acc.push(key);
-      }
-      return acc;
-    }, [])
-  );
-};
+export const setCollapse =
+  (id: Comment['id'], value: boolean): StoreAction<void> =>
+  (dispatch, getState) => {
+    dispatch({
+      type: THREAD_SET_COLLAPSE,
+      id,
+      collapsed: value,
+    });
+    saveCollapsedComments(
+      siteId!,
+      url!,
+      Object.entries(getState().collapsedThreads).reduce((acc: string[], [key, value]) => {
+        if (value) {
+          acc.push(key);
+        }
+        return acc;
+      }, [])
+    );
+  };

frontend/app/store/thread/getters.ts

@@ -3,14 +3,16 @@ import { StaticStore } from 'common/static-store';
 
 import { StoreState } from '../index';
 
-export const getThreadIsCollapsed = (comment: Comment) => (state: StoreState): boolean => {
-  const collapsed = state.collapsedThreads[comment.id];
+export const getThreadIsCollapsed =
+  (comment: Comment) =>
+  (state: StoreState): boolean => {
+    const collapsed = state.collapsedThreads[comment.id];
 
-  if (collapsed !== null && collapsed !== undefined) {
-    return collapsed;
-  }
+    if (collapsed !== null && collapsed !== undefined) {
+      return collapsed;
+    }
 
-  const score = comment.score || 0;
+    const score = comment.score || 0;
 
-  return score <= StaticStore.config.critical_score;
-};
+    return score <= StaticStore.config.critical_score;
+  };

frontend/app/store/user/actions.ts

@@ -46,10 +46,12 @@ export const fetchUser = (): StoreAction<Promise<User | null>> => async (dispatc
   return user;
 };
 
-export const signin = (user: User): StoreAction<Promise<void>> => async (dispatch) => {
-  dispatch(setUser(user));
-  dispatch(fetchComments());
-};
+export const signin =
+  (user: User): StoreAction<Promise<void>> =>
+  async (dispatch) => {
+    dispatch(setUser(user));
+    dispatch(fetchComments());
+  };
 
 export const fetchBlockedUsers = (): StoreAction<Promise<BlockedUser[]>> => async (dispatch) => {
   const list = (await api.getBlocked()) || [];
@@ -59,35 +61,37 @@ export const fetchBlockedUsers = (): StoreAction<Promise<BlockedUser[]>> => asyn
   return list;
 };
 
-export const blockUser = (id: User['id'], name: string, ttl: BlockTTL): StoreAction<Promise<void>> => async (
-  dispatch
-) => {
-  await api.blockUser(id, ttl);
-  dispatch({
-    type: USER_BAN,
-    user: {
-      id,
-      name,
-      time: ttlToTime(ttl),
-    },
-  });
-};
+export const blockUser =
+  (id: User['id'], name: string, ttl: BlockTTL): StoreAction<Promise<void>> =>
+  async (dispatch) => {
+    await api.blockUser(id, ttl);
+    dispatch({
+      type: USER_BAN,
+      user: {
+        id,
+        name,
+        time: ttlToTime(ttl),
+      },
+    });
+  };
 
-export const unblockUser = (id: User['id']): StoreAction<Promise<void>> => async (dispatch, getState) => {
-  await api.unblockUser(id);
-  dispatch({ type: USER_UNBAN, id });
-  const comments = Object.values(getState().comments.allComments);
-  const userComments = comments.filter((comment) => comment.user.id === id);
+export const unblockUser =
+  (id: User['id']): StoreAction<Promise<void>> =>
+  async (dispatch, getState) => {
+    await api.unblockUser(id);
+    dispatch({ type: USER_UNBAN, id });
+    const comments = Object.values(getState().comments.allComments);
+    const userComments = comments.filter((comment) => comment.user.id === id);
 
-  if (!userComments.length) return;
-  const user = comments[0].user;
+    if (!userComments.length) return;
+    const user = comments[0].user;
 
-  dispatch({
-    type: COMMENTS_PATCH,
-    ids: userComments.map((c) => c.id),
-    patch: { user: { ...user, block: false } },
-  });
-};
+    dispatch({
+      type: COMMENTS_PATCH,
+      ids: userComments.map((c) => c.id),
+      patch: { user: { ...user, block: false } },
+    });
+  };
 
 export const fetchHiddenUsers = (): StoreAction<void> => (dispatch) => {
   const hiddenUsers = getHiddenUsers();
@@ -95,54 +99,57 @@ export const fetchHiddenUsers = (): StoreAction<void> => (dispatch) => {
   dispatch({ type: USER_HIDELIST_SET, payload: hiddenUsers });
 };
 
-export const hideUser = (user: User): StoreAction<void> => (dispatch, getState) => {
-  const hiddenUsers = getHiddenUsers();
+export const hideUser =
+  (user: User): StoreAction<void> =>
+  (dispatch, getState) => {
+    const hiddenUsers = getHiddenUsers();
 
-  hiddenUsers[user.id] = user;
-  setItem(LS_HIDDEN_USERS_KEY, JSON.stringify(hiddenUsers));
+    hiddenUsers[user.id] = user;
+    setItem(LS_HIDDEN_USERS_KEY, JSON.stringify(hiddenUsers));
 
-  const ids = Object.values(getState().comments.allComments)
-    .filter((c) => c.user.id === user.id)
-    .map((c) => c.id);
+    const ids = Object.values(getState().comments.allComments)
+      .filter((c) => c.user.id === user.id)
+      .map((c) => c.id);
 
-  dispatch({ type: USER_HIDE, user });
-  dispatch({ type: COMMENTS_PATCH, ids, patch: { hidden: true } });
-};
+    dispatch({ type: USER_HIDE, user });
+    dispatch({ type: COMMENTS_PATCH, ids, patch: { hidden: true } });
+  };
 
-export const unhideUser = (userId: string): StoreAction<void> => (dispatch, _getState) => {
-  const hiddenUsers = getHiddenUsers();
+export const unhideUser =
+  (userId: string): StoreAction<void> =>
+  (dispatch, _getState) => {
+    const hiddenUsers = getHiddenUsers();
 
-  if (Object.prototype.hasOwnProperty.call(hiddenUsers, userId)) {
-    delete hiddenUsers[userId];
-  }
+    if (Object.prototype.hasOwnProperty.call(hiddenUsers, userId)) {
+      delete hiddenUsers[userId];
+    }
 
-  setItem(LS_HIDDEN_USERS_KEY, JSON.stringify(hiddenUsers));
-  dispatch({ type: USER_UNHIDE, id: userId });
+    setItem(LS_HIDDEN_USERS_KEY, JSON.stringify(hiddenUsers));
+    dispatch({ type: USER_UNHIDE, id: userId });
 
-  // no need for comments patch as comments will be refetched after action
-};
+    // no need for comments patch as comments will be refetched after action
+  };
 
-export const setVerifiedStatus = (id: User['id'], status: boolean): StoreAction<Promise<void>> => async (
-  dispatch,
-  getState
-) => {
-  if (status) {
-    await api.setVerifiedStatus(id);
-  } else {
-    await api.removeVerifiedStatus(id);
-  }
-  const comments = Object.values(getState().comments.allComments);
-  const userComments = comments.filter((c) => c.user.id === id);
+export const setVerifiedStatus =
+  (id: User['id'], status: boolean): StoreAction<Promise<void>> =>
+  async (dispatch, getState) => {
+    if (status) {
+      await api.setVerifiedStatus(id);
+    } else {
+      await api.removeVerifiedStatus(id);
+    }
+    const comments = Object.values(getState().comments.allComments);
+    const userComments = comments.filter((c) => c.user.id === id);
 
-  if (!userComments.length) return;
-  const user = userComments[0].user;
+    if (!userComments.length) return;
+    const user = userComments[0].user;
 
-  dispatch({
-    type: COMMENTS_PATCH,
-    ids: userComments.map((c) => c.id),
-    patch: { user: { ...user, verified: status } },
-  });
-};
+    dispatch({
+      type: COMMENTS_PATCH,
+      ids: userComments.map((c) => c.id),
+      patch: { user: { ...user, verified: status } },
+    });
+  };
 
 export const setUserSubscribed = (isSubscribed: boolean) => ({
   type: USER_SUBSCRIPTION_SET,

frontend/app/store/user/reducers.test.ts

@@ -7,7 +7,7 @@ import { USER_ACTIONS, USER_SET } from './types';
 
 jest.mock('common/api');
 
-const getUserMock = (getUser as unknown) as jest.Mock<ReturnType<typeof getUser>>;
+const getUserMock = getUser as unknown as jest.Mock<ReturnType<typeof getUser>>;
 
 afterEach(() => {
   jest.resetModules();

frontend/app/typings/global.d.ts

@@ -21,9 +21,7 @@ declare global {
     REMARK42: {
       changeTheme?: (theme: Theme) => void;
       destroy?: () => void;
-      createInstance: (
-        remark_config: RemarkConfig
-      ) =>
+      createInstance: (remark_config: RemarkConfig) =>
         | {
             changeTheme(theme: Theme): void;
             destroy(): void;

frontend/package.json

@@ -96,12 +96,12 @@
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^2.2.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.6",
-    "postcss-loader": "^6.1.1",
-    "postcss-preset-env": "^6.7.0",
-    "prettier": "^2.2.1",
+    "postcss": "^8.4.5",
+    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.2.3",
+    "prettier": "^2.5.1",
     "redux-mock-store": "^1.5.4",
-    "size-limit": "^4.10.2",
+    "size-limit": "^7.0.5",
     "style-loader": "^2.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^8.0.2",