refactor use efect -> abstract version in ResetComponent

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

@@ -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 } 
                             />
                         )
                     }

src/components/index/indexConsole/commands/fetchCommands/Abstract Utils/ResetComponent.js

@@ -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 = ''
+}

src/components/index/indexConsole/commands/fetchCommands/Album/Create.js

@@ -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( 
+    // useEffect( 
-        () => {
+    //     () => {
-            if ( componentVisible ) {
+    //         if ( componentVisible ) {
-                document.getElementById('titleAlbumInput').focus()
+    //             document.getElementById('titleAlbumInput').focus()
-            } else {
+    //         } else {
-                activateConsoleInput()         
+    //             activateConsoleInput()         
-            }
+    //         }
-            if ( message !== '' ) {
+    //         if ( message !== '' ) {
 
-                titleInput.current.value = ''
+    //             titleInput.current.value = ''
-                descriptionInput.current.value = ''
+    //             descriptionInput.current.value = ''
 
+    //             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 (
+        <div>
             <FormGenerator 
                 inputList={ inputList }
                 action={ create }
             />
+            <ResetComponent 
+                resetState={ resetState }
+                refList={ refList }
+                message={ message }
+                componentVisible={ componentVisible }
+                firstComponentInput={ 'titleAlbumInput' }
+                activateConsoleInput={ activateConsoleInput }
+            />
+        </div>
     )
 }
 

src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js

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