tbs093a
/
music.service.frontend
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

refactor use efect -> abstract version in ResetComponent

develop
TBS093A 2020-08-12 19:25:08 +02:00
parent 8396f1918f
commit 57bb495b42
4 changed files with 142 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/index/indexConsole/commands/fetchCommands/Abstract Utils/FormGenerator.js
View File

@ -12,18 +12,20 @@ const FormGenerator = ({
return (
<form onSubmit={ event => action( event ) }>
{
inputList.map( input => {
inputList.map( (input, key) => {
if ( input.type === 'text' ) {
return (
<TextInputGenerator
input={ input }
key={ key }
/>
)
} else if ( input.type === 'file' ) {
return (
<UploadInputGenerator
input={ input }
key={ key }
/>
)
}

81
src/components/index/indexConsole/commands/fetchCommands/Abstract Utils/ResetComponent.js 100644
View File

@ -0,0 +1,81 @@
import React, { useState, useEffect } from "react"
/**
*
* @param { method } resetState - reset State method
* @param { [] } refList - reset react refs
* @param { useState } message - for check message trigger
* @param { useState } componentVisible - for focus first comp. input
* @param { string } firstComponentInput - ---""---
* @param { action } activateConsoleInput - activate general console input
*/
export const ResetComponent = ({
resetState, refList,
message,
componentVisible, firstComponentInput,
activateConsoleInput
}) => {
useEffect( () => {
if ( componentVisible === true ) {
document.getElementById( firstComponentInput ).focus()
if ( message !== '' ) {
refList.forEach( resetRefs )
resetState()
activateConsoleInput()
}
}
})
return (
<div> </div>
)
}
/**
*
* @param { method } resetState - reset State method
* @param { action } fetchAction - start fetch now
* @param { method } mapObjectToString - map response to string
* @param { useState } message - for check message trigger
* @param { useState } setMessage - for set message trigger
* @param { useState } componentVisible - for focus first comp. input
* @param { action } activateConsoleInput - activate general console input
*/
export const ResetComponentWithoutInputs = ({
resetState,
fetchAction, mapObjectToString,
message, setMessage,
componentVisible,
activateConsoleInput
}) => {
const [oneRequest, setOneRequest] = useState(false)
useEffect( () => {
if (componentVisible && oneRequest === false) {
fetchAction().then(response => {
setMessage(
mapObjectToString(
response['response']
) + response['info'] + '\n'
)
})
setOneRequest( true )
} else {
activateConsoleInput()
}
if (message !== '') {
resetState()
setOneRequest( false )
}
})
return (
<div> </div>
)
}
const resetRefs = ( element, array ) => {
element.current.value = ''
}

78
src/components/index/indexConsole/commands/fetchCommands/Album/Create.js
View File

@ -4,6 +4,7 @@ import { connect } from 'react-redux'
import { createAlbum } from '../../../../../../stores/album/duck/operations'
import { generateUrlCode } from '../../../../../generateUrlCode'
import FormGenerator from '../Abstract Utils/FormGenerator'
import { ResetComponent } from '../Abstract Utils/ResetComponent'
const AlbumCreate = ({
@ -73,32 +74,65 @@ const AlbumCreate = ({
})
}
useEffect(
() => {
if ( componentVisible ) {
document.getElementById('titleAlbumInput').focus()
} else {
activateConsoleInput()
}
if ( message !== '' ) {
// useEffect(
// () => {
// if ( componentVisible ) {
// document.getElementById('titleAlbumInput').focus()
// } else {
// activateConsoleInput()
// }
// if ( message !== '' ) {
titleInput.current.value = ''
descriptionInput.current.value = ''
// titleInput.current.value = ''
// descriptionInput.current.value = ''
setConsoleHistory( consoleHistory + message )
setComponentVisible( false )
setImage('')
setImageInfo('Drop/Click\nfor upload album image...')
setMessage('')
}
}
)
// setConsoleHistory( consoleHistory + message )
// setComponentVisible( false )
// setImage('')
// setImageInfo('Drop/Click\nfor upload album image...')
// setMessage('')
// }
// }
// )
const resetState = () => {
setConsoleHistory( consoleHistory + message )
setComponentVisible( false )
setImage('')
setImageInfo('Drop/Click\nfor upload album image...')
setMessage('')
}
let refList = [
titleInput,
descriptionInput
]
// useEffect( () => {
// ResetComponent(
// resetState, refList,
// message,
// componentVisible, 'titleAlbumInput',
// activateConsoleInput
// )}
// )
return (
<FormGenerator
inputList={ inputList }
action={ create }
/>
<div>
<FormGenerator
inputList={ inputList }
action={ create }
/>
<ResetComponent
resetState={ resetState }
refList={ refList }
message={ message }
componentVisible={ componentVisible }
firstComponentInput={ 'titleAlbumInput' }
activateConsoleInput={ activateConsoleInput }
/>
</div>
)
}

2
src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js
View File

@ -25,7 +25,7 @@ const AlbumGetAll = ({
) + response['info'] + '\n'
)
})
setOne(!oneRequest)
setOne( true )
} else {
activateConsoleInput()
}