From 53d870d6a790f8d7703f0e7c20fb5219c9cfcad6 Mon Sep 17 00:00:00 2001 From: Akash Singh Date: Mon, 12 Jun 2023 08:34:30 +0530 Subject: [PATCH 1/2] fixed blog search Signed-off-by: Akash Singh --- src/components/Features-carousel/index.js | 8 ++-- src/pages/blog/index.js | 24 +++++++++++- src/sections/Blog/Blog-grid/index.js | 34 ++++++++++------- src/sections/Blog/Blog-list/index.js | 45 +++++++++++++---------- src/templates/blog-category-list.js | 31 ++++++++++++++-- src/templates/blog-tag-list.js | 30 ++++++++++++++- 6 files changed, 129 insertions(+), 43 deletions(-) diff --git a/src/components/Features-carousel/index.js b/src/components/Features-carousel/index.js index 320e36a117e4..3cdcf47b27d6 100644 --- a/src/components/Features-carousel/index.js +++ b/src/components/Features-carousel/index.js @@ -52,10 +52,10 @@ const FeaturesCarousel = ({ features, heading }) => {

{heading ? heading : "Features"}

{ 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,15 @@ const Blog = (props) => { setListView={setListView} setGridView={setGridView} pageContext={props.pageContext} - data={props.data} + // 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 index 0a5c93d96a11..4b4aa2893302 100644 --- a/src/sections/Blog/Blog-grid/index.js +++ b/src/sections/Blog/Blog-grid/index.js @@ -15,21 +15,27 @@ const BlogGrid = ({ 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); + // 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 index e46c1beae692..74aee77005b4 100644 --- a/src/sections/Blog/Blog-list/index.js +++ b/src/sections/Blog/Blog-list/index.js @@ -15,25 +15,32 @@ const BlogList = ({ setListView, setGridView, pageContext, - data, + // 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 [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 searchedPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost); + const totalCount = queryResults.length; const header = tag ? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"` : category @@ -77,14 +84,14 @@ const BlogList = ({ )}
- {currentPosts.length > 0 && - currentPosts.map(({ id, frontmatter, fields }) => ( + {searchedPosts.length > 0 && + searchedPosts?.map(({ id, frontmatter, fields }) => ( ))} - {currentPosts.length > 0 && ( + {searchedPosts.length > 0 && ( { - + 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 ( <> - + diff --git a/src/templates/blog-tag-list.js b/src/templates/blog-tag-list.js index ce9633ad21de..07c691368fc5 100644 --- a/src/templates/blog-tag-list.js +++ b/src/templates/blog-tag-list.js @@ -1,5 +1,6 @@ import React from "react"; - +import { useState, useEffect } from "react"; +import useDataList from "../utils/usedataList"; import SEO from "../components/seo"; @@ -47,13 +48,38 @@ 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 ( <> - + From 08da69d584d5af28040a22e828ab774a54a93af9 Mon Sep 17 00:00:00 2001 From: Akash Singh Date: Mon, 12 Jun 2023 19:10:01 +0530 Subject: [PATCH 2/2] fix changes Signed-off-by: Akash Singh --- src/pages/blog/index.js | 1 - src/sections/Blog/Blog-grid/index.js | 16 +--------------- src/sections/Blog/Blog-list/index.js | 18 +----------------- src/templates/blog-category-list.js | 2 +- src/templates/blog-tag-list.js | 3 +-- 5 files changed, 4 insertions(+), 36 deletions(-) diff --git a/src/pages/blog/index.js b/src/pages/blog/index.js index cc9bc1ecfa7d..c10d5e0dc251 100644 --- a/src/pages/blog/index.js +++ b/src/pages/blog/index.js @@ -82,7 +82,6 @@ const Blog = (props) => { setListView={setListView} setGridView={setGridView} pageContext={props.pageContext} - // data={props.data} searchedPosts={searchedPosts} setCurrentPage={setCurrentPage} postsPerPage={postsPerPage} diff --git a/src/sections/Blog/Blog-grid/index.js b/src/sections/Blog/Blog-grid/index.js index 4b4aa2893302..303f083b49fc 100644 --- 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,7 +8,6 @@ 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, @@ -23,19 +22,6 @@ const BlogGrid = ({ 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 index 74aee77005b4..5beedae4ef48 100644 --- 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,14 +8,12 @@ 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, @@ -24,22 +22,8 @@ const BlogList = ({ 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 searchedPosts = queryResults.slice(indexOfFirstPost, indexOfLastPost); const totalCount = queryResults.length; const header = tag ? `${totalCount} post${totalCount === 1 ? "" : "s"} tagged with "${tag}"` diff --git a/src/templates/blog-category-list.js b/src/templates/blog-category-list.js index 761b25850ecb..749b9fa8469f 100644 --- a/src/templates/blog-category-list.js +++ b/src/templates/blog-category-list.js @@ -1,5 +1,5 @@ import React from "react"; -import { useState, useEffect } from "react"; +import { useState } from "react"; import useDataList from "../utils/usedataList"; diff --git a/src/templates/blog-tag-list.js b/src/templates/blog-tag-list.js index 07c691368fc5..8fb939d5c6d3 100644 --- a/src/templates/blog-tag-list.js +++ b/src/templates/blog-tag-list.js @@ -1,5 +1,5 @@ import React from "react"; -import { useState, useEffect } from "react"; +import { useState } from "react"; import useDataList from "../utils/usedataList"; @@ -67,7 +67,6 @@ const BlogListPage = ({ pageContext, data }) => { <> -