add delete comositor -> Album && fix bugs
parent
6598006210
commit
5f3e045a7b
|
|
@ -0,0 +1,79 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
import { deleteAlbum } from '../../../../../../stores/album/duck/operations'
|
||||
|
||||
|
||||
const AlbumDelete = ({
|
||||
user,
|
||||
deleteAlbum,
|
||||
consoleHistory, setConsoleHistory,
|
||||
componentVisible, setComponentVisible,
|
||||
activateConsoleInput
|
||||
}) => {
|
||||
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const idInput = React.createRef()
|
||||
|
||||
const deleteFetch = (event) => {
|
||||
event.preventDefault()
|
||||
let id = idInput.current.value
|
||||
setConsoleHistory( consoleHistory + 'album id: ' + id + '\n')
|
||||
if ( id >= 0 ) {
|
||||
deleteAlbum(
|
||||
id,
|
||||
user.token
|
||||
).then( response => {
|
||||
if ( response.detail !== 'Not found.' ){
|
||||
setMessage('album delete success')
|
||||
} else{
|
||||
setMessage('album delete failed')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
if ( componentVisible ) {
|
||||
document.getElementById('idAlbumDeleteInput').focus()
|
||||
} else {
|
||||
activateConsoleInput()
|
||||
}
|
||||
if ( message !== '' ) {
|
||||
|
||||
idInput.current.value = ''
|
||||
|
||||
setConsoleHistory( consoleHistory + message + '\n' )
|
||||
setComponentVisible( false )
|
||||
setMessage('')
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={ deleteFetch }>
|
||||
album id:
|
||||
<input
|
||||
id='idAlbumDeleteInput'
|
||||
autoComplete='off'
|
||||
ref={ idInput }
|
||||
/>
|
||||
<button type='submit' />
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: state.user
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
deleteAlbum: (id, token) => deleteAlbum(id, token)
|
||||
|
||||
})
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AlbumDelete)
|
||||
|
|
@ -15,13 +15,13 @@ const AlbumGetAll = ({
|
|||
const [message, setMessage] = useState('')
|
||||
const [oneRequest, setOne ] = useState(false)
|
||||
|
||||
const mapAlbumsToString = () => {
|
||||
const mapAlbumsToString = (albums) => {
|
||||
let list = '.albums\n'
|
||||
for (let i = 0; i < album.albums.length; i++) {
|
||||
list += '├── ' + album.albums[i].title + '\n'
|
||||
+ '│ ├── id: ' + album.albums[i].id + '\n'
|
||||
+ '│ ├── user id: ' + album.albums[i].user_id + '\n'
|
||||
+ '│ └── url: ' + album.albums[i].url_code + '\n'
|
||||
for (let i = 0; i < albums.length; i++) {
|
||||
list += '├── ' + albums[i].title + '\n'
|
||||
+ '│ ├── id: ' + albums[i].id + '\n'
|
||||
+ '│ ├── user id: ' + albums[i].user_id + '\n'
|
||||
+ '│ └── url: ' + albums[i].url_code + '\n'
|
||||
}
|
||||
return list
|
||||
}
|
||||
|
|
@ -30,8 +30,11 @@ const AlbumGetAll = ({
|
|||
() => {
|
||||
if (componentVisible && oneRequest === false) {
|
||||
getAllAlbum()
|
||||
.then( () => {
|
||||
setMessage( 'get list success\n' )
|
||||
.then( response => {
|
||||
setMessage(
|
||||
mapAlbumsToString( response )
|
||||
+ 'get list success\n'
|
||||
)
|
||||
}).catch( () => {
|
||||
setMessage( 'get list failed\n' )
|
||||
})
|
||||
|
|
@ -39,8 +42,8 @@ const AlbumGetAll = ({
|
|||
} else {
|
||||
activateConsoleInput()
|
||||
}
|
||||
if (componentVisible && album.albums.length > 0) {
|
||||
setConsoleHistory(consoleHistory + mapAlbumsToString() + message)
|
||||
if ( message !== '' ) {
|
||||
setConsoleHistory(consoleHistory + message)
|
||||
setComponentVisible(false)
|
||||
setOne( !oneRequest )
|
||||
setMessage('')
|
||||
|
|
|
|||
|
|
@ -19,16 +19,16 @@ const Logout = ({
|
|||
if ( componentVisible && oneRequest === false ) {
|
||||
deleteAuth(user.token)
|
||||
.then( () => {
|
||||
setMessage( 'logout success\n' )
|
||||
setMessage( 'logout success' )
|
||||
}).catch( () => {
|
||||
setMessage( 'logout failed\n' )
|
||||
setMessage( 'logout failed' )
|
||||
})
|
||||
setOne( !oneRequest )
|
||||
} else {
|
||||
activateConsoleInput()
|
||||
}
|
||||
if ( message !== '' ) {
|
||||
setConsoleHistory( consoleHistory + message )
|
||||
setConsoleHistory( consoleHistory + message + '\n' )
|
||||
setComponentVisible( false )
|
||||
setOne( false )
|
||||
setMessage('')
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import AlbumGetAll from './commands/fetchCommands/Album/GetAll'
|
|||
import AlbumGetOne from './commands/fetchCommands/Album/GetOne'
|
||||
import AlbumCreate from './commands/fetchCommands/Album/Create'
|
||||
import AlbumUpdate from './commands/fetchCommands/Album/Update'
|
||||
import AlbumDelete from './commands/fetchCommands/Album/Delete'
|
||||
|
||||
import '../../../styles/general.scss'
|
||||
|
||||
|
|
@ -77,6 +78,9 @@ const IndexConsole = ({
|
|||
} else if ( inputValue === 'update album' ) {
|
||||
setConsoleHistory( consoleHistory + consoleUser )
|
||||
setAlbumUpdate( !albumUpdate )
|
||||
} else if ( inputValue === 'delete album' ) {
|
||||
setConsoleHistory( consoleHistory + consoleUser )
|
||||
setAlbumDelete( !albumDelete )
|
||||
} else if ( inputValue === 'clean' ){
|
||||
setConsoleHistory( '' )
|
||||
} else {
|
||||
|
|
@ -179,6 +183,15 @@ const IndexConsole = ({
|
|||
activateConsoleInput={ activateInput }
|
||||
/>
|
||||
</div>
|
||||
<div style={ checkVisible( albumDelete ) }>
|
||||
<AlbumDelete
|
||||
consoleHistory={ consoleHistory }
|
||||
setConsoleHistory={ setConsoleHistory }
|
||||
componentVisible={ albumDelete }
|
||||
setComponentVisible={ setAlbumDelete }
|
||||
activateConsoleInput={ activateInput }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={ detectCommand } style={ checkVisible( !(
|
||||
register || login || logout ||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export const updateAlbum = async (id, album, token) => {
|
|||
|
||||
export const deleteAlbum = async (id, token) => {
|
||||
return await AppService._delete(
|
||||
endpoint + id,
|
||||
endpoint + id + '/',
|
||||
token
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue