fix dep errors

Author: The-DevBlog

devblog/devblog/ClientApp/src/components/Notifications.tsx

@@ -48,7 +48,7 @@ const Notification = ({ setBellDisplay, handleBellClick,
         }, 300);
     }
 
-    const handleClick = async (postId: number) => {
+    const handleNotificationClick = async (postId: number) => {
         await fetch(`api/posts/getPageNum/${postId}`)
             .then((res) => { return res.json() })
             .then((data) => {
@@ -82,9 +82,9 @@ const Notification = ({ setBellDisplay, handleBellClick,
             <div className="notifications" style={{ display: bellDisplay }} >
                 {notifications?.map((n) => <>
                     <div className={`notification-item ${dismissedNotifications.includes(n.postId) ? 'dismissed' : ''}`}>
-                        <span onClick={() => handleClick(n.postId)}><img src={n.imgUrl} alt="post thumbnail" /></span>
+                        <span onClick={() => handleNotificationClick(n.postId)}><img src={n.imgUrl} alt="post thumbnail" /></span>
                         <div className="notification-txt">
-                            <span onClick={() => handleClick(n.postId)}>{n.userName} posted</span>
+                            <span onClick={() => handleNotificationClick(n.postId)}>{n.userName} posted</span>
                             <span onClick={() => deleteNotification(n.postId, n.userName)}>dismiss</span>
                         </div>
                     </div>

devblog/devblog/ClientApp/src/components/Post.tsx

@@ -7,7 +7,7 @@ import ICommentProps from "../interfaces/ICommentProps";
 import ReactMarkdown from "react-markdown";
 import Vote from "./Vote";
 import { Carousel } from 'react-responsive-carousel';
-import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
+import "react-responsive-carousel/lib/styles/carousel.min.css";
 import "./styles/Post.css";
 import EditPost from "./EditPost";
 import { GetIsAdmin } from "./AuthenticationService";

devblog/devblog/ClientApp/src/pages/Posts.tsx

@@ -16,7 +16,32 @@ const Posts = () => {
     const location = useLocation();
     const searchParams = new URLSearchParams(location.search);
     const pageParam = searchParams.get("pageNum");
+    const postIdParam = searchParams.get("postId");
 
+    const handlePagerClick = (page: number) => {
+        window.history.replaceState(null, '', '/posts');
+        setPageNum(page);
+    }
+
+    const Pager = () => {
+        return <div className="pager">
+            {pageNum > 1 ? (
+                <MdChevronLeft className="arrow-visible" onClick={() => pageNum > 0 && handlePagerClick(pageNum - 1)} />
+            ) : (
+                <MdChevronLeft className="arrow-hidden" />
+            )}
+
+            <span>{pageNum}</span>
+
+            {pageNum < totalPages ? (
+                <MdChevronRight className="arrow-visible" onClick={() => handlePagerClick(pageNum + 1)} />
+            ) : (
+                <MdChevronRight className="arrow-hidden" />
+            )}
+        </div>
+    }
+
+    // get all posts for a specific page
     useEffect(() => {
         fetch(`api/posts/page/${pageNum}`)
             .then((res) => { return res.json(); })
@@ -25,15 +50,19 @@ const Posts = () => {
 
     }, [pageNum]);
 
+    // scroll to the selected post
     useEffect(() => {
         if (pageParam) {
             setPageNum(parseInt(pageParam));
 
             setTimeout(() => {
-                scrollToHash();
+                const target = document.querySelector("#post" + postIdParam);
+                if (target) {
+                    target.scrollIntoView({ behavior: "smooth" });
+                }
             }, 1700);
         }
-    }, []);
+    }, [pageParam]);
 
     useEffect(() => {
         setIsAdmin(GetIsAdmin);
@@ -50,37 +79,6 @@ const Posts = () => {
             }).catch((e) => console.log("Error retrieving post count: " + e));
     }, []);
 
-    const scrollToHash = () => {
-        const postIdParam = searchParams.get("postId");
-        const target = document.querySelector("#post" + postIdParam);
-        if (target) {
-            target.scrollIntoView({ behavior: "smooth" });
-        }
-    };
-
-    const handlePagerClick = (page: number) => {
-        window.history.replaceState(null, '', '/posts');
-        setPageNum(page);
-    }
-
-    const Pager = () => {
-        return <div className="pager">
-            {pageNum > 1 ? (
-                <MdChevronLeft className="arrow-visible" onClick={() => pageNum > 0 && handlePagerClick(pageNum - 1)} />
-            ) : (
-                <MdChevronLeft className="arrow-hidden" />
-            )}
-
-            <span>{pageNum}</span>
-
-            {pageNum < totalPages ? (
-                <MdChevronRight className="arrow-visible" onClick={() => handlePagerClick(pageNum + 1)} />
-            ) : (
-                <MdChevronRight className="arrow-hidden" />
-            )}
-        </div>
-    }
-
     return (
         <section className="posts">
             <Pager />