[API] Fixed fetching error in UsersList

Author: Jovert Lota Palonpon

resources/js/Backoffice.js

@@ -10,12 +10,17 @@ import { Loading } from './views';
 class Backoffice extends Component {
     state = {
         loading: true,
+        retrying: false,
         navigating: true,
         authenticated: false,
         nightMode: false,
         token: {},
         user: {},
         username: '',
+
+        errorResponse: {},
+        successfulResponse: {},
+        responseInterceptor: null,
     };
 
     /**
@@ -204,9 +209,91 @@ class Backoffice extends Component {
         } catch (error) {}
     };
 
+    /**
+     * Remove the response interceptor.
+     *
+     * @param {any} interceptor
+     *
+     * @param {undefined}
+     */
+    removeResponseInterceptor = interceptor => {
+        axios.interceptors.response.eject(interceptor);
+    };
+
+    /**
+     * Record API responses & do something.
+     *
+     * @param {any} interceptor
+     *
+     * @param {undefined}
+     */
+    addResponseInterceptor = () => {
+        const responseInterceptor = axios.interceptors.response.use(
+            response => {
+                return response;
+            },
+
+            async error => {
+                // In occasions of Unauthorized requests, retry.
+                if (error.response.status === 401) {
+                    this.setState({
+                        retrying: true,
+                    });
+
+                    // Request options
+                    const {
+                        url,
+                        method,
+                        headers,
+                        params: data,
+                    } = error.response.config;
+
+                    const response = await axios({
+                        url,
+                        method,
+                        headers: {
+                            ...headers,
+
+                            // This is an override of the Authorization header
+                            // to fix the 401 errors when we retry.
+                            Authorization:
+                                window.axios.defaults.headers.common[
+                                    'Authorization'
+                                ],
+                        },
+                        data,
+                    });
+
+                    // If the request returns 200 or 201 (Resource created),
+                    // Treat it as successful response.
+                    if ([200, 201].indexOf(response.status) > -1) {
+                        this.setState({
+                            successfulResponse: response,
+                        });
+                    }
+
+                    this.setState({
+                        retrying: false,
+                    });
+                }
+
+                return Promise.reject(error);
+            },
+        );
+
+        this.setState({
+            responseInterceptor,
+        });
+    };
+
     async componentDidMount() {
+        // Listen for all API responses.
+        this.addResponseInterceptor();
+
+        // Setup Night Mode via Persistent Storage.
         this.setNightMode();
 
+        // Authenticate via Persistent Storage.
         const token = this.token();
 
         if (token) {
@@ -216,6 +303,12 @@ class Backoffice extends Component {
         this.setState({ loading: false, navigating: false });
     }
 
+    componentWillUnmount() {
+        const { responseInterceptor } = this.state;
+
+        this.removeResponseInterceptor(responseInterceptor);
+    }
+
     render() {
         const { width } = this.props;
         const { loading, nightMode } = this.state;

resources/js/views/__backoffice/users/List.js

@@ -321,18 +321,7 @@ class List extends Component {
                 };
             });
         } catch (error) {
-            this.setState({
-                loading: false,
-                message: {
-                    type: 'error',
-                    body: Lang.get('resources.not_fetched', {
-                        name: 'User',
-                    }),
-                    closed: () => this.setState({ message: {} }),
-                    actionText: Lang.get('actions.retry'),
-                    action: async () => await this.fetchUsers(),
-                },
-            });
+            this.setState({ loading: false });
         }
     };
 
@@ -358,14 +347,16 @@ class List extends Component {
     }
 
     render() {
-        const {
-            loading,
-            pagination,
-            sorting,
-            filters,
-            message,
-            alert,
-        } = this.state;
+        const { loading, sorting, filters, message, alert } = this.state;
+
+        let { pagination } = this.state;
+
+        // Use the response data from the successful response (result of retry
+        // on failed (401) API requests) for pagination.
+        const { successfulResponse: response, retrying } = this.props.pageProps;
+        if (response.hasOwnProperty('data') && !retrying) {
+            pagination = response.data;
+        }
 
         const {
             data: rawData,
@@ -490,7 +481,7 @@ class List extends Component {
                 pageTitle={Lang.get('navigation.users')}
                 primaryAction={primaryAction}
                 tabs={tabs}
-                loading={loading}
+                loading={loading || pageProps.retrying}
                 message={message}
                 alert={alert}
             >