From 0d5e2d9ed7005bb6fae3459af102d4be3880cdb3 Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Wed, 26 Apr 2023 12:20:58 +0200 Subject: [PATCH] fix: connect LowerJaw to redux (#50180) * fix: connect LowerJaw to redux --- client/package.json | 2 +- .../templates/Challenges/classic/editor.tsx | 29 ++++++++++--------- client/utils/gatsby/layout-selector.test.tsx | 9 ++++-- pnpm-lock.yaml | 29 ++++++++++--------- 4 files changed, 40 insertions(+), 29 deletions(-) diff --git a/client/package.json b/client/package.json index b60f9b58d86..8a6747421b9 100644 --- a/client/package.json +++ b/client/package.json @@ -109,7 +109,7 @@ "react-instantsearch-core": "6.39.1", "react-instantsearch-dom": "6.39.1", "react-monaco-editor": "0.40.0", - "react-redux": "5.1.2", + "react-redux": "7.2.9", "react-reflex": "4.0.12", "react-responsive": "6.1.2", "react-scrollable-anchor": "0.6.1", diff --git a/client/src/templates/Challenges/classic/editor.tsx b/client/src/templates/Challenges/classic/editor.tsx index 73b889f5d39..71786d2290c 100644 --- a/client/src/templates/Challenges/classic/editor.tsx +++ b/client/src/templates/Challenges/classic/editor.tsx @@ -11,7 +11,7 @@ import { OS } from 'monaco-editor/esm/vs/base/common/platform.js'; import Prism from 'prismjs'; import React, { useEffect, Suspense, MutableRefObject, useRef } from 'react'; import ReactDOM from 'react-dom'; -import { connect } from 'react-redux'; +import { Provider, connect, useStore } from 'react-redux'; import { createSelector } from 'reselect'; import store from 'store'; @@ -234,6 +234,7 @@ const initialData: EditorProperties = { }; const Editor = (props: EditorProps): JSX.Element => { + const reduxStore = useStore(); const { t } = useTranslation(); const { editorRef, initTests, resetAttempts } = props; // These refs are used during initialisation of the editor as well as by @@ -663,18 +664,20 @@ const Editor = (props: EditorProps): JSX.Element => { const isChallengeComplete = challengeIsComplete(); ReactDOM.render( - updateOutputViewZone(outputNode, editor)} - />, + + updateOutputViewZone(outputNode, editor)} + /> + , outputNode ); } diff --git a/client/utils/gatsby/layout-selector.test.tsx b/client/utils/gatsby/layout-selector.test.tsx index c3c2d4965f1..53c4b5f1de1 100644 --- a/client/utils/gatsby/layout-selector.test.tsx +++ b/client/utils/gatsby/layout-selector.test.tsx @@ -13,6 +13,11 @@ jest.mock('../../src/analytics'); const store = createStore(); +// TODO: rather than testing which props passed from layoutSelector to the +// component it renders, test that the rendered component has the expected +// features (i.e. has a footer or not, etc.). That should be possible in +// react-testing-library. + interface NameAndProps { props: Record; name: string; @@ -36,11 +41,11 @@ function getComponentNameAndProps( shallow.render({LayoutReactComponent}); const view = shallow.getRenderOutput(); return { - props: view.props as Record, + props: view.props.children.props as Record, // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - name: view.type.WrappedComponent.displayName + name: view.props.children.type.WrappedComponent.displayName // TODO: Revisit this when react-test-renderer is replaced with // react-testing-library }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3fcd9c8037..2635ae6ebaa 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -644,8 +644,8 @@ importers: specifier: 0.40.0 version: 0.40.0(@types/react@16.14.40)(react@16.14.0) react-redux: - specifier: 5.1.2 - version: 5.1.2(react@16.14.0)(redux@4.2.1) + specifier: 7.2.9 + version: 7.2.9(react-dom@16.14.0)(react@16.14.0) react-reflex: specifier: 4.0.12 version: 4.0.12(react-dom@16.14.0)(react@16.14.0) @@ -9842,7 +9842,6 @@ packages: dependencies: '@types/react': 16.14.40 hoist-non-react-statics: 3.3.2 - dev: true /@types/html-minifier-terser@5.1.2: resolution: {integrity: sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==} @@ -10099,7 +10098,6 @@ packages: '@types/react': 16.14.40 hoist-non-react-statics: 3.3.2 redux: 4.2.1 - dev: true /@types/react-responsive@8.0.5: resolution: {integrity: sha512-k3gQJgI87oP5IrVZe//3LKJFnAeFaqqWmmtl5eoYL2H3HqFcIhUaE30kRK1CsW3DHdojZxcVj4ZNc2ClsEu2PA==} @@ -18100,7 +18098,7 @@ packages: resolution: {integrity: sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==} engines: {node: '>= 4.0'} os: [darwin] - deprecated: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. + deprecated: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2 requiresBuild: true dependencies: bindings: 1.5.0 @@ -27685,21 +27683,26 @@ packages: warning: 3.0.0 dev: false - /react-redux@5.1.2(react@16.14.0)(redux@4.2.1): - resolution: {integrity: sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==} + /react-redux@7.2.9(react-dom@16.14.0)(react@16.14.0): + resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==} peerDependencies: - react: ^0.14.0 || ^15.0.0-0 || ^16.0.0-0 - redux: ^2.0.0 || ^3.0.0 || ^4.0.0-0 + react: ^16.8.3 || ^17 || ^18 + react-dom: '*' + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true dependencies: '@babel/runtime': 7.21.0 + '@types/react-redux': 7.1.25 hoist-non-react-statics: 3.3.2 - invariant: 2.2.4 loose-envify: 1.4.0 prop-types: 15.8.1 react: 16.14.0 - react-is: 16.13.1 - react-lifecycles-compat: 3.0.4 - redux: 4.2.1 + react-dom: 16.14.0(react@16.14.0) + react-is: 17.0.2 dev: false /react-reflex@4.0.12(react-dom@16.14.0)(react@16.14.0):