replace react-time with new component

jest.config.js

@@ -4,7 +4,6 @@ module.exports = {
     '^.+\\.jsx?$': '<rootDir>/jest/jest-preprocess.js'
   },
   testRegex: '(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$',
-
   moduleNameMapper: {
     '.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
     '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

package.json

@@ -30,51 +30,51 @@
   ],
   "dependencies": {
     "classnames": "^2.2.6",
+    "date-fns": "^2.4.1",
     "dms2dec": "^1.1.0",
     "fast-exif": "^1.0.1",
     "fraction.js": "^4.0.12",
-    "gatsby": "^2.15.28",
-    "gatsby-image": "^2.2.23",
-    "gatsby-plugin-catch-links": "^2.1.12",
-    "gatsby-plugin-feed": "^2.3.15",
+    "gatsby": "^2.15.36",
+    "gatsby-image": "^2.2.27",
+    "gatsby-plugin-catch-links": "^2.1.13",
+    "gatsby-plugin-feed": "^2.3.16",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^2.2.20",
+    "gatsby-plugin-manifest": "^2.2.21",
     "gatsby-plugin-matomo": "^0.7.2",
     "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-offline": "^3.0.11",
-    "gatsby-plugin-react-helmet": "^3.1.10",
-    "gatsby-plugin-sass": "^2.1.17",
-    "gatsby-plugin-sharp": "^2.2.27",
-    "gatsby-plugin-sitemap": "^2.2.16",
+    "gatsby-plugin-offline": "^3.0.14",
+    "gatsby-plugin-react-helmet": "^3.1.11",
+    "gatsby-plugin-sass": "^2.1.18",
+    "gatsby-plugin-sharp": "^2.2.29",
+    "gatsby-plugin-sitemap": "^2.2.17",
     "gatsby-plugin-svgr": "^2.0.2",
-    "gatsby-plugin-typescript": "^2.1.11",
+    "gatsby-plugin-typescript": "^2.1.12",
     "gatsby-plugin-use-dark-mode": "^1.1.2",
     "gatsby-plugin-webpack-size": "^1.0.0",
     "gatsby-redirect-from": "^0.2.1",
-    "gatsby-remark-autolink-headers": "^2.1.13",
-    "gatsby-remark-copy-linked-files": "^2.1.23",
-    "gatsby-remark-images": "^3.1.25",
-    "gatsby-remark-smartypants": "^2.1.11",
+    "gatsby-remark-autolink-headers": "^2.1.14",
+    "gatsby-remark-copy-linked-files": "^2.1.26",
+    "gatsby-remark-images": "^3.1.26",
+    "gatsby-remark-smartypants": "^2.1.12",
     "gatsby-remark-vscode": "^1.2.0",
-    "gatsby-source-filesystem": "^2.1.28",
-    "gatsby-source-graphql": "^2.1.17",
-    "gatsby-transformer-remark": "^2.6.26",
-    "gatsby-transformer-sharp": "^2.2.19",
+    "gatsby-source-filesystem": "^2.1.31",
+    "gatsby-source-graphql": "^2.1.18",
+    "gatsby-transformer-remark": "^2.6.28",
+    "gatsby-transformer-sharp": "^2.2.21",
     "graphql": "^14.5.8",
     "intersection-observer": "^0.7.0",
     "js-scrypt": "^0.2.0",
     "load-script": "^1.0.0",
     "pigeon-maps": "^0.14.0",
     "pigeon-marker": "^0.3.4",
-    "react": "^16.10.1",
+    "react": "^16.10.2",
     "react-blockies": "^1.4.1",
     "react-clipboard.js": "^2.0.13",
-    "react-dom": "^16.10.1",
+    "react-dom": "^16.10.2",
     "react-helmet": "^5.2.1",
     "react-modal": "^3.10.1",
-    "react-pose": "^4.0.8",
+    "react-pose": "^4.0.9",
     "react-qr-svg": "^2.2.1",
-    "react-time": "^4.3.0",
     "react-transition-group": "^4.3.0",
     "remark": "^11.0.1",
     "remark-react": "^6.0.0",
@@ -83,33 +83,33 @@
     "web3": "^1.2.1"
   },
   "devDependencies": {
-    "@babel/node": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
+    "@babel/node": "^7.6.3",
+    "@babel/preset-env": "^7.6.3",
     "@babel/preset-typescript": "^7.6.0",
     "@svgr/webpack": "^4.3.3",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^9.2.0",
+    "@testing-library/jest-dom": "^4.1.2",
+    "@testing-library/react": "^9.3.0",
     "@types/classnames": "^2.2.9",
     "@types/jest": "^24.0.18",
     "@types/lunr": "^2.3.2",
-    "@types/node": "^12.7.8",
-    "@types/react": "^16.9.4",
+    "@types/node": "^12.7.12",
+    "@types/react": "^16.9.5",
     "@types/react-dom": "^16.9.1",
     "@types/react-helmet": "^5.0.11",
     "@types/react-modal": "^3.8.3",
-    "@types/react-transition-group": "^4.2.2",
+    "@types/react-transition-group": "^4.2.3",
     "@types/web3": "^1.0.20",
-    "@typescript-eslint/eslint-plugin": "^2.3.2",
-    "@typescript-eslint/parser": "^2.3.2",
+    "@typescript-eslint/eslint-plugin": "^2.3.3",
+    "@typescript-eslint/parser": "^2.3.3",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.3.0",
+    "eslint-config-prettier": "^6.4.0",
     "eslint-loader": "^3.0.2",
     "eslint-plugin-graphql": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.15.0",
+    "eslint-plugin-react": "^7.16.0",
     "fs-extra": "^8.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
@@ -121,13 +121,13 @@
     "pify": "^4.0.1",
     "prettier": "^1.18.2",
     "prettier-stylelint": "^0.4.2",
-    "stylelint": "^11.0.0",
+    "stylelint": "^11.1.1",
     "stylelint-config-css-modules": "^1.5.0",
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-prettier": "^1.1.1",
     "ts-jest": "^24.1.0",
-    "typescript": "^3.6.3",
+    "typescript": "^3.6.4",
     "why-did-you-update": "^1.0.6"
   },
   "engines": {

src/@types/node_modules.d.ts

@@ -1,5 +1,4 @@
 declare module 'pigeon-maps'
 declare module 'pigeon-marker'
 declare module 'react-blockies'
-declare module 'react-time'
 declare module 'remark-react'

src/components/Post/PostMeta.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Link } from 'gatsby'
-import Time from 'react-time'
 import slugify from 'slugify'
