add all gets Album && integrate with console
parent
e4491fb43d
commit
9a6e68c54b
|
|
@ -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)
|
||||
|
|
@ -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)
|
||||
|
|
@ -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>
|
||||
<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) ) }>
|
||||
<form onSubmit={ detectCommand } style={ checkVisible( !(
|
||||
register || login || logout ||
|
||||
albumGetAll || albumGetOne || albumCreate || albumUpdate || albumDelete
|
||||
) ) }>
|
||||
{ consoleUser }
|
||||
<input
|
||||
id='consoleInput'
|
||||
|
|
|
|||
Loading…
Reference in New Issue