test fixes

jest/__fixtures__/photos.json

@@ -1,12 +1,11 @@
 {
-  "photos": {
+  "allMarkdownRemark": {
     "edges": [
       {
         "node": {
           "id": "6effe45d-0884-527c-9fba-6f7f567979fd",
           "frontmatter": {
             "title": "Országház II",
-            "type": "photo",
             "image": {
               "childImageSharp": {
                 "fluid": {
@@ -25,7 +24,8 @@
             }
           },
           "fields": {
-            "slug": "/orszaghaz-ii/"
+            "slug": "/orszaghaz-ii/",
+            "type": "photo"
           }
         }
       },
@@ -34,7 +34,6 @@
           "id": "c80697e5-681d-5fcc-9dab-c3a3821ff0b1",
           "frontmatter": {
             "title": "Országház I",
-            "type": "photo",
             "image": {
               "childImageSharp": {
                 "fluid": {
@@ -53,7 +52,8 @@
             }
           },
           "fields": {
-            "slug": "/orszaghaz-i/"
+            "slug": "/orszaghaz-i/",
+            "type": "photo"
           }
         }
       }

jest/__fixtures__/posts.json

@@ -9,7 +9,7 @@
           "excerpt": "Inside the Hungarian Parliament Building in Budapest, Hungary.",
           "frontmatter": {
             "title": "Országház II",
-            "type": "photo",
+
             "linkurl": null,
             "tags": null,
             "image": {
@@ -34,7 +34,8 @@
           },
           "fields": {
             "slug": "/orszaghaz-ii/",
-            "date": "November 03, 2019"
+            "date": "November 03, 2019",
+            "type": "photo"
           }
         }
       },
@@ -46,7 +47,6 @@
           "excerpt": "The Hungarian Parliament Building seen from across the Danube in Budapest, Hungary.",
           "frontmatter": {
             "title": "Országház I",
-            "type": "photo",
             "linkurl": null,
             "tags": null,
             "featured": true,
@@ -72,7 +72,8 @@
           },
           "fields": {
             "slug": "/orszaghaz-i/",
-            "date": "November 02, 2019"
+            "date": "November 02, 2019",
+            "type": "photo"
           }
         }
       },
@@ -84,7 +85,7 @@
           "excerpt": "IPFS is now integrated into the Ocean Protocol stack, allowing you to take advantage of decentralized asset file hosting. This article was originally posted on Medium in the Ocean Protocol blog. ✨ Going Decentralized With Ocean Protocol, you can use…",
           "frontmatter": {
             "title": "Ocean Protocol and IPFS, Sitting In The Merkle Tree",
-            "type": "post",
+
             "linkurl": null,
             "tags": ["oceanprotocol", "blockchain", "design", "ipfs", "web3"],
             "image": {
@@ -109,7 +110,8 @@
           },
           "fields": {
             "slug": "/ocean-protocol-and-ipfs-sitting-in-the-merkle-tree",
-            "date": "October 24, 2019"
+            "date": "October 24, 2019",
+            "type": "post"
           }
         }
       }

package-lock.json

@@ -52,9 +52,9 @@
         "node-fetch": "^2.6.1",
         "pigeon-maps": "^0.17.1",
         "pigeon-marker": "^0.3.4",
-        "react": "^16.8.0",
+        "react": "^16.14.0",
         "react-clipboard.js": "^2.0.16",
-        "react-dom": "^16.8.0",
+        "react-dom": "^16.14.0",
         "react-feather": "^2.0.9",
         "react-helmet": "^6.1.0",
         "react-qr-svg": "^2.3.0",

package.json

@@ -72,9 +72,9 @@
     "node-fetch": "^2.6.1",
     "pigeon-maps": "^0.17.1",
     "pigeon-marker": "^0.3.4",
-    "react": "^16.8.0",
+    "react": "^16.14.0",
     "react-clipboard.js": "^2.0.16",
-    "react-dom": "^16.8.0",
+    "react-dom": "^16.14.0",
     "react-feather": "^2.0.9",
     "react-helmet": "^6.1.0",
     "react-qr-svg": "^2.3.0",

src/components/molecules/PostTeaser.tsx

@@ -4,7 +4,6 @@ import { Image } from '../atoms/Image'
 import { Post } from '../../@types/Post'
 import PostTitle from '../templates/Post/Title'
 import styles from './PostTeaser.module.scss'
-import Time from '../atoms/Time'
 import PostDate from './PostDate'
 
 export const postTeaserQuery = graphql`
@@ -40,7 +39,7 @@ export default function PostTeaser({
   hideDate?: boolean
 }): ReactElement {
   const { image, title, updated } = post.frontmatter
-  const { slug, date, type } = post.fields
+  const { slug, date } = post.fields
 
   return (
     <Link

src/components/molecules/RelatedPosts.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useEffect, useState } from 'react'
+import React, { ReactElement, useState } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import PostTeaser from './PostTeaser'
 import styles from './RelatedPosts.module.scss'

src/components/templates/Page.tsx

@@ -1,6 +1,5 @@
-import React, { ReactElement } from 'react'
+import React, { ReactChildren, ReactElement, ReactNode } from 'react'
 import { Helmet } from 'react-helmet'
-import { useLocation } from '@reach/router'
 import { Post } from '../../@types/Post'
 import SEO from '../atoms/SEO'
 import styles from './Page.module.scss'
@@ -9,15 +8,15 @@ export default function Page({
   title,
   section,
   children,
+  pathname,
   post
 }: {
   title: string
-  children: any
+  children: ReactNode
+  pathname: string
   section?: string
   post?: Post
 }): ReactElement {
-  const { pathname } = useLocation()
-
   return (
     <>
       <Helmet title={title} />

src/components/templates/Photos.test.tsx

@@ -13,7 +13,11 @@ describe('/photos', () => {
     }
 
     const { container } = render(
-      <Photos data={data} pageContext={pageContext} />
+      <Photos
+        data={data}
+        pageContext={pageContext}
+        location={{ pathname: '/photos' } as any}
+      />
     )
     expect(container.firstChild).toBeInTheDocument()
   })

src/components/templates/Photos.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { graphql, Link } from 'gatsby'
+import { graphql, Link, PageProps } from 'gatsby'
 import Page from './Page'
 import { Post, PageContext } from '../../@types/Post'
 import { Image } from '../atoms/Image'
@@ -22,15 +22,16 @@ export const PhotoThumb = ({ photo }: { photo: Post }): ReactElement => {
   )
 }
 
-export default function Photos({
-  data,
-  pageContext
-}: {
-  data: any
+interface PhotosPageProps extends PageProps {
+  data: {
+    allMarkdownRemark: { edges: { node: Post }[] }
+  }
   pageContext: PageContext
-}): ReactElement {
-  const photos = data.allMarkdownRemark.edges
-  const { currentPageNumber, numPages } = pageContext
+}
+
+export default function Photos(props: PhotosPageProps): ReactElement {
+  const photos = props.data.allMarkdownRemark.edges
+  const { currentPageNumber, numPages } = props.pageContext
 
   const paginationTitle =
     numPages > 1 && currentPageNumber > 1
@@ -46,14 +47,18 @@ export default function Photos({
   }
 
   return (
-    <Page title={page.frontmatter.title} post={page}>
+    <Page
+      title={page.frontmatter.title}
+      post={page}
+      pathname={props.location.pathname}
+    >
       <section className={styles.photos}>
         {photos.map(({ node }: { node: Post }) => (
           <PhotoThumb key={node.id} photo={node} />
         ))}
       </section>
 
-      {numPages > 1 && <Pagination pageContext={pageContext} />}
+      {numPages > 1 && <Pagination pageContext={props.pageContext} />}
     </Page>
   )
 }
@@ -79,6 +84,7 @@ export const photosQuery = graphql`
           }
           fields {
             slug
+            type
           }
         }
       }

