[B][E] Improve comment thread behavior

* Ensure comment pages after first are fetched correctly * Add hide comments toggle * Refresh comments and open thread on create
ManifoldScholar · Jan 23, 2025 · f95e204 · f95e204
1 parent 1c07da8
commit f95e204
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 33 deletions.
diff --git a/client/src/config/app/locale/en-US/json/shared/actions.json b/client/src/config/app/locale/en-US/json/shared/actions.json
@@ -37,6 +37,7 @@
     "hide": "Hide",
     "hide_all": "Hide all",
     "hide_description": "$t(actions.hide) Description",
+    "hide_comments": "$t(actions.hide) Comments",
     "import": "Import",
     "join": "Join",
     "join_group": "$t(actions.join) this group",

diff --git a/client/src/frontend/components/entity/Collection/patterns/GroupAnnotations.js b/client/src/frontend/components/entity/Collection/patterns/GroupAnnotations.js
@@ -14,7 +14,8 @@ function GroupAnnotationsEntityCollection({
   filterProps,
   isFiltered,
   paginationProps,
-  refresh,
+  refreshGroup,
+  refreshAnnotations,
   ...passThroughProps
 }) {
   const { t } = useTranslation();
@@ -43,6 +44,7 @@ function GroupAnnotationsEntityCollection({
           {hasAnnotations && (
             <Annotation.List.Default
               annotations={annotations}
+              refresh={refreshAnnotations}
               showCommentsToggleAsBlock
             />
           )}
@@ -54,7 +56,7 @@ function GroupAnnotationsEntityCollection({
           {!hasAnnotations && !isFiltered && (
             <EntityCollectionPlaceholder.GroupAnnotations
               readingGroup={readingGroup}
-              refresh={refresh}
+              refresh={refreshGroup}
               style={{ paddingBlockStart: "40px" }}
             />
           )}

diff --git a/client/src/frontend/containers/ReadingGroup/Annotations.js b/client/src/frontend/containers/ReadingGroup/Annotations.js
@@ -15,7 +15,7 @@ function ReadingGroupAnnotationsContainer({
 
   const { id } = useParams();
 
-  const { data: annotations, meta } = useFetch({
+  const { data: annotations, meta, refresh: refreshAnnotations } = useFetch({
     request: [readingGroupsAPI.annotations, id, filters, pagination],
     dependencies: [fetchVersion]
   });
@@ -38,7 +38,8 @@ function ReadingGroupAnnotationsContainer({
         annotationsMeta={meta}
         filterProps={{ ...filterProps, hideSearch: true }}
         isFiltered={!!Object.keys(filters).length}
-        refresh={refresh}
+        refreshGroup={refresh}
+        refreshAnnotations={refreshAnnotations}
         nested
       />
     </Styled.Body>

diff --git a/client/src/global/components/Annotation/Annotation/TextAnnotation/index.js b/client/src/global/components/Annotation/Annotation/TextAnnotation/index.js
@@ -13,7 +13,8 @@ class Annotation extends PureComponent {
     visitHandler: PropTypes.func.isRequired,
     displayFormat: PropTypes.string,
     deleteHandler: PropTypes.func,
-    showCommentsToggleAsBlock: PropTypes.bool
+    showCommentsToggleAsBlock: PropTypes.bool,
+    refresh: PropTypes.func
   };
 
   get annotationListClassNames() {
@@ -46,6 +47,7 @@ class Annotation extends PureComponent {
             includeComments={false}
             includeMarkers={false}
             showCommentsToggleAsBlock={this.showCommentsToggleAsBlock}
+            refresh={this.props.refresh}
           />
         </ul>
       </>

diff --git a/client/src/global/components/Annotation/Annotation/UserContent/BlockToggle.js b/client/src/global/components/Annotation/Annotation/UserContent/BlockToggle.js
@@ -3,23 +3,42 @@ import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import IconComposer from "global/components/utility/IconComposer";
 
-export default function BlockCommentsToggle({ loadComments, commentsCount }) {
+export default function BlockCommentsToggle({
+  toggleComments,
+  commentsCount,
+  expanded
+}) {
   const { t } = useTranslation();
 
   return (
-    <button className="annotation-footer-button" onClick={loadComments}>
+    <button className="annotation-footer-button" onClick={toggleComments}>
       <span className="annotation-footer-button__inner">
-        <span className="annotation-footer-button__icon-container">
-          <IconComposer icon="interactComment32" size="default" />
-        </span>
-        <span className="annotation-footer-button__text">
-          {t("counts.comment", { count: commentsCount })}
-        </span>
-        <IconComposer
-          icon="arrowLongRight16"
-          size={24}
-          className="annotation-footer-button__arrow-icon"
-        />
+        {expanded ? (
+          <>
+            <IconComposer
+              icon="arrowLongLeft16"
+              size={24}
+              className="annotation-footer-button__arrow-icon"
+            />
+            <span className="annotation-footer-button__text annotation-footer-button__text--hide">
+              {t("actions.hide_comments")}
+            </span>
+          </>
+        ) : (
+          <>
+            <span className="annotation-footer-button__icon-container">
+              <IconComposer icon="interactComment32" size="default" />
+            </span>
+            <span className="annotation-footer-button__text">
+              {t("counts.comment", { count: commentsCount })}
+            </span>
+            <IconComposer
+              icon="arrowLongRight16"
+              size={24}
+              className="annotation-footer-button__arrow-icon"
+            />
+          </>
+        )}
       </span>
     </button>
   );
@@ -29,6 +48,7 @@ BlockCommentsToggle.displayName =
   "Annotation.Annotation.UserContent.BlockCommentsToggle";
 
 BlockCommentsToggle.propTypes = {
-  loadComments: PropTypes.func.isRequired,
-  commentsCount: PropTypes.number.isRequired
+  toggleComments: PropTypes.func.isRequired,
+  commentsCount: PropTypes.number.isRequired,
+  expanded: PropTypes.bool.isRequired
 };
diff --git a/client/src/global/components/Annotation/Annotation/UserContent/index.js b/client/src/global/components/Annotation/Annotation/UserContent/index.js
@@ -23,7 +23,8 @@ export default function AnnotationDetail({
   includeMarkers,
   annotation,
   showCommentsToggleAsBlock,
-  showLogin
+  showLogin,
+  refresh
 }) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
@@ -74,16 +75,15 @@ export default function AnnotationDetail({
     return res.promise;
   };
 
-  const loadComments = () => {
-    setShowComments(true);
+  const toggleComments = () => {
+    setShowComments(!showComments);
 
-    if (threadRef?.current) threadRef.current.focus();
+    if (!showComments && threadRef?.current) threadRef.current.focus();
   };
 
   const showCommentsToggle = !!commentsCount && !showComments;
 
-  const showBlockCommentsToggle =
-    showCommentsToggleAsBlock && showCommentsToggle;
+  const showBlockCommentsToggle = showCommentsToggleAsBlock && !!commentsCount;
   const showInlineCommentsToggle =
     !showBlockCommentsToggle && showCommentsToggle;
 
@@ -98,6 +98,11 @@ export default function AnnotationDetail({
     return established || trusted;
   };
 
+  const onReplySuccess = () => {
+    if (refresh) refresh();
+    setShowComments(true);
+  };
+
   return (
     <>
       <li className="annotation-comments">
@@ -165,7 +170,7 @@ export default function AnnotationDetail({
                     {showInlineCommentsToggle && (
                       <InlineToggle
                         active={action === "editing"}
-                        loadComments={loadComments}
+                        loadComments={toggleComments}
                         commentsCount={commentsCount}
                       />
                     )}
@@ -174,6 +179,7 @@ export default function AnnotationDetail({
                     <CommentContainer.Editor
                       subject={annotation}
                       cancel={stopReply}
+                      onSuccess={onReplySuccess}
                       initialOpen
                     />
                   )}
@@ -206,8 +212,9 @@ export default function AnnotationDetail({
       </li>
       {showBlockCommentsToggle && (
         <BlockToggle
-          loadComments={loadComments}
+          toggleComments={toggleComments}
           commentsCount={commentsCount}
+          expanded={showComments}
         />
       )}
     </>

diff --git a/client/src/global/components/Annotation/List/Default.js b/client/src/global/components/Annotation/List/Default.js
@@ -5,7 +5,8 @@ import Annotation from "../Annotation";
 function AnnotationListDefault({
   annotations,
   handleVisitAnnotation,
-  showCommentsToggleAsBlock
+  showCommentsToggleAsBlock,
+  refresh
 }) {
   return (
     <ul className="notes-list notes-list--pad-top">
@@ -17,6 +18,7 @@ function AnnotationListDefault({
               annotation={annotation}
               displayFormat="fullPage"
               showCommentsToggleAsBlock={showCommentsToggleAsBlock}
+              refresh={refresh}
             />
           </li>
         );
@@ -29,7 +31,8 @@ AnnotationListDefault.displayName = "Annotation.List.Default";
 AnnotationListDefault.propTypes = {
   annotations: PropTypes.array,
   handleVisitAnnotation: PropTypes.func,
-  showCommentsToggleAsBlock: PropTypes.bool
+  showCommentsToggleAsBlock: PropTypes.bool,
+  refresh: PropTypes.func
 };
 
 export default AnnotationListDefault;
diff --git a/client/src/global/containers/comment/Editor/index.js b/client/src/global/containers/comment/Editor/index.js
@@ -105,7 +105,9 @@ export class CommentEditor extends PureComponent {
   createComment(props, state) {
     const comment = this.commentFromPropsAndState(props, state);
     const call = commentsAPI.create(props.subject, comment);
-    const options = { adds: `comments-for-${props.subject.id}` };
+    const options = {
+      adds: `comments-for-${props.subject.id}`
+    };
     const createRequest = request(call, requests.rCommentCreate, options);
     this.processRequest(createRequest);
   }
@@ -138,6 +140,7 @@ export class CommentEditor extends PureComponent {
 
   handleSuccess() {
     this.setState(this.initialState(this.props));
+    if (this.props.onSuccess) this.props.onSuccess();
     if (this.props.cancel) this.props.cancel();
   }
 

diff --git a/client/src/global/containers/comment/Thread.js b/client/src/global/containers/comment/Thread.js
@@ -11,7 +11,7 @@ import { commentsAPI } from "api";
 import Utility from "global/components/utility";
 
 const { request } = entityStoreActions;
-const perPage = 50;
+const perPage = 10;
 
 export class CommentThread extends PureComponent {
   static mapStateToProps = (state, ownProps) => {
@@ -44,7 +44,7 @@ export class CommentThread extends PureComponent {
 
   componentDidMount() {
     if (this.props.subject && !this.props.comments) {
-      this.fetchComments({ number: 1, size: 1 });
+      this.fetchComments({ number: 1, size: perPage });
     }
   }
 

diff --git a/client/src/theme/styles/components/global/annotation/footerButton.js b/client/src/theme/styles/components/global/annotation/footerButton.js
@@ -61,6 +61,10 @@ export default `
     &__text {
       ${drawerIndent("padding-left")}
       transform: translateY(-1px);
+
+      &--hide {
+        padding-left: 1rem;
+      }
     }
 
     &__arrow-icon {