diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js b/src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js index e69de29..2ad51d0 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js +++ b/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 ( +
+ +
+ ) +} + + // .albums + // { album.albums.map( singleAlbum => { + // return ( + //
+ // │ ├── { singleAlbum.id }
+ // │ ├── { singleAlbum.user_id }
+ // │ ├── { singleAlbum.title }
+ // │ ├── { singleAlbum.url_code } + //
+ // ) + // }) + // } + +const mapStateToProps = state => ({ + album: state.album +}) + +const mapDispatchToProps = dispatch => ({ + getAllAlbum: () => dispatch( getAllAlbum() ) + +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AlbumGetAll) \ No newline at end of file diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/GetOne.js b/src/components/index/indexConsole/commands/fetchCommands/Album/GetOne.js index e69de29..b607b36 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Album/GetOne.js +++ b/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 ( +
+
+ album id: + +
+ ) +} + +const mapStateToProps = state => ({ + album: state.album +}) + +const mapDispatchToProps = dispatch => ({ + getOneAlbum: (id) => dispatch( getOneAlbum(id) ) + +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AlbumGetOne) \ No newline at end of file diff --git a/src/components/index/indexConsole/indexConsole.js b/src/components/index/indexConsole/indexConsole.js index d018525..e057a28 100644 --- a/src/components/index/indexConsole/indexConsole.js +++ b/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 = ({
+
+ +
+
+ +
-
+ { consoleUser }