From 028a405ed90ab7e97435ee3f3bb250ad8d765849 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Sat, 1 Dec 2018 10:21:57 +0800 Subject: [PATCH 1/4] Add Typescript and convert some files to ts --- package.json | 21 ++- src/{App.js => App.tsx} | 9 +- src/{Routes.js => Routes.tsx} | 0 src/{apolloClient.js => apolloClient.ts} | 0 .../{Loading.js => Loading.tsx} | 6 +- src/{firebase.js => firebase.ts} | 0 src/react-app-env.d.ts | 1 + tsconfig.json | 20 +++ yarn.lock | 140 +++++++++++++----- 9 files changed, 153 insertions(+), 44 deletions(-) rename src/{App.js => App.tsx} (78%) rename src/{Routes.js => Routes.tsx} (100%) rename src/{apolloClient.js => apolloClient.ts} (100%) rename src/components/common/errors-loaders/{Loading.js => Loading.tsx} (76%) rename src/{firebase.js => firebase.ts} (100%) create mode 100644 src/react-app-env.d.ts create mode 100644 tsconfig.json diff --git a/package.json b/package.json index 220ea9d..466acd3 100644 --- a/package.json +++ b/package.json @@ -19,11 +19,17 @@ "@material/react-tab-bar": "^0.6.1", "@material/react-text-field": "^0.6.1", "@material/typography": "^0.40.1", - "apollo-cache-inmemory": "^1.3.8", - "apollo-client": "^2.4.5", - "apollo-link": "^1.2.3", - "apollo-link-error": "^1.1.1", - "apollo-link-http": "^1.5.5", + "@types/graphql": "^14.0.3", + "@types/node": "^10.12.11", + "@types/react": "^16.7.11", + "@types/react-dom": "^16.0.11", + "@types/react-redux": "^6.0.10", + "@types/react-router-dom": "^4.3.1", + "apollo-cache-inmemory": "^1.3.11", + "apollo-client": "^2.4.7", + "apollo-link": "^1.2.4", + "apollo-link-error": "^1.1.2", + "apollo-link-http": "^1.5.7", "babel-loader": "^8.0.4", "cra-append-sw": "^2.6.0", "date-fns": "^1.29.0", @@ -40,7 +46,7 @@ "query-string": "^6.2.0", "quickselect": "^2.0.0", "react": "^16.6.3", - "react-apollo": "^2.2.4", + "react-apollo": "^2.3.2", "react-copy-to-clipboard": "^5.0.1", "react-day-picker": "^7.2.4", "react-dom": "^16.6.3", @@ -56,7 +62,8 @@ "react-transition-group": "^1.2.1", "redux": "^4.0.1", "redux-persist": "^5.10.0", - "slick-carousel": "^1.8.1" + "slick-carousel": "^1.8.1", + "typescript": "^3.2.1" }, "devDependencies": { "classnames": "^2.2.6", diff --git a/src/App.js b/src/App.tsx similarity index 78% rename from src/App.js rename to src/App.tsx index 30ac107..ea527de 100644 --- a/src/App.js +++ b/src/App.tsx @@ -1,14 +1,19 @@ import React, { Component } from 'react'; +import { AnyAction, Store } from 'redux'; import { Provider } from 'react-redux'; import { BrowserRouter as Router } from 'react-router-dom'; import { ApolloProvider } from 'react-apollo'; import { auth } from './firebase'; -import Routes from './Routes.js'; +import Routes from './Routes'; import apolloClient from './apolloClient'; import './App.scss'; -export default class App extends Component { +interface Props { + store: Store; +} + +export default class App extends Component { componentDidMount() { auth().onAuthStateChanged(() => this.forceUpdate()); } diff --git a/src/Routes.js b/src/Routes.tsx similarity index 100% rename from src/Routes.js rename to src/Routes.tsx diff --git a/src/apolloClient.js b/src/apolloClient.ts similarity index 100% rename from src/apolloClient.js rename to src/apolloClient.ts diff --git a/src/components/common/errors-loaders/Loading.js b/src/components/common/errors-loaders/Loading.tsx similarity index 76% rename from src/components/common/errors-loaders/Loading.js rename to src/components/common/errors-loaders/Loading.tsx index f09be29..1dc1041 100644 --- a/src/components/common/errors-loaders/Loading.js +++ b/src/components/common/errors-loaders/Loading.tsx @@ -2,7 +2,11 @@ import React from 'react'; import ReactLoading from 'react-loading'; import styles from './ErrorsLoaders.module.scss'; -export default function Loading({ text }) { +interface Props { + text?: string; +} + +export default function Loading({ text }: Props) { return (

{text || 'Loading'}

diff --git a/src/firebase.js b/src/firebase.ts similarity index 100% rename from src/firebase.js rename to src/firebase.ts diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts new file mode 100644 index 0000000..6431bc5 --- /dev/null +++ b/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..e65b57b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "allowJs": true, + "skipLibCheck": false, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve", + "lib": ["dom", "es5", "es2015", "esnext.asynciterable"] + }, + "include": ["src"], + "exclude": ["src/sw-append.js"] +} diff --git a/yarn.lock b/yarn.lock index 3e49c1c..a809945 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1387,6 +1387,57 @@ version "2.0.50" resolved "https://registry.yarnpkg.com/@types/async/-/async-2.0.50.tgz#117540e026d64e1846093abbd5adc7e27fda7bcb" +"@types/graphql@^14.0.3": + version "14.0.3" + resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-14.0.3.tgz#389e2e5b83ecdb376d9f98fae2094297bc112c1c" + +"@types/history@*": + version "4.7.2" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220" + +"@types/node@^10.12.11": + version "10.12.11" + resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.11.tgz#715c476c99a5f6898a1ae61caf9825e43c03912e" + +"@types/prop-types@*": + version "15.5.6" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c" + +"@types/react-dom@^16.0.11": + version "16.0.11" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.11.tgz#bd10ccb0d9260343f4b9a49d4f7a8330a5c1f081" + dependencies: + "@types/react" "*" + +"@types/react-redux@^6.0.10": + version "6.0.10" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-6.0.10.tgz#80a3003a7d50112c65692a8b41752f623217a17c" + dependencies: + "@types/react" "*" + redux "^4.0.0" + +"@types/react-router-dom@^4.3.1": + version "4.3.1" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.1.tgz#71fe2918f8f60474a891520def40a63997dafe04" + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "4.4.1" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.4.1.tgz#c875dfd0b6fe00efa463eb8e5de8b5f74644b3f5" + dependencies: + "@types/history" "*" + "@types/react" "*" + +"@types/react@*", "@types/react@^16.7.11": + version "16.7.11" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.11.tgz#1743b82ea6a0c659467f0c7317c233edb1f10be9" + dependencies: + "@types/prop-types" "*" + csstype "^2.2.0" + "@types/tapable@1.0.2": version "1.0.2" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.2.tgz#e13182e1b69871a422d7863e11a4a6f5b814a4bd" @@ -1791,29 +1842,29 @@ anymatch@^2.0.0: micromatch "^3.1.4" normalize-path "^2.1.1" -apollo-cache-inmemory@^1.3.8: - version "1.3.8" - resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.3.8.tgz#5529a58b7b72b4bb133ce11ab22a012951297bb7" +apollo-cache-inmemory@^1.3.11: + version "1.3.11" + resolved "https://registry.yarnpkg.com/apollo-cache-inmemory/-/apollo-cache-inmemory-1.3.11.tgz#6cb8f24ec812715169f9acbb0b67833f9a19ec90" dependencies: - apollo-cache "^1.1.20" - apollo-utilities "^1.0.25" + apollo-cache "^1.1.21" + apollo-utilities "^1.0.26" optimism "^0.6.6" -apollo-cache@1.1.20, apollo-cache@^1.1.20: - version "1.1.20" - resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.1.20.tgz#6152cc4baf6a63e376efee79f75de4f5c84bf90e" +apollo-cache@1.1.21, apollo-cache@^1.1.21: + version "1.1.21" + resolved "https://registry.yarnpkg.com/apollo-cache/-/apollo-cache-1.1.21.tgz#950025e2272741ba8e5064419906e3ac4072925d" dependencies: - apollo-utilities "^1.0.25" + apollo-utilities "^1.0.26" -apollo-client@^2.4.5: - version "2.4.5" - resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-2.4.5.tgz#545beda1ef60814943b5622f0feabc9f29ee9822" +apollo-client@^2.4.7: + version "2.4.7" + resolved "https://registry.yarnpkg.com/apollo-client/-/apollo-client-2.4.7.tgz#b6712fd4c9ba346e3c44cfec7e6868e532b6a957" dependencies: "@types/zen-observable" "^0.8.0" - apollo-cache "1.1.20" + apollo-cache "1.1.21" apollo-link "^1.0.0" apollo-link-dedup "^1.0.0" - apollo-utilities "1.0.25" + apollo-utilities "1.0.26" symbol-observable "^1.0.2" zen-observable "^0.8.0" optionalDependencies: @@ -1825,24 +1876,24 @@ apollo-link-dedup@^1.0.0: dependencies: apollo-link "^1.2.3" -apollo-link-error@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.1.tgz#69d7124d4dc11ce60f505c940f05d4f1aa0945fb" +apollo-link-error@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.2.tgz#d068fdf99892e6fc65cfe0390db8528d182f9481" dependencies: - apollo-link "^1.2.3" + apollo-link "^1.2.4" -apollo-link-http-common@^0.2.5: - version "0.2.5" - resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.5.tgz#d094beb7971523203359bf830bfbfa7b4e7c30ed" +apollo-link-http-common@^0.2.6: + version "0.2.6" + resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.6.tgz#47b9012500599fe343e2e87378026384b4fc8c1f" dependencies: - apollo-link "^1.2.3" + apollo-link "^1.2.4" -apollo-link-http@^1.5.5: - version "1.5.5" - resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.5.tgz#7dbe851821771ad67fa29e3900c57f38cbd80da8" +apollo-link-http@^1.5.7: + version "1.5.7" + resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.7.tgz#098615c427a910ec8c5817476bbabe68c586b339" dependencies: - apollo-link "^1.2.3" - apollo-link-http-common "^0.2.5" + apollo-link "^1.2.4" + apollo-link-http-common "^0.2.6" apollo-link@^1.0.0, apollo-link@^1.2.3: version "1.2.3" @@ -1851,9 +1902,16 @@ apollo-link@^1.0.0, apollo-link@^1.2.3: apollo-utilities "^1.0.0" zen-observable-ts "^0.8.10" -apollo-utilities@1.0.25, apollo-utilities@^1.0.25: - version "1.0.25" - resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.25.tgz#899b00f5f990fb451675adf84cb3de82eb6372ea" +apollo-link@^1.2.4: + version "1.2.4" + resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.4.tgz#ab4d21d2e428db848e88b5e8f4adc717b19c954b" + dependencies: + apollo-utilities "^1.0.0" + zen-observable-ts "^0.8.11" + +apollo-utilities@1.0.26, apollo-utilities@^1.0.26: + version "1.0.26" + resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.26.tgz#589c66bf4d16223531351cf667a230c787def1da" dependencies: fast-json-stable-stringify "^2.0.0" @@ -3346,6 +3404,10 @@ cssstyle@^1.0.0, cssstyle@^1.1.1: dependencies: cssom "0.3.x" +csstype@^2.2.0: + version "2.5.7" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff" + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -8160,9 +8222,9 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-apollo@^2.2.4: - version "2.2.4" - resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-2.2.4.tgz#05b2a91deb4d5f30d2511fc663abc465b219435e" +react-apollo@^2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-2.3.2.tgz#b8e287d2813722b9e0a886cabf8149ab3b84a3b7" dependencies: fbjs "^1.0.0" hoist-non-react-statics "^3.0.0" @@ -8507,7 +8569,7 @@ redux-persist@^5.10.0: version "5.10.0" resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-5.10.0.tgz#5d8d802c5571e55924efc1c3a9b23575283be62b" -redux@^4.0.1: +redux@^4.0.0, redux@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5" dependencies: @@ -9709,6 +9771,10 @@ typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" +typescript@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.1.tgz#0b7a04b8cf3868188de914d9568bd030f0c56192" + ua-parser-js@^0.7.18: version "0.7.18" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" @@ -10454,6 +10520,12 @@ zen-observable-ts@^0.8.10: dependencies: zen-observable "^0.8.0" +zen-observable-ts@^0.8.11: + version "0.8.11" + resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.11.tgz#d54a27cd17dc4b4bb6bd008e5c096af7fcb068a9" + dependencies: + zen-observable "^0.8.0" + zen-observable@^0.8.0: version "0.8.9" resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.9.tgz#0475c760ff0eda046bbdfa4dc3f95d392807ac53" From fb79f5ff1fde964b3ed685f514b90fb20d9232a4 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Sat, 1 Dec 2018 10:22:41 +0800 Subject: [PATCH 2/4] Update prettify script for Typescript files --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 466acd3..ad0c7f6 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "build": "react-scripts build && cra-append-sw ./src/sw-append.js", "test": "react-scripts test --env=jsdom", "lint": "eslint src", - "prettify": "prettier --write $(find src -type f -name '*.js')" + "prettify": "prettier --write $(find src -type f -name '*.js' -o -name '*.ts' -o -name '*.tsx')" }, "browserslist": [ ">0.2%", From 21740e3a6874d32daba6a9413c90fec3a1eef1fa Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Sat, 1 Dec 2018 10:31:16 +0800 Subject: [PATCH 3/4] Fix existing component types --- src/Routes.tsx | 2 +- src/components/common/errors-loaders/Loading.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Routes.tsx b/src/Routes.tsx index 932ea1d..13e238b 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -12,7 +12,7 @@ const LoginPage = lazy(() => import('./components/auth/LoginPage')); const DashboardPage = lazy(() => import('./components/dashboard/DashboardPage')); const NotFoundPage = lazy(() => import('./components/common/errors-loaders/NotFoundPage')); -const Routes = () => ( +const Routes: React.FunctionComponent = () => ( <> }> diff --git a/src/components/common/errors-loaders/Loading.tsx b/src/components/common/errors-loaders/Loading.tsx index 1dc1041..5b9cef3 100644 --- a/src/components/common/errors-loaders/Loading.tsx +++ b/src/components/common/errors-loaders/Loading.tsx @@ -6,11 +6,13 @@ interface Props { text?: string; } -export default function Loading({ text }: Props) { +const Loading: React.FunctionComponent = ({ text }) => { return (

{text || 'Loading'}

); -} +}; + +export default Loading; From 2550aabe63cb3e7e41c2c93b2696538f32aee2c8 Mon Sep 17 00:00:00 2001 From: E-Liang Tan Date: Sat, 1 Dec 2018 10:52:54 +0800 Subject: [PATCH 4/4] Type errors loaders --- .../{GoogleAnalytics.js => GoogleAnalytics.tsx} | 13 +++++++++---- .../common/errors-loaders/{Error.js => Error.tsx} | 11 +++++++++-- .../{NotFoundPage.js => NotFoundPage.tsx} | 6 ++++-- 3 files changed, 22 insertions(+), 8 deletions(-) rename src/components/common/{GoogleAnalytics.js => GoogleAnalytics.tsx} (59%) rename src/components/common/errors-loaders/{Error.js => Error.tsx} (57%) rename src/components/common/errors-loaders/{NotFoundPage.js => NotFoundPage.tsx} (73%) diff --git a/src/components/common/GoogleAnalytics.js b/src/components/common/GoogleAnalytics.tsx similarity index 59% rename from src/components/common/GoogleAnalytics.js rename to src/components/common/GoogleAnalytics.tsx index 4d0a3c0..5645da5 100644 --- a/src/components/common/GoogleAnalytics.js +++ b/src/components/common/GoogleAnalytics.tsx @@ -1,11 +1,16 @@ import React from 'react'; -import { withRouter } from 'react-router-dom'; +import { withRouter, RouteComponentProps } from 'react-router-dom'; import ReactGA from 'react-ga'; +type Props = {} & RouteComponentProps<{}>; + // Adapted from https://stackoverflow.com/a/47385875/5281021 -class GoogleAnalytics extends React.Component { - componentDidUpdate({ location, history }) { - ReactGA.initialize(process.env.REACT_APP_GA_TRACKING_ID, { +class GoogleAnalytics extends React.Component { + componentDidUpdate({ location, history }: Props) { + const { REACT_APP_GA_TRACKING_ID } = process.env; + if (!REACT_APP_GA_TRACKING_ID) return; + + ReactGA.initialize(REACT_APP_GA_TRACKING_ID, { debug: process.env.NODE_ENV === 'development', }); diff --git a/src/components/common/errors-loaders/Error.js b/src/components/common/errors-loaders/Error.tsx similarity index 57% rename from src/components/common/errors-loaders/Error.js rename to src/components/common/errors-loaders/Error.tsx index 9b51ccd..479a898 100644 --- a/src/components/common/errors-loaders/Error.js +++ b/src/components/common/errors-loaders/Error.tsx @@ -1,11 +1,18 @@ import React from 'react'; import styles from './ErrorsLoaders.module.scss'; -export default function Error({ title, message }) { +interface Props { + title: string; + message: string; +} + +const Error: React.FunctionComponent = ({ title, message }) => { return (

{title}

{message}
); -} +}; + +export default Error; diff --git a/src/components/common/errors-loaders/NotFoundPage.js b/src/components/common/errors-loaders/NotFoundPage.tsx similarity index 73% rename from src/components/common/errors-loaders/NotFoundPage.js rename to src/components/common/errors-loaders/NotFoundPage.tsx index fdae4ef..3a5a26d 100644 --- a/src/components/common/errors-loaders/NotFoundPage.js +++ b/src/components/common/errors-loaders/NotFoundPage.tsx @@ -1,11 +1,13 @@ import React from 'react'; import styles from './ErrorsLoaders.module.scss'; -export default function NotFoundPage() { +const NotFoundPage: React.FunctionComponent = () => { return (

Oops, page not found

Are you sure you have the correct URL?
); -} +}; + +export default NotFoundPage;