118 lines
2.9 KiB
JavaScript
118 lines
2.9 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import uuid from 'uuid';
|
|
import { Container, Icon, Input, Segment, List } from 'semantic-ui-react'
|
|
|
|
import DownloadItem from './downloadItem'
|
|
import {push} from './downloader'
|
|
|
|
|
|
function App() {
|
|
const [list, setList] = useState([])
|
|
const [url, setUrl] = useState('')
|
|
const [obj, setObj] = useState({ key: '', url: '' })
|
|
|
|
// console.log('render app ;;;; ', list)
|
|
function updateSt (key, status, mp3) {
|
|
console.log('list :::: ', list)
|
|
setList([...list.map(t => {
|
|
if (t.key === key) {
|
|
t.status = status
|
|
t.mp3 = mp3
|
|
}
|
|
return t
|
|
})])
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (list.length === 0) return
|
|
let key = obj.key
|
|
let url = obj.url
|
|
push(key, url, (key) => {
|
|
updateSt(key, 1, '')
|
|
}, (key, status, mp3) => {
|
|
updateSt(key, status, mp3)
|
|
// }, async () => {
|
|
// // console.log('running :::: ', key)
|
|
// // console.log('list :::: ', list)
|
|
// let success = 0
|
|
// let mp3Url = ''
|
|
// updateSt(key, 1, mp3Url)
|
|
// // setList([...list.map(t => {
|
|
// // if (t.key === key) {
|
|
// // t.status = 1
|
|
// // }
|
|
// // return t
|
|
// // })])
|
|
// try {
|
|
// let result = await axios({
|
|
// method: 'post',
|
|
// url: '/api/youtube/download',
|
|
// data: {
|
|
// url
|
|
// }
|
|
// })
|
|
// mp3Url = result.data.url
|
|
// success = 2
|
|
// } catch(err ) {
|
|
// success = -1
|
|
// }
|
|
// // setList([...list.map(t => {
|
|
// // if (t.key === key) {
|
|
// // t.status = success
|
|
// // t.map = mp3Url
|
|
// // }
|
|
// // return t
|
|
// // })])
|
|
// updateSt(key, success, mp3Url)
|
|
})
|
|
}, [obj])
|
|
|
|
function addToList () {
|
|
let key = uuid.v4()
|
|
const item = { key, url, mp3: '', status: 0 }
|
|
setList([...list, item])
|
|
setObj({ key, url })
|
|
// axios({
|
|
// method: 'post',
|
|
// url: '/api/youtube/download',
|
|
// data: {
|
|
// url
|
|
// }
|
|
// }).then(res => {
|
|
// item.mp3 = res.data.url
|
|
// item.status = 1
|
|
// setList([...list, item])
|
|
// })
|
|
|
|
setUrl('')
|
|
}
|
|
|
|
return (
|
|
<div style={{ paddingTop: '10px' }}>
|
|
<Container textAlign="center">
|
|
<div>
|
|
<Input icon={<Icon name='download' inverted circular link onClick={addToList} />}
|
|
onChange={t => setUrl(t.target.value)}
|
|
onKeyPress={evt => {
|
|
console.log(evt.key)
|
|
if (evt.key === 'Enter') {
|
|
addToList()
|
|
}
|
|
}}
|
|
value={url}
|
|
placeholder='Input URL' />
|
|
</div>
|
|
<Segment stacked>
|
|
<List divided relaxed>
|
|
{
|
|
list.map(t => <DownloadItem key={t.key} url={t.url} mp3={t.mp3} status={t.status} />)
|
|
}
|
|
</List>
|
|
</Segment>
|
|
</Container>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|