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

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",

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",

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)
     }
 

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 = () => (
     <Provider store={ store }>
         <IndexConsole />

src/stores/AppService.js

@@ -1,51 +1,10 @@
 import { address } from './APIAddress'
 
-const getCookie = (name) => {
+// session Token
-    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')
 
 let defaultToken = 'empty token'
 
-const responseGD = async (address, method, token) => {
+// CRUD methods
-    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()
-}
 
 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
 }