yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: React devmode warnings (#5169

Browse Source 
* fix: React warning: Cannot change state from within render

* Remove usage of react-side-effect
This commit is contained in:
Tom Moor
2023-04-08 10:17:31 -04:00
committed by GitHub
parent dcb15bae13
commit c82b05a044
8 changed files with 54 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/components/Layout.tsx
View File

@@ -1,6 +1,6 @@
import { observer } from "mobx-react";
import * as React from "react";
import { Helmet } from "react-helmet";
import { Helmet } from "react-helmet-async";
import styled, { DefaultTheme } from "styled-components";
import breakpoint from "styled-components-breakpoint";
import { s } from "@shared/styles";

2
app/components/PageTitle.tsx
View File

@@ -1,6 +1,6 @@
import { observer } from "mobx-react";
import * as React from "react";
import { Helmet } from "react-helmet";
import { Helmet } from "react-helmet-async";
import { cdnPath } from "@shared/utils/urls";
import env from "~/env";
import useStores from "~/hooks/useStores";

16
app/editor/components/SelectionToolbar.tsx
View File

@@ -81,13 +81,15 @@ export default function SelectionToolbar(props: Props) {
const isActive = useIsActive(view.state);
const previousIsActuve = usePrevious(isActive);
// Trigger callbacks when the toolbar is opened or closed
if (previousIsActuve && !isActive) {
onClose();
}
if (!previousIsActuve && isActive) {
onOpen();
}
React.useEffect(() => {
// Trigger callbacks when the toolbar is opened or closed
if (previousIsActuve && !isActive) {
onClose();
}
if (!previousIsActuve && isActive) {
onOpen();
}
}, [isActive, onClose, onOpen, previousIsActuve]);
React.useEffect(() => {
const handleClickOutside = (ev: MouseEvent): void => {

53
app/index.tsx
View File

@@ -6,6 +6,7 @@ import { KBarProvider } from "kbar";
import { Provider } from "mobx-react";
import * as React from "react";
import { render } from "react-dom";
import { HelmetProvider } from "react-helmet-async";
import { Router } from "react-router-dom";
import stores from "~/stores";
import Analytics from "~/components/Analytics";
@@ -50,31 +51,33 @@ const commandBarOptions = {
if (element) {
const App = () => (
<React.StrictMode>
<Provider {...stores}>
<Analytics>
<Theme>
<ErrorBoundary showTitle>
<KBarProvider actions={[]} options={commandBarOptions}>
<LazyPolyfill>
<LazyMotion features={loadFeatures}>
<Router history={history}>
<>
<PageTheme />
<ScrollToTop>
<Routes />
</ScrollToTop>
<Toasts />
<Dialogs />
<Desktop />
</>
</Router>
</LazyMotion>
</LazyPolyfill>
</KBarProvider>
</ErrorBoundary>
</Theme>
</Analytics>
</Provider>
<HelmetProvider>
<Provider {...stores}>
<Analytics>
<Theme>
<ErrorBoundary showTitle>
<KBarProvider actions={[]} options={commandBarOptions}>
<LazyPolyfill>
<LazyMotion features={loadFeatures}>
<Router history={history}>
<>
<PageTheme />
<ScrollToTop>
<Routes />
</ScrollToTop>
<Toasts />
<Dialogs />
<Desktop />
</>
</Router>
</LazyMotion>
</LazyPolyfill>
</KBarProvider>
</ErrorBoundary>
</Theme>
</Analytics>
</Provider>
</HelmetProvider>
</React.StrictMode>
);

2
app/scenes/Document/Shared.tsx
View File

@@ -1,7 +1,7 @@
import { Location } from "history";
import { observer } from "mobx-react";
import * as React from "react";
import { Helmet } from "react-helmet";
import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
import { RouteComponentProps, useLocation, Redirect } from "react-router-dom";
import styled, { ThemeProvider } from "styled-components";

2
app/scenes/Settings/Zapier.tsx
View File

@@ -1,5 +1,5 @@
import * as React from "react";
import { Helmet } from "react-helmet";
import { Helmet } from "react-helmet-async";
import { Trans } from "react-i18next";
import Heading from "~/components/Heading";
import ZapierIcon from "~/components/Icons/ZapierIcon";

2
package.json
View File

@@ -175,7 +175,7 @@
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-helmet": "^6.1.0",
"react-helmet-async": "^1.3.0",
"react-hook-form": "^7.41.5",
"react-i18next": "^12.1.5",
"react-merge-refs": "^2.0.1",

28
yarn.lock
View File

@@ -11091,20 +11091,21 @@ react-dropzone@^11.3.2:
file-selector "^0.2.2"
prop-types "^15.7.2"
react-fast-compare@^3.1.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-fast-compare@^3.2.0:
version "3.2.1"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.1.tgz#53933d9e14f364281d6cba24bfed7a4afb808b5f"
integrity sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg==
react-helmet@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
react-helmet-async@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
dependencies:
object-assign "^4.1.1"
"@babel/runtime" "^7.12.5"
invariant "^2.2.4"
prop-types "^15.7.2"
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-fast-compare "^3.2.0"
shallowequal "^1.1.0"
react-hook-form@^7.41.5:
version "7.41.5"
@@ -11199,11 +11200,6 @@ react-router@5.2.0:
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
react-side-effect@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
react-style-singleton@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"