feat: only render categories with articles

contentful-labs · May 14, 2020 · f01c1ce · f01c1ce
1 parent 50f24e3
commit f01c1ce
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 import Layout from '../templates/layout';
 import CategoryCard from '../components/category-card';
 import WhiteContainer from '../components/white-container';
+import { withArticles } from '../utils/filters';
 
 const Container = styled.div`
   max-width: 700px;
@@ -32,6 +33,7 @@ const Subtitle = styled.h2`
 
 export default function Home(props) {
   const settings = props.data.settings.nodes[0];
+  const categories = props.data.categories.nodes.filter(withArticles);
 
   return (
     <Layout>
@@ -41,17 +43,15 @@ export default function Home(props) {
           <Subtitle>{settings.subheading}</Subtitle>
         </Hgroup>
 
-        {props.data?.categories?.nodes && (
-          <WhiteContainer>
-            {props.data.categories.nodes.map((category) => (
-              <CategoryCard
-                title={category.name}
-                url={`/${category.slug}/`}
-                description={category.description.description}
-              />
-            ))}
-          </WhiteContainer>
-        )}
+        <WhiteContainer>
+          {categories.map((category) => (
+            <CategoryCard
+              title={category.name}
+              url={`/${category.slug}/`}
+              description={category.description.description}
+            />
+          ))}
+        </WhiteContainer>
       </Container>
     </Layout>
   );
@@ -73,6 +73,9 @@ export const query = graphql`
           description
         }
         slug
+        articles: article {
+          id
+        }
       }
     }
   }

diff --git a/src/templates/section.js b/src/templates/section.js
@@ -6,9 +6,7 @@ import Sidebar from '../components/sidebar';
 import WhiteContainer from '../components/white-container';
 import ArticleLink from '../components/article-link';
 import Breadcrumb from '../components/breadcrumb';
-
-const withArticles = (category) =>
-  Array.isArray(category.articles) && category.articles.length > 0;
+import { withArticles } from '../utils/filters';
 
 const GridContainer = styled.div`
   display: grid;

diff --git a/src/utils/filters.js b/src/utils/filters.js
@@ -0,0 +1,4 @@
+export const withArticles = (category) =>
+  Array.isArray(category.articles) && category.articles.length > 0;
+
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		export const withArticles = (category) =>
		Array.isArray(category.articles) && category.articles.length > 0;