From 000a9543339d47b7f7e0873e717f8ede1e5e6a7e Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Thu, 21 Mar 2019 15:40:24 +0700 Subject: [PATCH] Improve feature/apollo-pure (#1720) * small README.md grammar change (#1675) * Upgrade all dependencies including Babel 7 (#1673) * Upgrade all dependencies including Babel 7 1. ncu --upgradeAll 4. Leave "graphql" to be "^13.2.0" that apollo packages depend on 2. Apply patch of "npx babel-upgrade" output 3. Leave only necessary babel plugins 4. Pass "yarn fix" by disabling stricter rules fixes #1654 #1626 #1607 * Also ignore babel config file from webpack.config.js * Resolve conflict and follow upstream/master * small README.md grammar change (#1675) * Upgrade all dependencies including Babel 7 (#1673) * Upgrade all dependencies including Babel 7 * update apollo packages * Use new local state management of Apollo Client 2.5 * Client Schema * Simplify cache and cache defaults * User in local state instead of context * bye apollo-link-state * mod: better suppressing flow error for .graphql import * fix: jest error by updating jest * Upgrade all dependencies fix 2 breaking changes: * css-loader no longer accepts 'minimize' option * isomorphic-style-loader uses new React Context now * refac: Use functional component for components * fix: resolve apollo and graphql versions problem ref. https://github.com/apollographql/apollo-tooling/issues/630#issuecomment-460094221 --- .flowconfig | 7 + README.md | 62 +- .../npm/isomorphic-style-loader_vx.x.x.js | 10 +- package.json | 167 +- src/client.js | 28 +- src/components/App.js | 84 +- src/components/Feedback/Feedback.js | 41 +- src/components/Footer/Footer.js | 52 +- src/components/Header/Header.js | 46 +- src/components/Html.js | 121 +- src/components/Layout/Layout.js | 22 +- src/components/Layout/Layout.test.js | 8 +- src/components/Link/Link.js | 57 +- src/components/Navigation/Navigation.js | 42 +- src/components/Page/Page.js | 34 +- src/context.js | 15 + .../createApolloClient.client.js | 21 +- .../createApolloClient.server.js | 21 +- src/core/createInitialState.js | 10 - src/data/graphql/OnMemoryState/schema.js | 16 +- src/data/graphql/OnMemoryState/user.js | 13 + src/history.js | 2 +- src/routes/admin/Admin.js | 2 +- src/routes/contact/Contact.js | 2 +- src/routes/error/ErrorPage.js | 4 +- src/routes/home/Home.js | 2 +- src/routes/login/Login.js | 2 +- src/routes/not-found/NotFound.js | 2 +- src/routes/register/Register.js | 2 +- src/server.js | 25 +- tools/lib/fs.js | 25 +- tools/postcss.config.js | 9 + tools/webpack.config.js | 53 +- yarn.lock | 7298 ++++++++++------- 34 files changed, 4681 insertions(+), 3624 deletions(-) create mode 100644 src/context.js delete mode 100644 src/core/createInitialState.js create mode 100644 src/data/graphql/OnMemoryState/user.js diff --git a/.flowconfig b/.flowconfig index 920b4f053..ec42c81d7 100644 --- a/.flowconfig +++ b/.flowconfig @@ -8,3 +8,10 @@ [options] suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError +module.file_ext=.js +module.file_ext=.jsx +module.file_ext=.json +module.file_ext=.css +module.file_ext=.scss +module.file_ext=.graphql +module.name_mapper='^.*\.graphql$' -> 'empty/object' diff --git a/README.md b/README.md index b66aa1f2e..c8378dad0 100644 --- a/README.md +++ b/README.md @@ -23,9 +23,9 @@ and newcomers to the industry. ### Getting Started -* Follow the [getting started guide](./docs/getting-started.md) to download and run the project +- Follow the [getting started guide](./docs/getting-started.md) to download and run the project ([Node.js](https://nodejs.org/) >= 6.5) -* Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours +- Check the [code recipes](./docs/recipes) used in this boilerplate, or share yours ### Customization @@ -33,17 +33,17 @@ The `master` branch of React Starter Kit doesn't include a Flux implementation o advanced integrations. Nevertheless, we have some integrations available to you in _feature_ branches that you can use either as a reference or merge into your project: - * [feature/redux](https://github.com/kriasoft/react-starter-kit/tree/feature/redux) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1084)) - — isomorphic Redux by [Pavel Lang](https://github.com/langpavel) - (see [how to integrate Redux](./docs/recipes/how-to-integrate-redux.md)) (based on `master`) - * [feature/apollo](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1147)) - — isomorphic Apollo Client by [Pavel Lang](https://github.com/langpavel) - (see [Tracking PR #1147](https://github.com/kriasoft/react-starter-kit/pull/1147)) (based on `feature/redux`) - * [feature/react-intl](https://github.com/kriasoft/react-starter-kit/tree/feature/react-intl) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1135)) - — isomorphic Redux and React Intl by [Pavel Lang](https://github.com/langpavel) - (see [how to integrate React Intl](./docs/recipes/how-to-integrate-react-intl.md)) (based on `feature/apollo`) - * [feature/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1664)) - — bare Apollo codebase by [piglovesyou](https://github.com/piglovesyou) (based on `master`) +- [feature/redux](https://github.com/kriasoft/react-starter-kit/tree/feature/redux) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1084)) + — isomorphic Redux by [Pavel Lang](https://github.com/langpavel) + (see [how to integrate Redux](./docs/recipes/how-to-integrate-redux.md)) (based on `master`) +- [feature/apollo](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1147)) + — isomorphic Apollo Client by [Pavel Lang](https://github.com/langpavel) + (see [Tracking PR #1147](https://github.com/kriasoft/react-starter-kit/pull/1147)) (based on `feature/redux`) +- [feature/react-intl](https://github.com/kriasoft/react-starter-kit/tree/feature/react-intl) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1135)) + — isomorphic Redux and React Intl by [Pavel Lang](https://github.com/langpavel) + (see [how to integrate React Intl](./docs/recipes/how-to-integrate-react-intl.md)) (based on `feature/apollo`) +- [feature/apollo-pure](https://github.com/kriasoft/react-starter-kit/tree/feature/apollo-pure) ([PR](https://github.com/kriasoft/react-starter-kit/pull/1664)) + — bare Apollo codebase by [piglovesyou](https://github.com/piglovesyou) (based on `master`) You can see status of most reasonable merge combination as [PRs labeled as `TRACKING`](https://github.com/kriasoft/react-starter-kit/labels/TRACKING) @@ -178,36 +178,36 @@ expenses via [OpenCollective](https://opencollective.com/react-starter-kit) or Anyone and everyone is welcome to [contribute](CONTRIBUTING.md) to this project. The best way to start is by checking our [open issues](https://github.com/kriasoft/react-starter-kit/issues), -[submit a new issues](https://github.com/kriasoft/react-starter-kit/issues/new?labels=bug) or +[submit a new issue](https://github.com/kriasoft/react-starter-kit/issues/new?labels=bug) or [feature request](https://github.com/kriasoft/react-starter-kit/issues/new?labels=enhancement), participate in discussions, upvote or downvote the issues you like or dislike, send [pull requests](CONTRIBUTING.md#pull-requests). ### Learn More -* [Getting Started with React.js](http://facebook.github.io/react/) -* [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE) -* [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) -* [React.js Discussion Board](https://discuss.reactjs.org/) -* [Flux Architecture for Building User Interfaces](http://facebook.github.io/flux/) -* [Enzyme — JavaScript Testing utilities for React](http://airbnb.io/enzyme/) -* [Flow — A static type checker for JavaScript](http://flowtype.org/) -* [The Future of React](https://github.com/reactjs/react-future) -* [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme) +- [Getting Started with React.js](http://facebook.github.io/react/) +- [Getting Started with GraphQL and Relay](https://quip.com/oLxzA1gTsJsE) +- [React.js Questions on StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) +- [React.js Discussion Board](https://discuss.reactjs.org/) +- [Flux Architecture for Building User Interfaces](http://facebook.github.io/flux/) +- [Enzyme — JavaScript Testing utilities for React](http://airbnb.io/enzyme/) +- [Flow — A static type checker for JavaScript](http://flowtype.org/) +- [The Future of React](https://github.com/reactjs/react-future) +- [Learn ES6](https://babeljs.io/docs/learn-es6/), [ES6 Features](https://github.com/lukehoban/es6features#readme) ### Related Projects -* [GraphQL Starter Kit](https://github.com/kriasoft/graphql-starter-kit) — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL -* [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, profiles, roles, and auth claims -* [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries +- [GraphQL Starter Kit](https://github.com/kriasoft/graphql-starter-kit) — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL +- [Membership Database](https://github.com/membership/membership.db) — SQL schema boilerplate for user accounts, profiles, roles, and auth claims +- [Babel Starter Kit](https://github.com/kriasoft/babel-starter-kit) — Boilerplate for authoring JavaScript/React.js libraries ### Support -* [#react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit) on Stack Overflow — Questions and answers -* [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter — Watch announcements, share ideas and feedback -* [GitHub issues](https://github.com/kriasoft/react-starter-kit/issues), or [Scrum board](https://waffle.io/kriasoft/react-starter-kit) — File issues, send feature requests -* [appear.in/react](https://appear.in/react) — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects) -* [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), or [Skype](http://hatscripts.com/addskype?koistya) — Private consulting +- [#react-starter-kit](http://stackoverflow.com/questions/tagged/react-starter-kit) on Stack Overflow — Questions and answers +- [#react-starter-kit](https://gitter.im/kriasoft/react-starter-kit) on Gitter — Watch announcements, share ideas and feedback +- [GitHub issues](https://github.com/kriasoft/react-starter-kit/issues), or [Scrum board](https://waffle.io/kriasoft/react-starter-kit) — File issues, send feature requests +- [appear.in/react](https://appear.in/react) — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects) +- [@koistya](https://twitter.com/koistya) on [Codementor](https://www.codementor.io/koistya), or [Skype](http://hatscripts.com/addskype?koistya) — Private consulting ### License diff --git a/flow-typed/npm/isomorphic-style-loader_vx.x.x.js b/flow-typed/npm/isomorphic-style-loader_vx.x.x.js index d688d2e1b..3eda5b656 100644 --- a/flow-typed/npm/isomorphic-style-loader_vx.x.x.js +++ b/flow-typed/npm/isomorphic-style-loader_vx.x.x.js @@ -30,7 +30,7 @@ declare module 'isomorphic-style-loader/lib/insertCss' { declare module.exports: any; } -declare module 'isomorphic-style-loader/lib/withStyles' { +declare module 'isomorphic-style-loader/withStyles' { // TODO: Using ComponentType does not work so simply return T. // import type {ComponentType} from 'react'; declare module.exports: ( @@ -42,6 +42,10 @@ declare module 'isomorphic-style-loader/lib/withStyles' { ) => ((component: T) => T); } +declare module 'isomorphic-style-loader/StyleContext' { + declare module.exports: any; +} + // Filename aliases declare module 'isomorphic-style-loader/lib/index.js' { declare module.exports: $Exports<'isomorphic-style-loader/lib/index'>; @@ -49,6 +53,6 @@ declare module 'isomorphic-style-loader/lib/index.js' { declare module 'isomorphic-style-loader/lib/insertCss.js' { declare module.exports: $Exports<'isomorphic-style-loader/lib/insertCss'>; } -declare module 'isomorphic-style-loader/lib/withStyles.js' { - declare module.exports: $Exports<'isomorphic-style-loader/lib/withStyles'>; +declare module 'isomorphic-style-loader/withStyles.js' { + declare module.exports: $Exports<'isomorphic-style-loader/withStyles'>; } diff --git a/package.json b/package.json index 1680ddc93..381010102 100644 --- a/package.json +++ b/package.json @@ -13,126 +13,125 @@ "not ie < 9" ], "dependencies": { - "@babel/polyfill": "^7.0.0", - "apollo-cache-inmemory": "^1.2.10", - "apollo-client": "^2.4.2", - "apollo-link": "^1.2.3", - "apollo-link-error": "^1.1.1", - "apollo-link-http": "^1.5.5", + "@babel/polyfill": "^7.4.0", + "apollo-cache-inmemory": "^1.5.1", + "apollo-client": "^2.5.1", + "apollo-link": "^1.2.11", + "apollo-link-error": "^1.1.10", + "apollo-link-http": "^1.5.14", "apollo-link-logger": "^1.2.3", - "apollo-link-schema": "^1.1.1", - "apollo-link-state": "^0.4.2", - "apollo-server": "^2.1.0", - "apollo-server-express": "^2.1.0", + "apollo-link-schema": "^1.2.2", + "apollo-server": "^2.4.8", + "apollo-server-express": "^2.4.8", "body-parser": "^1.18.3", "classnames": "^2.2.6", - "cookie-parser": "^1.4.3", - "express": "^4.16.3", + "cookie-parser": "^1.4.4", + "express": "^4.16.4", "express-jwt": "^5.3.1", - "graphql": "^14.0.2", - "graphql-tag": "^2.9.2", - "history": "^4.7.2", - "isomorphic-style-loader": "^4.0.0", - "jsonwebtoken": "^8.3.0", + "graphql": "^14.0", + "graphql-tag": "^2.10.1", + "history": "^4.9.0", + "isomorphic-style-loader": "^5.0.1", + "jsonwebtoken": "^8.5.1", "lodash.merge": "^4.6.1", - "node-fetch": "^2.2.0", - "normalize.css": "^8.0.0", + "node-fetch": "^2.3.0", + "normalize.css": "^8.0.1", "passport": "^0.4.0", - "passport-facebook": "^2.1.1", + "passport-facebook": "^3.0.0", "pretty-error": "^2.1.1", - "prop-types": "^15.6.2", - "query-string": "^6.1.0", - "react": "^16.5.2", - "react-apollo": "^2.1.11", - "react-dom": "^16.5.2", - "sequelize": "^4.38.1", - "serialize-javascript": "^1.5.0", - "source-map-support": "^0.5.9", - "sqlite3": "^4.0.2", - "universal-router": "^6.0.0", + "query-string": "^6.4.0", + "react": "^16.8.4", + "react-apollo": "^2.5.2", + "react-dom": "^16.8.4", + "sequelize": "^5.1.0", + "serialize-javascript": "^1.6.1", + "source-map-support": "^0.5.11", + "sqlite3": "^4.0.6", + "universal-router": "^8.1.0", "whatwg-fetch": "^3.0.0" }, "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/node": "^7.0.0", - "@babel/plugin-proposal-class-properties": "^7.0.0", - "@babel/plugin-syntax-dynamic-import": "^7.0.0", - "@babel/plugin-transform-react-constant-elements": "^7.0.0", - "@babel/plugin-transform-react-inline-elements": "^7.0.0", - "@babel/preset-env": "^7.1.0", + "@babel/core": "^7.4.0", + "@babel/node": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "@babel/plugin-transform-react-constant-elements": "^7.2.0", + "@babel/plugin-transform-react-inline-elements": "^7.2.0", + "@babel/preset-env": "^7.4.1", "@babel/preset-flow": "^7.0.0", "@babel/preset-react": "^7.0.0", - "apollo": "^2.4.4", - "autoprefixer": "^9.1.5", + "apollo": "^2.6.2", + "autoprefixer": "^9.5.0", "babel-core": "^7.0.0-bridge.0", - "babel-eslint": "^9.0.0", - "babel-jest": "^23.6.0", - "babel-loader": "^8.0.0", - "babel-plugin-transform-react-remove-prop-types": "^0.4.18", - "browser-sync": "^2.24.7", - "chokidar": "^2.0.4", - "css-loader": "^1.0.0", - "enzyme": "^3.6.0", - "eslint": "^5.6.0", + "babel-eslint": "^10.0.1", + "babel-jest": "^24.5.0", + "babel-loader": "^8.0.5", + "babel-plugin-transform-react-remove-prop-types": "^0.4.24", + "browser-sync": "^2.26.3", + "chokidar": "^2.1.2", + "css-loader": "^2.1.1", + "cssnano": "^4.1.10", + "enzyme": "^3.9.0", + "eslint": "^5.15.3", "eslint-config-airbnb": "^17.1.0", - "eslint-config-prettier": "^3.0.1", + "eslint-config-prettier": "^4.1.0", "eslint-import-resolver-node": "^0.3.2", - "eslint-loader": "^2.1.1", - "eslint-plugin-css-modules": "^2.9.1", - "eslint-plugin-flowtype": "^2.50.1", - "eslint-plugin-import": "^2.14.0", - "eslint-plugin-jsx-a11y": "^6.1.1", - "eslint-plugin-prettier": "^2.6.2", - "eslint-plugin-react": "^7.11.1", - "file-loader": "^2.0.0", + "eslint-loader": "^2.1.2", + "eslint-plugin-css-modules": "^2.11.0", + "eslint-plugin-flowtype": "^3.4.2", + "eslint-plugin-import": "^2.16.0", + "eslint-plugin-jsx-a11y": "^6.2.1", + "eslint-plugin-prettier": "^3.0.1", + "eslint-plugin-react": "^7.12.4", + "file-loader": "^3.0.1", "flow-bin": "^0.88.0", "flow-typed": "^2.5.1", - "front-matter": "^2.3.0", + "front-matter": "^3.0.1", "glob": "^7.1.3", - "husky": "^1.0.0-rc.15", + "husky": "^1.3.1", "identity-obj-proxy": "^3.0.0", - "jest": "^23.6.0", - "jest-codemods": "^0.16.0", + "jest": "^24.5.0", + "jest-codemods": "^0.19.1", "jest-transform-graphql": "^2.1.0", - "lint-staged": "^7.3.0", + "lint-staged": "^8.1.5", "markdown-it": "^8.4.2", "mkdirp": "^0.5.1", "null-loader": "^0.1.1", - "opn-cli": "^3.1.0", - "pixrem": "^4.0.1", + "opn-cli": "^4.0.0", + "pixrem": "^5.0.0", "pleeease-filters": "^4.0.0", - "postcss": "^7.0.2", - "postcss-calc": "^6.0.1", + "postcss": "^7.0.14", + "postcss-calc": "^7.0.1", "postcss-color-function": "^4.0.1", - "postcss-custom-media": "^7.0.3", - "postcss-custom-properties": "^8.0.5", + "postcss-custom-media": "^7.0.7", + "postcss-custom-properties": "^8.0.9", "postcss-custom-selectors": "^5.1.2", "postcss-flexbugs-fixes": "^4.1.0", - "postcss-import": "^12.0.0", + "postcss-import": "^12.0.1", "postcss-loader": "^3.0.0", "postcss-media-minmax": "^4.0.0", - "postcss-nested": "^4.1.0", + "postcss-nested": "^4.1.2", "postcss-nesting": "^7.0.0", "postcss-pseudoelements": "^5.0.0", "postcss-selector-matches": "^4.0.0", "postcss-selector-not": "^4.0.0", - "prettier": "^1.14.3", - "raw-loader": "^0.5.1", + "prettier": "^1.16.4", + "raw-loader": "^2.0.0", "react-deep-force-update": "^2.1.3", - "react-dev-utils": "^5.0.2", - "react-error-overlay": "^4.0.1", - "react-test-renderer": "^16.5.2", - "rimraf": "^2.6.2", - "stylelint": "^9.5.0", + "react-dev-utils": "^8.0.0", + "react-error-overlay": "^5.1.4", + "react-test-renderer": "^16.8.4", + "rimraf": "^2.6.3", + "stylelint": "^9.10.1", "stylelint-config-standard": "^18.2.0", - "stylelint-order": "^1.0.0", + "stylelint-order": "^2.1.0", "svg-url-loader": "^2.3.2", - "url-loader": "^1.1.1", - "webpack": "^4.19.1", - "webpack-assets-manifest": "^3.0.2", - "webpack-bundle-analyzer": "^3.0.2", - "webpack-dev-middleware": "^3.3.0", - "webpack-hot-middleware": "^2.24.2", + "url-loader": "^1.1.2", + "webpack": "^4.29.6", + "webpack-assets-manifest": "^3.1.1", + "webpack-bundle-analyzer": "^3.1.0", + "webpack-dev-middleware": "^3.6.1", + "webpack-hot-middleware": "^2.24.3", "webpack-node-externals": "^1.7.2" }, "lint-staged": { diff --git a/src/client.js b/src/client.js index 418694df4..ac6ffe980 100644 --- a/src/client.js +++ b/src/client.js @@ -22,21 +22,19 @@ import router from './router'; const apolloClient = createApolloClient(); +// Enables critical path CSS rendering +// https://github.com/kriasoft/isomorphic-style-loader +const insertCss = (...styles) => { + // eslint-disable-next-line no-underscore-dangle + const removeCss = styles.map(x => x._insertCss()); + return () => { + removeCss.forEach(f => f()); + }; +}; + // Global (context) variables that can be easily accessed from any React component // https://facebook.github.io/react/docs/context.html -const context = { - // Enables critical path CSS rendering - // https://github.com/kriasoft/isomorphic-style-loader - insertCss: (...styles) => { - // eslint-disable-next-line no-underscore-dangle - const removeCss = styles.map(x => x._insertCss()); - return () => { - removeCss.forEach(f => f()); - }; - }, - // For react-apollo - client: apolloClient, -}; +const context = {}; const container = document.getElementById('app'); let currentLocation = history.location; @@ -79,7 +77,9 @@ async function onLocationChange(location, action) { const renderReactApp = isInitialRender ? ReactDOM.hydrate : ReactDOM.render; appInstance = renderReactApp( - {route.component}, + + {route.component} + , container, () => { if (isInitialRender) { diff --git a/src/components/App.js b/src/components/App.js index e18214064..2f8a529c4 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -11,80 +11,28 @@ import React from 'react'; import type { Node } from 'react'; -import PropTypes from 'prop-types'; import { ApolloProvider } from 'react-apollo'; +import StyleContext from 'isomorphic-style-loader/StyleContext'; +import type { AppContextTypes } from '../context'; +import AppContext from '../context'; -// Since the current React Starter Kit uses older React Context API that cannot be typed, -// here we declare duplicate type information. - -type ContextType = {| +type Props = {| insertCss: Function, - pathname: string, - query: Object, client: Object, -|}; - -type Props = {| - context: ContextType, + context: AppContextTypes, children: Node, |}; -const ContextRuntimeType = { - // Enables critical path CSS rendering - // https://github.com/kriasoft/isomorphic-style-loader - insertCss: PropTypes.func.isRequired, - // Universal HTTP client - pathname: PropTypes.string.isRequired, - query: PropTypes.object, - // Apollo Client - client: PropTypes.object.isRequired, -}; - -const PropTypesRuntimeType = { - context: PropTypes.shape(ContextRuntimeType).isRequired, - children: PropTypes.element.isRequired, -}; - -/** - * The top-level React component setting context (global) variables - * that can be accessed from all the child components. - * - * https://facebook.github.io/react/docs/context.html - * - * Usage example: - * - * const context = { - * history: createBrowserHistory(), - * store: createStore(), - * }; - * - * ReactDOM.render( - * - * - * - * - * , - * container, - * ); - */ -class App extends React.PureComponent { - static propTypes = PropTypesRuntimeType; - - static childContextTypes = ContextRuntimeType; - - getChildContext() { - return this.props.context; - } - - render() { - // Here, we are at universe level, sure? ;-) - const { client } = this.props.context; - // NOTE: If you need to add or modify header, footer etc. of the app, - // please do that inside the Layout component. - return ( - {this.props.children} - ); - } -} +const App = ({ client, insertCss, context, children }: Props) => ( + // NOTE: If you need to add or modify header, footer etc. of the app, + // please do that inside the Layout component. + + + + {children} + + + +); export default App; diff --git a/src/components/Feedback/Feedback.js b/src/components/Feedback/Feedback.js index 6c9712493..757d98940 100644 --- a/src/components/Feedback/Feedback.js +++ b/src/components/Feedback/Feedback.js @@ -8,31 +8,24 @@ */ import React from 'react'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Feedback.css'; -class Feedback extends React.Component { - render() { - return ( -
- -
- ); - } -} +const Feedback = () => ( +
+ +
+); export default withStyles(s)(Feedback); diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index 5b6cc5de9..92f6437d5 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -8,36 +8,32 @@ */ import React from 'react'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Footer.css'; import Link from '../Link'; -class Footer extends React.Component { - render() { - return ( -
-
- © Your Company - · - - Home - - · - - Admin - - · - - Privacy - - · - - Not Found - -
-
- ); - } -} +const Footer = () => ( +
+
+ © Your Company + · + + Home + + · + + Admin + + · + + Privacy + + · + + Not Found + +
+
+); export default withStyles(s)(Footer); diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 13a48096d..c9076070e 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -8,37 +8,33 @@ */ import React from 'react'; -import withStyles from 'isomorphic-style-loader/lib/withStyles'; +import withStyles from 'isomorphic-style-loader/withStyles'; import s from './Header.css'; import Link from '../Link'; import Navigation from '../Navigation'; import logoUrl from './logo-small.png'; import logoUrl2x from './logo-small@2x.png'; -class Header extends React.Component { - render() { - return ( -
-
- - - React - Your Company - -
-

React

-

Complex web apps made easy

-
-
+const Header = () => ( +
+
+ + + React + Your Company + +
+

React

+

Complex web apps made easy

- ); - } -} +
+
+); export default withStyles(s)(Header); diff --git a/src/components/Html.js b/src/components/Html.js index d1d77a1d3..5d24a53be 100644 --- a/src/components/Html.js +++ b/src/components/Html.js @@ -18,74 +18,71 @@ import config from '../config'; type PropTypes = {| title: string, description: string, - styles: Array<{ + styles?: Array<{ id: string, cssText: string, }>, - scripts: Array, + scripts?: Array, app: Object, // eslint-disable-line children: string, |}; -class Html extends React.Component { - static defaultProps = { - styles: [], - scripts: [], - }; - - render() { - const { title, description, styles, scripts, app, children } = this.props; - return ( - - - - - {title} - - - {scripts.map(script => ( - - ))} - - - {styles.map(style => ( -