modify abstract utils && add AbstractGetOne

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

@@ -0,0 +1,34 @@
+/**
+ * Get one row && mapping
+ * @param {*} refList 
+ * @param {*} consoleHistory 
+ * @param {*} setConsoleHistory 
+ * @param {*} setMessage 
+ * @param {*} getOneAction 
+ * @param {*} mapping 
+ */
+export const AbstractGetOne = async (
+    refList,
+    consoleHistory, setConsoleHistory, 
+    setMessage,
+    getOneAction,
+    mapping, 
+) => {
+    let inputValue = refList[0].current.value
+    setConsoleHistory( consoleHistory + 'album id: ' + inputValue + '\n')
+    if ( inputValue >= 0 ) {
+        await getOneAction( inputValue ).then( response => {
+            if ( response['info'] !== 'Not found.' ){
+                setMessage(
+                    mapping(
+                        response['response']
+                    ) + response['info'] + '\n'
+                )
+            } else{
+                setMessage( 
+                    response['info'] + '\n'
+                )
+            }
+        })
+    }
+}

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

@@ -6,7 +6,7 @@ import React from 'react'
  * @param { [] } refList - react ref objects list for handler validation
  * @param { } action - fetch method
  */
-const FormGenerator = ({
+export const FormGenerator = ({
     inputList, refList,
     action
 }) => {

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

@@ -1,5 +1,5 @@
 
-export const mapRowsToString = (objects, type, fields) => {
+export const mapAllRowsToString = (objects, type, fields) => {
     let list = '.' + type + '\n'
     for (let i = 0; i < objects.length; i++) {
         if (i !== objects.length - 1) {
@@ -26,3 +26,17 @@ export const mapRowsToString = (objects, type, fields) => {
     }
     return list
 }
+
+export const mapRowToString = ( object, fields ) => {
+    let row = ''
+    for (let i = 0; i < fields.length; i++) {
+        if ( i === 0 ) {
+            row += object[ fields[i] ] + '\n'
+        } else if ( i !== fields.length - 1 ) {
+            row += '├── ' + fields[i] + ': ' + object[ fields[i] ] + '\n'
+        } else {
+            row += '└── ' + fields[i] + ': ' + object[ fields[i] ] + '\n'
+        }
+    }
+    return row
+}

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

@@ -6,19 +6,18 @@ import React, { useState, useEffect } from "react"
  * @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,
+    componentVisible,
     activateConsoleInput
 }) => {
 
     useEffect( () => {
         if ( componentVisible === true ) {
-            document.getElementById( firstComponentInput ).focus()    
+            refList[0].current.focus()    
             if ( message !== '' ) {
                 refList.forEach( resetRefs )
                 resetState()

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

@@ -88,7 +88,6 @@ const AlbumCreate = ({
                 refList={ refList }
                 message={ message }
                 componentVisible={ componentVisible }
-                firstComponentInput={ 'titleAlbumInput' }
                 activateConsoleInput={ activateConsoleInput }
             />
         </div>

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 
 import { getAllAlbum } from '../../../../../../stores/album/duck/operations'
 import { ResetComponentWithoutInputs } from '../Abstract Utils/ResetComponent'
-import { mapRowsToString } from '../Abstract Utils/MapRowsToString'
+import { mapAllRowsToString } from '../Abstract Utils/MapRowsToString'
 
 const AlbumGetAll = ({
     album,
@@ -28,7 +28,7 @@ const AlbumGetAll = ({
             'user_id',
             'url_code'
         ]
-        return mapRowsToString( albums, 'albums', mapFields )
+        return mapAllRowsToString( albums, 'albums', mapFields )
     }
 
     return (

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

@@ -2,7 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 
 import { getOneAlbum } from '../../../../../../stores/album/duck/operations'
-
+import { ResetComponent } from '../Abstract Utils/ResetComponent'
+import { FormGenerator } from '../Abstract Utils/FormGenerator'
+import { mapRowToString } from '../Abstract Utils/MapRowsToString'
+import { AbstractGetOne } from '../Abstract Utils/AbstractGetOne'
 
 const AlbumGetOne = ({ 
     album, 
@@ -16,50 +19,65 @@ const AlbumGetOne = ({
     
     const getOneInput = React.createRef()
 
-    const getOne = (event) => {
+    let refList = [
-        event.preventDefault()
+        getOneInput
-        let inputValue = getOneInput.current.value
+    ]
-        setConsoleHistory( consoleHistory + 'album id: ' + inputValue + '\n')
+
-        if ( inputValue >= 0 ) {
+    let inputList = [
-            getOneAlbum( inputValue ).then( response => {
+        {
-                if ( response['info'] !== 'Not found.' ){
+            type: 'text',
-                    setMessage(
+            name: 'id',
-                        response['response'].title + '\n'
+            endpoint: 'Album',
-                            + '├── id: ' + response['response'].id + '\n' 
+            ref: getOneInput
-                            + '├── user id: ' + response['response'].user_id + '\n'
-                            + '└── url: ' + response['response'].url_code + '\n'
-                            + response['info'] + '\n'
-                    )
-                } else{
-                    setMessage( 
-                        response['info'] + '\n'
-                    )
-                }
-            })
         }
+    ]
+
+    const mapAlbumToString = ( album ) => {
+        let mapFields = [
+            'title',
+            'id',
+            'user_id',
+            'url_code'
+        ]
+        return mapRowToString( album, mapFields )
     }
 
-    useEffect( 
+    const getOneAlbumFetch = (event) => {
-        () => {
+        AbstractGetOne(
-            if ( componentVisible ) {
+            refList,
-                document.getElementById('getOneAlbumInput').focus()
+            consoleHistory,
-            } else {
+            setConsoleHistory, 
-                activateConsoleInput()         
+            setMessage, 
-            }
+            getOneAlbum, 
-            if ( message !== '' ) {
+            mapAlbumToString
+        )
+    }
 
-                getOneInput.current.value = ''
+    const resetState = () => {
-
+        setConsoleHistory( consoleHistory + message )
-                setConsoleHistory( consoleHistory + message )
+        setComponentVisible( false )
-                setComponentVisible( false )
+        setMessage('')
-                setMessage('')
+    }
-            }
-        }
-    )
 
     return (
         <div>
-            <form onSubmit={ getOne }>
+            <FormGenerator 
+                inputList={ inputList }
+                refList={ refList }
+                action={ getOneAlbumFetch }
+            />
+            <ResetComponent
+                resetState={ resetState }
+                refList={ refList }
+                message={ message }
+                componentVisible={ componentVisible }
+                activateConsoleInput={ activateConsoleInput }
+            />
+        </div>
+    )
+}
+
+{/* <form onSubmit={ getOne }>
                 album id:
                 <input 
                         id='getOneAlbumInput'
@@ -67,10 +85,7 @@ const AlbumGetOne = ({
                         ref={ getOneInput }
                     />
                 <button type='submit' />
-            </form>
+            </form> */}
-        </div>
-    )
-}
 
 const mapStateToProps = state => ({
     album: state.album