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,36 +34,55 @@ const _delete = async (endpoint, token) => {
 // Fetch methods
 
 const responseGD = async (address, method, token) => {
-    const response = await fetch(address, {
+    try {
-        method: method,
+        const response = await fetch(address, {
-        credentials: 'same-origin',
+            method: method,
-        headers: {
+            credentials: 'same-origin',
-            "Authorization": token,
+            headers: {
-            "X-CSRFToken": csrftoken,
+                "Authorization": token,
-            "accept": "application/json",
+                "X-CSRFToken": csrftoken,
-            "Content-Type": "application/json"
+                "accept": "application/json",
-        }
+                "Content-Type": "application/json"
-    }).then( response => {
+            }
-        return progressStream( response )
+        })
-    })
+        return await responseExceptions( await response.json() )
-    return response.json()
+    } catch ( error ) {
+        return { info: error }
+    }
 }
 
 const responseCRU = async (address, method, body, token) => {
-    const response = await fetch(address, {
+    try {
-        method: method,
+        const response = await fetch(address, {
-        credentials: 'same-origin',
+            method: method,
-        body: JSON.stringify(body),
+            credentials: 'same-origin',
-        headers: {
+            body: JSON.stringify(body),
-            "Authorization": token,
+            headers: {
-            "X-CSRFToken": csrftoken,
+                "Authorization": token,
-            "accept": "application/json",
+                "X-CSRFToken": csrftoken,
-            "Content-Type": "application/json"
+                "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 => {
+    } catch {
-        return progressStream( response )
+        return { 
-    })
+            response: response,
-    return response.json()
+            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,79 +15,81 @@ export const postAuth = (username, password) => async (dispatch) => {
         username: username,
         password: password
     }
-    try {
+    return await AppService._post(
-        return await AppService._post(
+        endpoint + 'auth',
-            endpoint + 'auth',
+        body,
-            body,
+        AppService.defaultToken
-            AppService.defaultToken
+    ).then( response => {
-        ).then( response => {
+        try {
-            try {
+            serviceUser = {
-                serviceUser = {
+                id: response.user.id,
-                    id: response.user.id,
+                username: response.user.username,
-                    username: response.user.username,
+                email: response.user.email,
-                    email: response.user.email,
+                ip: response.user.ip,
-                    ip: response.user.ip,
+                city: response.user.city,
-                    city: response.user.city,
+                country: response.user.country,
-                    country: response.user.country,
+                token: response.Authorization
-                    token: response.Authorization
-                }
-                dispatch(actions.login(serviceUser))
-                return { error: 'login success' }
-            } catch {
-                return { error: 'login failed' }
             }
-        }) 
+            dispatch(actions.login(serviceUser))
-    } catch {
+            return { error: 'login success' }
-        return { error: 'connection failed' }
+        } catch {
-    } 
+            return { error: 'login failed' }
+        }
+    }) 
 }
 
 export const deleteAuth = (token) => async (dispatch) => {
-    try {
+    response = await AppService._delete(
-        response = await AppService._delete(
+        endpoint + 'auth',
-            endpoint + 'auth',
+        token
-            token
+    ).then( () => {
-        ).then( () => {
+        try {
             dispatch(actions.logout())
             return { error: 'logout success'}
-        })
+        } catch {
-    } catch {
+            return { error: 'logout failed' }
-        return { error: 'connection 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 = {
+        serviceUser = {
-        id: response.user.id,
+            id: response.user.id,
-        username: response.user.username,
+            username: response.user.username,
-        email: response.user.email,
+            email: response.user.email,
-        ip: response.user.ip,
+            ip: response.user.ip,
-        city: response.user.city,
+            city: response.user.city,
-        country: response.user.country,
+            country: response.user.country,
-        token: token
+            token: token
-    }
+        }
-    dispatch(actions.login(serviceUser))
+        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)
+        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;