related photos fixes

src/components/molecules/PostTeaser.module.scss

@@ -4,7 +4,7 @@
 .title {
   padding-left: 0.2rem;
   padding-right: 0.2rem;
-  margin-top: $spacer / 2;
+  margin-top: $spacer / 3;
   margin-bottom: 0;
   font-size: $font-size-base;
   transition: color 0.2s ease-out;
@@ -22,6 +22,8 @@
   font-style: italic;
   font-size: $font-size-small;
   color: $text-color-light;
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
 }
 
 .empty {

src/components/molecules/PostTeaser.tsx

@@ -49,7 +49,6 @@ export default function PostTeaser({
     >
       {image ? (
         <Image
-          title={type === 'photo' ? title : null}
           fluid={image.childImageSharp.fluid}
           alt={title}
           original={image.childImageSharp.original}

src/components/molecules/RelatedPosts.tsx

@@ -1,8 +1,9 @@
-import React, { ReactElement, useState } from 'react'
+import React, { ReactElement, useEffect, useState } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import PostTeaser from './PostTeaser'
 import styles from './RelatedPosts.module.scss'
 import { Post, Frontmatter } from '../../@types/Post'
+import { PhotoThumb } from '../templates/Photos'
 
 const query = graphql`
   query {
@@ -61,30 +62,35 @@ export default function RelatedPosts({
       : tags && postsWithDataFilter(posts, 'tags', tags)
   }
 
-  const [filteredPosts, setFilteredPosts] = useState(getPosts())
-  if (!filteredPosts) return null
+  const [filteredPosts, setFilteredPosts] = useState(
+    getPosts()
+      .sort(() => 0.5 - Math.random())
+      .slice(0, 6)
+  )
 
   function refreshPosts() {
-    setFilteredPosts(getPosts())
+    const newPosts = getPosts()
+    setFilteredPosts(newPosts.sort(() => 0.5 - Math.random()).slice(0, 6))
   }
 
   return (
     <aside className={styles.relatedPosts}>
       <h1 className={styles.title}>
         Related {isPhotos ? 'Photos' : 'Posts'}{' '}
-        <button className={styles.button} onClick={refreshPosts}>
+        <button className={styles.button} onClick={() => refreshPosts()}>
           Refresh
         </button>
       </h1>
       <ul>
-        {filteredPosts
-          .sort(() => 0.5 - Math.random())
-          .slice(0, 6)
-          .map(({ node }: { node: Post }) => (
-            <li key={node.id}>
-              <PostTeaser post={node} />
-            </li>
-          ))}
+        {filteredPosts?.map(({ node }: { node: Post }) => (
+          <li key={node.id}>
+            {isPhotos ? (
+              <PhotoThumb photo={node} />
+            ) : (
+              <PostTeaser post={node} hideDate />
+            )}
+          </li>
+        ))}
       </ul>
     </aside>
   )