Fix infinite render loop in release details (#4710)

* Fix infinite render loop in release details by replacing stateful, UI-triggered releaseStore with reactive async computed

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Update injectable

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove unnecessary return

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove empty lines

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Allow injection of history

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Make data required for opening of release details a dependency to make sure it's present

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Remove dead code

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>

* Make arriving release values not re-render whole details

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne SavolainenandMikko Aspiala authored and GitHub committed 2022-01-21 16:29:10 +02:00
1 parent b7d29f8c49
commit 4f5a2988cb
33 files changed
+836 -600

No files matched your search

+7 -4
View File
@@ -11,12 +11,13 @@ import { createPortal } from "react-dom";
import { cssNames, noop, StorageHelper } from "../../utils";
import { Icon } from "../icon";
import { Animate, AnimateName } from "../animate";
import { history } from "../../navigation";
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
import drawerStorageInjectable, {
defaultDrawerWidth,
} from "./drawer-storage/drawer-storage.injectable";
import { withInjectables } from "@ogre-tools/injectable-react";
import historyInjectable from "../../navigation/history.injectable";
import type { History } from "history";
export type DrawerPosition = "top" | "left" | "right" | "bottom";
@@ -59,6 +60,7 @@ resizingAnchorProps.set("top", [ResizeDirection.VERTICAL, ResizeSide.TRAILING, R
resizingAnchorProps.set("bottom", [ResizeDirection.VERTICAL, ResizeSide.LEADING, ResizeGrowthDirection.BOTTOM_TO_TOP]);
interface Dependencies {
history: History
drawerStorage: StorageHelper<{ width: number }>;
}
@@ -70,7 +72,7 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
private scrollElem: HTMLElement;
private scrollPos = new Map<string, number>();
private stopListenLocation = history.listen(() => {
private stopListenLocation = this.props.history.listen(() => {
this.restoreScrollPos();
});
@@ -111,14 +113,14 @@ class NonInjectedDrawer extends React.Component<DrawerProps & Dependencies, Stat
saveScrollPos = () => {
if (!this.scrollElem) return;
const key = history.location.key;
const key = this.props.history.location.key;
this.scrollPos.set(key, this.scrollElem.scrollTop);
};
restoreScrollPos = () => {
if (!this.scrollElem) return;
const key = history.location.key;
const key = this.props.history.location.key;
this.scrollElem.scrollTop = this.scrollPos.get(key) || 0;
};
@@ -232,6 +234,7 @@ export const Drawer = withInjectables<Dependencies, DrawerProps>(
{
getProps: (di, props) => ({
history: di.inject(historyInjectable),
drawerStorage: di.inject(drawerStorageInjectable),
...props,
}),