upgrade fetch commands -> Album

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

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

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

@@ -4,75 +4,63 @@ import { connect } from 'react-redux'
 import { getAllAlbum } from '../../../../../../stores/album/duck/operations'
 
 
-const AlbumGetAll = ({ 
+const AlbumGetAll = ({
-    album, 
+    album,
-    getAllAlbum, 
+    getAllAlbum,
-    consoleHistory, setConsoleHistory, 
+    consoleHistory, setConsoleHistory,
     componentVisible, setComponentVisible,
     activateConsoleInput
 }) => {
 
     const [message, setMessage] = useState('')
-    
+    const [oneRequest, setOne ] = useState(false)
+
     const mapAlbumsToString = () => {
-        setMessage( '.albums' )
+        let list = '.albums\n'
-        album.albums.map( singleAlbum => {
+        for (let i = 0; i < album.albums.length; i++) {
-                setMessage( message  + '├── ' + singleAlbum.title + '\n'
+            list += '├── ' + album.albums[i].title + '\n'
-                                     + '│   ├── id: ' + singleAlbum.id + '\n' 
+                 + '│   ├── id: ' + album.albums[i].id + '\n'
-                                     + '│   ├── user id: ' + singleAlbum.user_id + '\n'
+                 + '│   ├── user id: ' + album.albums[i].user_id + '\n'
-                                     + '│   └── url: ' + singleAlbum.url_code + '\n'
+                 + '│   └── url: ' + album.albums[i].url_code + '\n'
-                )
+        }
-            }
+        return list
-        )
     }
 
-    useEffect( 
+    useEffect(
         () => {
-            if ( componentVisible ) {
+            if (componentVisible && oneRequest === false) {
                 getAllAlbum()
+                    .then( () => {
+                        setMessage( 'get list success\n' )
+                    }).catch( () => {
+                        setMessage( 'get list failed\n' )
+                    })
+                setOne( !oneRequest )
             } else {
-                activateConsoleInput()         
+                activateConsoleInput()
             }
-            if ( componentVisible && album.albums.length > 0 ) {
+            if (componentVisible && album.albums.length > 0) {
-                mapAlbumsToString()
+                setConsoleHistory(consoleHistory + mapAlbumsToString() + message)
-
+                setComponentVisible(false)
-                setConsoleHistory( consoleHistory + message )
+                setOne( !oneRequest )
-                setComponentVisible( false )
                 setMessage('')
-            } else if ( componentVisible && album.albums.length <= 0 ) {
+            } 
-                setConsoleHistory( consoleHistory + 'empty' )
-                setComponentVisible( false )
-                setMessage('')
-            }
         }
     )
 
     return (
         <div>
-            
+
         </div>
     )
 }
 
-            // .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
 })
 
 const mapDispatchToProps = dispatch => ({
-    getAllAlbum: () => dispatch( getAllAlbum() )
+    getAllAlbum: () => dispatch(getAllAlbum())
 
 })
 

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

@@ -20,18 +20,19 @@ const AlbumGetOne = ({
         event.preventDefault()
         let inputValue = getOneInput.current.value
         setConsoleHistory( consoleHistory + 'album id: ' + inputValue + '\n')
-        if ( inputValue > 0 ) {
+        if ( inputValue >= 0 ) {
-            getOneAlbum( inputValue ).catch(
+            getOneAlbum( inputValue ).then( response => {
-                setMessage( 'album not found\n' )
+                if ( response.detail !== 'Not found.' ){
-            )
+                    setMessage(
-            if ( album.actualAlbum.id >= 0 ) {
+                        response.title + '\n'
-                setMessage( 
+                            + '├── id: ' + response.id + '\n' 
-                    message + album.actualAlbum.title + '\n'
+                            + '├── user id: ' + response.user_id + '\n'
-                            + '├── id: ' + album.actualAlbum.id + '\n' 
+                            + '└── url: ' + response.url_code + '\n'
-                            + '├── user id: ' + album.actualAlbum.user_id + '\n'
+                    )
-                            + '└── url: ' + album.actualAlbum.url_code + '\n'
+                } else{
-                )
+                    setMessage('album not found')
-            }
+                }
+            })
         }
     }
 

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

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

src/components/index/indexConsole/indexConsole.js

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

src/stores/album/duck/operations.js

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