upgrade fetch commands -> Album
parent
9a6e68c54b
commit
7b2b36f839
|
|
@ -0,0 +1,131 @@
|
|||
import React, { useState, useEffect } from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
|
||||
import { createAlbum } from '../../../../../../stores/album/duck/operations'
|
||||
|
||||
|
||||
const AlbumCreate = ({
|
||||
user,
|
||||
createAlbum,
|
||||
consoleHistory, setConsoleHistory,
|
||||
componentVisible, setComponentVisible,
|
||||
activateConsoleInput
|
||||
}) => {
|
||||
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const titleInput = React.createRef()
|
||||
const descriptionInput = React.createRef()
|
||||
const imageInput = React.createRef()
|
||||
|
||||
const create = (event) => {
|
||||
event.preventDefault()
|
||||
let title = titleInput.current.value
|
||||
let description = descriptionInput.current.value
|
||||
let image = imageInput.current.value
|
||||
if ( title !== '' && description !== '' && image !== '' ) {
|
||||
createFetch(title, description, image)
|
||||
} else if ( description !== '' && image !== '' ) {
|
||||
document.getElementById('descriptionAlbumInput').focus()
|
||||
} else if ( image !== '' ) {
|
||||
document.getElementById('imageAlbumInput').focus()
|
||||
}
|
||||
}
|
||||
|
||||
const createFetch = async (title, description, image) => {
|
||||
let album = {
|
||||
user_id: user.id,
|
||||
title: title,
|
||||
description: description,
|
||||
image: image,
|
||||
url_code: generateUrlCode(),
|
||||
}
|
||||
await createAlbum(
|
||||
album,
|
||||
user.token
|
||||
).then(
|
||||
setMessage('album create success')
|
||||
).catch(
|
||||
setMessage('album create failed')
|
||||
)
|
||||
}
|
||||
|
||||
const generateUrlCode = () => {
|
||||
let code = 'op?album='
|
||||
let hash = [
|
||||
'!', '@', '#', '$', '%', '^', '&', '*',
|
||||
'Q', 'W', 'X', 'S', 'q', 'w', 'x', 's'
|
||||
]
|
||||
code +=
|
||||
+ hash[ randomInt(7, 15) ]
|
||||
+ hash[ randomInt(7, 15) ]
|
||||
+ hash[ randomInt(7, 15) ]
|
||||
+ hash[ randomInt(0, 7) ]
|
||||
+ hash[ randomInt(0, 7) ]
|
||||
+ hash[ randomInt(0, 7) ]
|
||||
+ randomInt(0, 9)
|
||||
+ randomInt(0, 9)
|
||||
+ randomInt(0, 9)
|
||||
return code
|
||||
}
|
||||
|
||||
const randomInt = (min, max) => {
|
||||
return min + Math.floor((max - min) * Math.random())
|
||||
}
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
if ( componentVisible ) {
|
||||
document.getElementById('titleAlbumInput').focus()
|
||||
} else {
|
||||
activateConsoleInput()
|
||||
}
|
||||
if ( message !== '' ) {
|
||||
|
||||
titleInput.current.value = ''
|
||||
descriptionInput.current.value = ''
|
||||
imageInput.current.value = ''
|
||||
|
||||
setConsoleHistory( consoleHistory + message )
|
||||
setComponentVisible( false )
|
||||
setMessage('')
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={ create }>
|
||||
title:
|
||||
<input
|
||||
id='titleAlbumInput'
|
||||
autoComplete='off'
|
||||
ref={ titleInput }
|
||||
/>
|
||||
description:
|
||||
<input
|
||||
id='descriptionAlbumInput'
|
||||
autoComplete='off'
|
||||
ref={ descriptionInput }
|
||||
/>
|
||||
image:
|
||||
<input
|
||||
id='imageAlbumInput'
|
||||
autoComplete='off'
|
||||
ref={ imageInput }
|
||||
/>
|
||||
<button type='submit' />
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: state.user
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
createAlbum: (album, token) => dispatch( createAlbum(album, token) )
|
||||
})
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AlbumCreate)
|
||||
|
|
@ -13,35 +13,36 @@ const AlbumGetAll = ({
|
|||
}) => {
|
||||
|
||||
const [message, setMessage] = useState('')
|
||||
const [oneRequest, setOne ] = useState(false)
|
||||
|
||||
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'
|
||||
)
|
||||
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'
|
||||
}
|
||||
)
|
||||
return list
|
||||
}
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
if ( componentVisible ) {
|
||||
if (componentVisible && oneRequest === false) {
|
||||
getAllAlbum()
|
||||
.then( () => {
|
||||
setMessage( 'get list success\n' )
|
||||
}).catch( () => {
|
||||
setMessage( 'get list failed\n' )
|
||||
})
|
||||
setOne( !oneRequest )
|
||||
} 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' )
|
||||
setConsoleHistory(consoleHistory + mapAlbumsToString() + message)
|
||||
setComponentVisible(false)
|
||||
setOne( !oneRequest )
|
||||
setMessage('')
|
||||
}
|
||||
}
|
||||
|
|
@ -54,19 +55,6 @@ const AlbumGetAll = ({
|
|||
)
|
||||
}
|
||||
|
||||
// .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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -20,18 +20,19 @@ const AlbumGetOne = ({
|
|||
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 ) {
|
||||
if ( inputValue >= 0 ) {
|
||||
getOneAlbum( inputValue ).then( response => {
|
||||
if ( response.detail !== 'Not found.' ){
|
||||
setMessage(
|
||||
message + album.actualAlbum.title + '\n'
|
||||
+ '├── id: ' + album.actualAlbum.id + '\n'
|
||||
+ '├── user id: ' + album.actualAlbum.user_id + '\n'
|
||||
+ '└── url: ' + album.actualAlbum.url_code + '\n'
|
||||
response.title + '\n'
|
||||
+ '├── id: ' + response.id + '\n'
|
||||
+ '├── user id: ' + response.user_id + '\n'
|
||||
+ '└── url: ' + response.url_code + '\n'
|
||||
)
|
||||
} else{
|
||||
setMessage('album not found')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ const Logout = ({
|
|||
if ( componentVisible && oneRequest === false ) {
|
||||
deleteAuth(user.token)
|
||||
.then( () => {
|
||||
setMessage( 'logout success' )
|
||||
setMessage( 'logout success\n' )
|
||||
}).catch( () => {
|
||||
setMessage( 'logout failed' )
|
||||
setMessage( 'logout failed\n' )
|
||||
})
|
||||
setOne( !oneRequest )
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ import Logout from './commands/fetchCommands/Logout'
|
|||
|
||||
import AlbumGetAll from './commands/fetchCommands/Album/GetAll'
|
||||
import AlbumGetOne from './commands/fetchCommands/Album/GetOne'
|
||||
import AlbumCreate from './commands/fetchCommands/Album/Create'
|
||||
|
||||
import '../../../styles/general.scss'
|
||||
|
||||
import { deleteAuth } from '../../../stores/user/duck/operations'
|
||||
import { createAlbum } from '../../../stores/album/duck/operations'
|
||||
|
||||
const IndexConsole = ({
|
||||
user,
|
||||
|
|
@ -69,6 +71,9 @@ const IndexConsole = ({
|
|||
} else if ( inputValue === 'get one album' ) {
|
||||
setConsoleHistory( consoleHistory + consoleUser )
|
||||
setAlbumGetOne( !albumGetOne )
|
||||
} else if ( inputValue === 'create album' ) {
|
||||
setConsoleHistory( consoleHistory + consoleUser )
|
||||
setAlbumCreate( !albumCreate )
|
||||
} else if ( inputValue === 'clean' ){
|
||||
setConsoleHistory( '' )
|
||||
} else {
|
||||
|
|
@ -153,6 +158,15 @@ const IndexConsole = ({
|
|||
activateConsoleInput={ activateInput }
|
||||
/>
|
||||
</div>
|
||||
<div style={ checkVisible( albumCreate ) }>
|
||||
<AlbumCreate
|
||||
consoleHistory={ consoleHistory }
|
||||
setConsoleHistory={ setConsoleHistory }
|
||||
componentVisible={ albumCreate }
|
||||
setComponentVisible={ setAlbumCreate }
|
||||
activateConsoleInput={ activateInput }
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<form onSubmit={ detectCommand } style={ checkVisible( !(
|
||||
register || login || logout ||
|
||||
|
|
|
|||
|
|
@ -11,14 +11,16 @@ export const getAllAlbum = () => async (dispatch) => {
|
|||
endpoint
|
||||
).then( response => {
|
||||
dispatch( actions.getAll( response ) )
|
||||
return response
|
||||
})
|
||||
}
|
||||
|
||||
export const getOneAlbum = (id) => async( dispatch ) => {
|
||||
return await AppService._getOne(
|
||||
endpoint + id
|
||||
endpoint + id + '/'
|
||||
).then( response => {
|
||||
dispatch( actions.getOne( response ) )
|
||||
return response
|
||||
})
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue