update react-query usage

TACC · Feb 21, 2025 · 8acedcb · 8acedcb
1 parent 85a635c
commit 8acedcb
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 25 deletions.
diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesFormModal.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesFormModal.jsx
@@ -2,8 +2,6 @@ import React, { useCallback } from 'react';
 import { useDispatch, useSelector, shallowEqual } from 'react-redux';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { DynamicForm } from '_common/Form/DynamicForm';
-import { useQuery } from 'react-query';
-import { fetchUtil } from 'utils/fetchUtil';
 import { Formik, Form } from 'formik';
 import * as Yup from 'yup';
 import styles from './DataFilesFormModal.module.scss';

diff --git a/...rc/components/_custom/drp/DataFilesAddProjectModalAddon/DataFilesAddProjectModalAddon.jsx b/...rc/components/_custom/drp/DataFilesAddProjectModalAddon/DataFilesAddProjectModalAddon.jsx
@@ -1,17 +1,31 @@
 import React from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchUtil } from 'utils/fetchUtil';
 import { DynamicForm } from '_common/Form/DynamicForm';
 
 const DataFilesAddProjectModalAddon = () => {
-  const { data: form, isLoading } = useQuery('form_ADD_PROJECT', () =>
-    fetchUtil({
-      url: 'api/forms',
+
+  const getProjectFormAddon = async() => {
+    const response = await fetchUtil({
+      url: '/api/forms',
       params: {
         form_name: 'ADD_PROJECT_ADDON',
       },
-    })
-  );
+    });
+
+    return response;
+  }
+
+  const useProjectFormAddon = () => {
+    const query = useQuery({
+      queryKey: 'form-add-project',
+      queryFn: getProjectFormAddon,
+    });
+    return query;
+  }
+
+  const { data: form, isLoading } = useProjectFormAddon();
+
   return (
     <div>
       {isLoading ? (

diff --git a/client/src/components/_custom/drp/DataFilesPreviewModalAddon/DataFilesPreviewModalAddon.jsx b/client/src/components/_custom/drp/DataFilesPreviewModalAddon/DataFilesPreviewModalAddon.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchUtil } from 'utils/fetchUtil';
 import { DynamicForm } from '_common/Form/DynamicForm';
 import { Form, Formik } from 'formik';
@@ -34,14 +34,27 @@ const DataFilesPreviewModalAddon = ({ metadata }) => {
 
   const { ...file } = useSelector((state) => state.files.modalProps.preview);
 
-  const { data: form, isLoading } = useQuery('form_UPLOAD_FILE', () =>
-    fetchUtil({
+
+  const getEditFileForm = async() => {
+    const response = await fetchUtil({
       url: 'api/forms',
       params: {
         form_name: 'EDIT_FILE',
       },
-    })
-  );
+    });
+
+    return response;
+  }
+
+  const useEditFileForm = () => {
+    const query = useQuery({
+      queryKey: 'form-edit-file',
+      queryFn: getEditFileForm,
+    });
+    return query;
+  }
+
+  const { data: form, isLoading } = useEditFileForm();
 
   const initialValues = form?.form_fields.reduce((acc, field) => {
     let value = '';

diff --git a/...p/DataFilesProjectEditDescriptionModalAddon/DataFilesProjectEditDescriptionModalAddon.jsx b/...p/DataFilesProjectEditDescriptionModalAddon/DataFilesProjectEditDescriptionModalAddon.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchUtil } from 'utils/fetchUtil';
 import { DynamicForm } from '_common/Form/DynamicForm';
 import { useSelector } from 'react-redux';
@@ -9,14 +9,26 @@ import * as Yup from 'yup';
 const DataFilesProjectEditDescriptionModalAddon = ({ setValidationSchema }) => {
   const { setFieldValue } = useFormikContext();
 
-  const { data: form, isLoading } = useQuery('form_EDIT_PROJECT', () =>
-    fetchUtil({
-      url: 'api/forms',
+  const getEditProjectFormAddon = async () => {
+    const response = await fetchUtil({
+      url: '/api/forms',
       params: {
         form_name: 'EDIT_PROJECT_ADDON',
       },
-    })
-  );
+    });
+
+    return response;
+  };
+
+  const useEditProjectFormAddon = () => {
+    const query = useQuery({
+      queryKey: 'form-edit-project',
+      queryFn: getEditProjectFormAddon,
+    });
+    return query;
+  };
+
+  const { data: form, isLoading } = useEditProjectFormAddon();
 
   const { metadata } = useSelector((state) => state.projects);
 

diff --git a/client/src/components/_custom/drp/DataFilesUploadModalAddon/DataFilesUploadModalAddon.jsx b/client/src/components/_custom/drp/DataFilesUploadModalAddon/DataFilesUploadModalAddon.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchUtil } from 'utils/fetchUtil';
 import { DynamicForm } from '_common/Form/DynamicForm';
 import { Form, Formik } from 'formik';
@@ -29,14 +29,26 @@ const DataFilesUploadModalAddon = ({ uploadedFiles, setUploadedFiles }) => {
     );
   }, [uploadedFiles]);
 
-  const { data: form, isLoading } = useQuery('form_UPLOAD_FILE', () =>
-    fetchUtil({
+  const getUploadFileForm = async () => {
+    const response = await fetchUtil({
       url: 'api/forms',
       params: {
         form_name: 'UPLOAD_FILE',
       },
-    })
-  );
+    });
+
+    return response;
+  };
+
+  const useUploadFileForm = () => {
+    const query = useQuery({
+      queryKey: 'form-upload-file',
+      queryFn: getUploadFileForm,
+    });
+    return query;
+  };
+
+  const { data: form, isLoading } = useUploadFileForm();
 
   const handleUploadedFileMetadata = (formFields, values, file) => {
     const updatedFiles = uploadedFiles.map((uploadedFile) => {

diff --git a/server/portal/apps/datafiles/views.py b/server/portal/apps/datafiles/views.py
@@ -200,7 +200,7 @@ def post(self, request, operation=None, scheme=None,
                                  'body': request.POST.dict()
                              }})
 
-            response = tapis_post_handler(client, scheme, system, path, operation, tapis_tracking_id=f"portals.{request.session.session_key}", {**body, 'metadata': metadata})
+            response = tapis_post_handler(client, scheme, system, path, operation, {**body, 'metadata': metadata}, tapis_tracking_id=f"portals.{request.session.session_key}")
         except Exception as exc:
             operation in NOTIFY_ACTIONS and notify(request.user.username, operation, 'error', {})
             raise exc