From 481e7a986366e4d78b9fe6af5cd4a0e89604b461 Mon Sep 17 00:00:00 2001
From: MattWong-ca <matthew.yt.wong@gmail.com>
Date: Fri, 6 Dec 2024 23:39:49 -0500
Subject: [PATCH] Modal UX working, need to clean up code

---
 src/bundles/files/actions.js                  | 27 +++++++++++---
 src/files/FilesPage.js                        |  2 +
 src/files/file-input/FileInput.js             |  2 +-
 src/files/modals/Modals.js                    |  4 +-
 .../bulk-import-modal/BulkImportModal.js      | 37 +++++++++++--------
 5 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js
index 2626a3f89..bc8fb7716 100644
--- a/src/bundles/files/actions.js
+++ b/src/bundles/files/actions.js
@@ -405,15 +405,32 @@ const actions = () => ({
  * @param {string} root - Destination directory in IPFS
  */
   doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
+    console.log('Action parameters:', { source, root })
+    console.log('Arguments:', arguments)
+
     ensureMFS(store)
-    console.log('doFilesAddBulkCid source', source)
 
-    if (source.length !== 1) {
-      throw new Error('Please provide exactly one text file')
+    // Ensure source is properly passed
+    if (!source) {
+      throw new Error('Source is required')
+    }
+
+    // If source is passed as first argument of spawn callback
+    const actualSource = Array.isArray(source) ? source : arguments[0]
+    console.log('Actual source:', actualSource)
+
+    if (!Array.isArray(actualSource)) {
+      throw new Error('Source must be an array')
+    }
+
+    const fileStream = actualSource[0]
+    console.log('fileStream:', fileStream)
+
+    if (!fileStream || !fileStream.content) {
+      throw new Error('Invalid file format')
     }
 
-    // Read the text file content
-    const file = source[0]
+    const file = fileStream
     const content = await new Response(file.content).text()
 
     const lines = content.split('\n').map(line => line.trim()).filter(Boolean)
diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js
index e36cf8406..7f3e7b29e 100644
--- a/src/files/FilesPage.js
+++ b/src/files/FilesPage.js
@@ -73,7 +73,9 @@ const FilesPage = ({
   }
 
   const onBulkCidImport = (raw, root = '') => {
+    console.log('FilesPage onBulkCidImport:', { raw, root, filesPath: files.path })
     if (root === '') root = files.path
+    console.log('Calling doFilesAddBulkCid with:', { raw, root })
     doFilesAddBulkCid(raw, root)
   }
 
diff --git a/src/files/file-input/FileInput.js b/src/files/file-input/FileInput.js
index e73aeca9b..332b605e4 100644
--- a/src/files/file-input/FileInput.js
+++ b/src/files/file-input/FileInput.js
@@ -111,7 +111,7 @@ class FileInput extends React.Component {
               {t('newFolder')}
             </Option>
             <Option
-              // onClick={this.onAddBulkCid}
+              // onClick={this.onAddBulkCid} // This worked before
               onClick={this.onBulkCidImport}
               // TO-DO:
               // id='add-bulk-cid'
diff --git a/src/files/modals/Modals.js b/src/files/modals/Modals.js
index dc3eaee97..beb966aed 100644
--- a/src/files/modals/Modals.js
+++ b/src/files/modals/Modals.js
@@ -66,8 +66,8 @@ class Modals extends React.Component {
     this.leave()
   }
 
-  onBulkCidImport = () => {
-    this.props.onBulkCidImport()
+  onBulkCidImport = (files, root) => {
+    this.props.onBulkCidImport(files, root)
     this.leave()
   }
 
diff --git a/src/files/modals/bulk-import-modal/BulkImportModal.js b/src/files/modals/bulk-import-modal/BulkImportModal.js
index 0f366b445..499f6a92f 100644
--- a/src/files/modals/bulk-import-modal/BulkImportModal.js
+++ b/src/files/modals/bulk-import-modal/BulkImportModal.js
@@ -39,15 +39,25 @@ class BulkImportModal extends React.Component {
     this.setState({ [name]: value })
   }
 
-  onBulkCidInputChange = (input) => async () => {
-    console.log('input: ', input)
-    this.setState({ selectedFile: input.files })
+  onBulkCidInputChange = (event) => {
+    const files = event.target.files
+    console.log('files: ', files)
+    this.setState({ selectedFile: files[0] })
+    // console.log('input: ', input)
+    // this.setState({ selectedFile: input.files })
   }
 
-  onSubmit = () => {
-    console.log('Files to import:', this.state.selectedFile)
-    this.props.onBulkCidImport(normalizeFiles(this.state.selectedFile))
-    // input.value = null
+  selectFile = async () => {
+    return this.bulkCidInputt.click()
+  }
+
+  onSubmit = async () => {
+    console.log('BulkImportModal onSubmit:', this.state.selectedFile)
+    if (this.state.selectedFile) {
+      const normalizedFiles = normalizeFiles([this.state.selectedFile])
+      console.log('Calling onBulkCidImport with:', { normalizedFiles, root: '/files' })
+      await this.props.onBulkCidImport(normalizedFiles, '/files')
+    }
   }
 
   get inputClass () {
@@ -72,13 +82,13 @@ class BulkImportModal extends React.Component {
 
   render () {
     const {
-      t, onCancel, className
+      t, tReady, onCancel, onSubmit, className, ...props
     } = this.props
 
     const codeClass = 'w-100 mb1 pa1 tl bg-snow f7 charcoal-muted truncate'
 
     return (
-      <Modal className={className} onCancel={onCancel}>
+      <Modal {...props} className={className} onCancel={onCancel}>
         <ModalBody title={'Bulk Import with Text File'} Icon={Icon}>
           <div className='mb3 flex flex-column items-center'>
             <p className='mt0 charcoal tl w-100'>{'Upload a text file with a list of CIDs (names are optional).' + ' ' + 'Example:'}</p>
@@ -90,19 +100,16 @@ class BulkImportModal extends React.Component {
             className='dn'
             multiple
             accept='.txt'
-            onChange={this.onBulkCidInputChange(this.bulkCidInput)}
+            onChange={this.onBulkCidInputChange}
             // className='input-reset'
             // id='bulk-import'
             ref={el => {
               console.log('Setting ref:', el)
-              this.bulkCidInput = el
+              this.bulkCidInputt = el
             }}
           />
           <Button
-            onClick={() => {
-              console.log('clicked')
-              this.bulkCidInput.click()
-            }}
+            onClick={this.selectFile}
             className='ma2 tc'
             bg='bg-teal'
             type='button'