Merge branch 'release' into beta

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Experimental
 
+## [1.132.0] - 2024-05-27
+### Added
+- Ability to "unlock" and preview comments from the banned users and with reply
+  to the banned users.
+### Fixed
+- Fixed a bug where the first partial opening of comments ("show last N") would
+  open one extra comment.
+
 ## [1.131.3] - 2024-05-08
 ### Fixed
 - Separate local and remote file list changes in the file uploader (finish the

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reactive-pepyatka",
-  "version": "1.131.3",
+  "version": "1.132.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
@@ -14,7 +14,7 @@
     "date-fns": "~3.6.0",
     "debug": "~4.3.4",
     "events": "~3.3.0",
-    "filesize": "~10.1.1",
+    "filesize": "~10.1.2",
     "final-form": "~4.20.10",
     "focus-trap-react": "~10.2.3",
     "focus-visible": "~5.2.0",
@@ -40,7 +40,7 @@
     "react-select": "~5.8.0",
     "react-sortablejs": "~6.1.4",
     "react-textarea-autosize": "~8.5.3",
-    "recharts": "~2.12.6",
+    "recharts": "~2.12.7",
     "redux": "~5.0.1",
     "snarkdown": "~2.0.0",
     "social-text-tokenizer": "~3.0.0",
@@ -49,7 +49,7 @@
     "tabbable": "~6.2.0",
     "ua-parser-js": "~1.0.37",
     "use-subscription": "~1.8.2",
-    "validator": "~13.11.0",
+    "validator": "~13.12.0",
     "vazirmatn": "^33.0.3",
     "whatwg-fetch": "~3.6.20"
   },
@@ -59,23 +59,23 @@
     "@babel/preset-react": "~7.24.1",
     "@gfx/zopfli": "~1.0.15",
     "@testing-library/jest-dom": "~6.4.5",
-    "@testing-library/react": "~15.0.6",
+    "@testing-library/react": "~15.0.7",
     "@testing-library/react-hooks": "~8.0.1",
     "@testing-library/user-event": "~14.5.2",
-    "@vitejs/plugin-legacy": "~5.3.2",
+    "@vitejs/plugin-legacy": "~5.4.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "cross-env": "~7.0.3",
-    "esbuild": "~0.20.2",
+    "esbuild": "~0.21.3",
     "eslint": "~8.56.0",
     "eslint-config-prettier": "~9.1.0",
     "eslint-plugin-babel": "~5.3.1",
     "eslint-plugin-import": "~2.29.1",
-    "eslint-plugin-lodash": "~7.4.0",
+    "eslint-plugin-lodash": "~8.0.0",
     "eslint-plugin-prettier": "~5.1.3",
     "eslint-plugin-promise": "~6.1.1",
     "eslint-plugin-react": "~7.34.1",
     "eslint-plugin-react-hooks": "~4.6.2",
-    "eslint-plugin-unicorn": "~52.0.0",
+    "eslint-plugin-unicorn": "~53.0.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "~6.14.0",
     "husky": "~8.0.3",
     "jsdom": "~24.0.0",
@@ -85,9 +85,9 @@
     "prettier": "~3.2.5",
     "querystring": "~0.2.1",
     "react-test-renderer": "~18.3.1",
-    "rimraf": "~5.0.5",
-    "sass": "^1.76.0",
-    "sinon": "~17.0.1",
+    "rimraf": "~5.0.7",
+    "sass": "^1.77.2",
+    "sinon": "~18.0.0",
     "stylelint": "~16.5.0",
     "stylelint-config-prettier": "~9.0.5",
     "stylelint-config-standard-scss": "~13.1.0",

src/components/alternative-text.jsx

