add updating Album && fix create bugs

src/components/index/indexConsole/commands/fetchCommands/Album/Create.js

@@ -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)

src/components/index/indexConsole/commands/fetchCommands/Album/Update.js

@@ -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)

src/components/index/indexConsole/indexConsole.js

@@ -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 ||

src/stores/album/duck/operations.js

@@ -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
     )