Merge pull request #4373 from AkashS20/fixblog

Fixed clearing of blog search bar on changing view from list to grid
layer5io · Jun 19, 2023 · ba80ad5 · ba80ad5
2 parents 34bcadb + 08da69d
commit ba80ad5
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 44 deletions.
diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import useDataList from "../../utils/usedataList";
 import SEO from "../../components/seo";
 import BlogGrid from "../../sections/Blog/Blog-grid";
 import { graphql } from "gatsby";
@@ -46,6 +47,19 @@ export const query = graphql`
 
 const Blog = (props) => {
   const [isListView, setIsListView] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const { queryResults, searchData } = useDataList(
+    props.data.allMdx.nodes,
+    setSearchQuery,
+    searchQuery,
+    ["frontmatter", "title"],
+    "id"
+  );
+  const [currentPage, setCurrentPage] = useState(1);
+  const [postsPerPage] = useState(10);
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const searchedPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost);
   const setListView = () => {
     setIsListView(true);
   };
@@ -68,7 +82,14 @@ const Blog = (props) => {
         setListView={setListView}
         setGridView={setGridView}
         pageContext={props.pageContext}
-        data={props.data}
+        searchedPosts={searchedPosts}
+        setCurrentPage={setCurrentPage}
+        postsPerPage={postsPerPage}
+        searchData={searchData}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        currentPage={currentPage}
+        queryResults={queryResults}
       />
 
     </>

diff --git a/src/sections/Blog/Blog-grid/index.js b/src/sections/Blog/Blog-grid/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Container, Row, Col } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
 import Sidebar from "../Blog-sidebar";
@@ -8,28 +8,20 @@ import Card from "../../../components/Card";
 import BlogViewToolTip from "../../../components/blog-view-tooltip";
 import SearchBox from "../../../reusecore/Search";
 import Pagination from "../../Resources/Resources-grid/paginate";
-import useDataList from "../../../utils/usedataList";
 
 const BlogGrid = ({
   isListView,
   setListView,
   setGridView,
   pageContext,
-  data,
+  searchData,
+  searchQuery,
+  setCurrentPage,
+  currentPage,
+  searchedPosts,
+  queryResults,
+  postsPerPage,
 }) => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [postsPerPage] = useState(10);
-  const indexOfLastPost = currentPage * postsPerPage;
-  const indexOfFirstPost = indexOfLastPost - postsPerPage;
-  const [searchQuery, setSearchQuery] = useState("");
-  const { queryResults, searchData } = useDataList(
-    data.allMdx.nodes,
-    setSearchQuery,
-    searchQuery,
-    ["frontmatter", "title"],
-    "id"
-  );
-  const searchedPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost);
   // Change page
   const paginate = (pageNumber) => {
     setCurrentPage(pageNumber);

diff --git a/src/sections/Blog/Blog-list/index.js b/src/sections/Blog/Blog-list/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import BlogViewToolTip from "../../../components/blog-view-tooltip";
 import { Container, Row, Col } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
@@ -8,32 +8,23 @@ import { BlogPageWrapper } from "./blogList.style";
 import RssFeedIcon from "../../../assets/images/socialIcons/rss-sign.svg";
 import Pagination from "../../Resources/Resources-grid/paginate";
 import SearchBox from "../../../reusecore/Search";
-import useDataList from "../../../utils/usedataList";
 
 const BlogList = ({
   isListView,
   setListView,
   setGridView,
   pageContext,
-  data,
+  currentPage,
+  searchQuery,
+  searchData,
+  setCurrentPage,
+  queryResults,
+  postsPerPage,
+  searchedPosts,
 }) => {
-  const [currentPage, setCurrentPage] = useState(1);
-  const [postsPerPage] = useState(10);
-  const indexOfLastPost = currentPage * postsPerPage;
-  const indexOfFirstPost = indexOfLastPost - postsPerPage;
-  let { totalCount, nodes } = data.allMdx;
-  const [searchQuery, setSearchQuery] = useState("");
-  const { queryResults, searchData } = useDataList(
-    nodes,
-    setSearchQuery,
-    searchQuery,
-    ["frontmatter", "title"],
-    "id"
-  );
   const category = pageContext.category ? pageContext.category : null;
   const tag = pageContext.tag ? pageContext.tag : null;
-  const currentPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost);
-  totalCount = queryResults.length;
+  const totalCount = queryResults.length;
   const header = tag
     ? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"`
     : category
