lazy load components & css optimizations

.eslintrc

@@ -1,31 +1,33 @@
 {
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": ["./tsconfig.json"]
-  },
-  "extends": [
-    "oceanprotocol",
-    "oceanprotocol/react",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "prettier/react",
-    "prettier/standard",
-    "prettier/@typescript-eslint"
-  ],
-  "plugins": ["@typescript-eslint", "prettier"],
-  "rules": {
-    "react/prop-types": "off",
-    "@typescript-eslint/explicit-function-return-type": "off"
-  },
-  "env": {
-    "es6": true,
-    "browser": true,
-    "jest": true
-  },
+  "extends": ["eslint:recommended", "prettier"],
+  "env": { "es6": true, "browser": true, "node": true },
   "settings": {
     "react": {
       "version": "detect"
     }
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "parserOptions": {
+        "project": ["./tsconfig.json"]
+      },
+      "extends": [
+        "oceanprotocol",
+        "oceanprotocol/react",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:prettier/recommended",
+        "prettier/react",
+        "prettier/standard",
+        "prettier/@typescript-eslint"
+      ],
+      "plugins": ["@typescript-eslint", "prettier"],
+      "rules": {
+        "react/prop-types": "off",
+        "@typescript-eslint/explicit-function-return-type": "off"
+      }
+    }
+  ]
 }

.gitignore

@@ -1,7 +1,7 @@
 node_modules
 npm-debug.log
 .DS_Store
-/.next/
-/out/
-/build
+.next
+out
+build
 package-lock.json

next.config.js

@@ -1,6 +1,7 @@
 const withCSS = require('@zeit/next-css')
 const withMDX = require('@next/mdx')()
 
+// eslint-disable-next-line no-unused-vars
 const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
@@ -30,7 +31,6 @@ module.exports = withSvgr(
     withCSS({
       cssModules: true,
       cssLoaderOptions: {
-        importLoaders: 1,
         localIdentName: '[local]___[hash:base64:5]'
       }
     })

package.json

@@ -6,7 +6,7 @@
     "start": "next dev",
     "build": "next build",
     "serve": "next start",
-    "test": "eslint --ignore-path .gitignore 'src/**/*.{ts,tsx}'",
+    "test": "eslint --ignore-path .gitignore 'src/**/*.{js,jsx,ts,tsx}'",
     "format": "prettier ./src/**/*.{css,yml,js,jsx,ts,tsx,json} --write"
   },
   "author": "Matthias Kretschmann <matthias@oceanprotocol.com>",
@@ -32,15 +32,23 @@
     "@types/react": "^16.9.9",
     "@typescript-eslint/eslint-plugin": "^2.4.0",
     "@typescript-eslint/parser": "^2.4.0",
+    "cssnano": "^4.1.10",
     "eslint": "^6.5.1",
     "eslint-config-oceanprotocol": "^1.5.0",
     "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^1.18.2",
     "typescript": "^3.6.4"
   },
   "engines": {
     "node": "10.x"
-  }
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-env': {
+      importFrom: './src/styles/_variables.css'
+    },
+    cssnano: {}
+  }
+}

src/Layout.module.css

