From 7a1eaa67ceced146e2e888afea1fc946611cdc3a Mon Sep 17 00:00:00 2001 From: Vladimir Razuvaev Date: Thu, 17 Oct 2019 11:52:55 +0700 Subject: [PATCH] refactor(gatsby-cli): replace react-redux with React context --- packages/gatsby-cli/package.json | 2 -- .../loggers/ink/components/develop.js | 20 +++++++------ .../src/reporter/loggers/ink/context.js | 23 +++++++++++++++ .../src/reporter/loggers/ink/index.js | 28 +++++-------------- yarn.lock | 17 ----------- 5 files changed, 42 insertions(+), 48 deletions(-) create mode 100644 packages/gatsby-cli/src/reporter/loggers/ink/context.js diff --git a/packages/gatsby-cli/package.json b/packages/gatsby-cli/package.json index b558b33c9ecd5..8ed2c34702b4f 100644 --- a/packages/gatsby-cli/package.json +++ b/packages/gatsby-cli/package.json @@ -38,8 +38,6 @@ "progress": "^2.0.3", "prompts": "^2.2.1", "react": "^16.10.2", - "react-dom": "^16.10.2", - "react-redux": "^7.1.1", "redux": "^4.0.4", "resolve-cwd": "^2.0.0", "semver": "^6.3.0", diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/components/develop.js b/packages/gatsby-cli/src/reporter/loggers/ink/components/develop.js index 515a6ab201349..499f9cddab659 100644 --- a/packages/gatsby-cli/src/reporter/loggers/ink/components/develop.js +++ b/packages/gatsby-cli/src/reporter/loggers/ink/components/develop.js @@ -1,6 +1,6 @@ import React, { useContext, useState, useEffect } from "react" import { Box, Color, StdoutContext } from "ink" -import { connect } from "react-redux" +import StoreStateContext from "../context" // Track the width and height of the terminal. Responsive app design baby! const useTerminalResize = () => { @@ -44,12 +44,16 @@ const Develop = ({ pagesCount, appName, status }) => { ) } -const ConnectedDevelop = connect(state => { - return { - pagesCount: state.pages ? state.pages.size : 0, - appName: state.program.sitePackageJson.name || ``, - status: state.logs.status, - } -})(Develop) +const ConnectedDevelop = () => { + const state = useContext(StoreStateContext) + + return ( + + ) +} export default ConnectedDevelop diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/context.js b/packages/gatsby-cli/src/reporter/loggers/ink/context.js new file mode 100644 index 0000000000000..1c44ad087b015 --- /dev/null +++ b/packages/gatsby-cli/src/reporter/loggers/ink/context.js @@ -0,0 +1,23 @@ +import React, { useState, useEffect, createContext } from "react" + +import { getStore, onLogAction } from "../../redux/index" + +const StoreStateContext = createContext(getStore().getState()) + +export const StoreStateProvider = ({ children }) => { + const [state, setState] = useState(getStore().getState()) + + useEffect(() => { + onLogAction(() => { + setState(getStore().getState()) + }) + }, []) + + return ( + + {children} + + ) +} + +export default StoreStateContext diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/index.js b/packages/gatsby-cli/src/reporter/loggers/ink/index.js index 73dda9c83c8e3..eca4594249eac 100644 --- a/packages/gatsby-cli/src/reporter/loggers/ink/index.js +++ b/packages/gatsby-cli/src/reporter/loggers/ink/index.js @@ -1,36 +1,22 @@ -import React, { useState, useEffect } from "react" +import React, { useContext } from "react" import { render } from "ink" -import { Provider, connect } from "react-redux" - -import { getStore, onStoreSwap } from "../../redux/index" +import StoreStateContext, { StoreStateProvider } from "./context" import CLI from "./cli" -const ConnectedCLI = connect(state => { +const ConnectedCLI = () => { + const state = useContext(StoreStateContext) const showStatusBar = state.program && state.program._ && state.program._[0] === `develop` && state.program.status === `BOOTSTRAP_FINISHED` - return { - logs: state.logs, - showStatusBar, - } -})(CLI) - -const ReduxStoreProvider = ({ children }) => { - const [store, setStore] = useState(getStore()) - useEffect(() => { - onStoreSwap(newStore => { - setStore(newStore) - }) - }, []) - return {children} + return } render( - + - + ) diff --git a/yarn.lock b/yarn.lock index 414db988be5a6..f460017064c81 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16786,11 +16786,6 @@ react-is@^16.8.6: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.0.tgz#3d6a031e57fff73c3cfa0347feb3e8f40c5141e5" integrity sha512-WRki2sBb7MTpYp7FtDEmSeGKX2vamYyq3rc9o7fKUG+/DHVyJu69NnvJsiSwwhh2Tt8XN40MQHkDBEXwyfxncQ== -react-is@^16.9.0: - version "16.10.2" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab" - integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA== - react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -16805,18 +16800,6 @@ react-reconciler@^0.21.0: prop-types "^15.6.2" scheduler "^0.15.0" -react-redux@^7.1.1: - version "7.1.1" - resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.1.tgz#ce6eee1b734a7a76e0788b3309bf78ff6b34fa0a" - integrity sha512-QsW0vcmVVdNQzEkrgzh2W3Ksvr8cqpAv5FhEk7tNEft+5pp7rXxAudTz3VOPawRkLIepItpkEIyLcN/VVXzjTg== - dependencies: - "@babel/runtime" "^7.5.5" - hoist-non-react-statics "^3.3.0" - invariant "^2.2.4" - loose-envify "^1.4.0" - prop-types "^15.7.2" - react-is "^16.9.0" - react-test-renderer@^16.10.2: version "16.10.2" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.10.2.tgz#4d8492f8678c9b43b721a7d79ed0840fdae7c518"