Merge pull request #141 from AndrewCS149/postNumbers

Add posts numbers
The-DevBlog · Sep 21, 2023 · 67cd8e2 · 67cd8e2
2 parents 4ad7f5e + 8003526
commit 67cd8e2
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 23 deletions.
diff --git a/devblog/devblog/ClientApp/src/components/Post.tsx b/devblog/devblog/ClientApp/src/components/Post.tsx
@@ -49,6 +49,7 @@ const Post = (props: IPost) => {
             <div>
                 {/* DATE */}
                 <div className="post-info">
+                    <span>Log {props.postNumber}</span>
                     {isAdmin &&
                         <EditPost {...props} onPostEdit={handlePostEdit} />
                     }

diff --git a/devblog/devblog/ClientApp/src/components/styles/Post.css b/devblog/devblog/ClientApp/src/components/styles/Post.css
@@ -24,6 +24,10 @@
     margin-left: auto;
 }
 
+.post-info>span:first-child {
+    font-family: 'Chivo Mono', monospace;
+}
+
 .show-all-comments-btn {
     border-radius: 0.5em;
     padding: 8px;

diff --git a/devblog/devblog/ClientApp/src/interfaces/IPostProps.tsx b/devblog/devblog/ClientApp/src/interfaces/IPostProps.tsx
@@ -2,10 +2,11 @@ import IComment from "./ICommentProps";
 
 export default interface IPostProps {
     id?: number;
+    comments?: IComment[];
     description?: string;
     date: Date;
     imgs?: ImgProps[];
-    comments?: IComment[];
+    postNumber: number
 }
 
 interface ImgProps {

diff --git a/devblog/devblog/ClientApp/src/pages/Home.tsx b/devblog/devblog/ClientApp/src/pages/Home.tsx
@@ -8,6 +8,7 @@ const Home = () => {
     const [latestPost, setLatestPost] = useState<IPost>();
     const [isAdmin, setIsAdmin] = useState(false);
     const [url, setUrl] = useState<string>();
+    const [totalPosts, setTotalPosts] = useState(0);
 
     const getVideoUrl = async () => {
         await fetch(`api/YtVideo`)
@@ -31,18 +32,25 @@ const Home = () => {
     const getLatestPost = async () => {
         await fetch(`api/posts/${-1}`)
             .then((res) => { return res.json(); })
-            .then((data) => setLatestPost(data));
+            .then((data) => setLatestPost(data))
+            .catch((e) => console.log("Error retrieving latest post: " + e));
     }
 
     useEffect(() => {
         getVideoUrl();
         setIsAdmin(GetIsAdmin);
         getLatestPost();
+
+        fetch("api/posts/count")
+            .then((res) => { return res.json(); })
+            .then((data) => {
+                setTotalPosts(data)
+            }).catch((e) => console.log("Error retrieving post count: " + e));
     }, []);
 
     return (
         <section className="latest-post">
-            {latestPost ? < Post {...latestPost} key={latestPost.id} /> : <h1>Loading...</h1>}
+            {latestPost ? < Post {...latestPost} key={latestPost.id} postNumber={totalPosts} /> : <h1>Loading...</h1>}
 
             {/* update YouTube video url */}
             {isAdmin &&

diff --git a/devblog/devblog/ClientApp/src/pages/Posts.tsx b/devblog/devblog/ClientApp/src/pages/Posts.tsx
@@ -12,24 +12,13 @@ const Posts = () => {
     const [isAdmin, setIsAdmin] = useState(false);
     const [pageNum, setPageNum] = useState(1);
     const [totalPages, setTotalPages] = useState(0);
-
-    const pageDown = (() => {
-        if (pageNum > 0) {
-            setPageNum(pageNum - 1);
-        }
-
-        console.log(totalPages);
-    });
-
-    const pageUp = (() => {
-        setPageNum(pageNum + 1);
-        console.log(totalPages);
-    });
+    const [totalPosts, setTotalPosts] = useState(0);
 
     useEffect(() => {
         fetch(`api/posts/page/${pageNum}`)
             .then((res) => { return res.json(); })
-            .then((data) => setPosts(data));
+            .then((data) => setPosts(data))
+            .catch((e) => console.log("Error retrieving posts: " + e))
     }, [pageNum]);
 
 
@@ -39,21 +28,27 @@ const Posts = () => {
             .then((res) => { return res.json(); })
             .then((data) => {
                 setTotalPages(data)
-            });
+            }).catch((e) => console.log("Error retrieving page count: " + e));
+
+        fetch("api/posts/count")
+            .then((res) => { return res.json(); })
+            .then((data) => {
+                setTotalPosts(data)
+            }).catch((e) => console.log("Error retrieving post count: " + e));
     }, []);
 
     const Pager = () => {
         return <div className="pager">
             {pageNum > 1 ? (
-                <MdChevronLeft className="arrow-visible" onClick={pageDown} />
+                <MdChevronLeft className="arrow-visible" onClick={() => pageNum > 0 && setPageNum(pageNum - 1)} />
             ) : (
                 <MdChevronLeft className="arrow-hidden" />
             )}
 
             <span>{pageNum}</span>
 
             {pageNum < totalPages ? (
-                <MdChevronRight className="arrow-visible" onClick={pageUp} />
+                <MdChevronRight className="arrow-visible" onClick={() => setPageNum(pageNum + 1)} />
             ) : (
                 <MdChevronRight className="arrow-hidden" />
             )}
@@ -64,7 +59,7 @@ const Posts = () => {
         <section className="posts">
             <Pager />
             {isAdmin && <Link className="create-post-btn" to="/posts/create">Create Post</Link>}
-            {posts.length === 0 ? <h1>Loading...</h1> : posts.map((p) => <Post key={p.id} {...p} />)}
+            {posts.length === 0 ? <h1>Loading...</h1> : posts.map((p, i) => <Post key={p.id} {...p} postNumber={totalPosts - 5 * (pageNum - 1) - i} />)}
             <Pager />
         </section>
     );

diff --git a/devblog/devblog/Controllers/PostsController.cs b/devblog/devblog/Controllers/PostsController.cs
@@ -47,6 +47,17 @@ public async Task<int> GetPageCount()
             return count;
         }
 
+        /// <summary>
+        /// Gets the total post count
+        /// </summary>
+        /// <returns>int</returns>
+        [HttpGet("count")]
+        public async Task<int> GetPostCount()
+        {
+            int count = await _posts.GetPostCount();
+            return count;
+        }
+
         /// <summary>
         /// Retrieves Specified Post
         /// </summary>

diff --git a/devblog/devblog/Interfaces/IPostService.cs b/devblog/devblog/Interfaces/IPostService.cs
@@ -18,6 +18,12 @@ public interface IPostService
         /// <returns>int</returns>
         Task<int> GetPageCount();
 
+        /// <summary>
+        /// Gets the total post count
+        /// </summary>
+        /// <returns>int</returns>
+        Task<int> GetPostCount();
+
         /// <summary>
         /// Retrieves all posts (5 max) for specified page
         /// </summary>

diff --git a/devblog/devblog/Services/PostService.cs b/devblog/devblog/Services/PostService.cs
@@ -65,14 +65,24 @@ public async Task<UploadStatus> Create(PostUpload post)
             return uploadStatus;
         }
 
+        /// <summary>
+        /// Gets the total post count
+        /// </summary>
+        /// <returns>int</returns>
+        public async Task<int> GetPostCount()
+        {
+            int postCount = await _db.Post.CountAsync();
+            return postCount;
+        }
+
         /// <summary>
         /// Gets the total page count
         /// </summary>
         /// <returns>int</returns>
         public async Task<int> GetPageCount()
         {
-            var postCount = await _db.Post.CountAsync();
-            var pageCount = (int)Math.Ceiling(postCount / 5.0);
+            int postCount = await _db.Post.CountAsync();
+            int pageCount = (int)Math.Ceiling(postCount / 5.0);
             return pageCount;
         }