Merge branch 'release' into beta

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Experimental
 
+## [1.131.0] - 2024-05-05
+### Added
+- Allow to unfold comments step by step on the home and feed pages.
+### Fixed
+- Fixed a bug that caused not all uploaded files to be attached to a post.
+
 ## [1.130.0] - 2024-04-26
 ### Added
 - Support for symmetric bans: comments of users, who have banned the viewer, are

config/default.js

@@ -116,7 +116,7 @@ export default {
     // A minimum number of omitted comments when the stepped folding is appear
     minToSteppedFold: 15,
     // A value of the stepped folding
-    foldStep: 10,
+    foldStep: 5,
   },
 
   // if false, new users are public by default

package.json

@@ -1,13 +1,13 @@
 {
   "name": "reactive-pepyatka",
-  "version": "1.130.0",
+  "version": "1.131.0",
   "description": "",
   "main": "index.js",
   "dependencies": {
     "@fortawesome/free-brands-svg-icons": "~5.15.4",
     "@fortawesome/free-regular-svg-icons": "~5.15.4",
     "@fortawesome/free-solid-svg-icons": "~5.15.4",
-    "@sentry/react": "~7.112.2",
+    "@sentry/react": "~7.113.0",
     "autotrack": "~2.4.1",
     "classnames": "~2.5.1",
     "custom-event": "~1.0.1",
@@ -22,19 +22,19 @@
     "keycode-js": "~3.1.0",
     "local-storage-fallback": "~4.1.2",
     "lodash-es": "~4.17.21",
-    "lru-cache": "~10.2.1",
+    "lru-cache": "~10.2.2",
     "memoize-one": "~6.0.0",
     "mousetrap": "~1.6.5",
     "photoswipe": "~5.4.3",
     "porter-stemmer": "~0.9.1",
     "prop-types": "~15.8.1",
-    "react": "~18.3.0",
-    "react-dom": "~18.3.0",
+    "react": "~18.3.1",
+    "react-dom": "~18.3.1",
     "react-final-form-hooks": "~2.0.2",
     "react-google-recaptcha": "~3.1.0",
     "react-helmet": "~6.1.0",
     "react-portal": "~4.2.2",
-    "react-redux": "~9.1.1",
+    "react-redux": "~9.1.2",
     "react-router": "~3.2.6",
     "react-router-redux": "~4.0.8",
     "react-select": "~5.8.0",
@@ -48,18 +48,18 @@
     "sortablejs": "~1.15.2",
     "tabbable": "~6.2.0",
     "ua-parser-js": "~1.0.37",
-    "use-subscription": "~1.8.1",
+    "use-subscription": "~1.8.2",
     "validator": "~13.11.0",
     "vazirmatn": "^33.0.3",
     "whatwg-fetch": "~3.6.20"
   },
   "devDependencies": {
-    "@babel/core": "~7.24.4",
-    "@babel/eslint-parser": "~7.24.1",
+    "@babel/core": "~7.24.5",
+    "@babel/eslint-parser": "~7.24.5",
     "@babel/preset-react": "~7.24.1",
     "@gfx/zopfli": "~1.0.15",
-    "@testing-library/jest-dom": "~6.4.2",
-    "@testing-library/react": "~14.3.1",
+    "@testing-library/jest-dom": "~6.4.5",
+    "@testing-library/react": "~15.0.6",
     "@testing-library/react-hooks": "~8.0.1",
     "@testing-library/user-event": "~14.5.2",
     "@vitejs/plugin-legacy": "~5.3.2",
@@ -74,8 +74,8 @@
     "eslint-plugin-prettier": "~5.1.3",
     "eslint-plugin-promise": "~6.1.1",
     "eslint-plugin-react": "~7.34.1",
-    "eslint-plugin-react-hooks": "~4.6.1",
-    "eslint-plugin-unicorn": "~50.0.1",
+    "eslint-plugin-react-hooks": "~4.6.2",
+    "eslint-plugin-unicorn": "~52.0.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "~6.14.0",
     "husky": "~8.0.3",
     "jsdom": "~24.0.0",
@@ -84,24 +84,24 @@
     "npm-run-all": "~4.1.5",
     "prettier": "~3.2.5",
     "querystring": "~0.2.1",
-    "react-test-renderer": "~18.3.0",
+    "react-test-renderer": "~18.3.1",
     "rimraf": "~5.0.5",
-    "sass": "^1.75.0",
+    "sass": "^1.76.0",
     "sinon": "~17.0.1",
-    "stylelint": "~16.4.0",
+    "stylelint": "~16.5.0",
     "stylelint-config-prettier": "~9.0.5",
     "stylelint-config-standard-scss": "~13.1.0",
     "stylelint-prettier": "~5.0.0",
-    "stylelint-scss": "~6.2.1",
-    "terser": "~5.30.4",
+    "stylelint-scss": "~6.3.0",
+    "terser": "~5.31.0",
     "unexpected": "~13.2.1",
     "unexpected-react": "~6.0.2",
     "unexpected-sinon": "~11.1.0",
     "url": "~0.11.3",
-    "vite": "~5.2.10",
+    "vite": "~5.2.11",
     "vite-plugin-compression": "~0.5.1",
     "vite-plugin-generate-file": "~0.1.1",
-    "vitest": "~1.5.2"
+    "vitest": "~1.6.0"
   },
   "scripts": {
     "start": "vite",

src/components/expandable.jsx

@@ -1,5 +1,4 @@
-import { Component } from 'react';
-import ReactDOM from 'react-dom';
+import { Component, createRef } from 'react';
 import classnames from 'classnames';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { Icon } from './fontawesome-icons';
@@ -12,6 +11,8 @@ const DEFAULT_ABOVE_FOLD_LINES = 5;
 const DEFAULT_KEY = 'default';
 
 export default class Expandable extends Component {
+  root = createRef(null);
+
   constructor(props) {
     super(props);
     this.state = {
@@ -37,7 +38,7 @@ export default class Expandable extends Component {
     const cn = classnames(['expandable', { expanded, folded: !expanded }]);
     const style = { maxHeight: expanded ? '' : `${this.state.maxHeight}px` };
     return (
-      <div className={cn} style={style}>
+      <div className={cn} style={style} ref={this.root}>
         <ErrorBoundary>
           {this.props.children}
           {!expanded && (
@@ -61,7 +62,7 @@ export default class Expandable extends Component {
 
   rewrap() {
     const { maxLines, aboveFoldLines } = chooseLineCounts(this.props.config, window.innerWidth);
-    const node = ReactDOM.findDOMNode(this);
+    const node = this.root.current;
     const lines = gatherContentLines(node, '.Linkify', '.p-break');
     const shouldExpand = lines.length <= (maxLines || DEFAULT_MAX_LINES);
     const [readMorePanel] = node.querySelectorAll('.expand-panel');

src/components/footer.jsx

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

src/components/friends-page/styles.module.scss

@@ -23,7 +23,7 @@
   word-wrap: break-word;
   font-size: rem(12px);
   line-height: rem(16px);
-  margin: 0 rem(6px) rem(20px) rem(6px);
+  margin: 0 rem(6px) rem(20px);
 }
 
 .userCellPlaceholder {

src/components/uploader/uploader.js

@@ -27,31 +27,15 @@ export function useUploader({
   const [, forceUpdate] = useBool();
 
   // Attachments management
-  const [fileIds, _setFileIds] = useState(() => getDraft(draftKey)?.fileIds ?? initialFileIds);
-
-  const updateFileIds = useCallback(
-    (action) => {
-      const nextIds = action(fileIds);
-      _setFileIds(nextIds);
-      if (draftKey) {
-        const st = store.getState();
-        setDraftField(
-          draftKey,
-          'files',
-          nextIds.map((id) => st.attachments[id]),
-        );
-      }
-    },
-    [draftKey, fileIds, store],
-  );
+  const [fileIds, setFileIds] = useState(() => getDraft(draftKey)?.fileIds ?? initialFileIds);
 
   const removeFile = useCallback(
-    (idToRemove) => updateFileIds((ids) => ids.filter((id) => id !== idToRemove)),
-    [updateFileIds],
+    (idToRemove) => setFileIds((ids) => ids.filter((id) => id !== idToRemove)),
+    [],
   );
   const reorderFiles = useCallback(
-    (reorderedIds) => updateFileIds((oldIds) => uniq(reorderedIds.concat(oldIds))),
-    [updateFileIds],
+    (reorderedIds) => setFileIds((oldIds) => uniq(reorderedIds.concat(oldIds))),
+    [],
   );
 
   useEffect(() => {
@@ -60,10 +44,22 @@ export function useUploader({
     }
     return subscribeToDrafts(() => {
       const fileIds = getDraft(draftKey)?.fileIds ?? initialFileIds;
-      _setFileIds(fileIds);
+      setFileIds(fileIds);
     });
   }, [draftKey, initialFileIds]);
 
+  useEffect(() => {
+    if (!draftKey) {
+      return;
+    }
+    const st = store.getState();
+    setDraftField(
+      draftKey,
+      'files',
+      fileIds.map((id) => st.attachments[id]),
+    );
+  }, [draftKey, fileIds, store]);
+
   const isUploading = useMemo(
     () => [...uploadIds].some((id) => statuses[id]?.loading),
     [statuses, uploadIds],
@@ -116,11 +112,11 @@ export function useUploader({
     for (const id of uploadIds) {
       if (statuses[id]?.success && unfinishedFiles.has(id)) {
         unfinishedFiles.delete(id);
-        updateFileIds((ids) => [...ids, allUploads[id].attachment.id]);
+        setFileIds((ids) => [...ids, allUploads[id].attachment.id]);
         onSuccess?.(allUploads[id].attachment, id);
       }
     }
-  }, [allUploads, onSuccess, statuses, unfinishedFiles, updateFileIds, uploadIds]);
+  }, [allUploads, onSuccess, statuses, unfinishedFiles, uploadIds]);
 
   const uploadProgressProps = useMemo(
     () => ({ uploadIds, statuses, unfinishedFiles }),
@@ -140,8 +136,8 @@ export function useUploader({
   const clearUploads = useCallback(() => {
     uploadIds.clear();
     unfinishedFiles.clear();
-    updateFileIds(() => initialFileIds);
-  }, [initialFileIds, unfinishedFiles, updateFileIds, uploadIds]);
+    setFileIds(initialFileIds);
+  }, [initialFileIds, unfinishedFiles, uploadIds]);
 
   return {
     isUploading,

src/components/user-profile-head.module.scss

@@ -19,7 +19,7 @@ $actions-padding: 0.75em;
     'actions actions actions'
     'errors errors errors';
   grid-gap: 0 1em;
-  padding: 0.5em 0 $actions-padding 0;
+  padding: 0.5em 0 $actions-padding;
   border-bottom: 1px solid var(--separator-color);
   margin-bottom: 1em;
 

styles/helvetica/boxes.scss

@@ -124,7 +124,7 @@
     padding: rem(5px) 0 rem(5px) rem(11px);
 
     @media (max-width: 991px) {
-      padding: rem(15px) 0 0 0;
+      padding: rem(15px) 0 0;
     }
 
     font-size: rem(11px);
@@ -136,7 +136,7 @@
   .box-body {
     font-family: Vazir, Arial, sans-serif;
     font-size: rem(15px);
-    padding: rem(10px) 0 rem(3px) 0;
+    padding: rem(10px) 0 rem(3px);
     background-color: #fff;
 
     a {
@@ -210,7 +210,7 @@
   }
 
   .box-footer {
-    padding: rem(5px) 0 rem(10px) 0;
+    padding: rem(5px) 0 rem(10px);
     font-size: rem(11px);
 
     a {

styles/helvetica/react-select.scss

@@ -1,7 +1,3 @@
-// rgba(250, 182, 0, 0.31);
-// rgba(214, 61, 6, 0.1);
-// #000
-
 /**
  * React Select
  * ============
@@ -38,9 +34,8 @@
 .Select-control {
   background-color: #fff;
   border-color: #d9d9d9 #ccc #b3b3b3;
-
-  // border-radius: 4px;
-  border: 1px solid #ccc;
+  border-width: 1px;
+  border-style: solid;
   color: #333;
   cursor: default;
   display: table;

styles/shared/user-name.scss

@@ -120,7 +120,7 @@
 
   .user-card-actions {
     border-top: 1px #e4e4e4 solid;
-    padding: rem(5px) rem(10px) rem(6px) rem(10px);
+    padding: rem(5px) rem(10px) rem(6px);
     background-color: #f4f4f4;
     border-bottom-right-radius: 2px;
     border-bottom-left-radius: 2px;