implement react-query for edge-cases (#1711)

When initially implementing react-query, we focussed on core features. This pull request now replaces the remaining apiClient usages in ui-components and ui-webapp with react-query hooks.

scm-ui/ui-webapp/src/repos/components/ImportFullRepository.tsx

@@ -21,77 +21,56 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, FormEvent, useState } from "react";
-import { File, RepositoryCreation } from "@scm-manager/ui-types";
-import { apiClient, ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
+import React, { FC, FormEvent, useEffect, useState } from "react";
+import { Repository, RepositoryCreation, RepositoryType } from "@scm-manager/ui-types";
+import { ErrorNotification, Level, SubmitButton } from "@scm-manager/ui-components";
 import { useTranslation } from "react-i18next";
-import { useHistory } from "react-router-dom";
 import ImportFullRepositoryForm from "./ImportFullRepositoryForm";
-import { SubFormProps } from "../types";
+import { extensionPoints } from "@scm-manager/ui-extensions";
+import { useImportFullRepository } from "@scm-manager/ui-api";
 
 type Props = {
-  url: string;
-  repositoryType: string;
+  repositoryType: RepositoryType;
   setImportPending: (pending: boolean) => void;
-  nameForm: React.ComponentType<SubFormProps>;
-  informationForm: React.ComponentType<SubFormProps>;
+  setImportedRepository: (repository: Repository) => void;
+  nameForm: extensionPoints.RepositoryCreatorComponentProps["nameForm"];
+  informationForm: extensionPoints.RepositoryCreatorComponentProps["informationForm"];
 };
 
 const ImportFullRepository: FC<Props> = ({
-  url,
   repositoryType,
   setImportPending,
+  setImportedRepository,
   nameForm: NameForm,
-  informationForm: InformationForm
+  informationForm: InformationForm,
 }) => {
   const [repo, setRepo] = useState<RepositoryCreation>({
     name: "",
     namespace: "",
-    type: repositoryType,
+    type: repositoryType.name,
     contact: "",
     description: "",
-    contextEntries: []
+    contextEntries: [],
   });
   const [password, setPassword] = useState("");
   const [valid, setValid] = useState({ namespaceAndName: false, contact: true, file: false });
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | undefined>();
   const [file, setFile] = useState<File | null>(null);
-  const history = useHistory();
   const [t] = useTranslation("repos");
+  const { importFullRepository, importedRepository, isLoading, error } = useImportFullRepository(repositoryType);
 
-  const handleImportLoading = (loading: boolean) => {
-    setImportPending(loading);
-    setLoading(loading);
-  };
+  useEffect(() => setRepo({...repo, type: repositoryType.name}), [repositoryType]);
+  useEffect(() => setImportPending(isLoading), [isLoading]);
+  useEffect(() => {
+    if (importedRepository) {
+      setImportedRepository(importedRepository);
+    }
+  }, [importedRepository]);
 
-  const isValid = () => Object.values(valid).every(v => v);
+  const isValid = () => Object.values(valid).every((v) => v);
 
   const submit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const currentPath = history.location.pathname;
-    setError(undefined);
-    handleImportLoading(true);
-    apiClient
-      .postBinary(url, formData => {
-        formData.append("bundle", file, file?.name);
-        formData.append("repository", JSON.stringify({ ...repo, password }));
-      })
-      .then(response => {
-        const location = response.headers.get("Location");
-        return apiClient.get(location!);
-      })
-      .then(response => response.json())
-      .then(repo => {
-        handleImportLoading(false);
-        if (history.location.pathname === currentPath) {
-          history.push(`/repo/${repo.namespace}/${repo.name}/code/sources`);
-        }
-      })
-      .catch(error => {
-        setError(error);
-        handleImportLoading(false);
-      });
+    importFullRepository(repo, file!, password);
   };
 
   return (
@@ -108,16 +87,16 @@ const ImportFullRepository: FC<Props> = ({
         repository={repo}
         onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
         setValid={(namespaceAndName: boolean) => setValid({ ...valid, namespaceAndName })}
-        disabled={loading}
+        disabled={isLoading}
       />
       <InformationForm
         repository={repo}
         onChange={setRepo as React.Dispatch<React.SetStateAction<RepositoryCreation>>}
-        disabled={loading}
+        disabled={isLoading}
         setValid={(contact: boolean) => setValid({ ...valid, contact })}
       />
       <Level
-        right={<SubmitButton disabled={!isValid()} loading={loading} label={t("repositoryForm.submitImport")} />}
+        right={<SubmitButton disabled={!isValid()} loading={isLoading} label={t("repositoryForm.submitImport")} />}
       />
     </form>
   );