add all gets Album && integrate with console

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

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react'
+import { connect } from 'react-redux'
+
+import { getAllAlbum } from '../../../../../../stores/album/duck/operations'
+
+
+const AlbumGetAll = ({ 
+    album, 
+    getAllAlbum, 
+    consoleHistory, setConsoleHistory, 
+    componentVisible, setComponentVisible,
+    activateConsoleInput
+}) => {
+
+    const [message, setMessage] = useState('')
+    
+    const mapAlbumsToString = () => {
+        setMessage( '.albums' )
+        album.albums.map( singleAlbum => {
+                setMessage( message  + '├── ' + singleAlbum.title + '\n'
+                                     + '│   ├── id: ' + singleAlbum.id + '\n' 
+                                     + '│   ├── user id: ' + singleAlbum.user_id + '\n'
+                                     + '│   └── url: ' + singleAlbum.url_code + '\n'
+                )
+            }
+        )
+    }
+
+    useEffect( 
+        () => {
+            if ( componentVisible ) {
+                getAllAlbum()
+            } else {
+                activateConsoleInput()         
+            }
+            if ( componentVisible && album.albums.length > 0 ) {
+                mapAlbumsToString()
+
+                setConsoleHistory( consoleHistory + message )
+                setComponentVisible( false )
+                setMessage('')
+            } else if ( componentVisible && album.albums.length <= 0 ) {
+                setConsoleHistory( consoleHistory + 'empty' )
+                setComponentVisible( false )
+                setMessage('')
+            }
+        }
+    )
+
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+            // .albums 
+            // { album.albums.map( singleAlbum => {
+            //         return (
+            //             <div>
+            //                 │   ├── { singleAlbum.id } <br />
+            //                 │   ├── { singleAlbum.user_id } <br />
+            //                 │   ├── { singleAlbum.title } <br />
+            //                 │   ├── { singleAlbum.url_code }
+            //             </div>
+            //         )
+            //     }) 
+            // }
+
+const mapStateToProps = state => ({
+    album: state.album
+})
+
+const mapDispatchToProps = dispatch => ({
+    getAllAlbum: () => dispatch( getAllAlbum() )
+
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlbumGetAll)

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

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react'
+import { connect } from 'react-redux'
+
+import { getOneAlbum } from '../../../../../../stores/album/duck/operations'
+
+
+const AlbumGetOne = ({ 
+    album, 
+    getOneAlbum, 
+    consoleHistory, setConsoleHistory, 
+    componentVisible, setComponentVisible,
+    activateConsoleInput
+}) => {
+
+    const [message, setMessage] = useState('')
+    
+    const getOneInput = React.createRef()
+
+    const getOne = (event) => {
+        event.preventDefault()
+        let inputValue = getOneInput.current.value
+        setConsoleHistory( consoleHistory + 'album id: ' + inputValue + '\n')
+        if ( inputValue > 0 ) {
+            getOneAlbum( inputValue ).catch(
+                setMessage( 'album not found\n' )
+            )
+            if ( album.actualAlbum.id >= 0 ) {
+                setMessage( 
+                    message + album.actualAlbum.title + '\n'
+                            + '├── id: ' + album.actualAlbum.id + '\n' 
+                            + '├── user id: ' + album.actualAlbum.user_id + '\n'
+                            + '└── url: ' + album.actualAlbum.url_code + '\n'
+                )
+            }
+        }
+    }
+
+    useEffect( 
+        () => {
+            if ( componentVisible ) {
+                document.getElementById('getOneAlbumInput').focus()
+            } else {
+                activateConsoleInput()         
+            }
+            if ( message !== '' ) {
+
+                getOneInput.current.value = ''
+
+                setConsoleHistory( consoleHistory + message )
+                setComponentVisible( false )
+                setMessage('')
+            }
+        }
+    )
+
+    return (
+        <div>
+            <form onSubmit={ getOne }>
+                album id:
+                <input 
+                        id='getOneAlbumInput'
+                        autoComplete='off'
+                        ref={ getOneInput }
+                    />
+                <button type='submit' />
+            </form>
+        </div>
+    )
+}
+
+const mapStateToProps = state => ({
+    album: state.album
+})
+
+const mapDispatchToProps = dispatch => ({
+    getOneAlbum: (id) => dispatch( getOneAlbum(id) )
+
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(AlbumGetOne)

src/components/index/indexConsole/indexConsole.js

@@ -5,6 +5,9 @@ import commands from './commands/commands'
 import Login from './commands/fetchCommands/Login'
 import Logout from './commands/fetchCommands/Logout'
 
+import AlbumGetAll from './commands/fetchCommands/Album/GetAll'
+import AlbumGetOne from './commands/fetchCommands/Album/GetOne'
+
 import '../../../styles/general.scss'
 
 import { deleteAuth } from '../../../stores/user/duck/operations'
@@ -20,6 +23,12 @@ const IndexConsole = ({
     const [logout, setLogout] = useState(false)
     const [register, setRegister] = useState(false)
 
+    const [albumGetAll, setAlbumGetAll] = useState(false)
+    const [albumGetOne, setAlbumGetOne] = useState(false)
+    const [albumCreate, setAlbumCreate] = useState(false)
+    const [albumUpdate, setAlbumUpdate] = useState(false)
+    const [albumDelete, setAlbumDelete] = useState(false)
+
     const consoleInput = React.createRef()
 
     let consoleUser = user.username !== '' 
@@ -54,6 +63,12 @@ const IndexConsole = ({
             } else if ( inputValue === 'logout' ) {
                 setConsoleHistory( consoleHistory + consoleUser )
                 setLogout( !logout )
+            } else if ( inputValue === 'get all album') {
+                setConsoleHistory( consoleHistory + consoleUser )
+                setAlbumGetAll( !albumGetAll )
+            } else if ( inputValue === 'get one album' ) {
+                setConsoleHistory( consoleHistory + consoleUser )
+                setAlbumGetOne( !albumGetOne )
             } else if ( inputValue === 'clean' ){
                 setConsoleHistory( '' )
             } else {
@@ -120,8 +135,29 @@ const IndexConsole = ({
                 <div style={ checkVisible( register ) } >
 
                 </div>
+                <div style={ checkVisible( albumGetAll ) }>
+                    <AlbumGetAll
+                        consoleHistory={ consoleHistory }
+                        setConsoleHistory={ setConsoleHistory }
+                        componentVisible={ albumGetAll }
+                        setComponentVisible={ setAlbumGetAll }
+                        activateConsoleInput={ activateInput }
+                    />
                 </div>
-            <form onSubmit={ detectCommand } style={ checkVisible( !(register || login || logout) ) }>
+                <div style={ checkVisible( albumGetOne ) }>
+                    <AlbumGetOne
+                        consoleHistory={ consoleHistory }
+                        setConsoleHistory={ setConsoleHistory }
+                        componentVisible={ albumGetOne }
+                        setComponentVisible={ setAlbumGetOne }
+                        activateConsoleInput={ activateInput }
+                    />    
+                </div>
+            </div>
+            <form onSubmit={ detectCommand } style={ checkVisible( !(
+                register || login || logout ||
+                albumGetAll || albumGetOne || albumCreate || albumUpdate || albumDelete
+            ) ) }>
                 { consoleUser }
                 <input 
                     id='consoleInput'