Merge pull request #46 from 1chooo/dev/enhancement

Extract common filtering logic and add page button in Blog (#44, #45)

Author: 1chooo

src/App.css

@@ -95,7 +95,37 @@
 
 }
 
+/*-----------------------------------*\
+    #PAGINATION
+\*-----------------------------------*/
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.pagination-btn {
+    background: var(--border-gradient-onyx);
+    border: none;
+    padding: 10px 15px;
+    margin: 0 5px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    font-size: 16px;
+    color: hsl(0, 0%, 98%);
+    transition: background-color 0.3s ease;
+    border-radius: 14px;
+}
+
+.pagination-btn.active {
+    color: hsl(45, 100%, 71%);
+}
 
+.pagination-btn:hover {
+    background-color: hsl(45, 100%, 71%);
+}
 
 
 
@@ -275,10 +305,10 @@ article.active {
 }
 
 .has-scrollbar::-webkit-scrollbar {
-    width: 5px;
     /* for vertical scrollbar */
-    height: 5px;
+    width: 5px;
     /* for horizontal scrollbar */
+    height: 5px;
 }
 
 .has-scrollbar::-webkit-scrollbar-track {
@@ -315,10 +345,6 @@ article.active {
     z-index: -1;
 }
 
-
-
-
-
 /*-----------------------------------*\
     #MAIN
 \*-----------------------------------*/
@@ -329,10 +355,6 @@ main {
     min-width: 259px;
 }
 
-
-
-
-
 /*-----------------------------------*\
     #SIDEBAR
 \*-----------------------------------*/

src/components/blog/blogPosts.tsx

@@ -1,26 +1,31 @@
 import React, { useState, useEffect } from 'react';
 import { MdExpandMore } from 'react-icons/md';
 import { blogTags, postsData, Post } from '../../Config/BlogData';
+import { filterFunc, handleItemClick } from '../../utils/filterUtils';
 
 const BlogPosts: React.FC = () => {
   const [selectedValue, setSelectedValue] = useState('All');
   const [isSelectActive, setIsSelectActive] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const postsPerPage = 6;
 
   useEffect(() => {
-    handleItemClick('All');
+    handleItemClick('All', setSelectedValue);
   }, []);
 
-  const handleItemClick = (value: string) => {
-    setSelectedValue(value);
-  };
+  const filteredPosts = filterFunc(selectedValue, postsData);
 
-  const filterFunc = (selectedValue: string) => {
-    return selectedValue === 'All'
-      ? postsData
-      : postsData.filter((post) => post.category.toLowerCase() === selectedValue.toLowerCase());
-  };
+  // Calculate the current posts to display
+  const indexOfLastPost = currentPage * postsPerPage;
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const currentPosts = filteredPosts.slice(indexOfFirstPost, indexOfLastPost);
 
-  const filteredPosts = filterFunc(selectedValue);
+  // Calculate total pages
+  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
+
+  const handlePageChange = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
 
   return (
     <section className="blog-posts">
@@ -29,7 +34,10 @@ const BlogPosts: React.FC = () => {
           <li className="filter-item" key={index}>
             <button
               className={`filter-btn ${selectedValue === tag ? 'active' : ''}`}
-              onClick={() => handleItemClick(tag)}
+              onClick={() => {
+                handleItemClick(tag, setSelectedValue);
+                setCurrentPage(1); // Reset to first page on filter change
+              }}
             >
               {tag}
             </button>
@@ -54,8 +62,9 @@ const BlogPosts: React.FC = () => {
             {blogTags.map((tag, index) => (
               <li className="select-item" key={index}>
                 <button onClick={() => {
-                  handleItemClick(tag);
+                  handleItemClick(tag, setSelectedValue);
                   setIsSelectActive(false);
+                  setCurrentPage(1); // Reset to first page on filter change
                 }}>
                   {tag}
                 </button>
@@ -66,7 +75,7 @@ const BlogPosts: React.FC = () => {
       </div>
 
       <ul className="blog-posts-list">
-        {filteredPosts.map((post: Post, index: number) => (
+        {currentPosts.map((post: Post, index: number) => (
           <li
             key={index}
             className="blog-post-item active"
@@ -97,6 +106,19 @@ const BlogPosts: React.FC = () => {
           </li>
         ))}
       </ul>
+
+      {/* Pagination */}
+      <div className="pagination">
+        {[...Array(totalPages)].map((_, index) => (
+          <button
+            key={index}
+            className={`pagination-btn ${currentPage === index + 1 ? 'active' : ''}`}
+            onClick={() => handlePageChange(index + 1)}
+          >
+            {index + 1}
+          </button>
+        ))}
+      </div>
     </section>
   );
 };

src/components/portfolio/projects.tsx

@@ -2,28 +2,18 @@ import React, { useState, useEffect } from 'react';
 import { MdExpandMore } from "react-icons/md";
 import { LuEye } from "react-icons/lu";
 import { projectTags, projectsData, Project } from '../../Config/PortfolioData';
-
+import { filterFunc, handleItemClick } from '../../utils/filterUtils';
 
 const Projects: React.FC = () => {
 
   const [selectedValue, setSelectedValue] = useState('All');
   const [isSelectActive, setIsSelectActive] = useState(false);
 
   useEffect(() => {
-    handleItemClick('All');
+    handleItemClick('All', setSelectedValue);
   }, []);
 
-  const handleItemClick = (value: string) => {
-    setSelectedValue(value);
-  };
-
-  const filterFunc = (selectedValue: string) => {
-    return selectedValue === 'All'
-      ? projectsData
-      : projectsData.filter((post) => post.category.toLowerCase() === selectedValue.toLowerCase());
-  };
-
-  const filteredProjects = filterFunc(selectedValue);
+  const filteredProjects = filterFunc(selectedValue, projectsData);
 
   return (
     <section className="projects">
@@ -34,7 +24,7 @@ const Projects: React.FC = () => {
             <button
               className={`filter-btn ${selectedValue === tag ? 'active' : ''}`}
               data-filter-btn
-              onClick={() => handleItemClick(tag)}
+              onClick={() => handleItemClick(tag, setSelectedValue)}
             >
               {tag}
             </button>
@@ -59,7 +49,7 @@ const Projects: React.FC = () => {
             {projectTags.map((tag, index) => (
               <li className="select-item" key={index}>
                 <button onClick={() => {
-                  handleItemClick(tag);
+                  handleItemClick(tag, setSelectedValue);
                   setIsSelectActive(false);
                 }}>
                   {tag}

src/utils/filterUtils.ts

@@ -0,0 +1,12 @@
+
+export const handleItemClick = (
+  value: string,
+  setSelectedValue: React.Dispatch<React.SetStateAction<string>>) => {
+  setSelectedValue(value);
+};
+
+export const filterFunc = (selectedValue: string, data: any[]) => {
+  return selectedValue === 'All'
+    ? data
+    : data.filter((item) => item.category.toLowerCase() === selectedValue.toLowerCase());
+};