Replace Bootstrap with Mantine (#1795)

1 files changed, 47 insertions, 0 deletions

diff --git a/frontend/src/components/async/MutateButton.tsx b/frontend/src/components/async/MutateButton.tsx
new file mode 100644
index 000000000..af301773b
--- /dev/null
+++ b/frontend/src/components/async/MutateButton.tsx
@@ -0,0 +1,47 @@
+import { Button, ButtonProps } from "@mantine/core";
+import { useCallback, useState } from "react";
+import { UseMutationResult } from "react-query";
+
+type MutateButtonProps<DATA, VAR> = Omit<
+  ButtonProps<"button">,
+  "onClick" | "loading" | "color"
+> & {
+  mutation: UseMutationResult<DATA, unknown, VAR>;
+  args: () => VAR | null;
+  onSuccess?: (args: DATA) => void;
+  onError?: () => void;
+  noReset?: boolean;
+};
+
+function MutateButton<DATA, VAR>({
+  mutation,
+  noReset,
+  onSuccess,
+  onError,
+  args,
+  ...props
+}: MutateButtonProps<DATA, VAR>) {
+  const { mutateAsync } = mutation;
+
+  const [isLoading, setLoading] = useState(false);
+
+  const onClick = useCallback(async () => {
+    setLoading(true);
+    try {
+      const argument = args();
+      if (argument !== null) {
+        const data = await mutateAsync(argument);
+        onSuccess?.(data);
+      } else {
+        onError?.();
+      }
+    } catch (error) {
+      onError?.();
+    }
+    setLoading(false);
+  }, [args, mutateAsync, onError, onSuccess]);
+
+  return <Button {...props} loading={isLoading} onClick={onClick}></Button>;
+}
+
+export default MutateButton;