adding react-loader

Author: Moeen Basra

app/Http/Controllers/Api/Auth/LoginController.php

@@ -35,8 +35,8 @@ public function login(Request $request)
             return json_decode((string)$response->getBody(), true);
         } catch (\Exception $e) {
             return response()->json([
-                "error" => "invalid_credentials",
-                "message" => "The user credentials were incorrect."
+                'error' => 'invalid_credentials',
+                'message' => "{$e->getCode()}: {$e->getMessage()}"
             ], 401);
         }
     }

composer.lock

@@ -48,6 +48,7 @@
     "react-document-title": "^2.0.3",
     "react-dom": "^16.2.0",
     "react-draft-wysiwyg": "^1.12.3",
+    "react-loadable": "^5.3.1",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "reactstrap": "5.0.0-alpha.4",

package.json

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+// set display name for component
+const displayName = 'CommonLoader'
+
+// validate component properties
+const propTypes = {
+  isLoading: PropTypes.bool,
+  error: PropTypes.object,
+}
+
+const LoadingComponent = ({isLoading, error}) => {
+  // Handle the loading state
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+  // Handle the error state
+  else if (error) {
+    return <div>Sorry, there was a problem loading the page.</div>
+  }
+  else {
+    return null
+  }
+}
+
+LoadingComponent.displayName = displayName
+LoadingComponent.propTypes = propTypes
+
+export default LoadingComponent

resources/assets/js/common/loader/index.js

@@ -1,24 +1,35 @@
-import Articles from "./pages/list"
-import EditArticle from "./pages/edit"
-import AddArticle from "./pages/add"
+// import lib
+import Loadable from 'react-loadable'
+
+// import components
+import LoadingComponent from '../../common/loader'
 
 export default [
   {
     path: '/articles',
     exact: true,
     auth: true,
-    component: Articles,
+    component: Loadable({
+      loader: () => import('./pages/list'),
+      loading: LoadingComponent,
+    }),
   },
   {
     path: '/articles/create',
     exact: true,
     auth: true,
-    component: AddArticle,
+    component: Loadable({
+      loader: () => import('./pages/add'),
+      loading: LoadingComponent,
+    }),
   },
   {
     path: '/articles/:id/edit',
     exact: true,
     auth: true,
-    component: EditArticle,
+    component: Loadable({
+      loader: () => import('./pages/edit'),
+      loading: LoadingComponent,
+    }),
   },
 ]

resources/assets/js/modules/article/routes.js

@@ -1,15 +1,25 @@
-import Register from "./pages/register"
-import Login from "./pages/login"
+// import lib
+import Loadable from 'react-loadable'
+
+// import components
+import LoadingComponent from '../../common/loader'
+
 
 export default [
   {
     path: '/login',
     exact: true,
-    component: Login,
+    component: Loadable({
+      loader: () => import('./pages/login'),
+      loading: LoadingComponent,
+    }),
   },
   {
     path: '/register',
     exact: true,
-    component: Register,
+    component: Loadable({
+      loader: () => import('./pages/register'),
+      loading: LoadingComponent,
+    }),
   },
 ]

resources/assets/js/modules/auth/routes.js

@@ -1,10 +1,17 @@
-import Edit from "./pages/edit"
+// import lib
+import Loadable from 'react-loadable'
+
+// import components
+import LoadingComponent from '../../common/loader'
 
 export default [
   {
     path: '/users/:id/edit',
     exact: true,
     auth: true,
-    component: Edit,
+    component: Loadable({
+      loader: () => import('./pages/edit'),
+      loading: LoadingComponent,
+    }),
   },
 ]

resources/assets/js/modules/user/routes.js

@@ -7,6 +7,8 @@ import Page from './Page'
 const mapStateToProps = (state, router) => {
   const { params } = router.match
 
+  console.log(params)
+
   const article = state.articles.data.find(article => article.slug === params.slug)
   return {
     article: article ? new Article(article) : new Article({})