moved createrequest buttons to their own cmp

oarepo · Oct 27, 2024 · 1a8cbdf · 1a8cbdf
1 parent 8d5c3c6
commit 1a8cbdf
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 79 deletions.
diff --git a/...sets/semantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestButton.jsx b/...sets/semantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestButton.jsx
@@ -0,0 +1,88 @@
+import React from "react";
+import { Button, Confirm } from "semantic-ui-react";
+import { RequestModal, CreateRequestModalContent } from ".";
+import {
+  DirectCreateAndSubmit,
+  ConfirmModalContextProvider,
+} from "@js/oarepo_requests_common";
+import PropTypes from "prop-types";
+
+export const CreateRequestButton = ({
+  requestType,
+  isMutating,
+  buttonIconProps,
+  header,
+}) => {
+  const { dangerous, has_form: hasForm } = requestType;
+  const needsDialog = dangerous || hasForm;
+
+  if (!hasForm && dangerous) {
+    return (
+      <ConfirmModalContextProvider requestOrRequestType={requestType}>
+        {({ confirmDialogProps }) => (
+          <>
+            <DirectCreateAndSubmit
+              requestType={requestType}
+              requireConfirmation={dangerous}
+              isMutating={isMutating}
+            />
+            <Confirm
+              {...confirmDialogProps}
+              className="requests dangerous-action-confirmation-modal"
+            />
+          </>
+        )}
+      </ConfirmModalContextProvider>
+    );
+  }
+
+  if (!hasForm && !dangerous) {
+    return (
+      <ConfirmModalContextProvider requestOrRequestType={requestType}>
+        {({ confirmDialogProps }) => (
+          <>
+            <DirectCreateAndSubmit
+              requestType={requestType}
+              requireConfirmation={false}
+              isMutating={isMutating}
+            />
+            <Confirm
+              {...confirmDialogProps}
+              className="requests dangerous-action-confirmation-modal"
+            />
+          </>
+        )}
+      </ConfirmModalContextProvider>
+    );
+  }
+
+  if (needsDialog) {
+    return (
+      <RequestModal
+        requestType={requestType}
+        header={header}
+        requestCreationModal
+        trigger={
+          <Button
+            className={`requests request-create-button ${requestType.type_id}`}
+            fluid
+            title={header}
+            content={header}
+            disabled={isMutating > 0}
+            {...buttonIconProps}
+          />
+        }
+        ContentComponent={CreateRequestModalContent}
+      />
+    );
+  }
+
+  return null;
+};
+
+CreateRequestButton.propTypes = {
+  requestType: PropTypes.object,
+  isMutating: PropTypes.number.isRequired,
+  buttonIconProps: PropTypes.object,
+  header: PropTypes.string.isRequired,
+};
diff --git a/...semantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestButtonGroup.jsx b/...semantic-ui/js/oarepo_requests_ui/record-requests/components/CreateRequestButtonGroup.jsx
@@ -1,15 +1,11 @@
 import React from "react";
 import { i18next } from "@translations/oarepo_requests_ui/i18next";
-import { Button, Placeholder, Message, Confirm } from "semantic-ui-react";
+import { Placeholder, Message } from "semantic-ui-react";
 import _isEmpty from "lodash/isEmpty";
-import { RequestModal, CreateRequestModalContent } from ".";
-import {
-  useRequestContext,
-  DirectCreateAndSubmit,
-  ConfirmModalContextProvider,
-} from "@js/oarepo_requests_common";
+import { useRequestContext } from "@js/oarepo_requests_common";
 import PropTypes from "prop-types";
 import { useIsMutating } from "@tanstack/react-query";
+import { CreateRequestButton } from "./CreateRequestButton";
 
 /**
  * @param {{  applicableRequestsLoading: boolean, applicableRequestsLoadingError: Error }} props
@@ -49,82 +45,19 @@ export const CreateRequestButtonGroup = ({
     return null; // No need to render anything if there are no requests
   } else {
     content = createRequests.map((requestType) => {
-      const { dangerous, has_form: hasForm } = requestType;
-      const needsDialog = dangerous || hasForm;
       const header =
         requestType.stateful_name || requestType.name || requestType.type_id;
       const buttonIconProps = requestButtonsIconsConfig[requestType.type_id];
 
-      if (!hasForm && dangerous) {
-        return (
-          <ConfirmModalContextProvider
-            key={requestType.type_id}
-            requestOrRequestType={requestType}
-          >
-            {({ confirmDialogProps }) => (
-              <>
-                <DirectCreateAndSubmit
-                  requestType={requestType}
-                  requireConfirmation={dangerous}
-                  isMutating={isMutating}
-                />
-                <Confirm
-                  {...confirmDialogProps}
-                  className="requests dangerous-action-confirmation-modal"
-                />
-              </>
-            )}
-          </ConfirmModalContextProvider>
-        );
-      }
-
-      if (!hasForm && !dangerous) {
-        return (
-          <ConfirmModalContextProvider
-            key={requestType.type_id}
-            requestOrRequestType={requestType}
-          >
-            {({ confirmDialogProps }) => (
-              <>
-                <DirectCreateAndSubmit
-                  key={requestType.type_id}
-                  requestType={requestType}
-                  requireConfirmation={false}
-                  isMutating={isMutating}
-                />
-                <Confirm
-                  {...confirmDialogProps}
-                  className="requests dangerous-action-confirmation-modal"
-                />
-              </>
-            )}
-          </ConfirmModalContextProvider>
-        );
-      }
-
-      if (needsDialog) {
-        return (
-          <RequestModal
-            key={requestType.type_id}
-            requestType={requestType}
-            header={header}
-            requestCreationModal
-            trigger={
-              <Button
-                className={`requests request-create-button ${requestType.type_id}`}
-                fluid
-                title={header}
-                content={header}
-                disabled={isMutating > 0}
-                {...buttonIconProps}
-              />
-            }
-            ContentComponent={CreateRequestModalContent}
-          />
-        );
-      }
-
-      return null;
+      return (
+        <CreateRequestButton
+          key={requestType.type_id}
+          requestType={requestType}
+          isMutating={isMutating}
+          buttonIconProps={buttonIconProps}
+          header={header}
+        />
+      );
     });
   }