upgrade AppService exceptions + refactoring

src/components/index/indexConsole/commands/fetchCommands/Album/Create.js

@@ -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,7 +15,6 @@ 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(
+        ).then( response => {
-            setMessage('album create success')
+            setMessage( response['info'] )
-        ).catch(
+        })
-            setMessage('album create failed')
-        )
     }
 
     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>

src/components/index/indexConsole/commands/fetchCommands/Album/GetAll.js

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

src/pages/index.js

@@ -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';
+// import LogRocket from 'logrocket';
-LogRocket.init('ugbdf9/music-service');
+// LogRocket.init('ugbdf9/music-service');
 
 const IndexPage = () => (
     <Provider store={ store }>

src/stores/AppService.js

@@ -34,6 +34,7 @@ const _delete = async (endpoint, token) => {
 // Fetch methods
 
 const responseGD = async (address, method, token) => {
+    try {
         const response = await fetch(address, {
             method: method,
             credentials: 'same-origin',
@@ -43,13 +44,15 @@ const responseGD = async (address, method, token) => {
                 "accept": "application/json",
                 "Content-Type": "application/json"
             }
-    }).then( response => {
-        return progressStream( response )
         })
-    return response.json()
+        return await responseExceptions( await response.json() )
+    } catch ( error ) {
+        return { info: error }
+    }
 }
 
 const responseCRU = async (address, method, body, token) => {
+    try {
         const response = await fetch(address, {
             method: method,
             credentials: 'same-origin',
@@ -60,10 +63,26 @@ const responseCRU = async (address, method, body, token) => {
                 "accept": "application/json",
                 "Content-Type": "application/json"
             }
-    }).then( response => {
-        return progressStream( response )
         })
-    return response.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' 
+        }
+    } 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();
+                                controller.close()
-                                return;
+                                return
                             }
-                            loaded += value.byteLength;
+                            loaded += value.byteLength
-                            console.log({ loaded, total })
+                            console.log( loaded / total * 100 )
-                            controller.enqueue(value);
+                            controller.enqueue(value)
-                            read();
+                            read()
-                        }).catch(error => {
-                            console.error(error);
-                            controller.error(error)
                         })
+                        // .catch(error => {
+                        //     console.error(error)
+                        //     controller.error(error)
+                        // })
                 }
             }
         })

src/stores/album/duck/operations.js

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

src/stores/loadStore.js

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

src/stores/user/duck/operations.js

@@ -15,7 +15,6 @@ export const postAuth = (username, password) => async (dispatch) => {
         username: username,
         password: password
     }
-    try {
     return await AppService._post(
         endpoint + 'auth',
         body,
@@ -37,41 +36,40 @@ export const postAuth = (username, password) => async (dispatch) => {
             return { error: 'login failed' }
         }
     }) 
-    } catch {
-        return { error: 'connection failed' }
-    } 
 }
 
 export const deleteAuth = (token) => async (dispatch) => {
-    try {
     response = await AppService._delete(
         endpoint + 'auth',
         token
     ).then( () => {
+        try {
             dispatch(actions.logout())
             return { error: 'logout success'}
-        })
         } catch {
-        return { error: 'connection failed' }
+            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
-    )
+    ).then( response => {
         serviceUser = {
             id: response.user.id,
             username: response.user.username,
@@ -82,12 +80,16 @@ export const updateUser = (user, id, token) => async (dispatch) => {
             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
-    )
+    ).then( response => {
         deleteAuth(token)
+        return response
+    })
 }

src/styles/general.scss

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