Introduce stale while revalidate pattern (#1555)

This Improves the frontend performance with stale while
revalidate pattern.

There are noticeable performance problems in the frontend that
needed addressing. While implementing the stale-while-revalidate
pattern to display cached responses while re-fetching up-to-date
data in the background, in the same vein we used the opportunity
to remove legacy code involving redux as much as possible,
cleaned up many components and converted them to functional
react components.

Co-authored-by: Sebastian Sdorra <sebastian.sdorra@cloudogu.com>
Co-authored-by: Eduard Heimbuch <eduard.heimbuch@cloudogu.com>

scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx

@@ -22,21 +22,18 @@
  * SOFTWARE.
  */
 import React, { ReactNode } from "react";
-import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { File, Repository } from "@scm-manager/ui-types";
 import { DateFromNow, ErrorNotification, FileSize, Icon, OpenInFullscreenButton } from "@scm-manager/ui-components";
-import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
 import HistoryView from "./HistoryView";
 import AnnotateView from "./AnnotateView";
 
 type Props = WithTranslation & {
-  loading: boolean;
   file: File;
   repository: Repository;
   revision: string;
@@ -181,7 +178,7 @@ class Content extends React.Component<Props, State> {
                 </tr>
                 <tr>
                   <td>{t("sources.content.branch")}</td>
-                  <td className="is-word-break">{decodeURIComponent(revision)}</td>
+                  <td className="is-word-break">{revision}</td>
                 </tr>
                 <tr>
                   <td>{t("sources.content.size")}</td>
@@ -246,14 +243,4 @@ class Content extends React.Component<Props, State> {
   }
 }
 
-const mapStateToProps = (state: any, ownProps: Props) => {
-  const { repository, revision, path } = ownProps;
-
-  const file = getSources(state, repository, revision, path);
-
-  return {
-    file
-  };
-};
-
-export default connect(mapStateToProps)(withTranslation("repos")(Content));
+export default withTranslation("repos")(Content);

scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx

@@ -21,91 +21,55 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { File, Repository } from "@scm-manager/ui-types";
-import { RouteComponentProps, withRouter } from "react-router-dom";
+import React, { FC } from "react";
+import { Repository } from "@scm-manager/ui-types";
+import { useParams } from "react-router-dom";
 
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
-import { fetchSources, getFetchSourcesFailure, getSources, isFetchSourcesPending } from "../modules/sources";
-import { connect } from "react-redux";
 import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
-import { WithTranslation, withTranslation } from "react-i18next";
-
-type Props = WithTranslation &
-  RouteComponentProps & {
-    repository: Repository;
-    baseUrl: string;
-
-    // url params
-    extension: string;
-    revision?: string;
-    path?: string;
-
-    // redux state
-    loading: boolean;
-    error?: Error | null;
-    sources?: File | null;
-
-    // dispatch props
-    fetchSources: (repository: Repository, revision?: string, path?: string) => void;
-  };
+import { useTranslation } from "react-i18next";
+import { useSources } from "@scm-manager/ui-api";
 
 const extensionPointName = "repos.sources.extensions";
 
-class SourceExtensions extends React.Component<Props> {
-  componentDidMount() {
-    const { fetchSources, repository, revision, path } = this.props;
-    // TODO get typing right
-    fetchSources(repository, revision, path);
-  }
+type Props = {
+  repository: Repository;
+  baseUrl: string;
+};
 
-  render() {
-    const { loading, error, repository, extension, revision, path, sources, baseUrl, t } = this.props;
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
-    if (loading) {
-      return <Loading />;
-    }
-
-    const extprops = { extension, repository, revision, path, sources, baseUrl };
-    if (!binder.hasExtension(extensionPointName, extprops)) {
-      return <Notification type="warning">{t("sources.extension.notBound")}</Notification>;
-    }
-
-    return <ExtensionPoint name={extensionPointName} props={extprops} />;
-  }
-}
-
-const mapStateToProps = (state: any, ownProps: Props): Partial<Props> => {
-  const { repository, match } = ownProps;
-  // @ts-ignore
-  const revision: string = match.params.revision;
-  // @ts-ignore
-  const path: string = match.params.path;
-  // @ts-ignore
-  const extension: string = match.params.extension;
-  const loading = isFetchSourcesPending(state, repository, revision, path);
-  const error = getFetchSourcesFailure(state, repository, revision, path);
-  const sources = getSources(state, repository, revision, path);
+type Params = {
+  revision: string;
+  path: string;
+  extension: string;
+};
 
+const useUrlParams = () => {
+  const { revision, path, extension } = useParams<Params>();
   return {
-    repository,
-    extension,
-    revision,
-    path,
-    loading,
-    error,
-    sources
+    revision: revision ? decodeURIComponent(revision) : undefined,
+    path: path,
+    extension
   };
 };
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchSources: (repository: Repository, revision: string, path: string) => {
-      dispatch(fetchSources(repository, decodeURIComponent(revision), path));
-    }
-  };
+const SourceExtensions: FC<Props> = ({ repository, baseUrl }) => {
+  const { revision, path, extension } = useUrlParams();
+  const { error, isLoading, data: sources } = useSources(repository, { revision, path });
+  const [t] = useTranslation("repos");
+
+  if (error) {
+    return <ErrorNotification error={error} />;
+  }
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  const extprops = { extension, repository, revision, path, sources, baseUrl };
+  if (!binder.hasExtension(extensionPointName, extprops)) {
+    return <Notification type="warning">{t("sources.extension.notBound")}</Notification>;
+  }
+
+  return <ExtensionPoint name={extensionPointName} props={extprops} />;
 };
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withTranslation("repos")(SourceExtensions)));
+export default SourceExtensions;

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -21,61 +21,64 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
-import { connect } from "react-redux";
-import { withRouter, RouteComponentProps } from "react-router-dom";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useEffect } from "react";
 import { Branch, Repository } from "@scm-manager/ui-types";
 import { Breadcrumb, ErrorNotification, Loading } from "@scm-manager/ui-components";
 import FileTree from "../components/FileTree";