@@ -77,14 +68,14 @@ const BlogList = ({
               )}
               <div className="blog-list-wrapper">
                 <Row className="blog-lists">
-                  {currentPosts.length > 0 &&
-                    currentPosts.map(({ id, frontmatter, fields }) => (
+                  {searchedPosts.length > 0 &&
+                    searchedPosts?.map(({ id, frontmatter, fields }) => (
                       <Col xs={12} key={id}>
                         <Card  frontmatter={frontmatter} fields={fields} />
                       </Col>
                     ))}
                   <Col>
-                    {currentPosts.length > 0 && (
+                    {searchedPosts.length > 0 && (
                       <Pagination
                         postsPerPage={postsPerPage}
                         totalPosts={queryResults.length}

diff --git a/src/templates/blog-category-list.js b/src/templates/blog-category-list.js
@@ -1,5 +1,6 @@
 import React from "react";
-
+import { useState } from "react";
+import useDataList from "../utils/usedataList";
 
 
 import SEO from "../components/seo";
@@ -53,13 +54,37 @@ export const query = graphql`
 
 const BlogListPage = ({ pageContext, data }) => {
 
-
+  const [currentPage, setCurrentPage] = useState(1);
+  const [postsPerPage] = useState(10);
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  let { totalCount, nodes } = data.allMdx;
+  const [searchQuery, setSearchQuery] = useState("");
+  const { queryResults, searchData } = useDataList(
+    nodes,
+    setSearchQuery,
+    searchQuery,
+    ["frontmatter", "title"],
+    "id"
+  );
+  const searchedPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost);
   return (
 
     <>
 
 
-      <BlogList data={data} pageContext={pageContext} />
+      <BlogList
+        data={data}
+        pageContext={pageContext}
+        searchedPosts={searchedPosts}
+        setCurrentPage={setCurrentPage}
+        postsPerPage={postsPerPage}
+        searchData={searchData}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        currentPage={currentPage}
+        queryResults={queryResults}
+      />
 
     </>
 

diff --git a/src/templates/blog-tag-list.js b/src/templates/blog-tag-list.js
@@ -1,5 +1,6 @@
 import React from "react";
-
+import { useState } from "react";
+import useDataList from "../utils/usedataList";
 
 
 import SEO from "../components/seo";
@@ -47,13 +48,37 @@ export const query = graphql`query BlogsByTags($tag: String!) {
 
 const BlogListPage = ({ pageContext, data }) => {
 
+  const [currentPage, setCurrentPage] = useState(1);
+  const [postsPerPage] = useState(10);
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  let { totalCount, nodes } = data.allMdx;
+  const [searchQuery, setSearchQuery] = useState("");
+  const { queryResults, searchData } = useDataList(
+    nodes,
+    setSearchQuery,
+    searchQuery,
+    ["frontmatter", "title"],
+    "id"
+  );
+  const searchedPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost);
 
   return (
 
     <>
 
-
-      <BlogList data={data} pageContext={pageContext} />
+      <BlogList
+        data={data}
+        pageContext={pageContext}
+        searchedPosts={searchedPosts}
+        setCurrentPage={setCurrentPage}
+        postsPerPage={postsPerPage}
+        searchData={searchData}
+        searchQuery={searchQuery}
+        setSearchQuery={setSearchQuery}
+        currentPage={currentPage}
+        queryResults={queryResults}
+      />
 
     </>