fix: usr blog search fixed #506

added search in write
Planet-NULLCAST · Jan 28, 2022 · b1446c5 · b1446c5
1 parent f3b3692
commit b1446c5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 9 deletions.
diff --git a/component/myblogs/Navbar.jsx b/component/myblogs/Navbar.jsx
@@ -54,7 +54,7 @@ export default function Navbar() {
     } catch (err) {
       notify(err?.response?.data?.message ?? err?.message, 'error');
     }
-      // setTagOptions;
+    // setTagOptions;
     const allOption = {
       label: "ALL TAGS",
       value: ""
@@ -88,16 +88,16 @@ export default function Navbar() {
         data: { data: post, message }
       } = await PostService.createPost(createThisPost);
       // notify(message);
-      
+
       if (post.created_by === Number(userCookie.id)) {
         setAddactive(true)
         router.push({
           pathname: "/posts/write",
           query: { post_id: post.id }
-        }); 
-        
+        });
+
       }
-      notify(message,'success')
+      notify(message, 'success')
     } catch (err) {
       setAddactive(true)
       notify(err?.response?.data?.message ?? err?.message, 'error');
@@ -121,13 +121,24 @@ export default function Navbar() {
     createPost(newPost);
   };
 
+  const handleSearch = (e) => {
+    e.preventDefault();
+    console.log(e.target.search.value);
+    router.push({
+      pathname: "/posts",
+      query: { search: e.target.search.value }
+    });
+  };
+
   return (
     <div className="bg-white flex flex-row items-center rounded shadow-sm h-sub-nav">
       <div className="flex flex-row justify-between items-center font-semibold h-full w-full md:px-5 px-3">
         <div className="cursor-pointer h-16 flex justify-center items-center relative">
           <span className="mt-1 text-gray-900">My Posts</span>
           <div className="border border-b-4 border-gray-900 absolute bottom-0 left-0 w-full"></div>
+
         </div>
+
         <div className="flex items-center py-3">
           <Select
             options={tagOptions}
@@ -161,14 +172,38 @@ export default function Navbar() {
             onChange={handleStatusSelect}
             instanceId="select-status"
           />
+          <div className="flex m-0 mr-4 border border-gray-400 rounded-lg p-2 items-center">
+            <form onSubmit={handleSearch} className="bg-white">
+              <input
+                type="text"
+                placeholder="Search for blogs"
+                name="search"
+              />
+              <button >
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 20 13"
+                  fill="#fff"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M19.706 5.758L14.456.305a.975.975 0 00-1.42.004c-.392.41-.39 1.074.003 1.482l3.524 3.66H1.004C.45 5.452 0 5.922 0 6.5s.45 1.048 1.004 1.048h15.559l-3.524 3.66a1.081 1.081 0 00-.003 1.483.975.975 0 001.42.004l5.249-5.452a1.083 1.083 0 000-1.485z"
+                    fill="#000"
+                  />
+                </svg>
+              </button>
+            </form>
+          </div>
 
           {/* Add a New Post creates a new post and goes to /posts/write/:postId  */}
           <div
-            onClick={()=> addactive && handleAddNewPost()}
+            onClick={() => addactive && handleAddNewPost()}
             className={`bg-black h-8 hover:bg-white border border-black text-white hover:text-black hidden md:flex items-center text-sm font-semibold px-4 py-2 md:mr-3 rounded-sm cursor-pointer duration-700 ${styles.h_40px}`}
           >
             <p>Add a New Post</p>
           </div>
+
         </div>
       </div>
     </div>

diff --git a/pages/posts/index.js b/pages/posts/index.js
@@ -80,6 +80,7 @@ export default function Posts() {
     const newReqData = {
       sort_field: "updated_at",
       order: "DESC",
+      search: router.query.search,
       page: router.query.page,
       limit: postData.limit,
       tag: router.query.tag,
@@ -102,7 +103,7 @@ export default function Posts() {
         };
       });
     } catch (err) {
-      notify(err?.response?.data?.message ?? err?.message, 'error');
+      notify(err?.response?.data?.message ?? err?.message, "error");
     }
   }
 
@@ -113,7 +114,8 @@ export default function Posts() {
       query: {
         page: newPageNo,
         tag: router.query.tag,
-        status: router.query.status
+        status: router.query.status,
+        search: router.query.search
       }
     });
   };
@@ -130,7 +132,11 @@ export default function Posts() {
           {loaded ? (
             postData.posts.length > 0 ? (
               <div>
-                <MyBlogs posts={postData.posts} currentPage={postData.page} fetchPosts={() => getPosts()} />
+                <MyBlogs
+                  posts={postData.posts}
+                  currentPage={postData.page}
+                  fetchPosts={() => getPosts()}
+                />
               </div>
             ) : !tagFilter && !statusFilter ? (
               <div className="text-gray-700 text-center font-semibold mt-8">