From 1f8142976fae2c32a590fc04be3502077401434d Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Fri, 16 Sep 2022 16:50:01 +0500 Subject: [PATCH] posts functionality improved --- src/assets/styles/_posts.scss | 6 +- src/pages/Post.tsx | 6 +- src/pages/Posts.tsx | 116 +++++++++++++++++----------------- src/types/posts.ts | 4 +- 4 files changed, 66 insertions(+), 66 deletions(-) diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index 2746b99..b10c7b9 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -48,10 +48,6 @@ select { padding: 1rem 1.2rem; border: 1px solid #b8b9bb; - - option { - text-transform: capitalize; - } } &.inner { @@ -96,7 +92,7 @@ min-height: 7rem; padding: 1rem; display: grid; - grid-template-columns: 1fr 2.5fr 2fr 2fr 1.5fr 3fr; + grid-template-columns: 1fr 2.5fr 2fr 2fr 2fr 1.5fr 3fr; gap: 1rem; } diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index dfe233d..caf1750 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -19,7 +19,7 @@ const Post = () => { category: "", title: "", link: "", - date: date, + publish_date: date, summary: "", createdAt: date, updatedAt: date, @@ -80,7 +80,9 @@ const Post = () => {
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index d919e64..297f7d7 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -12,7 +12,7 @@ import { getPosts } from "../helpers/apiRequests"; import { PostType } from "../types/posts"; import { Link } from "react-router-dom"; import { parseDate } from "../helpers/parseDate"; -import { capitalizeFirstLetter } from "../helpers/stringMethods"; +// import { capitalizeFirstLetter } from "../helpers/stringMethods"; // Types import { paramsType } from "../types/posts"; @@ -37,7 +37,9 @@ const Posts = () => { title: "asc", link: "asc", date: "asc", - summary: "asc", + published: "asc", + created: "asc", + updated: "asc", }); const [search, setSearch] = useState(""); @@ -47,17 +49,13 @@ const Posts = () => { setPosts, `?sortBy=${sort}.${params[key]}&strLimit=${page.perPage}&strOffset=${page.pageNumber}&filter=${search}` ); - }, [params, sort, page, search]); + }, [params, sort, page, search, category]); useEffect(() => { const categoriesTemp: string[] = categories; if (posts[0]) { if (posts[0].id !== -1) { - posts.map((post: PostType) => - categoriesTemp.push( - capitalizeFirstLetter(post.category.toLowerCase()) - ) - ); + posts.map((post: PostType) => categoriesTemp.push(post.category)); let categoriesTempUnique = categoriesTemp.filter((element, index) => { return categoriesTemp.indexOf(element) === index; }); @@ -66,7 +64,11 @@ const Posts = () => { } }, [posts]); - console.log(posts[0]); + useEffect(() => { + if (category !== "All") { + setPage({ ...page, perPage: 100 }); + } + }, [category, page.perPage]); return (
@@ -78,7 +80,7 @@ const Posts = () => {
- + ) => { setPage({ ...page, perPage: parseInt(e.target.value) }); @@ -115,18 +118,13 @@ const Posts = () => { - - - - + + + + + + +
@@ -148,7 +146,7 @@ const Posts = () => { className={sort === "id" ? "active" : ""} onClick={() => { setSort("id"); - if (params.id === "asc") + if (params.id !== "asc") setParams({ ...params, id: "asc" }); else setParams({ ...params, id: "desc" }); }} @@ -159,18 +157,18 @@ const Posts = () => { className={sort === "category" ? "active" : ""} onClick={() => { setSort("category"); - if (params.id === "asc") + if (params.category !== "asc") setParams({ ...params, category: "asc" }); else setParams({ ...params, category: "desc" }); }} > - Category + Source { setSort("title"); - if (params.id === "asc") + if (params.title !== "asc") setParams({ ...params, title: "asc" }); else setParams({ ...params, title: "desc" }); }} @@ -181,7 +179,7 @@ const Posts = () => { className={sort === "link" ? "active" : ""} onClick={() => { setSort("link"); - if (params.id === "asc") + if (params.link !== "asc") setParams({ ...params, link: "asc" }); else setParams({ ...params, link: "desc" }); }} @@ -189,32 +187,43 @@ const Posts = () => { Link { - setSort("date"); - if (params.id === "asc") - setParams({ ...params, date: "asc" }); - else setParams({ ...params, date: "desc" }); + setSort("published"); + if (params.published !== "asc") + setParams({ ...params, published: "asc" }); + else setParams({ ...params, published: "desc" }); }} > - Date + Published { - setSort("summary"); - if (params.id === "asc") - setParams({ ...params, summary: "asc" }); - else setParams({ ...params, summary: "desc" }); + setSort("created"); + if (params.created !== "asc") + setParams({ ...params, created: "asc" }); + else setParams({ ...params, created: "desc" }); }} > - Summary + Created + + { + setSort("updated"); + if (params.updated !== "asc") + setParams({ ...params, updated: "asc" }); + else setParams({ ...params, updated: "desc" }); + }} + > + Updated {posts[0] ? ( posts[0].id !== -1 ? ( category === "All" ? ( - posts.map((post: PostType, index: number) => { + posts.map((post: PostType) => { return ( { > {post.id} - - {capitalizeFirstLetter( - post.category.toLowerCase() - )} - + {post.category} {post.title} { - {/* {parseDate(post.publish_date)[0]} */} - {post.summary} + {parseDate(post.publish_date)[0]} + {parseDate(post.createdAt)[0]} + {parseDate(post.updatedAt)[0]} ); }) ) : ( posts.map((post: PostType, index: number) => { - if ( - capitalizeFirstLetter(post.category.toLowerCase()) === - category - ) { + if (post.category === category) { return ( { > {index + 1} - - {capitalizeFirstLetter( - post.category.toLowerCase() - )} - + {post.category} {post.title} { - {/* {parseDate(post.publish_date)[0]} */} - {post.summary} + {parseDate(post.publish_date)[0]} + {parseDate(post.createdAt)[0]} + {parseDate(post.updatedAt)[0]} ); diff --git a/src/types/posts.ts b/src/types/posts.ts index b3394e3..318cd7d 100644 --- a/src/types/posts.ts +++ b/src/types/posts.ts @@ -15,5 +15,7 @@ export interface paramsType { title: "asc" | "desc"; link: "asc" | "desc"; date: "asc" | "desc"; - summary: "asc" | "desc"; + published: "asc" | "desc"; + created: "asc" | "desc"; + updated: "asc" | "desc"; }