Convert Manual Import to Typescript

frontend/src/InteractiveImport/InteractiveImportModal.tsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Modal from 'Components/Modal/Modal';
+import usePrevious from 'Helpers/Hooks/usePrevious';
+import { sizes } from 'Helpers/Props';
+import InteractiveImportSelectFolderModalContent from './Folder/InteractiveImportSelectFolderModalContent';
+import InteractiveImportModalContent from './Interactive/InteractiveImportModalContent';
+
+interface InteractiveImportModalProps {
+  isOpen: boolean;
+  folder?: string;
+  downloadId?: string;
+  modalTitle?: string;
+  onModalClose(): void;
+}
+
+function InteractiveImportModal(props: InteractiveImportModalProps) {
+  const {
+    isOpen,
+    folder,
+    downloadId,
+    modalTitle = 'Manual Import',
+    onModalClose,
+    ...otherProps
+  } = props;
+
+  const [folderPath, setFolderPath] = useState<string | undefined>(folder);
+  const previousIsOpen = usePrevious(isOpen);
+
+  const onFolderSelect = useCallback(
+    (f) => {
+      setFolderPath(f);
+    },
+    [setFolderPath]
+  );
+
+  useEffect(() => {
+    setFolderPath(folder);
+  }, [folder, setFolderPath]);
+
+  useEffect(() => {
+    if (previousIsOpen && !isOpen) {
+      setFolderPath(folder);
+    }
+  }, [folder, previousIsOpen, isOpen, setFolderPath]);
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
+      closeOnBackgroundClick={false}
+      onModalClose={onModalClose}
+    >
+      {folderPath || downloadId ? (
+        <InteractiveImportModalContent
+          {...otherProps}
+          folder={folderPath}
+          downloadId={downloadId}
+          modalTitle={modalTitle}
+          onModalClose={onModalClose}
+        />
+      ) : (
+        <InteractiveImportSelectFolderModalContent
+          {...otherProps}
+          modalTitle={modalTitle}
+          onFolderSelect={onFolderSelect}
+          onModalClose={onModalClose}
+        />
+      )}
+    </Modal>
+  );
+}
+
+export default InteractiveImportModal;