Merge pull request #197 from Web-Dev-Path/chore/allow-dynamic-blog-po…

…sts-row Allow `BlogPostsContainer` display a dynamic number of cards per row with swipe
Web-Dev-Path · Sep 13, 2023 · a208cbd · a208cbd
2 parents 6689840 + d0a8d88
commit a208cbd
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 16 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -8,6 +8,8 @@
 
 #### Were there any complications while making this change?
 
-#### How did you verify this change?
+#### How to replicate the issue?
+
+#### If necessary, please describe how to test the new feature or fix.
 
 #### When should this be merged?
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -122,3 +122,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Fixed CHANGELOG.md inconsistency
 - Contact and Subscribe forms are saving Name on Mailchimp
 - Fixed Who We Are section on mobile.
+- Allow `BlogPostsContainer` display a dynamic number of cards per row with swipe functionality
diff --git a/components/blog/BlogPostsContainer/index.js b/components/blog/BlogPostsContainer/index.js
@@ -6,12 +6,6 @@ import S from './styles';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
 
-function* splitPosts(arr, n) {
-  for (let i = 0; i < arr.length; i += n) {
-    yield arr.slice(i, i + n);
-  }
-}
-
 const BlogPostsContainer = ({
   posts,
   heading,
@@ -41,10 +35,9 @@ const BlogPostsContainer = ({
           </Container>
         ) : null}
         {
-          // put in rows of 3 if more than 3 posts (for swipable cards)
           swipe ? (
             <>
-              {[...splitPosts(posts, 3)].map((p, index) => (
+              {[posts.slice(0,6)].map((p, index) => (
                 <BlogCardsColumns key={index} cards={p} />
               ))}
             </>
@@ -71,7 +64,7 @@ const BlogPostsContainer = ({
 
         {back ? (
           <Container>
-            <S.BackBottomLink href={`/blog`}>&#60; Back</S.BackBottomLink>
+            <S.BackBottomLink href={`/blog`}>&#60; back</S.BackBottomLink>
           </Container>
         ) : null}
       </S.BlogContainer>

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -3,7 +3,6 @@ import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
 import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
 import Title from '@/components/snippets/Title';
-// import styles from '@/styles/Blog.module.scss';
 import { BlogSearch } from '@/components/snippets/BlogSearch';
 import { blogRevalidate } from '@/utils/config';
 import { tagToHeading } from '@/utils/blogCategories';
@@ -12,10 +11,6 @@ import { blogSearch } from '@/utils/search';
 export default function Blog({ posts }) {
   const [searchTerm, setSearchTerm] = useState('');
 
-  const filteredData = {
-    posts: posts.slice(0, 3),
-  };
-
   if (searchTerm) {
     const filteredPosts = blogSearch(posts, searchTerm);
     filteredData.posts = filteredPosts;
@@ -36,7 +31,7 @@ export default function Blog({ posts }) {
         </BlogSearch>
       </Container>
 
-      <BlogPostsContainer {...filteredData} />
+      <BlogPostsContainer posts={posts} />
       {!searchTerm &&
         Object.keys(tagToHeading).map(tag => (
           <BlogPostsContainer