-import styles from './PostMeta.module.scss'
+import Time from '../atoms/Time'
 import { useSiteMetadata } from '../../hooks/use-site-metadata'
+import styles from './PostMeta.module.scss'
 
-const PostMeta = ({ post }: { post: any }) => {
-  const { author, updated, tags, type } = post.frontmatter
+export default function PostMeta({ post }: { post: any }) {
   const siteMeta = useSiteMetadata()
+  const { author, updated, tags, type } = post.frontmatter
   const { date } = post.fields
 
   return (
@@ -21,16 +21,9 @@ const PostMeta = ({ post }: { post: any }) => {
 
       <div className={styles.time}>
         {updated && 'published '}
-        <Time value={new Date(date)} titleFormat="YYYY/MM/DD HH:mm" relative />
-
+        <Time date={date} />
         {updated && ' • updated '}
-        {updated && (
-          <Time
-            value={new Date(updated)}
-            titleFormat="YYYY/MM/DD HH:mm"
-            relative
-          />
-        )}
+        {updated && <Time date={updated} />}
       </div>
 
       {type && type === 'photo' && (
@@ -55,5 +48,3 @@ const PostMeta = ({ post }: { post: any }) => {
     </footer>
   )
 }
-
-export default PostMeta

src/components/atoms/Changelog.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import testRender from '../../../jest/testRender'
+
+import { PureChangelog as Changelog } from './Changelog'
+
+const data = {
+  github: {
+    viewer: {
+      repositories: {
+        edges: [
+          {
+            node: {
+              name: 'gatsby-plugin-matomo',
+              url: 'https://hello.com',
+              owner: { login: 'kremalicious' },
+              object: {
+                text: 'hello'
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+
+describe('Changelog', () => {
+  testRender(<Changelog repo="gatsby-plugin-matomo" data={data} />)
+})

src/components/atoms/Changelog.tsx

@@ -4,34 +4,7 @@ import remark from 'remark'
 import remarkReact from 'remark-react'
 import styles from './Changelog.module.scss'
 
-const queryGithub = graphql`
-  query GitHubReposInfo {
-    github {
-      viewer {
-        repositories(first: 100, privacy: PUBLIC, isFork: false) {
-          edges {
-            node {
-              name
-              url
-              owner {
-                login
-              }
-              object(expression: "master:CHANGELOG.md") {
-                id
-                ... on GitHub_Blob {
-                  text
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`
-
-export default function Changelog({ repo }: { repo: string }) {
-  const data = useStaticQuery(queryGithub)
+export function PureChangelog({ repo, data }: { repo: string; data: any }) {
   const repositoriesGitHub = data.github.viewer.repositories.edges
 
   const repoFilteredArray = repositoriesGitHub
@@ -73,3 +46,33 @@ export default function Changelog({ repo }: { repo: string }) {
     </div>
   )
 }
+
+export default function Changelog({ repo }: { repo: string }) {
+  const queryGithub = graphql`
+    query GitHubReposInfo {
+      github {
+        viewer {
+          repositories(first: 100, privacy: PUBLIC, isFork: false) {
+            edges {
+              node {
+                name
+                url
+                owner {
+                  login
+                }
+                object(expression: "master:CHANGELOG.md") {
+                  id
+                  ... on GitHub_Blob {
+                    text
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  `
+  const data = useStaticQuery(queryGithub)
+  return <PureChangelog repo={repo} data={data} />
+}

src/components/atoms/Time.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+// import { render } from '@testing-library/react'
+import testRender from '../../../jest/testRender'
+
+import Time from './Time'
+
+describe('Time', () => {
+  testRender(<Time date="2017/12/23" />)
+})

src/components/atoms/Time.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { format, formatDistance } from 'date-fns'
+
+export default function Time({ date }: { date: string }) {
+  const dateNew = new Date(date)
+
+  return (
+    <time
+      title={format(dateNew, 'yyyy/MM/dd HH:mm')}
+      dateTime={dateNew.toISOString()}
+    >
+      {formatDistance(dateNew, Date.now(), { addSuffix: true })}
+    </time>
+  )
+}