Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-02 11:35:57 +01:00
Code Issues Packages Projects Releases Activity

fix re-render bug for changesets

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-02-28 13:15:27 +01:00
parent d59778c3bd
commit 2d038327d0
5 changed files with 89 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
scm-ui/ui-components/src/repos/DiffFile.tsx
View File

@@ -10,6 +10,7 @@ import Icon from "../Icon";
import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
import TokenizedDiffView from "./TokenizedDiffView";
import DiffButton from "./DiffButton";
import { MenuContext } from "@scm-manager/ui-components";
const EMPTY_ANNOTATION_FACTORY = {};
@@ -100,10 +101,13 @@ class DiffFile extends React.Component<Props, State> {
}
};
toggleSideBySide = () => {
this.setState(state => ({
toggleSideBySide = (callback: (collapsed: boolean) => void) => {
this.setState(
state => ({
sideBySide: !state.sideBySide
}));
}),
() => callback(this.state.sideBySide ? this.state.sideBySide : false)
);
};
setCollapse = (collapsed: boolean) => {
@@ -259,11 +263,15 @@ class DiffFile extends React.Component<Props, State> {
file.hunks && file.hunks.length > 0 ? (
<ButtonWrapper className={classNames("level-right", "is-flex")}>
<ButtonGroup>
<MenuContext.Consumer>
{({ setMenuCollapsed }) => (
<DiffButton
icon={sideBySide ? "align-left" : "columns"}
tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
onClick={this.toggleSideBySide}
onClick={() => this.toggleSideBySide(() => setMenuCollapsed(sideBySide ? true : false))}
/>
)}
</MenuContext.Consumer>
{fileControls}
</ButtonGroup>
</ButtonWrapper>

14
scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import { connect } from "react-redux";
import { compose } from "redux";
import { withRouter } from "react-router-dom";
import { withRouter, RouteComponentProps } from "react-router-dom";
import { WithTranslation, withTranslation } from "react-i18next";
import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
import {
@@ -20,7 +20,8 @@ import {
selectListAsCollection
} from "../modules/changesets";
type Props = WithTranslation & {
type Props = RouteComponentProps &
WithTranslation & {
repository: Repository;
branch: Branch;
page: number;
@@ -33,10 +34,7 @@ type Props = WithTranslation & {
// Dispatch props
fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
// context props
match: any;
};
};
class Changesets extends React.Component<Props> {
componentDidMount() {
@@ -44,6 +42,10 @@ class Changesets extends React.Component<Props> {
fetchChangesets(repository, branch, page);
}
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<{}>, nextContext: any): boolean {
return this.props.changesets !== nextProps.changesets;
}
render() {
const { changesets, loading, error, t } = this.props;

14
scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
View File

@@ -138,10 +138,14 @@ class RepositoryRoot extends React.Component<Props, State> {
const url = this.matchedUrl();
const extensionProps = {
const extensionProps: any = {
repository,
url,
indexLinks,
indexLinks
};
const navExtensionProps = {
...extensionProps,
collapsedRepositoryMenu: menuCollapsed
};
@@ -217,7 +221,7 @@ class RepositoryRoot extends React.Component<Props, State> {
}
collapsed={menuCollapsed}
>
<ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
<ExtensionPoint name="repository.navigation.topLevel" props={navExtensionProps} renderAll={true} />
<NavLink
to={`${url}/info`}
icon="fas fa-info-circle"
@@ -244,7 +248,7 @@ class RepositoryRoot extends React.Component<Props, State> {
activeOnlyWhenExact={false}
title={t("repositoryRoot.menu.sourcesNavLink")}
/>
<ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
<ExtensionPoint name="repository.navigation" props={navExtensionProps} renderAll={true} />
<SubNavigation
to={`${url}/settings/general`}
label={t("repositoryRoot.menu.settingsNavLink")}
@@ -252,7 +256,7 @@ class RepositoryRoot extends React.Component<Props, State> {
>
<EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
<PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
<ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
<ExtensionPoint name="repository.setting" props={navExtensionProps} renderAll={true} />
</SubNavigation>
</Section>
</Navigation>

34
scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
View File

@@ -581,6 +581,31 @@ describe("changesets", () => {
]);
});
it("should return always the same changeset array for the given parameters", () => {
const state = {
changesets: {
"foo/bar": {
byId: {
id2: {
id: "id2"
},
id1: {
id: "id1"
}
},
byBranch: {
"": {
entries: ["id1", "id2"]
}
}
}
}
};
const one = getChangesets(state, repository);
const two = getChangesets(state, repository);
expect(one).toBe(two);
});
it("should return true, when fetching changesets is pending", () => {
const state = {
pending: {
@@ -639,5 +664,14 @@ describe("changesets", () => {
expect(collection.page).toBe(1);
expect(collection.pageTotal).toBe(10);
});
it("should return always the same empty object", () => {
const state = {
changesets: {}
};
const one = selectListAsCollection(state, repository);
const two = selectListAsCollection(state, repository);
expect(one).toBe(two);
});
});
});

14
scm-ui/ui-webapp/src/repos/modules/changesets.ts
View File

@@ -3,6 +3,7 @@ import { apiClient, urls } from "@scm-manager/ui-components";
import { isPending } from "../../modules/pending";
import { getFailure } from "../../modules/failure";
import { Action, Branch, PagedCollection, Repository } from "@scm-manager/ui-types";
import memoizeOne from "memoize-one";
export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -254,10 +255,15 @@ export function getChangesets(state: object, repository: Repository, branch?: Br
return null;
}
return collectChangesets(stateRoot, changesets);
}
const mapChangesets = (stateRoot, changesets) => {
return changesets.entries.map((id: string) => {
return stateRoot.byId[id];
});
}
};
const collectChangesets = memoizeOne(mapChangesets);
export function getChangeset(state: object, repository: Repository, id: string) {
const key = createItemId(repository);
@@ -291,6 +297,8 @@ export function getFetchChangesetsFailure(state: object, repository: Repository,
return getFailure(state, FETCH_CHANGESETS, createItemId(repository, branch));
}
const EMPTY = {};
const selectList = (state: object, repository: Repository, branch?: Branch) => {
const repoId = createItemId(repository);
@@ -302,7 +310,7 @@ const selectList = (state: object, repository: Repository, branch?: Branch) => {
return repoState.byBranch[branchName];
}
}
return {};
return EMPTY;
};
const selectListEntry = (state: object, repository: Repository, branch?: Branch): object => {
@@ -310,7 +318,7 @@ const selectListEntry = (state: object, repository: Repository, branch?: Branch)
if (list.entry) {
return list.entry;
}
return {};
return EMPTY;
};
export const selectListAsCollection = (state: object, repository: Repository, branch?: Branch): PagedCollection => {