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

install logRocket && upgrade fetch -> progressStream method in AppService

develop
TBS093A 2020-08-11 13:19:34 +02:00
parent 64e5cafb7b
commit 9dd88d8204
5 changed files with 107 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -11205,6 +11205,11 @@
"resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz",
"integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA=="
},
"logrocket": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/logrocket/-/logrocket-1.0.10.tgz",
"integrity": "sha512-7xi/Yla2S2QSqj7wvALUWQXrqWNIOuDpRRVFVbXC16ZsM+h+RRSMSgRJ88+8rE2/eMHIHXte+ok+AbzjtLYqWA=="
},
"longest": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",

1
package.json
View File

@ -14,6 +14,7 @@
"gatsby-plugin-sharp": "^2.6.0",
"gatsby-source-filesystem": "^2.3.0",
"gatsby-transformer-sharp": "^2.5.0",
"logrocket": "^1.0.10",
"mobx": "^5.15.4",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",

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

@ -104,7 +104,7 @@ const AlbumCreate = ({
event.preventDefault()
let data = event.target.files[0]
setImage( await toBase64( data ) )
uploadListener( data )
// uploadListener( data )
setImageInfos(data.name, data.size)
}
@ -113,7 +113,7 @@ const AlbumCreate = ({
event.persist()
let data = event.dataTransfer.files[0]
setImage( await toBase64( data ) )
uploadListener( data )
// uploadListener( data )
setImageInfos(data.name, data.size)
}

3
src/pages/index.js
View File

@ -3,6 +3,9 @@ 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');
const IndexPage = () => (
<Provider store={ store }>
<IndexConsole />

140
src/stores/AppService.js
View File

@ -1,51 +1,10 @@
import { address } from './APIAddress'
const getCookie = (name) => {
if (!document.cookie) {
return null;
}
const token = document.cookie.split(';')
.map(c => c.trim())
.filter(c => c.startsWith(name + '='));
if (token.length === 0) {
return null;
}
return decodeURIComponent(token[0].split('=')[1]);
}
const csrftoken = getCookie('csrftoken')
// session Token
let defaultToken = 'empty token'
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"
}
})
return response.json()
}
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"
}
})
return response.json()
}
// CRUD methods
const _getList = async (endpoint) => {
return await responseGD(address + endpoint, 'GET', defaultToken)
@ -71,6 +30,98 @@ const _delete = async (endpoint, token) => {
return await responseGD(address + endpoint, 'DELETE', token)
}
// Utils
// 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()
}
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"
}
}).then( response => {
return progressStream( response )
})
return response.json()
}
// Get CSRF Token
const getCookie = (name) => {
if (!document.cookie) {
return null;
}
const token = document.cookie.split(';')
.map(c => c.trim())
.filter(c => c.startsWith(name + '='));
if (token.length === 0) {
return null;
}
return decodeURIComponent(token[0].split('=')[1]);
}
const csrftoken = getCookie('csrftoken')
// Get progress stream
/**
* only use with fetch API in `then` statement
* @param response - is a response from fetch
*/
const progressStream = (response) => {
const contentLength = response.headers.get('content-length')
if (!contentLength)
throw Error('Content-Length response header unavailable')
const total = parseInt(contentLength, 10)
let loaded = 0
return new Response(
new ReadableStream({
start(controller) {
const reader = response.body.getReader()
read()
function read() {
reader.read()
.then(({ done, value }) => {
if (done) {
controller.close();
return;
}
loaded += value.byteLength;
console.log({ loaded, total })
controller.enqueue(value);
read();
}).catch(error => {
console.error(error);
controller.error(error)
})
}
}
})
)
}
export default {
_getList,
_getOne,
@ -78,5 +129,6 @@ export default {
_put,
_patch,
_delete,
defaultToken
defaultToken,
progressStream
}