@@ -1,5 +1,3 @@
-@import './styles/_variables.css';
-
 .app {
   padding: var(--spacer);
   background: var(--brand-black);

src/components/Add.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 .add {
   width: 100%;
   overflow-wrap: break-word;

src/components/Add.tsx

@@ -1,18 +1,10 @@
 import React, { useState, useEffect } from 'react'
+import useIpfsApi, { IpfsConfig } from '../hooks/use-ipfs-api'
+import { formatBytes, addToIpfs } from '../utils'
 import { ipfsNodeUri, ipfsGateway } from '../../site.config'
 import Dropzone from './Dropzone'
 import styles from './Add.module.css'
 import Spinner from './Spinner'
-import useIpfsApi, { IpfsConfig } from '../hooks/use-ipfs-api'
-
-export function formatBytes(a: number, b: number) {
-  if (a === 0) return '0 Bytes'
-  const c = 1024
-  const d = b || 2
-  const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  const f = Math.floor(Math.log(a) / Math.log(c))
-  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
-}
 
 const { hostname, port, protocol } = new URL(ipfsNodeUri)
 
@@ -22,24 +14,6 @@ const ipfsConfig: IpfsConfig = {
   port: port || '443'
 }
 
-async function addToIpfs(
-  files: File[],
-  setFileSizeReceived: (size: string) => void,
-  ipfs: any
-) {
-  const file = [...files][0]
-  const fileDetails = { path: file.name, content: file }
-
-  const response = await ipfs.add(fileDetails, {
-    wrapWithDirectory: true,
-    progress: (length: number) => setFileSizeReceived(formatBytes(length, 0))
-  })
-
-  // CID of wrapping directory is returned last
-  const cid = `${response[response.length - 1].hash}/${file.name}`
-  return cid
-}
-
 export default function Add() {
   const { ipfs, isIpfsReady, ipfsError } = useIpfsApi(ipfsConfig)
   const [fileHash, setFileHash] = useState()

src/components/Dropzone.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 .dropzone {
   border: 0.2rem dashed var(--brand-grey-light);
   border-radius: calc(var(--border-radius) * 2);

src/components/Footer.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 .footer {
   width: 100%;
   font-size: var(--font-size-mini);

src/components/Info.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 .info {
   font-size: var(--font-size-small);
   opacity: 0.8;

src/components/Spinner.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 .spinner {
   position: relative;
   text-align: center;

src/components/Status.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 /* default: red square */
 .status {
   width: var(--font-size-mini);

src/hooks/use-ipfs-api.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import ipfsClient from 'ipfs-http-client'
+import { parseHTML } from '../utils'
 
 let ipfs: any = null
 let ipfsVersion = ''
@@ -10,12 +11,6 @@ export interface IpfsConfig {
   port: string
 }
 
-function parseHTML(str: string) {
-  const tmp = document.implementation.createHTMLDocument()
-  tmp.body.innerHTML = str
-  return tmp.body.children
-}
-
 export default function useIpfsApi(config: IpfsConfig) {
   const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs))
   const [ipfsError, setIpfsError] = useState('')

src/pages/_app.tsx

@@ -0,0 +1,11 @@
+import '@oceanprotocol/typographies/css/ocean-typo.css'
+import '../styles/global.css'
+import App from 'next/app'
+import React from 'react'
+
+export default class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}

src/pages/index.module.css

@@ -1,5 +1,3 @@
-@import '../styles/_variables.css';
-
 .grid {
   display: grid;
   gap: calc(var(--spacer) * 2);

src/pages/index.tsx

@@ -1,15 +1,13 @@
 import React from 'react'
-
-import '@oceanprotocol/typographies/css/ocean-typo.css'
-import '../styles/global.css'
-
-import Add from '../components/Add'
-import Logo from '@oceanprotocol/art/logo/logo-white.svg'
+import dynamic from 'next/dynamic'
 import { title, description, learnMore } from '../../site.config'
+import Layout from '../Layout'
 import styles from './index.module.css'
 
-import Layout from '../Layout'
-import Info from '../components/Info.mdx'
+import Logo from '@oceanprotocol/art/logo/logo-white.svg'
+
+const Add = dynamic(() => import('../components/Add'))
+const Info = dynamic(() => import('../components/Info.mdx'))
 
 const Home = () => (
   <Layout>

src/utils.ts

@@ -1,5 +1,32 @@
 import axios from 'axios'
 
+export function formatBytes(a: number, b: number) {
+  if (a === 0) return '0 Bytes'
+  const c = 1024
+  const d = b || 2
+  const e = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const f = Math.floor(Math.log(a) / Math.log(c))
+  return parseFloat((a / Math.pow(c, f)).toFixed(d)) + ' ' + e[f]
+}
+
+export async function addToIpfs(
+  files: File[],
+  setFileSizeReceived: (size: string) => void,
+  ipfs: any
+) {
+  const file = [...files][0]
+  const fileDetails = { path: file.name, content: file }
+
+  const response = await ipfs.add(fileDetails, {
+    wrapWithDirectory: true,
+    progress: (length: number) => setFileSizeReceived(formatBytes(length, 0))
+  })
+
+  // CID of wrapping directory is returned last
+  const cid = `${response[response.length - 1].hash}/${file.name}`
+  return cid
+}
+
 export async function pingUrl(url: string) {
   try {
     const response = await axios(url, { timeout: 5000 })
@@ -10,3 +37,9 @@ export async function pingUrl(url: string) {
     return false
   }
 }
+
+export function parseHTML(str: string) {
+  const tmp = document.implementation.createHTMLDocument()
+  tmp.body.innerHTML = str
+  return tmp.body.children
+}

tsconfig.json

@@ -20,6 +20,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true
   },
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules", ".next"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.mdx"]
 }