restore the Create.js file -> Album
parent
03d8f58a05
commit
03f4d8065b
|
|
@ -0,0 +1,132 @@
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
|
||||||
|
import { createAlbum } from '../../../../../../stores/album/duck/operations'
|
||||||
|
import FormGenerator from '../Abstract Utils/FormGenerator'
|
||||||
|
|
||||||
|
|
||||||
|
const AlbumCreate = ({
|
||||||
|
user,
|
||||||
|
createAlbum,
|
||||||
|
consoleHistory, setConsoleHistory,
|
||||||
|
componentVisible, setComponentVisible,
|
||||||
|
activateConsoleInput
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const [message, setMessage] = useState('')
|
||||||
|
const [image, setImage] = useState('')
|
||||||
|
const [imageInfo, setImageInfo] = useState('Drop/Click\nfor upload album image...')
|
||||||
|
|
||||||
|
const titleInput = React.createRef()
|
||||||
|
const descriptionInput = React.createRef()
|
||||||
|
|
||||||
|
let inputList = [
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
name: 'titleAlbum',
|
||||||
|
ref: titleInput
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'text',
|
||||||
|
name: 'descriptionAlbum',
|
||||||
|
ref: descriptionInput
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'file',
|
||||||
|
name: 'imageAlbum',
|
||||||
|
fileType: 'image',
|
||||||
|
dropInfo: imageInfo,
|
||||||
|
setDropInfo: setImageInfo,
|
||||||
|
file: image,
|
||||||
|
setFile: setImage
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const create = async (event) => {
|
||||||
|
event.preventDefault()
|
||||||
|
let title = titleInput.current.value
|
||||||
|
let description = descriptionInput.current.value
|
||||||
|
if ( title !== '' && description !== '' ) {
|
||||||
|
await createFetch(title, description)
|
||||||
|
} if ( description === '') {
|
||||||
|
document.getElementById('descriptionAlbumInput').focus()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const createFetch = async (title, description) => {
|
||||||
|
let album = {
|
||||||
|
user_id: user.id,
|
||||||
|
title: title,
|
||||||
|
description: description,
|
||||||
|
image: image,
|
||||||
|
url_code: generateUrlCode(),
|
||||||
|
}
|
||||||
|
await createAlbum(
|
||||||
|
album,
|
||||||
|
user.token
|
||||||
|
).then( response => {
|
||||||
|
setMessage( response['info'] + '\n' )
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const generateUrlCode = () => {
|
||||||
|
let code = 'op?album='
|
||||||
|
let hash = [
|
||||||
|
'!', '@', '#', '$', '%', '^', '&', '*',
|
||||||
|
'Q', 'W', 'X', 'S', 'q', 'w', 'x', 's'
|
||||||
|
]
|
||||||
|
code +=
|
||||||
|
+ hash[ randomInt(7, 14) ]
|
||||||
|
+ hash[ randomInt(7, 14) ]
|
||||||
|
+ hash[ randomInt(7, 14) ]
|
||||||
|
+ 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 = ''
|
||||||
|
|
||||||
|
setConsoleHistory( consoleHistory + message )
|
||||||
|
setComponentVisible( false )
|
||||||
|
setImage('')
|
||||||
|
setImageInfo('Drop/Click\nfor upload album image...')
|
||||||
|
setMessage('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormGenerator
|
||||||
|
inputList={ inputList }
|
||||||
|
action={ create }
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const mapStateToProps = state => ({
|
||||||
|
user: state.user
|
||||||
|
})
|
||||||
|
|
||||||
|
const mapDispatchToProps = dispatch => ({
|
||||||
|
createAlbum: (album, token) => createAlbum(album, token)
|
||||||
|
})
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(AlbumCreate)
|
||||||
Loading…
Reference in New Issue