posts page filter and reset btn
This commit is contained in:
parent
8e7aedc837
commit
0e6ef23cbf
|
|
@ -165,6 +165,34 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__reset {
|
||||
color: #fff;
|
||||
|
||||
max-width: 30rem;
|
||||
font-size: 1.6rem;
|
||||
border-radius: 0.5rem;
|
||||
background: #2fad8c;
|
||||
padding: 0.5rem 2rem;
|
||||
transition: 0.3s all ease;
|
||||
text-align: center;
|
||||
height: 67%;
|
||||
min-width: 20rem;
|
||||
cursor: pointer;
|
||||
@include transition-std;
|
||||
|
||||
&:hover {
|
||||
@include transition-std;
|
||||
background-color: #268a6f;
|
||||
border: 0.1rem solid #268a6f;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ const Aside = ({ aside, setAside }: Props) => {
|
|||
<FaHive className="aside__img" />
|
||||
</IconContext.Provider>
|
||||
|
||||
<h2>Elements</h2>
|
||||
<h2>Posts</h2>
|
||||
</li>
|
||||
<li className="aside__list__element">
|
||||
<Link
|
||||
|
|
|
|||
|
|
@ -28,6 +28,11 @@ interface pageType {
|
|||
pageNumber: number;
|
||||
}
|
||||
|
||||
interface searchType {
|
||||
type: string;
|
||||
query: string;
|
||||
}
|
||||
|
||||
const Posts = () => {
|
||||
const [load, setLoad] = useState<boolean>(false);
|
||||
const contextValue: ContextType = useContext<ContextType>(PostContext);
|
||||
|
|
@ -39,6 +44,10 @@ const Posts = () => {
|
|||
perPage: 10,
|
||||
pageNumber: 1,
|
||||
});
|
||||
const [search, setSearch] = useState<searchType>({
|
||||
type: "fil_title",
|
||||
query: "",
|
||||
});
|
||||
|
||||
const [params, setParams] = useState<paramsType>({
|
||||
id: "asc",
|
||||
|
|
@ -49,14 +58,13 @@ const Posts = () => {
|
|||
created: "asc",
|
||||
updated: "asc",
|
||||
});
|
||||
const [search, setSearch] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const key = sort as keyof typeof params;
|
||||
getPosts(
|
||||
setLoad,
|
||||
setPosts,
|
||||
`?sortBy=${sort}.${params[key]}&category=${category}&strLimit=${page.perPage}&strOffset=${page.pageNumber}&filter=${search}`
|
||||
`?sortBy=${sort}.${params[key]}&category=${category}&strLimit=${page.perPage}&strOffset=${page.pageNumber}&${search.type}=${search.query}`
|
||||
);
|
||||
}, [params, sort, page, search, category]);
|
||||
|
||||
|
|
@ -119,17 +127,55 @@ const Posts = () => {
|
|||
<option value="100">100</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="posts__select">
|
||||
<label htmlFor="pp">Filter by</label>
|
||||
<select
|
||||
id="pp"
|
||||
value={search.type}
|
||||
onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setSearch({ ...search, type: e.target.value });
|
||||
}}
|
||||
>
|
||||
<option value="fil_title" defaultChecked>
|
||||
Title
|
||||
</option>
|
||||
<option value="fil_link">Link</option>
|
||||
<option value="fil_publish_date">Publish date</option>
|
||||
<option value="fil_summary">Summary</option>
|
||||
<option value="fil_createdAt">Created</option>
|
||||
<option value="fil_updatedAt">Updated</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="posts__select">
|
||||
<label htmlFor="filter">Filter</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="filter"
|
||||
value={search}
|
||||
value={search.query}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
setSearch({ ...search, query: e.target.value });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="posts__select posts__reset__btn">
|
||||
<button
|
||||
className="posts__reset"
|
||||
onClick={() => {
|
||||
setCategory("");
|
||||
setSearch({
|
||||
type: "fil_title",
|
||||
query: "",
|
||||
});
|
||||
setPage({
|
||||
perPage: 10,
|
||||
pageNumber: 1,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table className={load ? "posts__table disabled" : "posts__table"}>
|
||||
<thead>
|
||||
|
|
@ -268,34 +314,42 @@ const Posts = () => {
|
|||
<tbody>
|
||||
{load ? <Loader /> : null}
|
||||
{posts ? (
|
||||
posts[0].id !== -1 ? (
|
||||
posts.map((post: PostType) => {
|
||||
return (
|
||||
<Link
|
||||
className="post-link"
|
||||
to={`/posts/${post.id}`}
|
||||
key={uuidv4()}
|
||||
>
|
||||
<tr>
|
||||
<td>{post.id}</td>
|
||||
<td>{post.category}</td>
|
||||
<td>{post.title}</td>
|
||||
<td>
|
||||
<a
|
||||
href={post.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<BiLinkExternal />
|
||||
</a>
|
||||
</td>
|
||||
<td>{parseDate(post.publish_date)[0]}</td>
|
||||
<td>{parseDate(post.createdAt)[0]}</td>
|
||||
<td>{parseDate(post.updatedAt)[0]}</td>
|
||||
</tr>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
posts.length > 0 ? (
|
||||
posts[0].id !== -1 ? (
|
||||
posts.map((post: PostType) => {
|
||||
return (
|
||||
<Link
|
||||
className="post-link"
|
||||
to={`/posts/${post.id}`}
|
||||
key={uuidv4()}
|
||||
>
|
||||
<tr>
|
||||
<td>{post.id}</td>
|
||||
<td>{post.category}</td>
|
||||
<td>{post.title}</td>
|
||||
<td>
|
||||
<a
|
||||
href={post.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<BiLinkExternal />
|
||||
</a>
|
||||
</td>
|
||||
<td>{parseDate(post.publish_date)[0]}</td>
|
||||
<td>{parseDate(post.createdAt)[0]}</td>
|
||||
<td>{parseDate(post.updatedAt)[0]}</td>
|
||||
</tr>
|
||||
</Link>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<tr>
|
||||
<td className="table__empty" colSpan={7}>
|
||||
No posts
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
) : (
|
||||
<tr>
|
||||
<td className="table__empty" colSpan={7}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue