From 0e6ef23cbf521c89cabdb391219f5a00ca907a22 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Thu, 22 Sep 2022 15:59:05 +0500
Subject: [PATCH] posts page filter and reset btn

---
 src/assets/styles/_posts.scss |  28 ++++++++
 src/components/Aside.tsx      |   2 +-
 src/pages/Posts.tsx           | 118 +++++++++++++++++++++++++---------
 3 files changed, 115 insertions(+), 33 deletions(-)

diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss
index 7fcb32c..137f3b1 100644
--- a/src/assets/styles/_posts.scss
+++ b/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 {
diff --git a/src/components/Aside.tsx b/src/components/Aside.tsx
index 9a9442f..eea54a8 100644
--- a/src/components/Aside.tsx
+++ b/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
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx
index 1576d66..ec53d01 100644
--- a/src/pages/Posts.tsx
+++ b/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,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}>