Reduce size of last-comments widget

* use one api method insted full api file
* remove debug for preact
* use smaller constans file
* move unique constants

frontend/.size-limit.js

@@ -8,7 +8,7 @@ module.exports = [
     path: 'public/remark.js',
   },
   {
-    limit: '45 KB',
+    limit: '43 KB',
     path: 'public/last-comments.js',
   },
   {

frontend/app/common/api.getLastComments.ts

@@ -0,0 +1,6 @@
+import { Comment } from './types';
+import fetcher from './fetcher';
+
+export default function getLastComments(siteId: string, max: number): Promise<Comment[]> {
+  return fetcher.get(`/last/${max}?site=${siteId}`);
+}

frontend/app/common/api.ts

@@ -4,7 +4,6 @@ import { Config, Comment, Tree, User, BlockedUser, Sorting, AuthProvider, BlockT
 import fetcher from './fetcher';
 
 /* common */
-
 const __loginAnonymously = (username: string): Promise<User | null> => {
   const url = `/auth/anonymous/login?user=${encodeURIComponent(username)}&aud=${siteId}&from=${encodeURIComponent(
     location.origin + location.pathname + '?selfClose'
@@ -76,9 +75,6 @@ export const getPostComments = (sort: Sorting): Promise<Tree> =>
     withCredentials: true,
   });
 
-export const getLastComments = (siteId: string, max: number): Promise<Comment[]> =>
-  fetcher.get(`/last/${max}?site=${siteId}`);
-
 export const getCommentsCount = (siteId: string, urls: string[]): Promise<{ url: string; count: number }[]> =>
   fetcher.post({
     url: `/counts?site=${siteId}`,
@@ -302,7 +298,6 @@ export default {
   logOut,
   getConfig,
   getPostComments,
-  getLastComments,
   getCommentsCount,
   getComment,
   getUserComments,

frontend/app/common/constants.ts

@@ -6,8 +6,6 @@ export const API_BASE = configConstant.API_BASE;
 export const NODE_ID = configConstant.NODE_ID;
 export const COMMENT_NODE_CLASSNAME_PREFIX = configConstant.COMMENT_NODE_CLASSNAME_PREFIX;
 export const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
-export const DEFAULT_LAST_COMMENTS_MAX = 15;
-export const DEFAULT_MAX_COMMENT_SIZE = 1000;
 export const MAX_SHOWN_ROOT_COMMENTS = 10;
 
 export const DEFAULT_SORT: Sorting = '-active';

frontend/app/components/list-comments/list-comments.tsx

@@ -1,20 +1,16 @@
 /** @jsx createElement */
-import { createElement } from 'preact';
+import { createElement, FunctionComponent } from 'preact';
 
 import { NODE_ID } from '@app/common/constants';
 import { Comment as CommentType } from '@app/common/types';
-
 import { Comment } from '@app/components/comment';
 
-interface Props {
-  comments: CommentType[];
-}
-
-export const ListComments = ({ comments = [] }: Props) => (
+export const ListComments: FunctionComponent<{ comments: CommentType[] }> = ({ comments = [] }) => (
   <div id={NODE_ID}>
     <div className="list-comments">
       {comments.map(comment => (
         <Comment
+          key={comment.id}
           CommentForm={null}
           data={comment}
           level={0}

frontend/app/last-comments.tsx

@@ -9,14 +9,17 @@ if (process.env.NODE_ENV === 'development') {
 }
 import loadPolyfills from '@app/common/polyfills';
 import { createElement, render } from 'preact';
-import 'preact/debug';
-import { getLastComments } from './common/api';
-import { LastCommentsConfig } from '@app/common/config-types';
-import { BASE_URL, DEFAULT_LAST_COMMENTS_MAX, LAST_COMMENTS_NODE_CLASSNAME } from '@app/common/constants';
-import { ListComments } from '@app/components/list-comments';
 import { IntlProvider } from 'react-intl';
-import { loadLocale } from './utils/loadLocale';
-import { getLocale } from './utils/getLocale';
+
+import getLastComments from '@app/common/api.getLastComments';
+import { LastCommentsConfig } from '@app/common/config-types';
+import { BASE_URL } from '@app/common/constants.config';
+import { loadLocale } from '@app/utils/loadLocale';
+import { getLocale } from '@app/utils/getLocale';
+import { ListComments } from '@app/components/list-comments';
+
+const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
+const DEFAULT_LAST_COMMENTS_MAX = 15;
 
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', init);