评论跳转

src/API/comment.ts

@@ -45,6 +45,7 @@ interface GetCommentParams {
   resource_id: number;
   size: number;
   page: number;
+  comment_id?: string;
 }
 
 export interface Comment {

src/app/pages/home/LastComment/index.tsx

@@ -67,7 +67,7 @@ export function LastComment() {
             <ListItem
               alignItems="flex-start"
               key={item.id}
-              onClick={() => handleClick(item.resource_id, item.cnname)}
+              onClick={() => handleClick(item.resource_id, item.id, item.cnname)}
               button
             >
               <ListItemAvatar>

src/app/pages/search/CommentDrawer.tsx

@@ -20,7 +20,7 @@ import { CopyToClipboard } from "react-copy-to-clipboard";
 import { useSnackbar } from "notistack";
 
 import { CommentResult, postMetrics } from "API";
-import { formatAvatar, formatComment, noop, getGravatar} from "utils";
+import { formatAvatar, formatComment, noop, getGravatar } from "utils";
 import { useGoResourcePage } from "hooks";
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -45,6 +45,9 @@ const useStyles = makeStyles((theme: Theme) =>
       alignItems: "center",
       justifyContent: "space-between",
     },
+    forceCursor: {
+      cursor: "pointer",
+    },
   })
 );
 
@@ -81,7 +84,9 @@ export default function CommentDrawer(props: CommentResourcePropTypes) {
           <Card style={{ margin: "12px 0" }}>
             <CardHeader
               avatar={
-                <Avatar style={{ fontSize: "0.875rem", color: "inherit" }} src={getGravatar(content.username)}>{formatAvatar(content.username)}</Avatar>
+                <Avatar style={{ fontSize: "0.875rem", color: "inherit" }} src={getGravatar(content.username)}>
+                  {formatAvatar(content.username)}
+                </Avatar>
               }
               title={content.username}
               subheader={content.date}
@@ -113,7 +118,12 @@ export default function CommentDrawer(props: CommentResourcePropTypes) {
 
             <Typography align="right" variant="body2">
               来自：
-              <Link onClick={() => handleClick(content.resourceID, content.resourceName)}>{content.resourceName}</Link>
+              <Link
+                className={classes.forceCursor}
+                onClick={() => handleClick(content.resourceID, content.commentID, content.resourceName)}
+              >
+                {content.resourceName}
+              </Link>
             </Typography>
           </Box>
         </Box>

src/component/CommentList/index.tsx

@@ -40,7 +40,14 @@ export function CommentList(props: CommentListPropTypes) {
   };
 
   React.useEffect(() => {
-    getComment({ resource_id: id, page, size: PAGE_SIZE })
+    const requestParams = {
+      resource_id: id,
+      page,
+      size: PAGE_SIZE,
+      comment_id: window.location.href.split("#")[1] || undefined,
+    };
+
+    getComment(requestParams)
       .then((res) => {
         if (res) {
           // @ts-ignore

src/features/Comment/index.tsx

@@ -13,6 +13,7 @@ interface CommentPropTypes {
 export function CommentComponent(props: CommentPropTypes) {
   const { id, loading, title = "" } = props;
   const [commentList, setCommentList] = React.useState<Array<Comment>>([]);
+
   return (
     <div>
       {title && (

src/features/Notification/index.tsx

@@ -50,7 +50,7 @@ export function Notification() {
   const handleClickComment = (notice: NoticeItem) => {
     patchNotifications({ comment_id: notice.id, verb: "read" }).catch(noop);
     noticePopupState.close();
-    toResourcePage(notice.resource_id);
+    toResourcePage(notice.resource_id, notice.id, "");
   };
 
   const handleLoadMore = () => {
@@ -75,7 +75,9 @@ export function Notification() {
         classes={{ list: classes.list }}
       >
         {total === 0 && (
-          <Typography align="center" color="textSecondary" >╮(╯-╰)╭ 暂无消息</Typography>
+          <Typography align="center" color="textSecondary">
+            ╮(╯-╰)╭ 暂无消息
+          </Typography>
         )}
         {unreadList.map((item, index) => (
           <MenuItem

src/hooks/useGoResourcePage.ts

@@ -1,17 +1,22 @@
 import { useHistory } from "react-router-dom";
+import { waitForElement } from "../utils";
 
 export function useGoResourcePage() {
   const history = useHistory();
 
-  return (id: number, title?: string) => {
+  return (id: number, uid: string, title?: string) => {
     if (id === 233) {
-      history.push("/discuss");
+      history.push(`/discuss#${uid}`);
     } else {
       history.push({
         pathname: "/resource",
         search: `?id=${id}`,
         state: { title: title || "资源页" },
       });
     }
+    // jump to element
+    waitForElement(uid).then((elm) => {
+      document.getElementById(uid)?.scrollIntoView({ behavior: "smooth" });
+    });
   };
 }

src/utils/assetsHelper.ts

@@ -1 +1,22 @@
 export const toAbsoluteUrl = (pathname: string) => process.env.PUBLIC_URL + pathname;
+
+export function waitForElement(id: string) {
+  return new Promise((resolve) => {
+    if (document.getElementById(id)) {
+      return resolve(document.getElementById(id));
+    }
+
+    const observer = new MutationObserver((mutations) => {
+      if (document.getElementById(id)) {
+        resolve(document.getElementById(id));
+        observer.disconnect();
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+    return null;
+  });
+}