posts page filter and reset btn

src/assets/styles/_posts.scss

@@ -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 {

src/components/Aside.tsx

@@ -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

src/pages/Posts.tsx

@@ -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,6 +314,7 @@ const Posts = () => {
             <tbody>
               {load ? <Loader /> : null}
               {posts ? (
+                posts.length > 0 ? (
                   posts[0].id !== -1 ? (
                     posts.map((post: PostType) => {
                       return (
@@ -309,6 +356,13 @@ const Posts = () => {
                       No posts
                     </td>
                   </tr>
+                )
+              ) : (
+                <tr>
+                  <td className="table__empty" colSpan={7}>
+                    No posts
+                  </td>
+                </tr>
               )}
             </tbody>
           </table>