Add paging

The-DevBlog · Sep 20, 2023 · 38fb483 · 38fb483
1 parent d38ccf2
commit 38fb483
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 13 deletions.
diff --git a/devblog/devblog/ClientApp/src/pages/Posts.tsx b/devblog/devblog/ClientApp/src/pages/Posts.tsx
@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { MdChevronLeft } from "react-icons/md"
+import { MdChevronRight } from "react-icons/md"
 import IPost from "../interfaces/IPostProps";
 import Post from "../components/Post";
 import { GetIsAdmin } from "../components/AuthenticationService";
@@ -8,22 +10,64 @@ import "./styles/Posts.css";
 const Posts = () => {
     const [posts, setPosts] = useState<IPost[]>([]);
     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);
+    });
 
-    // fetch posts from server
     useEffect(() => {
-        setIsAdmin(GetIsAdmin);
-        fetch(`api/posts`)
+        fetch(`api/posts/page/${pageNum}`)
             .then((res) => { return res.json(); })
             .then((data) => setPosts(data));
+    }, [pageNum]);
+
+
+    useEffect(() => {
+        setIsAdmin(GetIsAdmin);
+        fetch("api/posts/page/count")
+            .then((res) => { return res.json(); })
+            .then((data) => {
+                setTotalPages(data)
+            });
     }, []);
 
+    const Pager = () => {
+        return <div className="pager">
+            {pageNum > 1 ? (
+                <MdChevronLeft className="arrow-visible" onClick={pageDown} />
+            ) : (
+                <MdChevronLeft className="arrow-hidden" />
+            )}
+
+            <span>{pageNum}</span>
+
+            {pageNum < totalPages ? (
+                <MdChevronRight className="arrow-visible" onClick={pageUp} />
+            ) : (
+                <MdChevronRight className="arrow-hidden" />
+            )}
+        </div>
+    }
+
     return (
         <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} />)}
+            <Pager />
         </section>
     );
-
 }
 
-export default Posts;
+export default Posts;
diff --git a/devblog/devblog/ClientApp/src/pages/styles/Posts.css b/devblog/devblog/ClientApp/src/pages/styles/Posts.css
@@ -4,4 +4,34 @@
     flex-direction: column;
     justify-content: center;
     margin: 150px 20px 0px 20px;
+}
+
+.pager:first-child {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+.pager:last-child {
+    display: flex;
+    margin-bottom: 100px;
+}
+
+.pager span {
+    font-family: 'Chivo Mono', monospace;
+    font-size: 20px;
+    line-height: 35px;
+}
+
+.arrow-hidden {
+    visibility: hidden;
+}
+
+.pager svg {
+    font-size: 35px;
+    opacity: 0.7;
+}
+
+.pager svg:hover {
+    cursor: pointer;
+    opacity: 1.0;
 }
diff --git a/devblog/devblog/Controllers/PostsController.cs b/devblog/devblog/Controllers/PostsController.cs
@@ -22,16 +22,35 @@ public PostsController(IPostService posts, IImgService imgService)
         /// Retrieves all posts
         /// </summary>
         /// <returns>List<Post></returns>
-        [HttpGet]
-        public async Task<List<Post>> Get()
+        //[HttpGet]
+        //public async Task<List<Post>> Get()
+        //{
+        //    var posts = await _posts.Get();
+        //    return posts;
+        //}
+
+        [HttpGet("page/{pageNum}")]
+        public async Task<List<Post>> GetPage(int pageNum)
         {
-            var posts = await _posts.Get();
+            var posts = await _posts.GetPage(pageNum);
             return posts;
         }
 
         /// <summary>
-        /// Retrieves all posts
+        /// Gets the total page count
+        /// </summary>
+        /// <returns>int</returns>
+        [HttpGet("page/count")]
+        public async Task<int> GetPageCount()
+        {
+            var count = await _posts.GetPageCount();
+            return count;
+        }
+
+        /// <summary>
+        /// Retrieves Specified Post
         /// </summary>
+        /// <param name="id">Post Id</param>
         /// <returns>List<Post></returns>
         [HttpGet("{id}")]
         public async Task<Post> Get(int id)

diff --git a/devblog/devblog/Interfaces/IPostService.cs b/devblog/devblog/Interfaces/IPostService.cs
@@ -13,10 +13,17 @@ public interface IPostService
         Task<UploadStatus> Create(PostUpload post);
 
         /// <summary>
-        /// Retrieves all posts
+        /// Gets the total page count
         /// </summary>
+        /// <returns>int</returns>
+        Task<int> GetPageCount();
+
+        /// <summary>
+        /// Retrieves all posts (5 max) for specified page
+        /// </summary>
+        /// <param name="pageNum">The page number to get posts from</param>
         /// <returns>List<Post></returns>
-        Task<List<Post>> Get();
+        Task<List<Post>> GetPage(int pageNum);
 
         /// <summary>
         /// Retrieves a specified post

diff --git a/devblog/devblog/Services/PostService.cs b/devblog/devblog/Services/PostService.cs
@@ -65,16 +65,30 @@ public async Task<UploadStatus> Create(PostUpload post)
         }
 
         /// <summary>
-        /// Retrieves all posts
+        /// 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);
+            return pageCount;
+        }
+
+        /// <summary>
+        /// Retrieves all posts (5 max) for specified page
+        /// </summary>
+        /// <param name="pageNum">The page number to get posts from</param>
         /// <returns>List<Post></returns>
-        public async Task<List<Post>> Get()
+        public async Task<List<Post>> GetPage(int pageNum)
         {
             var posts = await _db.Post.OrderByDescending(x => x.Date)
                                       .Include(x => x.Comments)
                                       .Include(x => x.Imgs)
                                       .Include(x => x.UpVotes)
                                       .Include(x => x.DownVotes)
+                                      .Skip((pageNum - 1) * 5)
+                                      .Take(5)
                                       .ToListAsync();
 
             return posts;