Skip to content

Commit

Permalink
WIP, need to debug modal UX
Browse files Browse the repository at this point in the history
  • Loading branch information
MattWong-ca committed Dec 7, 2024
1 parent 31ea252 commit a85432f
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 57 deletions.
1 change: 1 addition & 0 deletions src/bundles/files/actions.js
Original file line number Diff line number Diff line change
Expand Up @@ -406,6 +406,7 @@ const actions = () => ({
*/
doFilesAddBulkCid: (source, root) => spawn(ACTIONS.ADD_BY_PATH, async function * (ipfs, { store }) {
ensureMFS(store)
console.log('doFilesAddBulkCid source', source)

if (source.length !== 1) {
throw new Error('Please provide exactly one text file')
Expand Down
3 changes: 3 additions & 0 deletions src/files/file-input/FileInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,10 @@ class FileInput extends React.Component {
input.value = null
}

// Old implementation that worked
onBulkCidInputChange = (input) => async () => {
console.log('onBulkCidInputChange', input)
console.log('onBulkCidInputChange files', input.files)
this.props.onBulkCidImport(normalizeFiles(input.files))
input.value = null
}
Expand Down Expand Up @@ -139,6 +141,7 @@ class FileInput extends React.Component {
ref={el => { this.folderInput = el }}
onChange={this.onInputChange(this.folderInput)} />

{/* Old implementation that worked */}
<input
// TO-DO id='file-input'
type='file'
Expand Down
68 changes: 11 additions & 57 deletions src/files/modals/bulk-import-modal/BulkImportModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,45 +39,17 @@ class BulkImportModal extends React.Component {
this.setState({ [name]: value })
}

handleFileSelect = (event) => {
console.log('File select triggered', event)
const file = event.target.files[0]
this.setState({ selectedFile: file })
}

onBulkCidInputChange = (event) => async () => {
console.log('event', event)
console.log('event.files', event.files)
// const input = event.target
// console.log('Input element:', input)
// console.log('Input files:', input?.files)
// if (!input || !input.files) {
// console.error('Input or files not available')
// return
// }
this.props.onBulkCidImport(normalizeFiles(event))
// input.value = null
onBulkCidInputChange = (input) => async () => {
console.log('input: ', input)
this.setState({ selectedFile: input.files })
}

onSubmit = () => {
console.log('submit')
console.log('Files to import:', this.state.selectedFile)
this.props.onBulkCidImport(normalizeFiles(this.state.selectedFile))
// input.value = null
}

// onSubmit = () => {
// let { path, name } = this.state
// if (this.validatePath(path)) {
// // avoid issues with paths by forcing a flat filename without leading/trailing spaces
// name = name.replaceAll('/', '_').trim()
// this.props.onSubmit(path, name)
// }
// }

// onKeyPress = (event) => {
// if (event.key === 'Enter') {
// this.onSubmit()
// }
// }

get inputClass () {
if (this.state.path === '') {
return ''
Expand Down Expand Up @@ -118,36 +90,18 @@ class BulkImportModal extends React.Component {
className='dn'
multiple
accept='.txt'
onChange={this.handleFileSelect}
onChange={this.onBulkCidInputChange(this.bulkCidInput)}
// className='input-reset'
id='bulk-import'
// id='bulk-import'
ref={el => {
console.log('Setting ref:', el)
this.bulkCidInput = el
}}
// onChange={this.onBulkCidInputChange(this.bulkCidInput)}
// onChange={(e) => {
// console.log('onChange triggered, current ref:', this.bulkCidInput)
// console.log('onChange event:', e)
// console.log('onChange target:', e.target)
// console.log('onChange files:', e.target.files)
// this.onBulkCidInputChange(this.bulkCidInput)
// }}
// onChange={() => {
// // Make sure we're using the current ref
// console.log('onChange triggered, current ref:', this.bulkCidInput)
// this.onBulkCidInputChange(this.bulkCidInput)()
// }}
/>
<Button
// onClick={() => {
// if (this.bulkCidInput) {
// this.bulkCidInput.click()
// }
// }}
onClick={(e) => {
onClick={() => {
console.log('clicked')
document.getElementById('bulk-import').click()
this.bulkCidInput.click()
}}
className='ma2 tc'
bg='bg-teal'
Expand Down Expand Up @@ -175,7 +129,7 @@ class BulkImportModal extends React.Component {

<ModalActions>
<Button className='ma2 tc' bg='bg-gray' onClick={onCancel}>{t('actions.cancel')}</Button>
<Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onBulkCidInputChange(this.bulkCidInput)}>{t('app:actions.import')}</Button>
<Button className='ma2 tc' bg='bg-teal' /* disabled={this.isDisabled} */ onClick={this.onSubmit}>{t('app:actions.import')}</Button>
</ModalActions>
</Modal>
)
Expand Down

0 comments on commit a85432f

Please sign in to comment.