diff --git a/devblog/devblog/ClientApp/src/components/Post.tsx b/devblog/devblog/ClientApp/src/components/Post.tsx index bad5fa1b..ef9ee406 100644 --- a/devblog/devblog/ClientApp/src/components/Post.tsx +++ b/devblog/devblog/ClientApp/src/components/Post.tsx @@ -49,6 +49,7 @@ const Post = (props: IPost) => {
{/* DATE */}
+ Log {props.postNumber} {isAdmin && } diff --git a/devblog/devblog/ClientApp/src/components/styles/Post.css b/devblog/devblog/ClientApp/src/components/styles/Post.css index f2be41af..a6f3d3ea 100644 --- 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 index 6b78ac3b..765ad20c 100644 --- 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 index 5117bed8..55f0e199 100644 --- 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(); const [isAdmin, setIsAdmin] = useState(false); const [url, setUrl] = useState(); + 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 (
- {latestPost ? < Post {...latestPost} key={latestPost.id} /> :

Loading...

} + {latestPost ? < Post {...latestPost} key={latestPost.id} postNumber={totalPosts} /> :

Loading...

} {/* update YouTube video url */} {isAdmin && diff --git a/devblog/devblog/ClientApp/src/pages/Posts.tsx b/devblog/devblog/ClientApp/src/pages/Posts.tsx index 6ba464c3..e623bfc9 100644 --- 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,13 +28,19 @@ 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
{pageNum > 1 ? ( - + pageNum > 0 && setPageNum(pageNum - 1)} /> ) : ( )} @@ -53,7 +48,7 @@ const Posts = () => { {pageNum} {pageNum < totalPages ? ( - + setPageNum(pageNum + 1)} /> ) : ( )} @@ -64,7 +59,7 @@ const Posts = () => {
{isAdmin && Create Post} - {posts.length === 0 ?

Loading...

: posts.map((p) => )} + {posts.length === 0 ?

Loading...

: posts.map((p, i) => )}
); diff --git a/devblog/devblog/Controllers/PostsController.cs b/devblog/devblog/Controllers/PostsController.cs index a06de709..afa7ba57 100644 --- a/devblog/devblog/Controllers/PostsController.cs +++ b/devblog/devblog/Controllers/PostsController.cs @@ -47,6 +47,17 @@ public async Task GetPageCount() return count; } + /// + /// Gets the total post count + /// + /// int + [HttpGet("count")] + public async Task GetPostCount() + { + int count = await _posts.GetPostCount(); + return count; + } + /// /// Retrieves Specified Post /// diff --git a/devblog/devblog/Interfaces/IPostService.cs b/devblog/devblog/Interfaces/IPostService.cs index bd278224..9bdfd517 100644 --- a/devblog/devblog/Interfaces/IPostService.cs +++ b/devblog/devblog/Interfaces/IPostService.cs @@ -18,6 +18,12 @@ public interface IPostService /// int Task GetPageCount(); + /// + /// Gets the total post count + /// + /// int + Task GetPostCount(); + /// /// Retrieves all posts (5 max) for specified page /// diff --git a/devblog/devblog/Services/PostService.cs b/devblog/devblog/Services/PostService.cs index 386eedad..ee82ce9a 100644 --- a/devblog/devblog/Services/PostService.cs +++ b/devblog/devblog/Services/PostService.cs @@ -65,14 +65,24 @@ public async Task Create(PostUpload post) return uploadStatus; } + /// + /// Gets the total post count + /// + /// int + public async Task GetPostCount() + { + int postCount = await _db.Post.CountAsync(); + return postCount; + } + /// /// Gets the total page count /// /// int public async Task 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; }