From 3d12f0705deba52e47227526c53e673bb5332b1b Mon Sep 17 00:00:00 2001 From: Dmitry Verkhoturov Date: Sun, 8 Jan 2023 13:13:22 +0100 Subject: [PATCH] cleanup of the frontend code - replace undocumented `substr` with `substring` - remove unused code - inline a few variables - simplify ifs when possible - improve saveCollapsedComments documentation - cleanup the unused imports - remove unused variables and types --- frontend/apps/remark42/app/common/api.ts | 2 -- frontend/apps/remark42/app/common/cookies.ts | 4 ---- frontend/apps/remark42/app/common/fetcher.ts | 4 +--- frontend/apps/remark42/app/common/types.ts | 6 ----- .../app/components/auth/auth.hooks.ts | 2 +- .../comment-form__subscribe-by-email.tsx | 1 - .../components/comment-form/comment-form.tsx | 2 +- .../components/comment/comment-votes.spec.tsx | 2 +- .../app/components/comment/comment-votes.tsx | 2 +- .../app/components/comment/comment.tsx | 15 ++----------- .../remark42/app/components/root/root.tsx | 5 +---- .../app/components/settings/settings.tsx | 3 +-- .../app/components/textarea-autosize.tsx | 2 +- frontend/apps/remark42/app/hooks/useTheme.ts | 4 +--- .../apps/remark42/app/typings/global.d.ts | 15 ------------- frontend/apps/remark42/app/utils/bench.ts | 8 ------- .../apps/remark42/app/utils/debug-node.ts | 22 ------------------- frontend/apps/remark42/app/utils/derequire.ts | 2 -- .../remark42/app/utils/replaceSelection.ts | 2 +- .../apps/remark42/app/utils/shallowCompare.ts | 9 -------- frontend/apps/remark42/templates/comments.ejs | 2 +- frontend/apps/remark42/templates/iframe.ejs | 2 +- 22 files changed, 14 insertions(+), 102 deletions(-) delete mode 100644 frontend/apps/remark42/app/utils/bench.ts delete mode 100644 frontend/apps/remark42/app/utils/debug-node.ts delete mode 100644 frontend/apps/remark42/app/utils/derequire.ts delete mode 100644 frontend/apps/remark42/app/utils/shallowCompare.ts diff --git a/frontend/apps/remark42/app/common/api.ts b/frontend/apps/remark42/app/common/api.ts index 81b0cab148..d1ddc6e75e 100644 --- a/frontend/apps/remark42/app/common/api.ts +++ b/frontend/apps/remark42/app/common/api.ts @@ -9,8 +9,6 @@ export const getConfig = (): Promise => apiFetcher.get('/config'); export const getPostComments = (sort: Sorting) => apiFetcher.get('/find', { url, sort, format: 'tree' }); -export const getComment = (id: Comment['id']): Promise => apiFetcher.get(`/id/${id}`, { url }); - export const getUserComments = ( userId: User['id'], config: { limit: number; skip?: number } = { limit: 10, skip: 0 } diff --git a/frontend/apps/remark42/app/common/cookies.ts b/frontend/apps/remark42/app/common/cookies.ts index 6acf336c28..7ee493134d 100644 --- a/frontend/apps/remark42/app/common/cookies.ts +++ b/frontend/apps/remark42/app/common/cookies.ts @@ -43,7 +43,3 @@ export function getCookie(name: string) { return matches ? decodeURIComponent(matches[1]) : undefined; } - -export function deleteCookie(name: string) { - setCookie(name, '', { expires: -1 }); -} diff --git a/frontend/apps/remark42/app/common/fetcher.ts b/frontend/apps/remark42/app/common/fetcher.ts index c812e17f08..be2aff3b98 100644 --- a/frontend/apps/remark42/app/common/fetcher.ts +++ b/frontend/apps/remark42/app/common/fetcher.ts @@ -69,9 +69,7 @@ const createFetcher = (baseUrl: string = ''): Methods => { // TODO: it should be clarified when frontend gets this header and what could be in it to simplify this logic and cover by tests const date = (res.headers.has('date') && res.headers.get('date')) || ''; const timestamp = isNaN(Date.parse(date)) ? 0 : Date.parse(date); - const timeDiff = (new Date().getTime() - timestamp) / 1000; - - StaticStore.serverClientTimeDiff = timeDiff; + StaticStore.serverClientTimeDiff = (new Date().getTime() - timestamp) / 1000; // backend could update jwt in any time. so, we should handle it if (res.headers.has(JWT_HEADER)) { diff --git a/frontend/apps/remark42/app/common/types.ts b/frontend/apps/remark42/app/common/types.ts index 2b7b0ee078..ad39bd9c6c 100644 --- a/frontend/apps/remark42/app/common/types.ts +++ b/frontend/apps/remark42/app/common/types.ts @@ -72,12 +72,6 @@ export interface Comment { */ hidden?: boolean; } - -export interface CommentsResponse { - comments: Comment[]; - count: number; -} - export interface Node { comment: Comment; replies?: Node[]; diff --git a/frontend/apps/remark42/app/components/auth/auth.hooks.ts b/frontend/apps/remark42/app/components/auth/auth.hooks.ts index 1ea009d234..f8ab27c33f 100644 --- a/frontend/apps/remark42/app/components/auth/auth.hooks.ts +++ b/frontend/apps/remark42/app/components/auth/auth.hooks.ts @@ -123,7 +123,7 @@ export function useErrorMessage(): [string | null, (e: unknown) => void] { } const errorReason = - err instanceof RequestError || (isObject(err) && typeof (err as Record).error === 'string') + err instanceof RequestError || isObject(err) ? (err as Record<'error', string>).error : err instanceof Error ? err.message diff --git a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx index 49dc17925a..38de6db512 100644 --- a/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx +++ b/frontend/apps/remark42/app/components/comment-form/__subscribe-by-email/comment-form__subscribe-by-email.tsx @@ -26,7 +26,6 @@ const emailRegexp = /[^@]+@[^.]+\..+/; enum Step { Email, Token, - Final, Close, Subscribed, Unsubscribed, diff --git a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx index bdc8f01103..d4e8055b0b 100644 --- a/frontend/apps/remark42/app/components/comment-form/comment-form.tsx +++ b/frontend/apps/remark42/app/components/comment-form/comment-form.tsx @@ -112,7 +112,7 @@ export class CommentForm extends Component { onInput = (e: Event) => { const { value } = e.target as HTMLInputElement; - const text = value.substr(0, StaticStore.config.max_comment_size); + const text = value.substring(0, StaticStore.config.max_comment_size); updatePersistedComments(this.props.id, value); diff --git a/frontend/apps/remark42/app/components/comment/comment-votes.spec.tsx b/frontend/apps/remark42/app/components/comment/comment-votes.spec.tsx index 241b9092ce..1d45007eeb 100644 --- a/frontend/apps/remark42/app/components/comment/comment-votes.spec.tsx +++ b/frontend/apps/remark42/app/components/comment/comment-votes.spec.tsx @@ -56,7 +56,7 @@ describe('', () => { ['downvote', -1, 'Vote down', 'Vote up', 'downVoteButtonActive'], ])( 'should go throught voting process and communicate with store when %s button is clicked', - async (_, increment, activeButtonText, secondButtonText, activeButtonClass) => { + async (_, increment, activeButtonText, secondButtonText) => { const putCommentVoteSpy = jest .spyOn(api, 'putCommentVote') .mockImplementationOnce(({ vote }) => Promise.resolve({ id: '1', score: 10 + vote })); diff --git a/frontend/apps/remark42/app/components/comment/comment-votes.tsx b/frontend/apps/remark42/app/components/comment/comment-votes.tsx index 8cc39badfe..acc98ad14c 100644 --- a/frontend/apps/remark42/app/components/comment/comment-votes.tsx +++ b/frontend/apps/remark42/app/components/comment/comment-votes.tsx @@ -21,7 +21,7 @@ type Props = { disabled?: boolean; }; -export function CommentVotes({ id, votes, vote, disabled, controversy = 0 }: Props) { +export function CommentVotes({ id, votes, vote, disabled }: Props) { const intl = useIntl(); const dispatch = useDispatch(); const [loadingState, setLoadingState] = useState<{ vote: number; votes: number } | null>(null); diff --git a/frontend/apps/remark42/app/components/comment/comment.tsx b/frontend/apps/remark42/app/components/comment/comment.tsx index 8a7de07201..3bd279dc52 100644 --- a/frontend/apps/remark42/app/components/comment/comment.tsx +++ b/frontend/apps/remark42/app/components/comment/comment.tsx @@ -62,7 +62,6 @@ export interface State { } export class Comment extends Component { - votingPromise: Promise = Promise.resolve(); /** comment text node. Used in comment text copying */ textNode = createRef(); @@ -175,16 +174,6 @@ export class Comment extends Component { } }; - onBlockUserClick = (evt: Event) => { - const target = evt.currentTarget; - - if (target instanceof HTMLOptionElement) { - // we have to debounce the blockUser function calls otherwise it will be - // called 2 times (by change event and by blur event) - this.blockUser(target.value as BlockTTL); - } - }; - blockUser = debounce((ttl: BlockTTL): void => { const { user } = this.props.data; const blockingDurations = getBlockingDurations(this.props.intl); @@ -427,7 +416,7 @@ export class Comment extends Component { /> )} - {!isAdmin && !!o.user.verified && props.view !== 'user' && ( + {!isAdmin && o.user.verified && props.view !== 'user' && ( )} {o.user.paid_sub && ( @@ -560,7 +549,7 @@ function getTextSnippet(html: string) { tmp.innerHTML = html.replace('

', ' '); const result = tmp.innerText || ''; - const snippet = result.substr(0, LENGTH); + const snippet = result.substring(0, LENGTH); return snippet.length === LENGTH && result.length !== LENGTH ? `${snippet}...` : snippet; } diff --git a/frontend/apps/remark42/app/components/root/root.tsx b/frontend/apps/remark42/app/components/root/root.tsx index cf4989d96b..5becc5e6d5 100644 --- a/frontend/apps/remark42/app/components/root/root.tsx +++ b/frontend/apps/remark42/app/components/root/root.tsx @@ -11,7 +11,6 @@ import { COMMENT_NODE_CLASSNAME_PREFIX, MAX_SHOWN_ROOT_COMMENTS, THEMES, IS_MOBI import { maxShownComments, url } from 'common/settings'; import { - setUser, fetchUser, blockUser, unblockUser, @@ -20,7 +19,7 @@ import { unhideUser, signout, } from 'store/user/actions'; -import { fetchComments, addComment, updateComment, unsetCommentMode } from 'store/comments/actions'; +import { fetchComments, addComment, updateComment } from 'store/comments/actions'; import { setCommentsReadOnlyState } from 'store/post-info/actions'; import { setTheme } from 'store/theme/actions'; @@ -73,7 +72,6 @@ const mapStateToProps = (state: StoreState) => ({ const boundActions = bindActions({ fetchComments, - setUser, fetchUser, fetchBlockedUsers, setTheme, @@ -85,7 +83,6 @@ const boundActions = bindActions({ addComment, updateComment, setCollapse, - unsetCommentMode, signout, }); diff --git a/frontend/apps/remark42/app/components/settings/settings.tsx b/frontend/apps/remark42/app/components/settings/settings.tsx index aff7419c85..a9b1c33076 100644 --- a/frontend/apps/remark42/app/components/settings/settings.tsx +++ b/frontend/apps/remark42/app/components/settings/settings.tsx @@ -91,8 +91,7 @@ class SettingsComponent extends Component { }; __isUserHidden = (user: User): boolean => { - if (this.state.unhiddenUsers.indexOf(user.id) === -1) return true; - return false; + return !this.state.unhiddenUsers.includes(user.id); }; render({ user, theme }: Props, { blockedUsers, unblockedUsers, unhiddenUsers }: State) { diff --git a/frontend/apps/remark42/app/components/textarea-autosize.tsx b/frontend/apps/remark42/app/components/textarea-autosize.tsx index d8e33785cc..e0da9b4750 100644 --- a/frontend/apps/remark42/app/components/textarea-autosize.tsx +++ b/frontend/apps/remark42/app/components/textarea-autosize.tsx @@ -2,7 +2,7 @@ import { h, JSX } from 'preact'; import { forwardRef } from 'preact/compat'; import { useEffect, useRef } from 'preact/hooks'; -function autoResize(textarea: HTMLTextAreaElement, onResize?: () => void) { +function autoResize(textarea: HTMLTextAreaElement) { textarea.style.height = ''; textarea.style.height = `${textarea.scrollHeight}px`; } diff --git a/frontend/apps/remark42/app/hooks/useTheme.ts b/frontend/apps/remark42/app/hooks/useTheme.ts index fd04a94550..38eec0f47c 100644 --- a/frontend/apps/remark42/app/hooks/useTheme.ts +++ b/frontend/apps/remark42/app/hooks/useTheme.ts @@ -4,7 +4,5 @@ import { StoreState } from 'store'; import { Theme } from 'common/types'; export function useTheme() { - const theme = useSelector(({ theme }) => theme); - - return theme; + return useSelector(({ theme }) => theme); } diff --git a/frontend/apps/remark42/app/typings/global.d.ts b/frontend/apps/remark42/app/typings/global.d.ts index 0a52cade2a..7b50bea711 100644 --- a/frontend/apps/remark42/app/typings/global.d.ts +++ b/frontend/apps/remark42/app/typings/global.d.ts @@ -33,19 +33,4 @@ declare global { | undefined; }; } - - namespace NodeJS { - interface Global { - Headers: typeof Headers; - localStorage: typeof Storage; - } - } } - -/** - * Variable responsive for dynamic setting public path for - * assets. Dynamic imports with relative url will be resolved over this path. - * - * https://webpack.js.org/guides/public-path/#on-the-fly - */ -declare let __webpack_public_path__: string; diff --git a/frontend/apps/remark42/app/utils/bench.ts b/frontend/apps/remark42/app/utils/bench.ts deleted file mode 100644 index 308bd8c8b4..0000000000 --- a/frontend/apps/remark42/app/utils/bench.ts +++ /dev/null @@ -1,8 +0,0 @@ -export function bench(fn: () => T, label = 'bench'): T { - const d = performance.now(); - const r = fn(); - const dd = performance.now(); - // eslint-disable-next-line no-console - console.info(label, dd - d); - return r; -} diff --git a/frontend/apps/remark42/app/utils/debug-node.ts b/frontend/apps/remark42/app/utils/debug-node.ts deleted file mode 100644 index 5e61341be2..0000000000 --- a/frontend/apps/remark42/app/utils/debug-node.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Node } from 'common/types'; - -/** - * Function to debug node tree. - */ -export function debugNode(n: Node): Node { - const d = (n: Node, level: number): void => { - // eslint-disable-next-line no-console - console.log( - `${' '.repeat(level)}${n.comment.text.trim()} | id: ${n.comment.id} | delete: ${n.comment.delete} | pin: ${ - n.comment.pin - }` - ); - if (n.replies) { - for (const node of n.replies) { - d(node, level + 1); - } - } - }; - d(n, 0); - return n; -} diff --git a/frontend/apps/remark42/app/utils/derequire.ts b/frontend/apps/remark42/app/utils/derequire.ts deleted file mode 100644 index 780ac31bb2..0000000000 --- a/frontend/apps/remark42/app/utils/derequire.ts +++ /dev/null @@ -1,2 +0,0 @@ -/** type that makes certain properties of type optional */ -export type Derequire = Pick> & Partial>; diff --git a/frontend/apps/remark42/app/utils/replaceSelection.ts b/frontend/apps/remark42/app/utils/replaceSelection.ts index e7ebc86c62..96f944082d 100644 --- a/frontend/apps/remark42/app/utils/replaceSelection.ts +++ b/frontend/apps/remark42/app/utils/replaceSelection.ts @@ -1,3 +1,3 @@ export function replaceSelection(text: string, selection: [number, number], replacement: string): string { - return text.substr(0, selection[0]) + replacement + text.substr(selection[1]); + return text.substring(0, selection[0]) + replacement + text.substring(selection[1]); } diff --git a/frontend/apps/remark42/app/utils/shallowCompare.ts b/frontend/apps/remark42/app/utils/shallowCompare.ts deleted file mode 100644 index ccf4d73cd3..0000000000 --- a/frontend/apps/remark42/app/utils/shallowCompare.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function shallowCompare>(a: T, b: T): boolean { - const entriesA = Object.entries(a); - const keysB = Object.keys(b); - if (entriesA.length !== keysB.length) return false; - for (const [key, value] of entriesA) { - if (value !== b[key]) return false; - } - return true; -} diff --git a/frontend/apps/remark42/templates/comments.ejs b/frontend/apps/remark42/templates/comments.ejs index fe67bb98ac..54aa10f9c4 100644 --- a/frontend/apps/remark42/templates/comments.ejs +++ b/frontend/apps/remark42/templates/comments.ejs @@ -52,7 +52,7 @@ var query = (function () { if (window.location.search.length === 0) return {}; return window.location.search - .substr(1) + .substring(1) .split('&') .map(function (item) { return item.split('='); diff --git a/frontend/apps/remark42/templates/iframe.ejs b/frontend/apps/remark42/templates/iframe.ejs index 8606c7c7a9..eebe7d5875 100644 --- a/frontend/apps/remark42/templates/iframe.ejs +++ b/frontend/apps/remark42/templates/iframe.ejs @@ -75,7 +75,7 @@ window.location.search.length < 2 ? {} : window.location.search - .substr(1) + .substring(1) .split('&') .reduce(function (c, x) { var splitted = x.split('=');