src/components/templates/Post/Title.tsx

@@ -1,7 +1,6 @@
 import React, { ReactElement } from 'react'
 import styles from './Title.module.scss'
 import Icon from '../../atoms/Icon'
-import Time from '../../atoms/Time'
 import PostDate from '../../molecules/PostDate'
 
 export default function PostTitle({

src/pages/404.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react'
-import { Link } from 'gatsby'
+import { Link, PageProps } from 'gatsby'
 import Page from '../components/templates/Page'
 import styles from './404.module.scss'
 
@@ -9,8 +9,12 @@ const page = {
   }
 }
 
-const NotFound = (): ReactElement => (
-  <Page title={page.frontmatter.title} post={page}>
+const NotFound = (props: PageProps): ReactElement => (
+  <Page
+    title={page.frontmatter.title}
+    post={page}
+    pathname={props.location.pathname}
+  >
     <div className={styles.hal9000} />
 
     <div className={styles.wrapper}>

src/pages/__tests__/404.test.tsx

@@ -5,7 +5,9 @@ import NotFound from '../404'
 
 describe('/404', () => {
   it('renders without crashing', () => {
-    const { container } = render(<NotFound />)
+    const { container } = render(
+      <NotFound location={{ pathname: '/tags' } as any} />
+    )
     expect(container.firstChild).toBeInTheDocument()
   })
 })

src/pages/__tests__/tags.test.tsx

@@ -14,7 +14,9 @@ describe('/tags', () => {
   }
 
   it('renders without crashing', () => {
-    const { container } = render(<Tags data={data} />)
+    const { container } = render(
+      <Tags data={data} location={{ pathname: '/tags' } as any} />
+    )
     expect(container.firstChild).toBeInTheDocument()
   })
 })

src/pages/tags.tsx

@@ -22,10 +22,14 @@ interface TagsPageProps extends PageProps {
   }
 }
 
-const TagsPage = ({ data }: TagsPageProps): ReactElement => (
-  <Page title={page.frontmatter.title} post={page}>
+const TagsPage = (props: TagsPageProps): ReactElement => (
+  <Page
+    title={page.frontmatter.title}
+    post={page}
+    pathname={props.location.pathname}
+  >
     <ul className={styles.tags}>
-      {data.allMarkdownRemark.group
+      {props.data.allMarkdownRemark.group
         .sort((a, b) => b.totalCount - a.totalCount)
         .map((tag: Tag) => (
           <li key={tag.fieldValue}>