tbs093a
/
music.service.frontend
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

add updating Album && fix create bugs

develop
TBS093A 2020-07-31 19:04:20 +02:00
parent 7b2b36f839
commit 6598006210
4 changed files with 147 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/index/indexConsole/commands/fetchCommands/Album/Create.js
View File

@ -25,9 +25,9 @@ const AlbumCreate = ({
let image = imageInput.current.value
if ( title !== '' && description !== '' && image !== '' ) {
createFetch(title, description, image)
} else if ( description !== '' && image !== '' ) {
} if ( description !== '' && image !== '' ) {
document.getElementById('descriptionAlbumInput').focus()
} else if ( image !== '' ) {
} if ( image !== '' ) {
document.getElementById('imageAlbumInput').focus()
}
}
@ -86,7 +86,7 @@ const AlbumCreate = ({
descriptionInput.current.value = ''
imageInput.current.value = ''
setConsoleHistory( consoleHistory + message )
setConsoleHistory( consoleHistory + message + '\n' )
setComponentVisible( false )
setMessage('')
}
@ -125,7 +125,7 @@ const mapStateToProps = state => ({
})
const mapDispatchToProps = dispatch => ({
createAlbum: (album, token) => dispatch( createAlbum(album, token) )
createAlbum: (album, token) => createAlbum(album, token)
})
export default connect(mapStateToProps, mapDispatchToProps)(AlbumCreate)

128
src/components/index/indexConsole/commands/fetchCommands/Album/Update.js
View File

@ -0,0 +1,128 @@
import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { updateAlbum } from '../../../../../../stores/album/duck/operations'
const AlbumUpdate = ({
user,
updateAlbum,
consoleHistory, setConsoleHistory,
componentVisible, setComponentVisible,
activateConsoleInput
}) => {
const [message, setMessage] = useState('')
const idInput = React.createRef()
const userInput = React.createRef()
const titleInput = React.createRef()
const descriptionInput = React.createRef()
const imageInput = React.createRef()
const update = (event) => {
event.preventDefault()
let id = idInput.current.value
let userID = userInput.current.value
let title = titleInput.current.value
let description = descriptionInput.current.value
let image = imageInput.current.value
if ( id !== '' ) {
updateFetch(id, userID, title, description, image)
} else {
document.getElementById('idUpdateAlbumInput').focus()
}
}
const updateFetch = async (id, userID, title, description, image) => {
let album = {}
if ( userID !== '' )
album['user_id'] = userID
if ( title !== '' )
album['title'] = title
if ( description !== '' )
album['description'] = description
if ( image !== '' )
album['image'] = image
await updateAlbum(
id,
album,
user.token
).then( () => {
setMessage('album update success')
}).catch( () => {
setMessage('album update failed')
})
}
useEffect(
() => {
if ( componentVisible ) {
document.getElementById('idUpdateAlbumInput').focus()
} else {
activateConsoleInput()
}
if ( message !== '' ) {
userInput.current.value = ''
titleInput.current.value = ''
descriptionInput.current.value = ''
imageInput.current.value = ''
setConsoleHistory( consoleHistory + message + '\n' )
setComponentVisible( false )
setMessage('')
}
}
)
return (
<div>
<form onSubmit={ update }>
id:
<input
id='idUpdateAlbumInput'
autoComplete='off'
ref={ idInput }
/> <br />
user_id:
<input
id='userUpdateAlbumInput'
autoComplete='off'
ref={ userInput }
/> <br />
title:
<input
id='titleUpdateAlbumInput'
autoComplete='off'
ref={ titleInput }
/> <br />
description:
<input
id='descriptionUpdateAlbumInput'
autoComplete='off'
ref={ descriptionInput }
/> <br />
image:
<input
id='imageUpdateAlbumInput'
autoComplete='off'
ref={ imageInput }
/>
<button type='submit' />
</form>
</div>
)
}
const mapStateToProps = state => ({
user: state.user
})
const mapDispatchToProps = dispatch => ({
updateAlbum: (id, album, token) => updateAlbum(id, album, token)
})
export default connect(mapStateToProps, mapDispatchToProps)(AlbumUpdate)

14
src/components/index/indexConsole/indexConsole.js
View File

@ -8,11 +8,11 @@ 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 AlbumUpdate from './commands/fetchCommands/Album/Update'
import '../../../styles/general.scss'
import { deleteAuth } from '../../../stores/user/duck/operations'
import { createAlbum } from '../../../stores/album/duck/operations'
const IndexConsole = ({
user,
@ -74,6 +74,9 @@ const IndexConsole = ({
} else if ( inputValue === 'create album' ) {
setConsoleHistory( consoleHistory + consoleUser )
setAlbumCreate( !albumCreate )
} else if ( inputValue === 'update album' ) {
setConsoleHistory( consoleHistory + consoleUser )
setAlbumUpdate( !albumUpdate )
} else if ( inputValue === 'clean' ){
setConsoleHistory( '' )
} else {
@ -167,6 +170,15 @@ const IndexConsole = ({
activateConsoleInput={ activateInput }
/>
</div>
<div style={ checkVisible( albumUpdate ) }>
<AlbumUpdate
consoleHistory={ consoleHistory }
setConsoleHistory={ setConsoleHistory }
componentVisible={ albumUpdate }
setComponentVisible={ setAlbumUpdate }
activateConsoleInput={ activateInput }
/>
</div>
</div>
<form onSubmit={ detectCommand } style={ checkVisible( !(
register || login || logout ||

4
src/stores/album/duck/operations.js
View File

@ -32,9 +32,9 @@ export const createAlbum = async (album, token) => {
)
}
export const updateAlbum = async (album, token) => {
export const updateAlbum = async (id, album, token) => {
return await AppService._patch(
endpoint,
endpoint + id + '/',
album,
token
)