@@ -0,0 +1,29 @@
+import cn from 'classnames';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { Icon } from './fontawesome-icons';
+import { ButtonLink } from './button-link';
+import style from './alternative-text.module.scss';
+
+export function AlternativeText({
+  status,
+  icon,
+  isError = false,
+  inComment = false,
+  close,
+  children,
+}) {
+  return (
+    <div className={cn(style.box, inComment && style.inComment)}>
+      <div className={cn(style.status, isError && style.statusError)}>
+        <span className={style.icon}>
+          <Icon icon={icon} />
+        </span>
+        <span className={style.statusText}>{status}</span>
+        <ButtonLink onClick={close} aria-label="Close" className={style.closeIcon}>
+          <Icon icon={faTimes} />
+        </ButtonLink>
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+}

src/components/comment-likers.js

@@ -8,10 +8,11 @@ import { initialAsyncState } from '../redux/async-helpers';
  * Load and return all likers of the given comment
  *
  * @param {string} id
+ * @param {boolean} suppress do not load likes (when we know they aren't available)
  */
-export function useCommentLikers(id) {
+export function useCommentLikers(id, suppress = false) {
   const dispatch = useDispatch();
-  useEffect(() => void dispatch(getCommentLikes(id)), [dispatch, id]);
+  useEffect(() => void (!suppress && dispatch(getCommentLikes(id))), [suppress, dispatch, id]);
   return useSelector((state) => {
     const { status = initialAsyncState, likes = [] } = state.commentLikes[id] || {};
     return {

src/components/footer.jsx

@@ -7,7 +7,7 @@ export default function Footer({ short }) {
   return (
     <footer className="footer">
       <p role="navigation">
-        &copy; FreeFeed 1.131.3-beta (May 8, 2024)
+        &copy; FreeFeed 1.132.0-beta (May 27, 2024)
         <br />
         <Link to="/about">About</Link>
         {' | '}

src/components/post/post-comment-more-menu.jsx

@@ -9,6 +9,7 @@ import {
   faEdit,
   faHeartBroken,
   faLink,
+  faLockOpen,
   faUserFriends,
 } from '@fortawesome/free-solid-svg-icons';
 import { faHeart, faClock, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
@@ -35,6 +36,7 @@ export const PostCommentMoreMenu = forwardRef(function PostCommentMore(
     doLike,
     doUnlike,
     doShowLikes,
+    doUnlock,
     getBackwardIdx,
     createdAt,
     updatedAt,
@@ -46,7 +48,7 @@ export const PostCommentMoreMenu = forwardRef(function PostCommentMore(
   },
   menuRef,
 ) {
-  const { status, likers } = useCommentLikers(id);
+  const { status, likers } = useCommentLikers(id, isHidden);
   const myUsername = useSelector((state) => state.user.username);
   const bIdx = getBackwardIdx();
   const arrows = bIdx <= 4 ? '^'.repeat(bIdx) : `^${bIdx}`;
@@ -113,6 +115,13 @@ export const PostCommentMoreMenu = forwardRef(function PostCommentMore(
       !isHidden && (
         <MenuItemTranslate key="translate" type="comment" id={id} doAndClose={doAndClose} />
       ),
+      doUnlock && (
+        <div key="unlock" className={styles.item}>
+          <ButtonLink onClick={doUnlock} className={styles.link}>
+            <Iconic icon={faLockOpen}>Show comment</Iconic>
+          </ButtonLink>
+        </div>
+      ),
     ],
     [
       doDelete && authorUsername !== myUsername && (

src/components/post/post-comment.jsx

@@ -5,7 +5,10 @@ import classnames from 'classnames';
 import { connect } from 'react-redux';
 
 import { preventDefault, confirmFirst } from '../../utils';
-import { READMORE_STYLE_COMPACT } from '../../utils/frontend-preferences-options';
+import {
+  HIDDEN_AUTHOR_BANNED,
+  READMORE_STYLE_COMPACT,
+} from '../../utils/frontend-preferences-options';
 import { commentReadmoreConfig } from '../../utils/readmore-config';
 import { defaultCommentState } from '../../redux/reducers/comment-edit';
 
@@ -22,6 +25,7 @@ import { Separated } from '../separated';
 import { TranslatedText } from '../translated-text';
 import { initialAsyncState } from '../../redux/async-helpers';
 import { existingCommentURI, newCommentURI } from '../../services/drafts';
+import { UnlockedHiddenComment } from '../unlocked-hidden-comment';
 import { PostCommentMore } from './post-comment-more';
 import { PostCommentPreview } from './post-comment-preview';
 import { CommentProvider } from './post-comment-provider';
@@ -36,6 +40,7 @@ class PostComment extends Component {
     previewSeqNumber: 0,
     previewLeft: 0,
     previewTop: 0,
+    unlockHidden: false,
   };
 
   scrollToComment = () => {
@@ -158,9 +163,13 @@ class PostComment extends Component {
       canLike: !ownComment && !this.isHidden(),
       canReply: !this.isHidden() && this.props.canAddComment,
       canDelete: this.props.isEditable || this.props.isDeletable,
+      canUnlock: this.props.hideType === HIDDEN_AUTHOR_BANNED || this.props.isReplyToBanned,
     };
   }
 
+  unlockHidden = () => this.setState({ unlockHidden: true });
+  lockHidden = () => this.setState({ unlockHidden: false });
+
   // We use this strange data structure because there can be more than one
   // PostCommentMore element created in the comment (see Expandable/bonusInfo).
   _moreMenuOpeners = [];
@@ -171,7 +180,7 @@ class PostComment extends Component {
   onMoreMenuOpened = (moreMenuOpened) => this.setState({ moreMenuOpened });
 
   commentTail() {
-    const { canLike, canReply, canDelete } = this.possibleActions();
+    const { canLike, canReply, canDelete, canUnlock } = this.possibleActions();
     return (
       <span
         aria-label={
@@ -229,6 +238,7 @@ class PostComment extends Component {
                   doMention={canReply && this.mention}
                   doLike={canLike && !this.props.hasOwnLike && this.like}
                   doUnlike={canLike && this.props.hasOwnLike && this.unlike}
+                  doUnlock={canUnlock && this.unlockHidden}
                   getBackwardIdx={this.backwardIdx}
                   createdAt={this.props.createdAt}
                   updatedAt={this.props.updatedAt}
@@ -266,6 +276,15 @@ class PostComment extends Component {
     if (this.isHidden()) {
       return (
         <div className="comment-body">
+          {this.state.unlockHidden && (
+            <UnlockedHiddenComment
+              id={this.props.id}
+              userHover={this.props.authorHighlightHandlers}
+              arrowHover={this.arrowHoverHandlers}
+              arrowClick={this.arrowClick}
+              close={this.lockHidden}
+            />
+          )}
           <span className="comment-text">{this.hiddenBody()}</span>
           {commentTail}
         </div>

src/components/post/post-comments/index.jsx

@@ -29,8 +29,6 @@ export default class PostComments extends Component {
     commentsAfterFold: foldConf.afterFold,
     minFoldedComments: foldConf.minFolded,
     minToCollapse: foldConf.minToCollapse,
-    minToSteppedFold: foldConf.minToSteppedFold,
-    foldStep: foldConf.foldStep,
     preopened: false,
   };
 
@@ -310,13 +308,25 @@ export default class PostComments extends Component {
   };
 
   expandComments = (count = 0) => {
+    const { post, commentsAfterFold, showMoreComments, comments } = this.props;
     if (count > 0) {
+      if (post.omittedComments > 0) {
+        // Correction for the case when the server is configured to return less
+        // than 'commentsAfterFold' after a fold. We should correct the number
+        // of comments to be opened, otherwise more comments will be opened than
+        // necessary.
+        //
+        // The "comments.length - post.omittedCommentsOffset" is the server's
+        // number of comments after the fold. The "commentsAfterFold" is the
+        // client's desired number of comments after the fold.
+        count += comments.length - post.omittedCommentsOffset - commentsAfterFold;
+      }
       this.setState({ folded: true, addedToTail: this.state.addedToTail + count });
     } else {
       this.setState({ folded: false, addedToTail: 0 });
     }
-    if (this.props.post.omittedComments > 0) {
-      this.props.showMoreComments(this.props.post.id);
+    if (post.omittedComments > 0) {
+      showMoreComments(this.props.post.id);
     }
   };
 

src/components/translated-text.jsx

@@ -1,16 +1,12 @@
 import ISO6391 from 'iso-639-1';
 import { useDispatch, useSelector } from 'react-redux';
-import cn from 'classnames';
 import { useCallback } from 'react';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { initialAsyncState } from '../redux/async-helpers';
 import { resetTranslation } from '../redux/action-creators';
 import { useServerValue } from './hooks/server-info';
 import PieceOfText from './piece-of-text';
-import { Icon } from './fontawesome-icons';
 import { faTranslate } from './fontawesome-custom-icons';
-import { ButtonLink } from './button-link';
-import style from './translated-text.module.scss';
+import { AlternativeText } from './alternative-text';
 
 const selectTranslationService = (serverInfo) => serverInfo.textTranslation.serviceTitle;
 
@@ -27,29 +23,31 @@ export function TranslatedText({ type, id, userHover, arrowHover, arrowClick })
   }
   if (status.loading) {
     return (
-      <Layout
+      <AlternativeText
+        icon={faTranslate}
         status={`Translating using ${serviceTitle}...`}
         inComment={type === 'comment'}
-        reset={reset}
+        close={reset}
       />
     );
   }
   if (status.error) {
     return (
-      <Layout
-        isError
+      <AlternativeText
+        icon={faTranslate}
         status={`Translation error: ${status.errorText}`}
         inComment={type === 'comment'}
-        reset={reset}
+        close={reset}
       />
     );
   }
 
   return (
-    <Layout
+    <AlternativeText
+      icon={faTranslate}
       status={`Translated from ${ISO6391.getName(result.detectedLang)} using ${serviceTitle}:`}
       inComment={type === 'comment'}
-      reset={reset}
+      close={reset}
     >
       <PieceOfText
         isExpanded
@@ -58,23 +56,6 @@ export function TranslatedText({ type, id, userHover, arrowHover, arrowClick })
         arrowHover={arrowHover}
         arrowClick={arrowClick}
       />
-    </Layout>
-  );
-}
-
-function Layout({ status, isError = false, inComment = false, reset, children }) {
-  return (
-    <div className={cn(style.box, inComment && style.inComment)}>
-      <div className={cn(style.status, isError && style.statusError)}>
-        <span className={style.icon}>
-          <Icon icon={faTranslate} />
-        </span>
-        <span className={style.statusText}>{status}</span>
-        <ButtonLink onClick={reset} aria-label="Close" className={style.closeIcon}>
-          <Icon icon={faTimes} />
-        </ButtonLink>
-      </div>
-      <div>{children}</div>
-    </div>
+    </AlternativeText>
   );
 }