add delete comositor -> Album && fix bugs

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

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

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

@@ -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++) {
+        for (let i = 0; i < albums.length; i++) {
-            list += '├── ' + album.albums[i].title + '\n'
+            list += '├── ' + albums[i].title + '\n'
-                 + '│   ├── id: ' + album.albums[i].id + '\n'
+                 + '│   ├── id: ' + albums[i].id + '\n'
-                 + '│   ├── user id: ' + album.albums[i].user_id + '\n'
+                 + '│   ├── user id: ' + albums[i].user_id + '\n'
-                 + '│   └── url: ' + album.albums[i].url_code + '\n'
+                 + '│   └── url: ' + albums[i].url_code + '\n'
         }
         return list
     }
@@ -30,8 +30,11 @@ const AlbumGetAll = ({
         () => {
             if (componentVisible && oneRequest === false) {
                 getAllAlbum()
-                    .then( () => {
+                    .then( response => {
-                        setMessage( 'get list success\n' )
+                        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) {
+            if ( message !== '' ) {
-                setConsoleHistory(consoleHistory + mapAlbumsToString() + message)
+                setConsoleHistory(consoleHistory + message)
                 setComponentVisible(false)
                 setOne( !oneRequest )
                 setMessage('')

src/components/index/indexConsole/commands/fetchCommands/Logout.js

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

src/components/index/indexConsole/indexConsole.js

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

src/stores/album/duck/operations.js

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