fix: Comments navigation issues.

src/components/Router/RouterProvider.jsx

@@ -5,7 +5,6 @@ import React, {
   useEffect,
   useMemo
 } from "react";
-import isEqual from "lodash/isEqual";
 import { withRouter } from "react-router-dom";
 
 const routerCtx = createContext();
@@ -16,7 +15,7 @@ const RouterProvider = ({ location, children, ...rest }) => {
   const [pastLocations, setPastLocations] = useState([]);
 
   useEffect(() => {
-    if (!isEqual(pastLocations[0], location)) {
+    if (pastLocations[0]?.pathname !== location.pathname) {
       setPastLocations([location].concat(pastLocations));
     }
   }, [location, pastLocations]);

src/containers/Comments/Comment/Comment.jsx

@@ -17,6 +17,7 @@ import Likes from "src/components/Likes";
 import CopyLink from "src/components/CopyLink";
 import { useConfig } from "src/containers/Config";
 import { NOJS_ROUTE_PREFIX } from "src/constants";
+import { getQueryStringValue } from "src/lib/queryString";
 
 const forbiddenCommentsMdElements = ["h1", "h2", "h3", "h4", "h5", "h6"];
 
@@ -49,6 +50,8 @@ const Comment = ({
   seeInContextLink,
   ...props
 }) => {
+  const sort = getQueryStringValue("sort");
+  const sortQuery = sort ? `?sort=${sort}` : "";
   const extraSmall = useMediaQuery("(max-width: 560px)");
   const { javascriptEnabled } = useConfig();
 
@@ -88,7 +91,7 @@ const Comment = ({
           </Link>
           <DateTooltip timestamp={createdAt} placement="bottom">
             {({ timeAgo }) => (
-              <Link className={styles.timeAgo} to={permalink}>
+              <Link className={styles.timeAgo} to={permalink + sortQuery}>
                 {timeAgo}
               </Link>
             )}

src/containers/Comments/Comment/CommentWrapper.jsx

@@ -10,14 +10,18 @@ import {
   PROPOSAL_COMMENT_UPVOTE,
   PROPOSAL_COMMENT_DOWNVOTE
 } from "src/constants";
+import { getQueryStringValue } from "src/lib/queryString";
 
-const ContextLink = React.memo(({ parentid, recordToken }) => (
-  <Link
-    className={styles.contextLink}
-    to={`/record/${recordToken}/comments/${parentid}`}>
-    see in context
-  </Link>
-));
+const ContextLink = React.memo(({ parentid, recordToken, sort }) => {
+  const sortQuery = sort ? `?sort=${sort}` : "";
+  return (
+    <Link
+      className={styles.contextLink}
+      to={`/record/${recordToken}/comments/${parentid}${sortQuery}`}>
+      see in context
+    </Link>
+  );
+});
 
 const Replies = React.memo(({ children }) => (
   <div className={styles.childrenContainer}>{children}</div>
@@ -107,6 +111,8 @@ const CommentWrapper = ({
     parentid
   } = comment;
 
+  const sort = getQueryStringValue("sort");
+
   const isInLatestUpdateCommentTree =
     comments && isInCommentTree(latestAuthorUpdateId, commentid, comments);
   const notInLatestAuthorUpdateThread =
@@ -180,7 +186,7 @@ const CommentWrapper = ({
   }, [commentid, openCensorModal]);
 
   const contextLink = isFlatReply && (
-    <ContextLink parentid={parentid} recordToken={recordToken} />
+    <ContextLink parentid={parentid} recordToken={recordToken} sort={sort} />
   );
 
   const isLikeCommentDisabled =

src/containers/Comments/Comments.jsx

@@ -21,12 +21,7 @@ import { CommentContext } from "./hooks";
 import CommentsListWrapper from "./CommentsList/CommentsListWrapper";
 import CommentLoader from "./Comment/CommentLoader";
 import Link from "src/components/Link";
-import {
-  useQueryString,
-  useScrollTo,
-  useComments,
-  useLocalStorage
-} from "src/hooks";
+import { useQueryString, useComments, useLocalStorage } from "src/hooks";
 import {
   getSortOptionsForSelect,
   createSelectOptionFromSortOption,
@@ -36,8 +31,8 @@ import {
 } from "./helpers";
 import { PROPOSAL_MAIN_THREAD_KEY } from "src/constants";
 import { commentsReducer, initialState, actions } from "./commentsReducer";
-import { getQueryStringValue } from "src/lib/queryString";
 import { debounce } from "lodash";
+import { getQueryStringValue } from "src/lib/queryString";
 
 const FlatModeButton = ({ isActive, onClick }) => (
   <>
@@ -114,6 +109,8 @@ const CommentsListAndActions = React.memo(
     authorUpdateTitle,
     sectionId
   }) => {
+    const sort = getQueryStringValue("sort");
+    const sortQuery = sort ? `&sort=${sort}` : "";
     const {
       getCommentLikeOption,
       enableCommentVote,
@@ -266,7 +263,8 @@ const CommentsListAndActions = React.memo(
           {isSingleThread && (
             <div className="justify-left margin-top-s">
               <Text className="margin-right-xs">Single comment thread. </Text>
-              <Link to={`/record/${recordToken}?scrollToComments=true`}>
+              <Link
+                to={`/record/${recordToken}?scrollToComments=true${sortQuery}`}>
                 View all.
               </Link>
             </div>
@@ -367,11 +365,6 @@ const Comments = ({
   const numOfComments = comments?.length;
 
   const [state, dispatch] = useReducer(commentsReducer, initialState);
-  const hasComments = !!comments;
-  const hasScrollToQuery = !!getQueryStringValue("scrollToComments");
-  const shouldScrollToComments =
-    (hasScrollToQuery || isSingleThread) && hasComments;
-  useScrollTo("commentArea", shouldScrollToComments);
 
   const [sortOption, setSortOption] = useQueryString(
     "sort",

src/containers/Proposal/Detail/Detail.jsx

@@ -9,7 +9,8 @@ import {
   usePaywall,
   useIdentity,
   useDocumentTitle,
-  useModalContext
+  useModalContext,
+  useScrollTo
 } from "src/hooks";
 import Comments from "src/containers/Comments";
 import ProposalLoader from "src/components/Proposal/ProposalLoader";
@@ -38,6 +39,7 @@ import WhatAreYourThoughts from "src/components/WhatAreYourThoughts";
 import { PROPOSAL_UPDATE_HINT, PROPOSAL_STATE_UNVETTED } from "src/constants";
 import { shortRecordToken } from "src/helpers";
 import ModalLogin from "src/components/ModalLogin";
+import { getQueryStringValue } from "src/lib/queryString";
 
 const COMMENTS_LOGIN_MODAL_ID = "commentsLoginModal";
 
@@ -49,6 +51,8 @@ const SetPageTitle = ({ title }) => {
 const ProposalDetail = ({ Main, match, history }) => {
   const tokenFromUrl = shortRecordToken(get("params.token", match));
   const threadParentCommentID = get("params.commentid", match);
+  const hasScrollToQuery = !!getQueryStringValue("scrollToComments");
+
   const {
     proposal,
     loading,
@@ -63,7 +67,8 @@ const ProposalDetail = ({ Main, match, history }) => {
     commentsError,
     commentsLoading,
     onReloadProposalDetails,
-    billingStatusChangeUsername
+    billingStatusChangeUsername,
+    commentsFinishedLoading
   } = useProposal(tokenFromUrl, threadParentCommentID);
   const { userid } = currentUser || {};
   const isSingleThread = !!threadParentID;
@@ -84,6 +89,10 @@ const ProposalDetail = ({ Main, match, history }) => {
   const paywallMissing = paywallEnabled && !isPaid;
   const [, identityError] = useIdentity();
 
+  const shouldScrollToComments =
+    (hasScrollToQuery || isSingleThread) && proposal && commentsFinishedLoading;
+  useScrollTo("commentArea", shouldScrollToComments);
+
   const onRedirectToSignup = useCallback(
     () => history.push("/user/signup"),
     [history]

src/containers/Proposal/Detail/hooks.js

@@ -268,7 +268,8 @@ export function useProposal(token, threadParentID) {
     hasAuthorUpdates,
     singleThreadRootId,
     error: commentsError,
-    loading: commentsLoading
+    loading: commentsLoading,
+    finishedCommentsFetch
   } = useComments(proposalToken, proposalState, null, threadParentID);
 
   return {
@@ -291,6 +292,7 @@ export function useProposal(token, threadParentID) {
     commentsError,
     currentUser,
     commentsLoading,
+    commentsFinishedLoading: finishedCommentsFetch,
     onReloadProposalDetails
   };
 }

src/hooks/api/useComments.js

@@ -85,14 +85,15 @@ export default function useComments(
   // comments are not public on cms. User needs to be logged in
   const isProposal = recordType === constants.RECORD_TYPE_PROPOSAL;
   const needsToFetchComments = isProposal
-    ? !!recordToken && !comments
-    : !!recordToken && !comments && userLoggedIn;
+    ? !!recordToken && !allCommentsBySection
+    : !!recordToken && !allCommentsBySection && userLoggedIn;
 
   const needsToFetchCommentsLikes =
     !!recordToken &&
     !commentsLikes &&
     enableCommentVote &&
     userLoggedIn &&
+    !loadingLikes &&
     proposalState === PROPOSAL_STATE_VETTED;
 
   useEffect(
@@ -184,6 +185,7 @@ export default function useComments(
     getCommentVotes,
     commentSectionIds,
     hasAuthorUpdates,
+    finishedCommentsFetch: !!allCommentsBySection,
     latestAuthorUpdateId: hasAuthorUpdates && commentSectionIds[0],
     singleThreadRootId
   };