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/containers/CreateRepository.tsx

@@ -21,143 +21,56 @@
  * 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 { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
-import { NamespaceStrategies, Repository, RepositoryCreation, RepositoryType } from "@scm-manager/ui-types";
+import React, { FC } from "react";
+import { useTranslation } from "react-i18next";
 import { Page } from "@scm-manager/ui-components";
-import {
-  fetchRepositoryTypesIfNeeded,
-  getFetchRepositoryTypesFailure,
-  getRepositoryTypes,
-  isFetchRepositoryTypesPending
-} from "../modules/repositoryTypes";
 import RepositoryForm from "../components/form";
 import RepositoryFormSwitcher from "../components/form/RepositoryFormSwitcher";
-import { createRepo, createRepoReset, getCreateRepoFailure, isCreateRepoPending } from "../modules/repos";
-import { getRepositoriesLink } from "../../modules/indexResource";
-import {
-  fetchNamespaceStrategiesIfNeeded,
-  getFetchNamespaceStrategiesFailure,
-  getNamespaceStrategies,
-  isFetchNamespaceStrategiesPending
-} from "../../admin/modules/namespaceStrategies";
-import { RouteComponentProps, withRouter } from "react-router-dom";
-import { compose } from "redux";
-
-type Props = WithTranslation &
-  RouteComponentProps & {
-    repositoryTypes: RepositoryType[];
-    namespaceStrategies: NamespaceStrategies;
-    pageLoading: boolean;
-    createLoading: boolean;
-    error: Error;
-    repoLink: string;
-    indexResources: any;
-
-    // dispatch functions
-    fetchNamespaceStrategiesIfNeeded: () => void;
-    fetchRepositoryTypesIfNeeded: () => void;
-    createRepo: (
-      link: string,
-      repository: RepositoryCreation,
-      initRepository: boolean,
-      callback: (repo: Repository) => void
-    ) => void;
-    resetForm: () => void;
-
-    // context props
-    history: History;
-  };
-
-class CreateRepository extends React.Component<Props> {
-  componentDidMount() {
-    this.props.resetForm();
-    this.props.fetchRepositoryTypesIfNeeded();
-    this.props.fetchNamespaceStrategiesIfNeeded();
-  }
-
-  repoCreated = (repo: Repository) => {
-    this.props.history.push("/repo/" + repo.namespace + "/" + repo.name);
-  };
-
-  render() {
-    const {
-      pageLoading,
-      createLoading,
-      repositoryTypes,
-      namespaceStrategies,
-      createRepo,
-      error,
-      indexResources,
-      repoLink,
-      t
-    } = this.props;
-
-    return (
-      <Page
-        title={t("create.title")}
-        subtitle={t("create.subtitle")}
-        afterTitle={<RepositoryFormSwitcher creationMode={"CREATE"} />}
-        loading={pageLoading}
-        error={error}
-        showContentOnError={true}
-      >
-        <RepositoryForm
-          repositoryTypes={repositoryTypes}
-          loading={createLoading}
-          namespaceStrategy={namespaceStrategies.current}
-          createRepository={(repo, initRepository) => {
-            createRepo(repoLink, repo, initRepository, (repo: Repository) => this.repoCreated(repo));
-          }}
-          indexResources={indexResources}
-        />
-      </Page>
-    );
-  }
-}
-
-const mapStateToProps = (state: any) => {
-  const repositoryTypes = getRepositoryTypes(state);
-  const namespaceStrategies = getNamespaceStrategies(state);
-  const pageLoading = isFetchRepositoryTypesPending(state) || isFetchNamespaceStrategiesPending(state);
-  const createLoading = isCreateRepoPending(state);
-  const error =
-    getFetchRepositoryTypesFailure(state) || getCreateRepoFailure(state) || getFetchNamespaceStrategiesFailure(state);
-  const repoLink = getRepositoriesLink(state);
-  const indexResources = state?.indexResources;
+import { Redirect } from "react-router-dom";
+import { useCreateRepository, useIndex, useNamespaceStrategies, useRepositoryTypes } from "@scm-manager/ui-api";
 
+const useCreateRepositoryData = () => {
+  const { isLoading: isLoadingNS, error: errorNS, data: namespaceStrategies } = useNamespaceStrategies();
+  const { isLoading: isLoadingRT, error: errorRT, data: repositoryTypes } = useRepositoryTypes();
+  const { isLoading: isLoadingIdx, error: errorIdx, data: index } = useIndex();
   return {
-    repositoryTypes,
+    isPageLoading: isLoadingNS || isLoadingRT || isLoadingIdx,
+    pageLoadingError: errorNS || errorRT || errorIdx || undefined,
     namespaceStrategies,
-    pageLoading,
-    createLoading,
-    error,
-    repoLink,
-    indexResources
+    repositoryTypes,
+    index
   };
 };
 
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    fetchRepositoryTypesIfNeeded: () => {
-      dispatch(fetchRepositoryTypesIfNeeded());
-    },
-    fetchNamespaceStrategiesIfNeeded: () => {
-      dispatch(fetchNamespaceStrategiesIfNeeded());
-    },
-    createRepo: (link: string, repository: RepositoryCreation, initRepository: boolean, callback: () => void) => {
-      dispatch(createRepo(link, repository, initRepository, callback));
-    },
-    resetForm: () => {
-      dispatch(createRepoReset());
-    }
-  };
+const CreateRepository: FC = () => {
+  const { isPageLoading, pageLoadingError, namespaceStrategies, repositoryTypes, index } = useCreateRepositoryData();
+  const { isLoading, error, repository, create } = useCreateRepository();
+  const [t] = useTranslation("repos");
+
+  if (repository) {
+    return <Redirect to={`/repo/${repository.namespace}/${repository.name}`} />;
+  }
+
+  return (
+    <Page
+      title={t("create.title")}
+      subtitle={t("create.subtitle")}
+      afterTitle={<RepositoryFormSwitcher creationMode={"CREATE"} />}
+      loading={isPageLoading}
+      error={pageLoadingError || error || undefined}
+      showContentOnError={true}
+    >
+      {namespaceStrategies && repositoryTypes ? (
+        <RepositoryForm
+          repositoryTypes={repositoryTypes._embedded.repositoryTypes}
+          loading={isLoading}
+          namespaceStrategy={namespaceStrategies!.current}
+          createRepository={create}
+          indexResources={index}
+        />
+      ) : null}
+    </Page>
+  );
 };
 
-export default compose(
-  withRouter,
-  withTranslation("repos"),
-  connect(mapStateToProps, mapDispatchToProps)
-)(CreateRepository);
+export default CreateRepository;