Relateds index.tsx

83.33% Statements 15/18
31.25% Branches 5/16
66.66% Functions 4/6
82.35% Lines 14/17
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94  
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
2x
1x
1x
 
 
 
 
 
 
 
1x
 
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2x
 
 
246x
2x
 
244x
244x
244x
 
 
 
 
2x
 
 
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import { StaticQuery, graphql } from "gatsby";
import lozad from "lozad";
import RelatedCard from "@/components/RelatedCard";
 
import * as style from "./index.module.scss";
import { isBrowser } from "@/utils";
 
const RelatedPosts = ({
  title,
  tags,
}: {
  title: string;
  tags: readonly (string | undefined)[];
}) => {
  React.useEffect(() => {
    Eif (isBrowser()) {
      const observer = lozad(".lozad", {
        rootMargin: "10px 0px",
        threshold: 0.1,
        enableAutoReload: true,
        loaded(el) {
          el.classList.add("loaded");
        },
      });
      observer.observe();
    }
  }, []);
 
  return (
    <StaticQuery<GatsbyTypes.Query>
      query={graphql`
        query {
          allMarkdownRemark(sort: { fields: frontmatter___date, order: DESC }) {
            edges {
              node {
                excerpt
                frontmatter {
                  title
                  headerImage
                  date
                  tags
                }
                fields {
                  slug
                }
              }
            }
          }
        }
      `}
      render={(data) => {
        const relatedPosts = data.allMarkdownRemark.edges.filter(
          // eslint-disable-next-line array-callback-return,consistent-return
          (edge) => {
            if (edge.node.frontmatter?.title === title) {
              return false;
            }
            Eif (edge.node.frontmatter?.tags) {
              for (let i = 0; i < edge.node.frontmatter.tags.length; i++) {
                return edge.node.frontmatter.tags[i] === tags[i];
              }
            }
          }
        );
        Iif (!relatedPosts) {
          return null;
        }
        return (
          <div className={style.relatedPosts}>
            <h2>
              <span className="icon-newspaper-o" />
              &nbsp;Related Posts
            </h2>
            {relatedPosts.map((relatedPost) => (
              <div>
                <RelatedCard
                  title={relatedPost.node.frontmatter?.title || ""}
                  tags={relatedPost.node.frontmatter?.tags || []}
                  date={relatedPost.node.frontmatter?.date || ""}
                  headerImage={relatedPost.node.frontmatter?.headerImage}
                  url={relatedPost.node.fields?.slug || ""}
                />
              </div>
            ))}
          </div>
        );
      }}
    />
  );
};
 
export default RelatedPosts;