Browse Source

[frontend] Improvements and replaced axios post

Nidhi Bhat G 1 year ago
parent
commit
6ea127182d

+ 11 - 11
desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx

@@ -22,41 +22,41 @@ import './InputModal.scss';
 interface InputModalProps {
   cancelText?: string;
   inputLabel: string;
-  okText?: string;
+  submitText?: string;
   onClose: () => void;
-  onCreate: (name: string) => void;
+  onCreate: (value: string) => void;
   showModal: boolean;
   title: string;
 }
 
 const defaultProps = {
   cancelText: 'Cancel',
-  okText: 'Submit'
+  submitText: 'Submit'
 };
 
 const InputModal: React.FC<InputModalProps> = ({
   cancelText,
   inputLabel,
-  okText,
+  submitText,
   onClose,
   onCreate,
   showModal,
   title
 }): JSX.Element => {
-  const [textInput, setTextInput] = useState<string>('');
+  const [value, setValue] = useState<string>('');
 
   return (
     <Modal
       cancelText={cancelText}
       className="hue-input-modal"
-      okText={okText}
+      okText={submitText}
       onCancel={() => {
-        setTextInput('');
+        setValue('');
         onClose();
       }}
       onOk={() => {
-        onCreate(textInput);
-        setTextInput('');
+        onCreate(value);
+        setValue('');
         onClose();
       }}
       open={showModal}
@@ -65,9 +65,9 @@ const InputModal: React.FC<InputModalProps> = ({
       <div className="hue-input-modal__input-label">{inputLabel}</div>
       <Input
         className="hue-input-modal__input"
-        value={textInput}
+        value={value}
         onInput={e => {
-          setTextInput((e.target as HTMLInputElement).value);
+          setValue((e.target as HTMLInputElement).value);
         }}
       />
     </Modal>

+ 13 - 7
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx

@@ -60,7 +60,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
   const [filePath, setFilePath] = useState<string>(user_home_dir);
   const [filesData, setFilesData] = useState<PathAndFileData>();
   const [files, setFiles] = useState<StorageBrowserTableData[]>();
-  const [loadingFiles, setloadingFiles] = useState(true);
+  const [loadingFiles, setLoadingFiles] = useState(true);
   const [pageStats, setPageStats] = useState<PageStats>();
   const [pageSize, setPageSize] = useState<number>(0);
   const [pageNumber, setPageNumber] = useState<number>(1);
@@ -136,7 +136,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
   ];
 
   const handleCreateNewFolder = (folderName: string) => {
-    setloadingFiles(true);
+    setLoadingFiles(true);
     mkdir(folderName, filePath)
       .then(() => {
         setRefreshKey(oldKey => oldKey + 1);
@@ -144,11 +144,14 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
       .catch(error => {
         // eslint-disable-next-line no-restricted-syntax
         console.log(error);
+      })
+      .finally(() => {
+        setLoadingFiles(false);
       });
   };
 
   const handleCreateNewFile = (fileName: string) => {
-    setloadingFiles(true);
+    setLoadingFiles(true);
     touch(fileName, filePath)
       .then(() => {
         setRefreshKey(oldKey => oldKey + 1);
@@ -156,11 +159,14 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
       .catch(error => {
         // eslint-disable-next-line no-restricted-syntax
         console.log(error);
+      })
+      .finally(() => {
+        setLoadingFiles(false);
       });
   };
 
   useEffect(() => {
-    setloadingFiles(true);
+    setLoadingFiles(true);
     fetchFiles(filePath, pageSize, pageNumber, filterData, sortByColumn, sortOrder)
       .then(responseFilesData => {
         setFilesData(responseFilesData);
@@ -183,7 +189,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
         console.error(error);
       })
       .finally(() => {
-        setloadingFiles(false);
+        setLoadingFiles(false);
       });
   }, [filePath, pageSize, pageNumber, sortByColumn, sortOrder, refreshKey]);
 
@@ -253,7 +259,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
         />
         <InputModal
           title={t('Create New Folder')}
-          inputLabel={t('Enter folder name here')}
+          inputLabel={t('Enter Folder name here')}
           okText={t('Create')}
           showModal={showNewFolderModal}
           onCreate={handleCreateNewFolder}
@@ -261,7 +267,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
         />
         <InputModal
           title={t('Create New File')}
-          inputLabel={t('Enter file name here')}
+          inputLabel={t('Enter File name here')}
           okText={t('Create')}
           showModal={showNewFileModal}
           onCreate={handleCreateNewFile}

+ 5 - 14
desktop/core/src/desktop/js/reactComponents/FileChooser/api.ts

@@ -13,8 +13,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import axios, { AxiosResponse } from 'axios';
-import { get } from '../../api/utils';
+import { get, post } from '../../api/utils';
 import { CancellablePromise } from '../../api/cancellablePromise';
 import { PathAndFileData, SortOrder } from './types';
 
@@ -68,18 +67,10 @@ export const fetchFiles = (
   );
 };
 
-export const mkdir = async (folderName: string, path: string): Promise<AxiosResponse> => {
-  const createDirFormData = new FormData();
-  createDirFormData.append('name', folderName);
-  createDirFormData.append('path', path);
-  const response = await axios.post(MAKE_DIRECTORY_API_URL, createDirFormData);
-  return response;
+export const mkdir = async (folderName: string, path: string): Promise<void> => {
+  await post(MAKE_DIRECTORY_API_URL, { name: folderName, path: path });
 };
 
-export const touch = async (fileName: string, path: string): Promise<AxiosResponse> => {
-  const touchFormData = new FormData();
-  touchFormData.append('name', fileName);
-  touchFormData.append('path', path);
-  const response = await axios.post(TOUCH_API_URL, touchFormData);
-  return response;
+export const touch = async (fileName: string, path: string): Promise<void> => {
+  await post(TOUCH_API_URL, { name: fileName, path: path });
 };