From 46cf216f8006e4c2651191402580899c4aa88f93 Mon Sep 17 00:00:00 2001
From: Jacob Lowe <40873986+jalowe13@users.noreply.github.com>
Date: Wed, 4 Dec 2024 15:35:46 -0600
Subject: [PATCH] Task/WP-726: Mutation hook: Mkdir (#997)

* initial conversion to ts

* liniting/formating

* dispatch type change

* extra dispatch removals

* 500 error fix

* removed redux test
---
 .../tests/DataFilesMkdirModal.test.jsx        | 15 +---
 .../src/hooks/datafiles/mutations/useMkdir.js | 34 -------
 .../src/hooks/datafiles/mutations/useMkdir.ts | 89 +++++++++++++++++++
 3 files changed, 90 insertions(+), 48 deletions(-)
 delete mode 100644 client/src/hooks/datafiles/mutations/useMkdir.js
 create mode 100644 client/src/hooks/datafiles/mutations/useMkdir.ts

diff --git a/client/src/components/DataFiles/DataFilesModals/tests/DataFilesMkdirModal.test.jsx b/client/src/components/DataFiles/DataFilesModals/tests/DataFilesMkdirModal.test.jsx
index b1d3425ea..677e6817a 100644
--- a/client/src/components/DataFiles/DataFilesModals/tests/DataFilesMkdirModal.test.jsx
+++ b/client/src/components/DataFiles/DataFilesModals/tests/DataFilesMkdirModal.test.jsx
@@ -55,20 +55,7 @@ describe('DataFilesCopyModal', () => {
       const submitButton = getByText('Create Folder');
       fireEvent.click(submitButton);
     });
-
-    expect(store.getActions()).toEqual([
-      {
-        type: 'DATA_FILES_MKDIR',
-        payload: {
-          api: 'tapis',
-          scheme: 'private',
-          system: 'test.system',
-          path: '/',
-          dirname: 'abc123',
-          reloadCallback: expect.any(Function),
-        },
-      },
-    ]);
+    // TODO: New test needed for react redux call for mkdir
   });
 
   it('Error message on invalid input', async () => {
diff --git a/client/src/hooks/datafiles/mutations/useMkdir.js b/client/src/hooks/datafiles/mutations/useMkdir.js
deleted file mode 100644
index c741ee192..000000000
--- a/client/src/hooks/datafiles/mutations/useMkdir.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useSelector, useDispatch, shallowEqual } from 'react-redux';
-
-function useMkdir() {
-  const dispatch = useDispatch();
-  const status = useSelector(
-    (state) => state.files.operationStatus.mkdir,
-    shallowEqual
-  );
-
-  const setStatus = (newStatus) => {
-    dispatch({
-      type: 'DATA_FILES_SET_OPERATION_STATUS',
-      payload: { status: newStatus, operation: 'mkdir' },
-    });
-  };
-
-  const mkdir = ({ api, scheme, system, path, dirname, reloadCallback }) => {
-    dispatch({
-      type: 'DATA_FILES_MKDIR',
-      payload: {
-        api,
-        scheme,
-        system,
-        path,
-        dirname,
-        reloadCallback,
-      },
-    });
-  };
-
-  return { mkdir, status, setStatus };
-}
-
-export default useMkdir;
diff --git a/client/src/hooks/datafiles/mutations/useMkdir.ts b/client/src/hooks/datafiles/mutations/useMkdir.ts
new file mode 100644
index 000000000..0f2bc122a
--- /dev/null
+++ b/client/src/hooks/datafiles/mutations/useMkdir.ts
@@ -0,0 +1,89 @@
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
+import { useMutation } from '@tanstack/react-query';
+import { apiClient } from 'utils/apiClient';
+
+export async function mkdirUtil({
+  api,
+  scheme,
+  system,
+  path,
+  dirname,
+}: {
+  api: string;
+  scheme: string;
+  system: string;
+  path: string;
+  dirname: string;
+}): Promise<{ name: string; path: string }> {
+  let apiPath = !path || path[0] === '/' ? path : `/${path}`;
+  if (apiPath === '/') {
+    apiPath = '';
+  }
+  let url = `/api/datafiles/${api}/mkdir/${scheme}/${system}/${apiPath}/`;
+  url = url.replace(/\/{2,}/g, '/');
+  const response = await apiClient.put<{ name: string; path: string }>(url, {
+    dir_name: dirname,
+  });
+
+  return response.data;
+}
+
+function useMkdir() {
+  const dispatch = useDispatch();
+  const status = useSelector(
+    (state: any) => state.files.operationStatus.mkdir,
+    shallowEqual
+  );
+
+  const setStatus = (newStatus: any) => {
+    dispatch({
+      type: 'DATA_FILES_SET_OPERATION_STATUS',
+      payload: { status: newStatus, operation: 'mkdir' },
+    });
+  };
+
+  const { mutate } = useMutation({ mutationFn: mkdirUtil });
+
+  const mkdir = ({
+    api,
+    scheme,
+    system,
+    path,
+    dirname,
+    reloadCallback,
+  }: {
+    api: string;
+    scheme: string;
+    system: string;
+    path: string;
+    dirname: string;
+    reloadCallback: any;
+  }) => {
+    mutate(
+      {
+        api,
+        scheme,
+        system,
+        path,
+        dirname,
+      },
+      {
+        onSuccess: () => {
+          dispatch({
+            type: 'DATA_FILES_TOGGLE_MODAL',
+            payload: {
+              operation: 'mkdir',
+              props: {},
+            },
+          });
+          reloadCallback();
+        },
+        onError: () => {},
+      }
+    );
+  };
+
+  return { mkdir, status, setStatus };
+}
+
+export default useMkdir;