From f7895c5359c93a81c8211b62e7676c5b24612666 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 17 Oct 2019 00:13:54 +0200 Subject: [PATCH] fixes and move to typescript --- .eslintrc | 32 ++++++++++++++++++ config.js | 24 -------------- next-env.d.ts | 2 ++ package.json | 13 +++++--- site.config.js | 24 ++++++++++++++ src/@types/global.d.ts | 15 +++++++++ src/Layout.module.css | 17 ++++++++++ src/Layout.tsx | 26 +++++++++++++++ src/components/{Add.css => Add.module.css} | 0 src/components/{Add.jsx => Add.tsx} | 8 ++--- .../{Dropzone.css => Dropzone.module.css} | 0 src/components/{Dropzone.jsx => Dropzone.tsx} | 19 ++++++----- .../{Footer.css => Footer.module.css} | 0 src/components/{Footer.jsx => Footer.tsx} | 4 +-- .../{Spinner.css => Spinner.module.css} | 0 src/components/{Spinner.jsx => Spinner.tsx} | 2 +- src/{ipfs.js => ipfs.ts} | 6 ++-- src/pages/index.js | 33 ------------------- src/pages/{index.css => index.module.css} | 24 +++----------- src/pages/index.tsx | 27 +++++++++++++++ src/styles/global.css | 2 +- tsconfig.json | 25 ++++++++++++++ 22 files changed, 202 insertions(+), 101 deletions(-) create mode 100644 .eslintrc delete mode 100644 config.js create mode 100644 next-env.d.ts create mode 100644 site.config.js create mode 100644 src/@types/global.d.ts create mode 100644 src/Layout.module.css create mode 100644 src/Layout.tsx rename src/components/{Add.css => Add.module.css} (100%) rename src/components/{Add.jsx => Add.tsx} (79%) rename src/components/{Dropzone.css => Dropzone.module.css} (100%) rename src/components/{Dropzone.jsx => Dropzone.tsx} (75%) rename src/components/{Footer.css => Footer.module.css} (100%) rename src/components/{Footer.jsx => Footer.tsx} (85%) rename src/components/{Spinner.css => Spinner.module.css} (100%) rename src/components/{Spinner.jsx => Spinner.tsx} (72%) rename src/{ipfs.js => ipfs.ts} (81%) delete mode 100644 src/pages/index.js rename src/pages/{index.css => index.module.css} (54%) create mode 100644 src/pages/index.tsx create mode 100644 tsconfig.json diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..9b1280a --- /dev/null +++ b/.eslintrc @@ -0,0 +1,32 @@ +{ + "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", + "@typescript-eslint/no-explicit-any": "off" + }, + "env": { + "es6": true, + "browser": true, + "jest": true + }, + "settings": { + "react": { + "version": "16" + } + } +} diff --git a/config.js b/config.js deleted file mode 100644 index 4a03b66..0000000 --- a/config.js +++ /dev/null @@ -1,24 +0,0 @@ -export const title = 'Ocean Protocol 💖 IPFS' -export const description = `Ocean Protocol's public IPFS Node, setup to be a public gateway, and to provide some access to its HTTP API for everyone.
Learn More →` - -export const ipfsGateway = 'https://ipfs.oceanprotocol.com' -export const ipfsNodeUri = 'https://ipfs.oceanprotocol.com:443' - -export const links = [ - { - name: 'Homepage', - url: 'https://oceanprotocol.com' - }, - { - name: 'Blog', - url: 'https://blog.oceanprotocol.com' - }, - { - name: 'Twitter', - url: 'https://twitter.com/oceanprotocol' - }, - { - name: 'GitHub', - url: 'https://github.com/oceanprotocol' - } -] diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..7b7aa2c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/package.json b/package.json index 2a8dfd2..d3e0742 100644 --- a/package.json +++ b/package.json @@ -5,9 +5,9 @@ "scripts": { "start": "next dev", "build": "next build", - "server": "next start", - "test": "eslint ./src/**/*.{js,jsx}", - "format": "prettier ./src/**/*.{css,yml,js,jsx,json} --write" + "serve": "next start", + "test": "eslint --ignore-path .gitignore --ext .ts,.tsx ./src", + "format": "prettier ./src/**/*.{css,yml,js,jsx,ts,tsx,json} --write" }, "author": "Matthias Kretschmann ", "license": "Apache-2.0", @@ -23,12 +23,17 @@ "react-dropzone": "^10.1.10" }, "devDependencies": { + "@types/node": "^12.11.1", + "@types/react": "^16.9.9", + "@typescript-eslint/eslint-plugin": "^2.4.0", + "@typescript-eslint/parser": "^2.4.0", "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", - "prettier": "^1.18.2" + "prettier": "^1.18.2", + "typescript": "^3.6.4" }, "eslintConfig": { "extends": [ diff --git a/site.config.js b/site.config.js new file mode 100644 index 0000000..c474885 --- /dev/null +++ b/site.config.js @@ -0,0 +1,24 @@ +module.exports = { + title: 'Ocean Protocol 💖 IPFS', + description: `Ocean Protocol's public IPFS Node, setup to be a public gateway, and to provide some access to its HTTP API for everyone.
Learn More →`, + ipfsGateway: 'https://ipfs.oceanprotocol.com', + ipfsNodeUri: 'https://ipfs.oceanprotocol.com:443', + links: [ + { + name: 'Homepage', + url: 'https://oceanprotocol.com' + }, + { + name: 'Blog', + url: 'https://blog.oceanprotocol.com' + }, + { + name: 'Twitter', + url: 'https://twitter.com/oceanprotocol' + }, + { + name: 'GitHub', + url: 'https://github.com/oceanprotocol' + } + ] +} diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts new file mode 100644 index 0000000..d867952 --- /dev/null +++ b/src/@types/global.d.ts @@ -0,0 +1,15 @@ +declare module '*.module.css' { + const classes: { readonly [key: string]: string } + export default classes +} + +declare module '*.svg' { + import * as React from 'react' + export const ReactComponent: React.FunctionComponent< + React.SVGProps + > + const src: string + export default src +} + +declare module 'ipfs-http-client' diff --git a/src/Layout.module.css b/src/Layout.module.css new file mode 100644 index 0000000..89cd1e0 --- /dev/null +++ b/src/Layout.module.css @@ -0,0 +1,17 @@ +@import './styles/_variables.css'; + +.app { + padding: var(--spacer); + background: var(--brand-black); + height: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +@media screen and (min-width: 640px) { + .app { + height: auto; + min-height: calc(100vh - (var(--page-frame) * 2) - (var(--spacer) * 2)); + } +} diff --git a/src/Layout.tsx b/src/Layout.tsx new file mode 100644 index 0000000..3f11597 --- /dev/null +++ b/src/Layout.tsx @@ -0,0 +1,26 @@ +import React from 'react' +import Head from 'next/head' +import Footer from './components/Footer' +import styles from './Layout.module.css' +import { title } from '../site.config' + +export default function Layout({ + children, + pageTitle = title +}: { + children: any + pageTitle?: string +}) { + return ( +
+ + {pageTitle} + + + + {children} + +
+
+ ) +} diff --git a/src/components/Add.css b/src/components/Add.module.css similarity index 100% rename from src/components/Add.css rename to src/components/Add.module.css diff --git a/src/components/Add.jsx b/src/components/Add.tsx similarity index 79% rename from src/components/Add.jsx rename to src/components/Add.tsx index a29ae67..b982048 100644 --- a/src/components/Add.jsx +++ b/src/components/Add.tsx @@ -1,15 +1,15 @@ import React, { useState } from 'react' import { saveToIpfs } from '../ipfs' -import { ipfsGateway } from '../../config' +import { ipfsGateway } from '../../site.config' import Dropzone from './Dropzone' -import styles from './Add.css' +import styles from './Add.module.css' import Spinner from './Spinner' export default function Add() { - const [fileHash, setFileHash] = useState(null) + const [fileHash, setFileHash] = useState() const [loading, setLoading] = useState(false) - const handleCaptureFile = async files => { + const handleCaptureFile = async (files: File[]) => { setLoading(true) const cid = await saveToIpfs(files) setFileHash(cid) diff --git a/src/components/Dropzone.css b/src/components/Dropzone.module.css similarity index 100% rename from src/components/Dropzone.css rename to src/components/Dropzone.module.css diff --git a/src/components/Dropzone.jsx b/src/components/Dropzone.tsx similarity index 75% rename from src/components/Dropzone.jsx rename to src/components/Dropzone.tsx index f310ee6..d446121 100644 --- a/src/components/Dropzone.jsx +++ b/src/components/Dropzone.tsx @@ -1,15 +1,16 @@ import React, { useCallback } from 'react' -import PropTypes from 'prop-types' import { useDropzone } from 'react-dropzone' -import styles from './Dropzone.css' +import styles from './Dropzone.module.css' -Dropzone.propTypes = { - handleOnDrop: PropTypes.func.isRequired, - disabled: PropTypes.bool, - multiple: PropTypes.bool -} - -export default function Dropzone({ handleOnDrop, disabled, multiple }) { +export default function Dropzone({ + handleOnDrop, + disabled, + multiple +}: { + handleOnDrop(files: File[]): void + disabled?: boolean + multiple?: boolean +}) { const onDrop = useCallback(acceptedFiles => handleOnDrop(acceptedFiles), [ handleOnDrop ]) diff --git a/src/components/Footer.css b/src/components/Footer.module.css similarity index 100% rename from src/components/Footer.css rename to src/components/Footer.module.css diff --git a/src/components/Footer.jsx b/src/components/Footer.tsx similarity index 85% rename from src/components/Footer.jsx rename to src/components/Footer.tsx index d60901a..e936388 100644 --- a/src/components/Footer.jsx +++ b/src/components/Footer.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { links } from '../../config' -import styles from './Footer.css' +import { links } from '../../site.config' +import styles from './Footer.module.css' export default function Footer() { const year = new Date().getFullYear() diff --git a/src/components/Spinner.css b/src/components/Spinner.module.css similarity index 100% rename from src/components/Spinner.css rename to src/components/Spinner.module.css diff --git a/src/components/Spinner.jsx b/src/components/Spinner.tsx similarity index 72% rename from src/components/Spinner.jsx rename to src/components/Spinner.tsx index 450fa1b..db98922 100644 --- a/src/components/Spinner.jsx +++ b/src/components/Spinner.tsx @@ -1,5 +1,5 @@ import React from 'react' -import styles from './Spinner.css' +import styles from './Spinner.module.css' export default function Spinner() { return
diff --git a/src/ipfs.js b/src/ipfs.ts similarity index 81% rename from src/ipfs.js rename to src/ipfs.ts index 0004735..053a56f 100644 --- a/src/ipfs.js +++ b/src/ipfs.ts @@ -1,7 +1,7 @@ import ipfsClient from 'ipfs-http-client' -import { ipfsNodeUri } from '../config' +import { ipfsNodeUri } from '../site.config' -export async function saveToIpfs(files) { +export async function saveToIpfs(files: File[]) { const { hostname, port, protocol } = new URL(ipfsNodeUri) const ipfsConfig = { @@ -20,7 +20,7 @@ export async function saveToIpfs(files) { } const options = { wrapWithDirectory: true, - progress: prog => console.log(`received: ${prog}`) + progress: (prog: number) => console.log(`received: ${prog}`) } try { diff --git a/src/pages/index.js b/src/pages/index.js deleted file mode 100644 index ef37abe..0000000 --- a/src/pages/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react' -import Head from 'next/head' - -import '@oceanprotocol/typographies/css/ocean-typo.css' -import '../styles/global.css' -import styles from './index.css' - -import Add from '../components/Add' -import Logo from '@oceanprotocol/art/logo/logo-white.svg' -import { title, description } from '../../config' -import Footer from '../components/Footer' - -const Home = () => ( -
- - Ocean Protocol 💖 IPFS - - - -
- -

{title}

-

-

- -
-
-) - -export default Home diff --git a/src/pages/index.css b/src/pages/index.module.css similarity index 54% rename from src/pages/index.css rename to src/pages/index.module.css index c691bc5..54ed679 100644 --- a/src/pages/index.css +++ b/src/pages/index.module.css @@ -1,38 +1,22 @@ @import '../styles/_variables.css'; -.app { - padding: var(--spacer); - background: var(--brand-black); - height: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -@media screen and (min-width: 640px) { - .app { - height: auto; - min-height: calc(100vh - (var(--page-frame) * 2) - (var(--spacer) * 2)); - } -} - .header { width: 100%; margin-top: var(--spacer); } -.appTitle { +.title { margin-top: var(--spacer); font-size: var(--font-size-h2); } @media screen and (min-width: 640px) { - .appTitle { + .title { font-size: var(--font-size-h1); } } -.appDescription { +.description { font-size: var(--font-size-large); color: var(--brand-grey-lighter); max-width: 40rem; @@ -40,7 +24,7 @@ margin-right: auto; } -.logo { +.header svg { width: 80px; height: 80px; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..04e05d6 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,27 @@ +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 { title, description } from '../../site.config' +import styles from './index.module.css' + +import Layout from '../Layout' + +const Home = () => ( + +
+ +

{title}

+

+

+ + +) + +export default Home diff --git a/src/styles/global.css b/src/styles/global.css index 3541c67..4b29059 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -2,7 +2,7 @@ html, body, -#root { +#__next { height: 100%; max-height: calc(100vh - (var(--page-frame) * 2)); } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..42c842c --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "allowJs": true, + "allowSyntheticDefaultImports": true, + "jsx": "preserve", + "lib": ["dom", "es2017"], + "module": "esnext", + "moduleResolution": "node", + "noEmit": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "preserveConstEnums": true, + "removeComments": false, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "target": "esnext", + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "resolveJsonModule": true, + "isolatedModules": true + }, + "exclude": ["node_modules"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"] +}