tbs093a
/
music.service.frontend
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

upgrade AppService exceptions + refactoring

develop
TBS093A 2020-08-11 18:24:09 +02:00
parent 9dd88d8204
commit c44da28f4f
8 changed files with 137 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/index/indexConsole/commands/fetchCommands/Album/Create.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import { createAlbum } from '../../../../../../stores/album/duck/operations'
import { progressStream } from '../../../../../../stores/AppService'
const AlbumCreate = ({
user,
@ -15,8 +15,7 @@ const AlbumCreate = ({
const [message, setMessage] = useState('')
const [image, setImage] = useState('')
const [imageInfo, setImageInfo] = useState('Drop/Click\nfor upload album image...')
const [progress, setProgress] = useState('')
const titleInput = React.createRef()
const descriptionInput = React.createRef()
@ -42,11 +41,9 @@ const AlbumCreate = ({
await createAlbum(
album,
user.token
).then(
setMessage('album create success')
).catch(
setMessage('album create failed')
)
).then( response => {
setMessage( response['info'] )
})
}
const generateUrlCode = () => {
@ -104,7 +101,6 @@ const AlbumCreate = ({
event.preventDefault()
let data = event.target.files[0]
setImage( await toBase64( data ) )
// uploadListener( data )
setImageInfos(data.name, data.size)
}
@ -113,22 +109,9 @@ const AlbumCreate = ({
event.persist()
let data = event.dataTransfer.files[0]
setImage( await toBase64( data ) )
// uploadListener( data )
setImageInfos(data.name, data.size)
}
const uploadListener = async ( data ) => {
let progress = new Response(data).arrayBuffer()
console.log(progress)
await uploadProgressBar( progress, data.size )
}
const uploadProgressBar = async ( progress, size ) => {
let percent = progress / size
setProgress('upload image [____________________]')
setProgress( progress + '#' + percent)
}
const setImageInfos = (name, size) => {
setImageInfo(
'name: "'
@ -157,7 +140,7 @@ const AlbumCreate = ({
autoComplete='off'
ref={ descriptionInput }
/> <br />
<pre style={ {marginTop: '35px', marginLeft: '40px'} }>
<pre style={ {marginTop: '25px', marginLeft: '40px'} }>
{ imageInfo }
</pre>
<input style={ {marginTop: '-55px'} }
@ -167,7 +150,6 @@ const AlbumCreate = ({
autoComplete='off'
onChange={ event => onLoadFile(event) }
/> <br />
{ progress }
<button type='submit' />
</form>
</div>

8
src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js
View File

@ -21,11 +21,10 @@ const AlbumGetAll = ({
getAllAlbum()
.then( response => {
setMessage(
mapAlbumsToString( response )
+ 'get list success\n'
mapAlbumsToString( response['response'] )
+ response['info']
)
}).catch( () => {
setMessage( 'get list failed\n' )
console.log( response )
})
setOne( !oneRequest )
} else {
@ -59,7 +58,6 @@ const AlbumGetAll = ({
return (
<div>
</div>
)
}

4
src/pages/index.js
View File

@ -3,8 +3,8 @@ import IndexConsole from '../components/index/indexConsole/indexConsole'
import { store } from '../stores/store'
import { Provider } from 'react-redux'
import LogRocket from 'logrocket';
LogRocket.init('ugbdf9/music-service');
// import LogRocket from 'logrocket';
// LogRocket.init('ugbdf9/music-service');
const IndexPage = () => (
<Provider store={ store }>

92
src/stores/AppService.js
View File

@ -34,36 +34,55 @@ const _delete = async (endpoint, token) => {
// Fetch methods
const responseGD = async (address, method, token) => {
const response = await fetch(address, {
method: method,
credentials: 'same-origin',
headers: {
"Authorization": token,
"X-CSRFToken": csrftoken,
"accept": "application/json",
"Content-Type": "application/json"
}
}).then( response => {
return progressStream( response )
})
return response.json()
try {
const response = await fetch(address, {
method: method,
credentials: 'same-origin',
headers: {
"Authorization": token,
"X-CSRFToken": csrftoken,
"accept": "application/json",
"Content-Type": "application/json"
}
})
return await responseExceptions( await response.json() )
} catch ( error ) {
return { info: error }
}
}
const responseCRU = async (address, method, body, token) => {
const response = await fetch(address, {
method: method,
credentials: 'same-origin',
body: JSON.stringify(body),
headers: {
"Authorization": token,
"X-CSRFToken": csrftoken,
"accept": "application/json",
"Content-Type": "application/json"
try {
const response = await fetch(address, {
method: method,
credentials: 'same-origin',
body: JSON.stringify(body),
headers: {
"Authorization": token,
"X-CSRFToken": csrftoken,
"accept": "application/json",
"Content-Type": "application/json"
}
})
return await responseExceptions( await response.json() )
} catch ( error ) {
return { info: error }
}
}
const responseExceptions = async ( response ) => {
try {
//progressStream( response )
return {
response: response,
info: 'operation success'
}
}).then( response => {
return progressStream( response )
})
return response.json()
} catch {
return {
response: response,
info: 'operation failed'
}
}
}
// Get CSRF Token
@ -90,7 +109,7 @@ const csrftoken = getCookie('csrftoken')
* only use with fetch API in `then` statement
* @param response - is a response from fetch
*/
const progressStream = (response) => {
export const progressStream = (response) => {
const contentLength = response.headers.get('content-length')
if (!contentLength)
throw Error('Content-Length response header unavailable')
@ -105,17 +124,18 @@ const progressStream = (response) => {
reader.read()
.then(({ done, value }) => {
if (done) {
controller.close();
return;
controller.close()
return
}
loaded += value.byteLength;
console.log({ loaded, total })
controller.enqueue(value);
read();
}).catch(error => {
console.error(error);
controller.error(error)
loaded += value.byteLength
console.log( loaded / total * 100 )
controller.enqueue(value)
read()
})
// .catch(error => {
// console.error(error)
// controller.error(error)
// })
}
}
})

21
src/stores/album/duck/operations.js
View File

@ -29,7 +29,9 @@ export const createAlbum = async (album, token) => {
endpoint,
album,
token
)
).then( response => {
return response
})
}
export const updateAlbum = async (id, album, token) => {
@ -37,14 +39,18 @@ export const updateAlbum = async (id, album, token) => {
endpoint + id + '/',
album,
token
)
).then( response => {
return response
})
}
export const deleteAlbum = async (id, token) => {
return await AppService._delete(
endpoint + id + '/',
token
)
).then( response => {
return response
})
}
// Album Ratings CRUD
@ -54,6 +60,7 @@ export const getAllAlbumRating = (id) => async ( dispatch ) => {
endpoint + id + '/ratings/'
).then( response => {
dispatch( actions.getRatings( response ) )
return response
})
}
@ -62,12 +69,16 @@ export const createAlbumRating = (album_id, rating, token) => async ( dispatch )
endpoint + album_id + '/rating/',
rating,
token
)
).then( response => {
return response
})
}
export const deleteAlbumRating = (album_id, rating_id, token) => async ( dispatch ) => {
return await AppService._delete(
endpoint + album_id + '/rating/' + rating_id,
token
)
).then( response => {
return response
})
}

4
src/stores/loadStore.js
View File

@ -17,7 +17,7 @@ export const loadState = () => {
try {
const serializedState = JSON.stringify(state);
localStorage.setItem('state', serializedState);
} catch (err) {
console.log('save in local storage error');
} catch ( error ) {
console.log( error );
}
};

102
src/stores/user/duck/operations.js
View File

@ -15,79 +15,81 @@ export const postAuth = (username, password) => async (dispatch) => {
username: username,
password: password
}
try {
return await AppService._post(
endpoint + 'auth',
body,
AppService.defaultToken
).then( response => {
try {
serviceUser = {
id: response.user.id,
username: response.user.username,
email: response.user.email,
ip: response.user.ip,
city: response.user.city,
country: response.user.country,
token: response.Authorization
}
dispatch(actions.login(serviceUser))
return { error: 'login success' }
} catch {
return { error: 'login failed' }
return await AppService._post(
endpoint + 'auth',
body,
AppService.defaultToken
).then( response => {
try {
serviceUser = {
id: response.user.id,
username: response.user.username,
email: response.user.email,
ip: response.user.ip,
city: response.user.city,
country: response.user.country,
token: response.Authorization
}
})
} catch {
return { error: 'connection failed' }
}
dispatch(actions.login(serviceUser))
return { error: 'login success' }
} catch {
return { error: 'login failed' }
}
})
}
export const deleteAuth = (token) => async (dispatch) => {
try {
response = await AppService._delete(
endpoint + 'auth',
token
).then( () => {
response = await AppService._delete(
endpoint + 'auth',
token
).then( () => {
try {
dispatch(actions.logout())
return { error: 'logout success'}
})
} catch {
return { error: 'connection failed' }
}
} catch {
return { error: 'logout failed' }
}
})
}
// User CRUD
export const registerUser = async (user) => {
response = await AppService._post(
return await AppService._post(
endpoint,
user,
AppService.defaultToken
)
).then( response => {
return response
})
}
export const updateUser = (user, id, token) => async (dispatch) => {
response = await AppService._patch(
return await AppService._patch(
endpoint + id,
user,
token
)
serviceUser = {
id: response.user.id,
username: response.user.username,
email: response.user.email,
ip: response.user.ip,
city: response.user.city,
country: response.user.country,
token: token
}
dispatch(actions.login(serviceUser))
).then( response => {
serviceUser = {
id: response.user.id,
username: response.user.username,
email: response.user.email,
ip: response.user.ip,
city: response.user.city,
country: response.user.country,
token: token
}
dispatch(actions.login(serviceUser))
return response
})
}
export const deleteUser = async (id, token) => {
response = await AppService._delete(
return await AppService._delete(
endpoint + id,
token
)
deleteAuth(token)
).then( response => {
deleteAuth(token)
return response
})
}

1
src/styles/general.scss
View File

@ -65,7 +65,6 @@ body {
font-size: 16px;
border: 0px;
margin-left: 5px;
margin-top: 10px;
}
input:focus{
outline: none;