refactor: extract duplicated code patterns into shared utilities

.lintstagedrc.js

@@ -1,8 +1,8 @@
 module.exports = {
   // Lint & Prettify TS and JS files - only the staged files
   "**/*.(ts|tsx|js|jsx)": (filenames) => [
-    `cross-env NODE_ENV=test npx eslint --fix --max-warnings=0 ${filenames.map((f) => `'${f.replace(/'/g, "'\\''")}'`).join(" ")}`,
     `npx prettier --write ${filenames.map((f) => `'${f.replace(/'/g, "'\\''")}'`).join(" ")}`,
+    `cross-env NODE_ENV=test npx eslint --fix --max-warnings=0 --no-warn-ignored ${filenames.map((f) => `'${f.replace(/'/g, "'\\''")}'`).join(" ")}`,
   ],
 
   // Prettify only Markdown and JSON files

src/components/Related-Posts/index.js

@@ -1,55 +1,33 @@
-import React, { useLayoutEffect, useState, useRef }  from "react";
+import React from "react";
 import { Link } from "gatsby";
 import { IoIosArrowRoundForward } from "@react-icons/all-files/io/IoIosArrowRoundForward";
 import Card from "../Card";
 import RelatedPostsWrapper from "./relatedPosts.style";
 import { Col } from "../../reusecore/Layout";
 import Slider from "react-slick";
+import useResponsiveSlider from "../../utils/useResponsiveSlider";
 
-const RelatedPosts = props => {
-  const [isClient, setIsClient] = useState(false);
-  const [slidesToShowState, setSlidesToShowState] = useState(null);
-  const sliderRef = useRef(null);
-
-  const { postType , relatedPosts , mainHead , lastCardHead , linkToAllItems } = props;
-
-  const computeSlides = () => {
-    const w = typeof window !== "undefined" ? (window.innerWidth || document.documentElement.clientWidth) : 1200;
-    if (w <= 600) return 1;
-    if (w <= 800) return 1.5;
-    if (w <= 1024) return 2;
-    if (w <= 1200) return 3;
-    return 3;
-  };
-
-  useLayoutEffect(() => {
-    setIsClient(true);
-    setSlidesToShowState(computeSlides());
-
-    let resizeTimeout = null;
-    const onResizeDebounced = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        const slides = computeSlides();
-        setSlidesToShowState((prev) => {
-          if (prev !== slides) return slides;
-          return prev;
-        });
-        if (sliderRef.current && sliderRef.current.innerSlider && typeof sliderRef.current.innerSlider.onWindowResized === "function") {
-          sliderRef.current.innerSlider.onWindowResized();
-        }
-      }, 100);
-    };
+const computeSlides = () => {
+  const w =
+    typeof window !== "undefined"
+      ? window.innerWidth || document.documentElement.clientWidth
+      : 1200;
+  if (w <= 600) return 1;
+  if (w <= 800) return 1.5;
+  if (w <= 1024) return 2;
+  if (w <= 1200) return 3;
+  return 3;
+};
 
-    window.addEventListener("resize", onResizeDebounced);
-    window.addEventListener("load", onResizeDebounced);
+const RelatedPosts = (props) => {
+  const {
+    isClient,
+    slidesToShow: slidesToShowState,
+    sliderRef,
+  } = useResponsiveSlider(computeSlides);
 
-    return () => {
-      window.removeEventListener("resize", onResizeDebounced);
-      window.removeEventListener("load", onResizeDebounced);
-      clearTimeout(resizeTimeout);
-    };
-  }, []);
+  const { postType, relatedPosts, mainHead, lastCardHead, linkToAllItems } =
+    props;
 
   const settings = {
     dots: slidesToShowState < 2,
@@ -63,41 +41,43 @@ const RelatedPosts = props => {
     touchThreshold: 10,
   };
 
-
   return (
     <RelatedPostsWrapper>
       <div className="widgets-title">
         <h3>{mainHead}</h3>
       </div>
-      {
-        isClient &&
-                <Slider{...settings} ref={sliderRef} key={`review-slider-${slidesToShowState}`}>
-                  {
-                    postType === "blogs" ? relatedPosts.map((item) => {
-                      const post = item.post || item;
-                      return (
-                        <Col className="cardCol" $xs={12} key={post.fields.slug}>
-                          <Card frontmatter={post.frontmatter} fields={post.fields}/>
-                        </Col>
-                      );
-                    }) : relatedPosts.map((post) => {
-                      return (
-                        <Col className="cardCol" $xs={12} key={post.fields.slug}>
-                          <Card frontmatter={post.frontmatter} fields={post.fields}/>
-                        </Col>
-                      );
-                    })
-                  }
-                  <Col $xs={12} $lg={12} className="allBlogs">
-                    <div className="allBlogs_card">
-                      <Link to={linkToAllItems}>
-                        <h2>{lastCardHead}</h2>
-                        <IoIosArrowRoundForward/>
-                      </Link>
-                    </div>
-                  </Col>
-                </Slider>
-      }
+      {isClient && (
+        <Slider
+          {...settings}
+          ref={sliderRef}
+          key={`review-slider-${slidesToShowState}`}
+        >
+          {postType === "blogs"
+            ? relatedPosts.map((item) => {
+              const post = item.post || item;
+              return (
+                <Col className="cardCol" $xs={12} key={post.fields.slug}>
+                  <Card frontmatter={post.frontmatter} fields={post.fields} />
+                </Col>
+              );
+            })
+            : relatedPosts.map((post) => {
+              return (
+                <Col className="cardCol" $xs={12} key={post.fields.slug}>
+                  <Card frontmatter={post.frontmatter} fields={post.fields} />
+                </Col>
+              );
+            })}
+          <Col $xs={12} $lg={12} className="allBlogs">
+            <div className="allBlogs_card">
+              <Link to={linkToAllItems}>
+                <h2>{lastCardHead}</h2>
+                <IoIosArrowRoundForward />
+              </Link>
+            </div>
+          </Col>
+        </Slider>
+      )}
     </RelatedPostsWrapper>
   );
 };