-import { getFetchBranchesFailure, isFetchBranchesPending } from "../../branches/modules/branches";
-import { compose } from "redux";
 import Content from "./Content";
-import { fetchSources, getSources, isDirectory } from "../modules/sources";
 import CodeActionBar from "../../codeSection/components/CodeActionBar";
 import replaceBranchWithRevision from "../ReplaceBranchWithRevision";
+import { useSources } from "@scm-manager/ui-api";
+import { useHistory, useLocation, useParams } from "react-router-dom";
 
-type Props = WithTranslation &
-  RouteComponentProps & {
-    repository: Repository;
-    loading: boolean;
-    error: Error;
-    baseUrl: string;
-    branches: Branch[];
-    revision: string;
-    path: string;
-    currentFileIsDirectory: boolean;
-    sources: File;
-    fileRevision: string;
-    selectedBranch: string;
+type Props = {
+  repository: Repository;
+  branches?: Branch[];
+  selectedBranch?: string;
+  baseUrl: string;
+};
 
-    // dispatch props
-    fetchSources: (repository: Repository, revision: string, path: string) => void;
+type Params = {
+  revision?: string;
+  path: string;
+};
+
+const useUrlParams = () => {
+  const { revision, path } = useParams<Params>();
+  return {
+    revision: revision ? decodeURIComponent(revision) : undefined,
+    path: path || ""
   };
+};
 
-class Sources extends React.Component<Props> {
-  componentDidMount() {
-    const { repository, branches, selectedBranch, baseUrl, revision, path, fetchSources } = this.props;
-    fetchSources(repository, this.decodeRevision(revision), path);
-    if (branches?.length > 0 && !selectedBranch) {
-      const defaultBranch = branches?.filter((b) => b.defaultBranch === true)[0];
-      this.props.history.replace(`${baseUrl}/sources/${encodeURIComponent(defaultBranch.name)}/`);
+const Sources: FC<Props> = ({ repository, branches, selectedBranch, baseUrl }) => {
+  const { revision, path } = useUrlParams();
+  const history = useHistory();
+  const location = useLocation();
+  // redirect to default branch is non branch selected
+  useEffect(() => {
+    if (branches && branches.length > 0 && !selectedBranch) {
+      const defaultBranch = branches?.filter(b => b.defaultBranch === true)[0];
+      history.replace(`${baseUrl}/sources/${encodeURIComponent(defaultBranch.name)}/`);
     }
+  }, [branches, selectedBranch]);
+  const { isLoading, error, data: file, isFetchingNextPage, fetchNextPage } = useSources(repository, {
+    revision,
+    path,
+    // we have to wait until a branch is selected,
+    // expect if we have no branches (svn)
+    enabled: !branches || !!selectedBranch
+  });
+
+  if (error) {
+    return <ErrorNotification error={error} />;
   }
 
-  componentDidUpdate(prevProps: Props) {
-    const { fetchSources, repository, revision, path } = this.props;
-    if (prevProps.revision !== revision || prevProps.path !== path) {
-      fetchSources(repository, this.decodeRevision(revision), path);
-    }
+  if (isLoading || !file) {
+    return <Loading />;
   }
 
-  decodeRevision = (revision: string) => {
-    return revision ? decodeURIComponent(revision) : revision;
-  };
-
-  onSelectBranch = (branch?: Branch) => {
-    const { baseUrl, history, path } = this.props;
+  const onSelectBranch = (branch?: Branch) => {
     let url;
     if (branch) {
       if (path) {
@@ -90,125 +93,70 @@ class Sources extends React.Component<Props> {
     history.push(url);
   };
 
-  evaluateSwitchViewLink = () => {
-    const { baseUrl, selectedBranch, branches } = this.props;
-    if (branches && selectedBranch && branches?.filter((b) => b.name === selectedBranch).length !== 0) {
+  const evaluateSwitchViewLink = () => {
+    if (branches && selectedBranch && branches?.filter(b => b.name === selectedBranch).length !== 0) {
       return `${baseUrl}/branch/${encodeURIComponent(selectedBranch)}/changesets/`;
     }
     return `${baseUrl}/changesets/`;
   };
 
-  render() {
-    const {
-      repository,
-      baseUrl,
-      branches,
-      selectedBranch,
-      loading,
-      error,
-      revision,
-      path,
-      currentFileIsDirectory
-    } = this.props;
-
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
-
-    if (loading) {
-      return <Loading />;
-    }
-
-    if (currentFileIsDirectory) {
-      return (
-        <>
-          <CodeActionBar
-            selectedBranch={selectedBranch}
-            branches={branches}
-            onSelectBranch={this.onSelectBranch}
-            switchViewLink={this.evaluateSwitchViewLink()}
-          />
-          <div className="panel">
-            {this.renderBreadcrumb()}
-            <FileTree repository={repository} revision={revision} path={path} baseUrl={baseUrl + "/sources"} />
-          </div>
-        </>
-      );
-    } else {
-      return (
-        <>
-          <CodeActionBar
-            selectedBranch={selectedBranch}
-            branches={branches}
-            onSelectBranch={this.onSelectBranch}
-            switchViewLink={this.evaluateSwitchViewLink()}
-          />
-          <Content repository={repository} revision={revision} path={path} breadcrumb={this.renderBreadcrumb()} />
-        </>
-      );
-    }
-  }
-
-  renderBreadcrumb = () => {
-    const {
-      revision,
-      selectedBranch,
-      path,
-      baseUrl,
-      branches,
-      sources,
-      repository,
-      location,
-      fileRevision
-    } = this.props;
-    const permalink = fileRevision ? replaceBranchWithRevision(location.pathname, fileRevision) : null;
+  const renderBreadcrumb = () => {
+    const permalink = file?.revision ? replaceBranchWithRevision(location.pathname, file.revision) : null;
 
     return (
       <Breadcrumb
         repository={repository}
-        revision={revision}
-        path={path}
+        revision={revision || file.revision}
+        path={path || ""}
         baseUrl={baseUrl + "/sources"}
-        branch={branches?.filter((b) => b.name === selectedBranch)[0]}
-        defaultBranch={branches?.filter((b) => b.defaultBranch === true)[0]}
-        sources={sources}
+        branch={branches?.filter(b => b.name === selectedBranch)[0]}
+        defaultBranch={branches?.filter(b => b.defaultBranch === true)[0]}
+        sources={file}
         permalink={permalink}
       />
     );
   };
-}
 
-const mapStateToProps = (state: any, ownProps: Props) => {
-  const { repository, match } = ownProps;
-  const { revision, path } = match.params;
-  const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
-  const loading = isFetchBranchesPending(state, repository);
-  const error = getFetchBranchesFailure(state, repository);
-  const currentFileIsDirectory = decodedRevision
-    ? isDirectory(state, repository, decodedRevision, path)
-    : isDirectory(state, repository, revision, path);
-  const sources = getSources(state, repository, decodedRevision, path);
-  const file = getSources(state, repository, revision, path);
-  const fileRevision = file?.revision;
-
-  return {
-    repository,
-    revision,
-    path,
-    loading,
-    error,
-    currentFileIsDirectory,
-    sources,
-    fileRevision
-  };
+  if (file.directory) {
+    return (
+      <>
+        <CodeActionBar
+          selectedBranch={selectedBranch}
+          branches={branches}
+          onSelectBranch={onSelectBranch}
+          switchViewLink={evaluateSwitchViewLink()}
+        />
+        <div className="panel">
+          {renderBreadcrumb()}
+          <FileTree
+            directory={file}
+            revision={revision || file.revision}
+            baseUrl={baseUrl + "/sources"}
+            isFetchingNextPage={isFetchingNextPage}
+            fetchNextPage={fetchNextPage}
+          />
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <CodeActionBar
+          selectedBranch={selectedBranch}
+          branches={branches}
+          onSelectBranch={onSelectBranch}
+          switchViewLink={evaluateSwitchViewLink()}
+        />
+        <Content
+          file={file}
+          repository={repository}
+          revision={revision || file.revision}
+          path={path}
+          breadcrumb={renderBreadcrumb()}
+        />
+      </>
+    );
+  }
 };
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchSources: (repository: Repository, revision: string, path: string) => {
-      dispatch(fetchSources(repository, revision, path));
-    }
-  };
-};
-
-export default compose(withTranslation("repos"), withRouter, connect(mapStateToProps, mapDispatchToProps))(Sources);
+export default Sources;