fix: Comments navigation issues.

src/components/ModalProvider.jsx

@@ -1,6 +1,5 @@
-import React, { useState, createContext } from "react";
+import React, { useState, createContext, useCallback, useRef } from "react";
 import IdentityErrorBoundary from "src/components/IdentityErrorBoundary";
-import isEmpty from "lodash/fp/isEmpty";
 
 export const modalContext = createContext({ component: () => null, props: {} });
 
@@ -12,37 +11,46 @@ const initialState = {
 };
 
 const ModalProvider = ({ children }) => {
-  const [modalStack] = useState([]);
-  const [currentModal, setModal] = useState(initialState);
-  const handleOpenModal = function handleOpenModal(
+  const modalStack = useRef([]);
+  const modalToDisplay = useRef(initialState);
+  // Modals are refs, and refs doesn't trigger component re-render. This
+  // will force the state update, hence a modal update.
+  const [, setIsDisplaying] = useState(false);
+
+  const handleOpenModal = useCallback(function (
     modal,
     props = {},
     { overlay } = {}
   ) {
     const newModal = { component: modal, props: { show: true, ...props } };
-    if (isEmpty(modalStack) || overlay) {
-      modalStack.push(newModal);
-      setModal(newModal);
-    } else if (!currentModal || !currentModal.props.show) {
-      setModal(newModal);
+    if (!modalStack.current || overlay) {
+      modalStack.current && modalStack.current.push(newModal);
+      modalToDisplay.current = newModal;
+      setIsDisplaying(true);
+    } else if (modalToDisplay.current && !modalToDisplay.current.props.show) {
+      modalToDisplay.current = newModal;
+      setIsDisplaying(true);
     }
-  };
+  },
+  []);
 
-  const handleCloseModal = function handleCloseModal() {
-    modalStack.pop();
-    const previousModal = modalStack.pop();
-    setModal(previousModal || initialState);
-  };
+  const handleCloseModal = useCallback(function () {
+    modalStack.current && modalStack.current.pop();
+    const previousModal = modalStack.current && modalStack.current.pop();
+    modalToDisplay.current = previousModal || initialState;
+    setIsDisplaying(false);
+  }, []);
 
   const props = {
     onClose: handleCloseModal,
-    ...currentModal.props
+    ...modalToDisplay.current.props
   };
+
   return (
     <IdentityErrorBoundary>
       <modalContext.Provider value={[handleOpenModal, handleCloseModal]}>
         {children}
-        <currentModal.component {...props} />
+        <modalToDisplay.current.component {...props} />
       </modalContext.Provider>
     </IdentityErrorBoundary>
   );

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

@@ -88,7 +88,7 @@ const Comment = ({
           </Link>
           <DateTooltip timestamp={createdAt} placement="bottom">
             {({ timeAgo }) => (
-              <Link className={styles.timeAgo} to={permalink}>
+              <Link className={styles.timeAgo} to={`${permalink}`}>
                 {timeAgo}
               </Link>
             )}

src/containers/Comments/Comment/CommentWrapper.jsx

@@ -11,13 +11,15 @@ import {
   PROPOSAL_COMMENT_DOWNVOTE
 } from "src/constants";
 
-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 }) => {
+  return (
+    <Link
+      className={styles.contextLink}
+      to={`/record/${recordToken}/comments/${parentid}`}>
+      see in context
+    </Link>
+  );
+});
 
 const Replies = React.memo(({ children }) => (
   <div className={styles.childrenContainer}>{children}</div>

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 { useComments, useLocalStorage } from "src/hooks";
 import {
   getSortOptionsForSelect,
   createSelectOptionFromSortOption,
@@ -36,7 +31,6 @@ 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";
 
 const FlatModeButton = ({ isActive, onClick }) => (
@@ -367,14 +361,9 @@ 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",
+  const [sortOption, setSortOption] = useLocalStorage(
+    `sortComments-${recordToken}`,
     commentSortOptions.SORT_BY_TOP
   );
 

src/containers/Proposal/Detail/Detail.jsx

@@ -10,6 +10,7 @@ import {
   useIdentity,
   useDocumentTitle,
   useModalContext,
+  useScrollTo,
   usePolicy
 } from "src/hooks";
 import Comments from "src/containers/Comments";
@@ -39,6 +40,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";
 
@@ -50,6 +52,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 {
     policyTicketVote: { summariespagesize: proposalPageSize }
   } = usePolicy();
@@ -67,7 +71,8 @@ const ProposalDetail = ({ Main, match, history }) => {
     commentsError,
     commentsLoading,
     onReloadProposalDetails,
-    billingStatusChangeUsername
+    billingStatusChangeUsername,
+    commentsFinishedLoading
   } = useProposal(tokenFromUrl, proposalPageSize, threadParentCommentID);
   const { userid } = currentUser || {};
   const isSingleThread = !!threadParentID;
@@ -88,6 +93,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

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

src/hooks/api/useComments.js

@@ -85,14 +85,17 @@ 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 &&
+      (proposalState === PROPOSAL_STATE_VETTED || currentUser?.isadmin)
+    : !!recordToken && !allCommentsBySection && userLoggedIn;
 
   const needsToFetchCommentsLikes =
     !!recordToken &&
     !commentsLikes &&
     enableCommentVote &&
     userLoggedIn &&
+    !loadingLikes &&
     proposalState === PROPOSAL_STATE_VETTED;
 
   useEffect(
@@ -184,6 +187,7 @@ export default function useComments(
     getCommentVotes,
     commentSectionIds,
     hasAuthorUpdates,
+    finishedCommentsFetch: !!allCommentsBySection,
     latestAuthorUpdateId: hasAuthorUpdates && commentSectionIds[0],
     singleThreadRootId
   };