src/pages/blog/index.js

@@ -1,44 +1,49 @@
 import React, { useState, useEffect } from "react";
-import useDataList from "../../utils/usedataList";
+import usePaginatedSearch from "../../utils/usePaginatedSearch";
 import SEO from "../../components/seo";
 import BlogGrid from "../../sections/Blog/Blog-grid";
 import { graphql } from "gatsby";
 import loadable from "@loadable/component";
 import LitePlaceholder from "../../templates/lite-placeholder";
-const BlogList = loadable(() => import ("../../sections/Blog/Blog-list"));
+const BlogList = loadable(() => import("../../sections/Blog/Blog-list"));
 
-export const query = graphql`query allBlogs {
-  allMdx(
-    sort: {fields: {dateForSort: DESC}}
-    filter: {fields: {collection: {eq: "blog"}}, frontmatter: {published: {eq: true}}}
-  ) {
-    nodes {
-      id
-      frontmatter {
-        title
-        date(formatString: "MMM Do, YYYY")
-        author
-        thumbnail {
-          extension
-          publicURL
-          childImageSharp {
-            gatsbyImageData(width: 480, layout: CONSTRAINED)
+export const query = graphql`
+  query allBlogs {
+    allMdx(
+      sort: { fields: { dateForSort: DESC } }
+      filter: {
+        fields: { collection: { eq: "blog" } }
+        frontmatter: { published: { eq: true } }
+      }
+    ) {
+      nodes {
+        id
+        frontmatter {
+          title
+          date(formatString: "MMM Do, YYYY")
+          author
+          thumbnail {
+            extension
+            publicURL
+            childImageSharp {
+              gatsbyImageData(width: 480, layout: CONSTRAINED)
+            }
           }
-        }
-        darkthumbnail {
-          extension
-          publicURL
-          childImageSharp {
-            gatsbyImageData(width: 480, layout: CONSTRAINED)
+          darkthumbnail {
+            extension
+            publicURL
+            childImageSharp {
+              gatsbyImageData(width: 480, layout: CONSTRAINED)
+            }
           }
         }
-      }
-      fields {
-        slug
+        fields {
+          slug
+        }
       }
     }
   }
-}`;
+`;
 
 const Blog = (props) => {
   const nodes = props.data?.allMdx?.nodes ?? [];
@@ -56,19 +61,16 @@ const Blog = (props) => {
   }
 
   const [isListView, setIsListView] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const { queryResults, searchData } = useDataList(
-    nodes,
-    setSearchQuery,
+  const {
+    searchedPosts,
+    queryResults,
+    searchData,
     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);
+    setSearchQuery,
+    currentPage,
+    setCurrentPage,
+    postsPerPage,
+  } = usePaginatedSearch(nodes);
   const setListView = () => {
     setIsListView(true);
   };
@@ -100,11 +102,15 @@ const Blog = (props) => {
         currentPage={currentPage}
         queryResults={queryResults}
       />
-
     </>
   );
 };
 export default Blog;
 export const Head = () => {
-  return <SEO title="Blog" description="The latest news and announcements about Layer5, our products, and our ecosystem, as well as voices from across our community." />;
-};
+  return (
+    <SEO
+      title="Blog"
+      description="The latest news and announcements about Layer5, our products, and our ecosystem, as well as voices from across our community."
+    />
+  );
+};