diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index 1d338ea..7fcb32c 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -81,6 +81,10 @@ } th { + padding: 0.3rem; + display: flex; + align-items: center; + gap: 0.6rem; cursor: pointer; width: 100%; height: 100%; @@ -88,13 +92,21 @@ font-size: 1.6rem; justify-self: center; background: transparent; - color: $base-gray; @include transition-std; + span { + width: 100%; + color: $base-gray; + @include transition-std; + } &.active { background: $light-blue; - color: $base-black; + @include transition-std; + span { + color: $base-black; + @include transition-std; + } } } @@ -242,7 +254,6 @@ font-size: 1.6rem; justify-self: center; background: transparent; - color: $base-gray; @include transition-std; } diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index 709d133..1576d66 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -5,6 +5,8 @@ import { PostContext } from "../context/PostContext"; import { IconContext } from "react-icons"; // Icons +import { FaArrowUp } from "react-icons/fa"; +import { FaArrowDown } from "react-icons/fa"; import { FaBox } from "react-icons/fa"; import { BiLinkExternal } from "react-icons/bi"; @@ -31,8 +33,7 @@ const Posts = () => { const contextValue: ContextType = useContext(PostContext); const { posts, setPosts } = contextValue.postValue; const { sources } = contextValue.sourceValue; - const [showAll, setShowAll] = useState(true); - const [category, setCategory] = useState("All"); + const [category, setCategory] = useState(""); const [sort, setSort] = useState("id"); const [page, setPage] = useState({ perPage: 10, @@ -41,7 +42,6 @@ const Posts = () => { const [params, setParams] = useState({ id: "asc", - source: "asc", title: "asc", link: "asc", date: "asc", @@ -56,15 +56,9 @@ const Posts = () => { getPosts( setLoad, setPosts, - `?sortBy=${sort}.${params[key]}&strLimit=${page.perPage}&strOffset=${page.pageNumber}&filter=${search}` + `?sortBy=${sort}.${params[key]}&category=${category}&strLimit=${page.perPage}&strOffset=${page.pageNumber}&filter=${search}` ); - }, [params, sort, page, search]); - - useEffect(() => { - if (!showAll) { - setPage({ ...page, perPage: 60 }); - } - }, [showAll, page.perPage]); + }, [params, sort, page, search, category]); return (
@@ -80,13 +74,19 @@ const Posts = () => {
-