diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js b/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js index e69de29..7c41465 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js +++ b/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 ( +
+
+ title: + + description: + + image: + +
+ ) +} + +const mapStateToProps = state => ({ + user: state.user +}) + +const mapDispatchToProps = dispatch => ({ + createAlbum: (album, token) => dispatch( createAlbum(album, token) ) +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AlbumCreate) \ No newline at end of file diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js b/src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js index 2ad51d0..2d71956 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js +++ b/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 = ({ - album, - getAllAlbum, - consoleHistory, setConsoleHistory, +const AlbumGetAll = ({ + album, + getAllAlbum, + consoleHistory, setConsoleHistory, componentVisible, setComponentVisible, activateConsoleInput }) => { 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( + 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 ) { - mapAlbumsToString() - - setConsoleHistory( consoleHistory + message ) - setComponentVisible( false ) + if (componentVisible && album.albums.length > 0) { + setConsoleHistory(consoleHistory + mapAlbumsToString() + message) + setComponentVisible(false) + setOne( !oneRequest ) setMessage('') - } else if ( componentVisible && album.albums.length <= 0 ) { - setConsoleHistory( consoleHistory + 'empty' ) - setComponentVisible( false ) - setMessage('') - } + } } ) return (
- +
) } - // .albums - // { album.albums.map( singleAlbum => { - // return ( - //
- // │ ├── { singleAlbum.id }
- // │ ├── { singleAlbum.user_id }
- // │ ├── { singleAlbum.title }
- // │ ├── { singleAlbum.url_code } - //
- // ) - // }) - // } - const mapStateToProps = state => ({ album: state.album }) const mapDispatchToProps = dispatch => ({ - getAllAlbum: () => dispatch( getAllAlbum() ) + getAllAlbum: () => dispatch(getAllAlbum()) }) diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/GetOne.js b/src/components/index/indexConsole/commands/fetchCommands/Album/GetOne.js index b607b36..140ddcf 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Album/GetOne.js +++ b/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 ) { - getOneAlbum( inputValue ).catch( - setMessage( 'album not found\n' ) - ) - if ( album.actualAlbum.id >= 0 ) { - setMessage( - message + album.actualAlbum.title + '\n' - + '├── id: ' + album.actualAlbum.id + '\n' - + '├── user id: ' + album.actualAlbum.user_id + '\n' - + '└── url: ' + album.actualAlbum.url_code + '\n' - ) - } + if ( inputValue >= 0 ) { + getOneAlbum( inputValue ).then( response => { + if ( response.detail !== 'Not found.' ){ + setMessage( + response.title + '\n' + + '├── id: ' + response.id + '\n' + + '├── user id: ' + response.user_id + '\n' + + '└── url: ' + response.url_code + '\n' + ) + } else{ + setMessage('album not found') + } + }) } } diff --git a/src/components/index/indexConsole/commands/fetchCommands/Logout.js b/src/components/index/indexConsole/commands/fetchCommands/Logout.js index 70470a3..598bbec 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Logout.js +++ b/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 { diff --git a/src/components/index/indexConsole/indexConsole.js b/src/components/index/indexConsole/indexConsole.js index e057a28..073a959 100644 --- a/src/components/index/indexConsole/indexConsole.js +++ b/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 } /> +
+ +
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 }) }