fix: code review, #1245

Author: quinn-gaoo

next/components/notification/notificationItem.js

@@ -29,16 +29,17 @@ export default function NotificationItem({ data, onMarkAsRead = () => {} }) {
   const { type, data: { space, proposalCid, cid, content } = {} } = data;
 
   const href = useMemo(() => {
+    let anchor = "";
     if (type === "commentMentionUser") {
-      return `/space/${space}/proposal/${proposalCid}#comment_${cid}`;
+      anchor = `comment_${cid}`;
     }
     if (type === "voteMentionUser") {
-      return `/space/${space}/proposal/${proposalCid}#vote_${cid}`;
+      anchor = `vote_${cid}`;
     }
     if (type === "appendantMentionUser") {
-      return `/space/${space}/proposal/${proposalCid}#appendant_${cid}`;
+      anchor = `appendant_${cid}`;
     }
-    return `/space/${space}/proposal/${proposalCid}`;
+    return `/space/${space}/proposal/${proposalCid}?anchor=${anchor}`;
   }, [cid, proposalCid, space, type]);
 
   return (

next/components/postDetail/index.js

@@ -62,12 +62,12 @@ export default function PostDetail({
   space,
   votes,
   voteStatus,
-  comments,
+  commentData,
   defaultPage,
   myVote,
   isSafari = false,
 }) {
-  const { loadSuggestions } = useSuggestions(comments, votes);
+  const { loadSuggestions } = useSuggestions(commentData?.items, votes);
   useJumpToAnchor();
   return (
     <Wrapper>
@@ -90,7 +90,7 @@ export default function PostDetail({
         />
         <PostDiscussion
           proposal={data}
-          comments={comments}
+          commentData={commentData}
           space={space}
           loadSuggestions={loadSuggestions}
         />

next/components/postDetail/postDiscussion/index.jsx

@@ -7,13 +7,6 @@ import NoData from "@osn/common-ui/es/NoData";
 import CommitItem from "./commitItem";
 import CommitEditor from "./commitEditor";
 
-const PaginationWrapper = styled.div`
-  padding: 20px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
 const NoCommentWrapper = styled.div`
   height: 104px;
   border-bottom: 1px solid var(--strokeBorderDefault);
@@ -28,49 +21,61 @@ const NoCommentWrapper = styled.div`
 export default function PostDiscussion({
   proposal,
   space,
-  comments,
-  votesPage = 1,
+  commentData,
   loadSuggestions,
 }) {
+  return (
+    <AccordionPanel
+      head={
+        <HeaderWithNumber title="Discussions" number={commentData?.total} />
+      }
+    >
+      <Items commentData={commentData} proposal={proposal} space={space} />
+      <div className="py-5">
+        <Pagination
+          page={commentData?.page}
+          total={commentData?.total}
+          pageSize={commentData?.pageSize}
+          pageKey="discussion_page"
+          otherQueries={{
+            page: commentData?.page,
+          }}
+        />
+      </div>
+      <div className="px-5">
+        <CommitEditor
+          proposal={proposal}
+          space={space}
+          loadSuggestions={loadSuggestions}
+        />
+      </div>
+    </AccordionPanel>
+  );
+}
+
+function Items({ commentData, space, proposal }) {
+  if (!commentData?.items?.length > 0) {
+    return (
+      <NoCommentWrapper>
+        <NoData message="No current comment data" />
+      </NoCommentWrapper>
+    );
+  }
+
   const getNetwork = (comment) =>
     findNetworkConfig(proposal.networksConfig, comment.commenterNetwork);
   const spaceSupportMultiChain = space?.networks?.length > 1;
 
   return (
-    <AccordionPanel
-      head={<HeaderWithNumber title="Discussions" number={comments?.total} />}
-    >
-      {(comments?.items || []).map((item, index) => (
+    <>
+      {(commentData?.items || []).map((item, index) => (
         <CommitItem
           key={index}
           item={item}
           spaceSupportMultiChain={spaceSupportMultiChain}
           space={getNetwork(item)}
         />
       ))}
-      <div className="px-5 md:px-8">
-        {!comments?.items?.length > 0 && (
-          <NoCommentWrapper>
-            <NoData message="No current comments" />
-          </NoCommentWrapper>
-        )}
-        <PaginationWrapper>
-          <Pagination
-            page={comments?.page}
-            total={comments?.total}
-            pageSize={comments?.pageSize}
-            pageKey="discussion_page"
-            otherQueries={{
-              page: votesPage,
-            }}
-          />
-        </PaginationWrapper>
-        <CommitEditor
-          proposal={proposal}
-          space={space}
-          loadSuggestions={loadSuggestions}
-        />
-      </div>
-    </AccordionPanel>
+    </>
   );
 }

next/components/postDetail/suggestions.js

@@ -15,7 +15,7 @@ export function useSuggestions(comments = [], votes = null) {
     }-${user.network}) `;
 
   const fetchIdentitySuggestions = useCallback(async () => {
-    const commentUsers = (comments?.items || []).map((comment) => ({
+    const commentUsers = (comments || []).map((comment) => ({
       address: comment.address,
       network: comment.commenterNetwork,
       source: "comment",

next/hooks/notification/useAnchor.js

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { useMount } from "react-use";
 
@@ -17,19 +17,12 @@ function jumpToAnchor(anchorId) {
   });
 }
 
-export const useAnchor = () => {
-  const router = useRouter();
-  const anchorId = useMemo(() => {
-    return router.asPath.split("#")[1];
-  }, [router.asPath]);
-
-  return anchorId;
-};
-
 export const useJumpToAnchor = () => {
+  const router = useRouter();
+  const anchorId = router.query.anchor;
   const [isMounted, setIsMounted] = useState();
   useMount(() => setIsMounted(true));
-  const anchorId = useAnchor();
+
   useEffect(() => {
     if (anchorId && isMounted) {
       setTimeout(() => {
@@ -40,17 +33,11 @@ export const useJumpToAnchor = () => {
 };
 
 export const useActiveAnchor = (anchor) => {
-  const [id, setId] = useState("");
-  const anchorId = useAnchor();
-
-  useEffect(() => {
-    setTimeout(() => {
-      setId(anchor);
-    }, 200);
-  }, [anchor]);
+  const router = useRouter();
+  const anchorId = router.query.anchor;
 
   return {
-    id,
-    active: id === anchorId,
+    id: anchor,
+    active: anchor === anchorId,
   };
 };

next/pages/space/[space]/proposal/[id].js

@@ -21,7 +21,7 @@ export default function Index({
   space,
   votes,
   voteStatus,
-  comments,
+  commentData,
   defaultPage,
   myVote,
   isSafari,
@@ -114,7 +114,7 @@ export default function Index({
           space={space}
           votes={votes}
           voteStatus={voteStatus}
-          comments={comments}
+          commentData={commentData}
           defaultPage={defaultPage}
           myVote={savedMyVote}
           isSafari={isSafari}
@@ -130,11 +130,21 @@ export async function getServerSideProps(context) {
     userAgent.includes("Safari") && !userAgent.includes("Chrome");
 
   const { id, space: spaceId } = context.params;
-  const { page, discussion_page: discussionPage } = context.query;
-
-  const nPage = page === "last" ? "last" : parseInt(page) || 1;
-  const discusPage =
-    discussionPage === "last" ? "last" : parseInt(discussionPage) || 1;
+  const { page, discussion_page: discussionPage, anchor = "" } = context.query;
+
+  const hasVoteAnchor = anchor.startsWith("vote");
+  const hasCommentAnchor = anchor.startsWith("comment");
+
+  const votePage = hasVoteAnchor
+    ? 1
+    : page === "last"
+    ? "last"
+    : parseInt(page) || 1;
+  const discusPage = hasCommentAnchor
+    ? 1
+    : discussionPage === "last"
+    ? "last"
+    : parseInt(discussionPage) || 1;
 
   const { result: detail } = await ssrNextApi.fetch(
     `${spaceId}/proposal/${id}`,
@@ -148,17 +158,17 @@ export async function getServerSideProps(context) {
     { result: space },
     { result: votes },
     { result: voteStatus },
-    { result: comments },
+    { result: commentData },
   ] = await Promise.all([
     ssrNextApi.fetch(`spaces/${spaceId}`),
     ssrNextApi.fetch(`${spaceId}/proposal/${detail?.cid}/votes`, {
-      page: nPage,
-      pageSize: 50,
+      page: votePage,
+      pageSize: hasVoteAnchor ? 200 : 50,
     }),
     ssrNextApi.fetch(`${spaceId}/proposal/${detail?.cid}/stats`),
     ssrNextApi.fetch(`${spaceId}/proposal/${detail?.cid}/comments`, {
       page: discusPage,
-      pageSize: 25,
+      pageSize: hasCommentAnchor ? 200 : 25,
     }),
   ]);
 
@@ -179,8 +189,8 @@ export async function getServerSideProps(context) {
       space: space ?? null,
       votes: votes ?? EmptyQuery,
       voteStatus: voteStatus ?? [],
-      comments: comments ?? EmptyQuery,
-      defaultPage: { page: nPage, discussionPage: discusPage },
+      commentData: commentData ?? EmptyQuery,
+      defaultPage: { page: votePage, discussionPage: discusPage },
       myVote: myVote ?? null,
       isSafari,
     },