2021-03-01 00:36:51 +01:00
|
|
|
import React, { ReactElement, useState } from 'react'
|
2019-10-02 13:35:50 +02:00
|
|
|
import { graphql, useStaticQuery } from 'gatsby'
|
2019-11-24 14:29:25 +01:00
|
|
|
import PostTeaser from './PostTeaser'
|
2021-03-14 01:34:04 +01:00
|
|
|
import { relatedPosts, title, button } from './RelatedPosts.module.css'
|
2019-10-28 23:00:55 +01:00
|
|
|
import { Post, Frontmatter } from '../../@types/Post'
|
2021-02-28 22:34:52 +01:00
|
|
|
import { PhotoThumb } from '../templates/Photos'
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
const query = graphql`
|
2022-11-08 22:03:54 +01:00
|
|
|
{
|
|
|
|
allMarkdownRemark(sort: { fields: { date: DESC } }) {
|
2019-10-02 13:35:50 +02:00
|
|
|
edges {
|
|
|
|
node {
|
2019-11-24 14:29:25 +01:00
|
|
|
...PostTeaser
|
2019-10-02 13:35:50 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
2019-10-16 01:45:30 +02:00
|
|
|
function postsWithDataFilter(
|
2019-10-28 23:00:55 +01:00
|
|
|
posts: [{ node: Post }],
|
|
|
|
key: keyof Frontmatter,
|
2019-10-16 01:45:30 +02:00
|
|
|
valuesToFind: string[]
|
2021-03-15 21:01:55 +01:00
|
|
|
): { node: Post }[] {
|
2021-03-01 01:06:23 +01:00
|
|
|
const newArray = posts
|
|
|
|
.filter(({ node }: { node: Post }) => {
|
|
|
|
const frontmatterKey = node.frontmatter[key] as []
|
|
|
|
|
|
|
|
if (
|
|
|
|
frontmatterKey !== null &&
|
|
|
|
frontmatterKey.some((r: string) => valuesToFind.includes(r))
|
|
|
|
) {
|
|
|
|
return node
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.sort(() => 0.5 - Math.random())
|
|
|
|
.slice(0, 6)
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
return newArray
|
|
|
|
}
|
|
|
|
|
2021-03-15 21:01:55 +01:00
|
|
|
function photosWithDataFilter(posts: [{ node: Post }]): { node: Post }[] {
|
2021-03-01 01:06:23 +01:00
|
|
|
const newArray = posts
|
|
|
|
.filter((post: { node: Post }) => {
|
|
|
|
const { fileAbsolutePath } = post.node
|
|
|
|
|
|
|
|
if (fileAbsolutePath.includes('content/photos')) {
|
|
|
|
return post
|
|
|
|
}
|
|
|
|
})
|
|
|
|
.sort(() => 0.5 - Math.random())
|
|
|
|
.slice(0, 6)
|
2019-10-05 14:07:15 +02:00
|
|
|
|
|
|
|
return newArray
|
|
|
|
}
|
|
|
|
|
|
|
|
export default function RelatedPosts({
|
|
|
|
tags,
|
2020-07-19 13:31:27 +02:00
|
|
|
isPhotos
|
2019-10-05 14:07:15 +02:00
|
|
|
}: {
|
|
|
|
tags: string[]
|
2020-07-19 13:31:27 +02:00
|
|
|
isPhotos?: boolean
|
2020-05-22 14:38:19 +02:00
|
|
|
}): ReactElement {
|
2019-10-02 13:35:50 +02:00
|
|
|
const data = useStaticQuery(query)
|
|
|
|
const posts = data.allMarkdownRemark.edges
|
2019-10-05 14:07:15 +02:00
|
|
|
|
|
|
|
function getPosts() {
|
2020-07-19 13:31:27 +02:00
|
|
|
return isPhotos
|
2019-10-05 14:07:15 +02:00
|
|
|
? photosWithDataFilter(posts)
|
2019-11-16 16:10:34 +01:00
|
|
|
: tags && postsWithDataFilter(posts, 'tags', tags)
|
2019-10-05 14:07:15 +02:00
|
|
|
}
|
|
|
|
|
2021-03-01 01:06:23 +01:00
|
|
|
const [filteredPosts, setFilteredPosts] = useState(getPosts())
|
2019-10-02 20:48:59 +02:00
|
|
|
|
|
|
|
function refreshPosts() {
|
2021-02-28 22:34:52 +01:00
|
|
|
const newPosts = getPosts()
|
2021-03-01 01:06:23 +01:00
|
|
|
setFilteredPosts(newPosts)
|
2019-10-02 20:48:59 +02:00
|
|
|
}
|
2019-10-02 13:35:50 +02:00
|
|
|
|
|
|
|
return (
|
2021-03-14 01:34:04 +01:00
|
|
|
<aside className={relatedPosts}>
|
|
|
|
<h1 className={title}>
|
2020-07-19 13:31:27 +02:00
|
|
|
Related {isPhotos ? 'Photos' : 'Posts'}{' '}
|
2021-03-14 01:34:04 +01:00
|
|
|
<button className={button} onClick={() => refreshPosts()}>
|
2019-11-11 01:00:26 +01:00
|
|
|
Refresh
|
|
|
|
</button>
|
|
|
|
</h1>
|
2019-10-02 13:35:50 +02:00
|
|
|
<ul>
|
2021-02-28 22:34:52 +01:00
|
|
|
{filteredPosts?.map(({ node }: { node: Post }) => (
|
|
|
|
<li key={node.id}>
|
|
|
|
{isPhotos ? (
|
|
|
|
<PhotoThumb photo={node} />
|
|
|
|
) : (
|
|
|
|
<PostTeaser post={node} hideDate />
|
|
|
|
)}
|
|
|
|
</li>
|
|
|
|
))}
|
2019-10-02 13:35:50 +02:00
|
|
|
</ul>
|
|
|
|
</aside>
|
|
|
|
)
|
|
|
|
}
|