package updates

.github/dependabot.yml

@@ -1,7 +1,7 @@
 version: 2
 updates:
-- package-ecosystem: npm
-  directory: "/"
+  - package-ecosystem: npm
+    directory: '/'
     schedule:
       interval: weekly
       time: '04:00'

package.json

@@ -8,7 +8,7 @@
     "serve": "next start",
     "test": "npm run lint && NODE_ENV=test jest",
     "test:watch": "npm run lint && NODE_ENV=test jest --watch",
-    "lint": "eslint --ignore-path .gitignore --ext .js .",
+    "lint": "eslint --ignore-path .gitignore --ext .js --ext .tsx --ext .ts .",
     "format": "prettier --ignore-path .gitignore '**/*.{css,yml,js,jsx,ts,tsx,json}' --write",
     "analyze": "ANALYZE=true next build"
   },
@@ -29,22 +29,22 @@
     "@next/bundle-analyzer": "^9.4.4",
     "@testing-library/jest-dom": "^5.11.0",
     "@testing-library/react": "^10.4.4",
-    "@types/jest": "^26.0.0",
+    "@types/jest": "^26.0.4",
     "@types/next-seo": "^1.10.0",
-    "@types/node": "^14.0.1",
+    "@types/node": "^14.0.19",
     "@types/react": "^16.9.41",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
     "cssnano": "^4.1.10",
     "eslint": "^7.4.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.20.3",
-    "jest": "^25.5.4",
+    "jest": "^26.1.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.0.5",
-    "ts-jest": "^25.5.1",
+    "ts-jest": "^26.1.1",
     "typescript": "^3.9.6"
   },
   "engines": {

src/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { ReactNode, ReactElement } from 'react'
 import { NextSeo } from 'next-seo'
 import Footer from './components/Footer'
 import { title, description, url } from '../site.config'
@@ -10,7 +10,7 @@ export default function Layout({
 }: {
   children: ReactNode
   pageTitle?: string
-}) {
+}): ReactElement {
   return (
     <div className={styles.app}>
       <NextSeo
@@ -21,7 +21,6 @@ export default function Layout({
           url,
           title,
           description,
-          // eslint-disable-next-line @typescript-eslint/camelcase
           site_name: title
         }}
         twitter={{

src/components/Add.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, ReactElement } from 'react'
 import { ipfsNodeUri, ipfsGateway } from '../../site.config'
 import Dropzone, { FileDropzone } from './Dropzone'
 import styles from './Add.module.css'
@@ -15,7 +15,7 @@ const ipfsConfig: IpfsConfig = {
   port: port || '443'
 }
 
-export default function Add() {
+export default function Add(): ReactElement {
   const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
   const [files, setFiles] = useState([])
   const [loading, setLoading] = useState(false)

src/components/Dropzone.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, ReactElement } from 'react'
 import { useDropzone } from 'react-dropzone'
 import styles from './Dropzone.module.css'
 
@@ -16,8 +16,8 @@ export default function Dropzone({
   disabled?: boolean
   multiple?: boolean
   error?: string
-}) {
-  const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [
+}): ReactElement {
+  const onDrop = useCallback((acceptedFiles) => handleOnDrop(acceptedFiles), [
     handleOnDrop
   ])
 

src/components/Footer.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import ThemeSwitch from './ThemeSwitch'
 import styles from './Footer.module.css'
 
-export default function Footer() {
+export default function Footer(): ReactElement {
   const year = new Date().getFullYear()
 
   return (

src/components/Info.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Status from './Status'
 import styles from './Info.module.css'
 
-export default function Info() {
+export default function Info(): ReactElement {
   return (
     <aside className={styles.info}>
       <h2>

src/components/Loader.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styles from './Loader.module.css'
 
-const Loader = ({ message }: { message?: string }) => (
+const Loader = ({ message }: { message?: string }): ReactElement => (
   <div className={styles.loader}>
     {message && (
       <div

src/components/Status.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, ReactElement } from 'react'
 import { pingUrl } from '../utils'
 import { ipfsGateway, ipfsNodeUri } from '../../site.config'
 import styles from './Status.module.css'
 
-export default function Status({ type }: { type: string }) {
+export default function Status({ type }: { type: string }): ReactElement {
   const [isOnline, setIsOnline] = useState(false)
   const [isLoading, setIsLoading] = useState(true)
 

src/components/ThemeSwitch.tsx

@@ -1,4 +1,6 @@
-import React from 'react'
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
+
+import React, { ReactElement } from 'react'
 import useDarkMode from 'use-dark-mode'
 
 import Day from '../images/day.svg'
@@ -31,7 +33,7 @@ const ThemeToggleInput = ({
   />
 )
 
-export default function ThemeSwitch() {
+export default function ThemeSwitch(): ReactElement {
   const darkMode = useDarkMode(false, {
     classNameDark: 'dark',
     classNameLight: 'light'

src/components/Typekit.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import Head from 'next/head'
 import { typekitId } from '../../site.config'
 
@@ -13,7 +13,7 @@ const typekitScript = `
   })(document);
 `
 
-export default function Typekit() {
+export default function Typekit(): ReactElement | null {
   return typekitId ? (
     <Head key="typekit">
       <link rel="dns-prefetch" href="https://use.typekit.net/" />