From 9dd88d8204d3257cfeef7b9a5b890e8d828e2bf2 Mon Sep 17 00:00:00 2001 From: TBS093A Date: Tue, 11 Aug 2020 13:19:34 +0200 Subject: [PATCH] install logRocket && upgrade fetch -> progressStream method in AppService --- package-lock.json | 5 + package.json | 1 + .../commands/fetchCommands/Album/Create.js | 4 +- src/pages/index.js | 3 + src/stores/AppService.js | 140 ++++++++++++------ 5 files changed, 107 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2b1e717..554b1ed 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 2e977cb..4739695 100755 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js b/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js index 32c2dad..52de87a 100644 --- a/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js +++ b/src/components/index/indexConsole/commands/fetchCommands/Album/Create.js @@ -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) } diff --git a/src/pages/index.js b/src/pages/index.js index a5a1c65..216e733 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -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 = () => ( diff --git a/src/stores/AppService.js b/src/stores/AppService.js index 9bbdcd5..de62f1a 100644 --- a/src/stores/AppService.js +++ b/src/stores/AppService.js @@ -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 } \ No newline at end of file