seprate module based routes and fix the broken frontend api

Author: moeen-basra

resources/assets/js/Main.js

@@ -2,7 +2,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { fetchUser } from './store/services/user'
+
+// import services actions
+import { fetchUser } from './store/services/auth'
 
 // import components
 import Navigation from './common/navigation'

resources/assets/js/store/action-types/index.js

@@ -4,6 +4,7 @@ export const AUTH_LOGIN = 'AUTH_LOGIN'
 export const AUTH_LOGOUT = 'AUTH_LOGOUT'
 export const AUTH_REFRESH_TOKEN = 'AUTH_REFRESH_TOKEN'
 export const AUTH_RESET_PASSWORD = 'AUTH_RESET_PASSWORD'
+export const AUTH_USER = 'AUTH_USER'
 
 // user action types
 export const USER_UPDATE = 'USER_UPDATE'
@@ -21,6 +22,7 @@ export default {
   AUTH_LOGOUT,
   AUTH_REFRESH_TOKEN,
   AUTH_RESET_PASSWORD,
+  AUTH_USER,
 
   USER_UPDATE,
   USER_UNSET,

resources/assets/js/store/actions/auth.js

@@ -12,6 +12,7 @@ import {
   AUTH_LOGOUT,
   AUTH_REFRESH_TOKEN,
   AUTH_RESET_PASSWORD,
+  AUTH_USER,
 } from '../action-types';
 
 
@@ -46,3 +47,10 @@ export function authResetPassword() {
     type: AUTH_RESET_PASSWORD,
   }
 }
+
+export function authUser(payload) {
+  return {
+    type: AUTH_USER,
+    payload
+  }
+}

resources/assets/js/store/reducers/auth.js

@@ -7,14 +7,6 @@ import {
   AUTH_RESET_PASSWORD,
 } from '../action-types';
 
-const user = {
-  id: null,
-  name: null,
-  email: null,
-  createdAt: null,
-  updatedAt: null,
-}
-
 const initialState = {
   isAuthenticated: false,
 };
@@ -38,10 +30,10 @@ const reducer = (state = initialState, { type, payload = null }) => {
 function login(state, payload) {
   localStorage.setItem('access_token', payload);
   HTTP.defaults.headers.common['Authorization'] = `Bearer ${payload}`;
-  
-  state = Object.assign({}, state, { isAuthenticated: true })
-  
-  return state
+
+  return {
+    ...state, isAuthenticated: true,
+  }
 }
 
 function checkAuth(state) {
@@ -58,18 +50,16 @@ function checkAuth(state) {
 
 function logout(state) {
   localStorage.removeItem('access_token')
-  
-  state = Object.assign({}, state, {
-    isAuthenticated: false,
-    user,
-  })
-  
-  return state;
+
+  return {
+    ...state, isAuthenticated: false
+  }
 }
 
 function resetPassword(state) {
-  state.resetPassword = true;
-  return state;
+  return {
+    ...state, resetPassword: true,
+  }
 }
 
 export const getAuth = state => state.auth.isAuthenticated;

resources/assets/js/store/reducers/user.js

@@ -1,10 +1,12 @@
 import User from '../../models/User'
-import { USER_UPDATE , USER_UNSET, AUTH_LOGOUT } from '../action-types'
+import { USER_UPDATE , USER_UNSET, AUTH_LOGOUT, AUTH_USER} from '../action-types'
 
 const initialState = Object.assign({}, new User({}))
 
 const reducer = (state = initialState, { type, payload = null }) => {
   switch (type) {
+    case AUTH_USER:
+      return authUser(state, payload)
     case USER_UPDATE:
       return updateUser(state, payload);
     case AUTH_LOGOUT:
@@ -16,17 +18,21 @@ const reducer = (state = initialState, { type, payload = null }) => {
 }
 
 function updateUser(state, payload) {
-  state = Object.assign({}, state, payload)
-  
-  return state
+  return {
+    ...state, ...payload
+  }
 }
 
 function unsetUser(state) {
-  const user = Object.assign({}, new User({}))
-  
-  state = Object.assign({}, state, user)
-  
-  return state
+  return {
+    ...state, initialState
+  }
+}
+
+function authUser(state, user) {
+  return {
+    ...state, ...user
+  }
 }
 
 export default reducer

resources/assets/js/store/services/auth.js

@@ -2,6 +2,24 @@ import Http from '../../utils/Http'
 import { authActions } from '../actions'
 import Transformer from '../../utils/Transformer'
 
+/**
+ * fetch the current logged in user
+ *
+ * @returns {function(*)}
+ */
+export function fetchUser() {
+  return dispatch => {
+    return Http.get('auth/user')
+      .then(res => {
+        const data = Transformer.fetch(res.data)
+        dispatch(authActions.authUser(data))
+      })
+      .catch(err => {
+        console.log(err)
+      })
+  }
+}
+
 /**
  * login user
  *

resources/assets/js/store/services/user.js

@@ -2,19 +2,6 @@ import Http from '../../utils/Http'
 import Transformer from '../../utils/Transformer'
 import { userActions } from '../actions'
 
-export function fetchUser() {
-  return dispatch => {
-    return Http.get('user')
-      .then(res => {
-        const data = Transformer.fetch(res.data)
-        dispatch(userActions.userUpdate(data))
-      })
-      .catch(err => {
-        console.log(err)
-      })
-  }
-}
-
 export function userUpdateRequest(params) {
   return dispatch => (
     new Promise((resolve, reject) => {
@@ -45,14 +32,4 @@ export function userUpdateRequest(params) {
         })
     })
   )
-  /*return dispatch => {
-    const data = Transformer.send(param)
-    Http.patch(`/users/${data.id}`, data)
-      .then((res) => {
-        dispatch(userActions.userUpdate(Transformer.fetch(res.data)))
-      })
-      .catch((err) => {
-        console.log(err)
-      })
-  }*/
 }

routes/api.php

@@ -14,7 +14,6 @@
 */
 
 // default name space for all routes is 'App\Http\Controllers\Api'
-
 $api_version = config('api.api_version');
 
 Route::group(["prefix" => "{$api_version}"], function() {
@@ -28,20 +27,3 @@
     Route::prefix('articles')
         ->group(base_path('routes/api/articles.php'));
 });
-
-/*Route::post('auth/register', 'Auth\RegisterController@register')->name('auth.register');
-Route::post('auth/login', 'Auth\LoginController@login')->name('auth.login');
-Route::get('articles/published', 'ArticleController@publishedArticles')->name('articles.published.index');
-Route::get('articles/published/{id}', 'ArticleController@publishedArticle')->name('articles.published.show');
-
-Route::group(['middleware' => 'auth:api'], function() {
-    Route::get('/user', function (Request $request) {
-        return $request->user();
-    });
-
-    Route::patch('/users/{id}', 'UserController@update')->name('users.update');
-
-    Route::resource('articles', 'ArticleController', ['except' => ['edit', 'create']]);
-
-    Route::delete('/auth/logout', 'Auth\LoginController@logout')->name('auth.logout');;
-});*/

routes/api/articles.php

@@ -6,5 +6,9 @@
 Route::get('published/{id}', 'ArticleController@publishedArticle')->name('articles.published.show');
 
 Route::group(['middleware' => 'auth:api'], function() {
-    Route::apiResource('/', 'ArticleController');
+    Route::post('/', 'ArticleController@store')->name('articles.store');
+    Route::get('/', 'ArticleController@index')->name('articles.index');
+    Route::get('/{id}', 'ArticleController@show')->name('articles.show');
+    Route::match(['put', 'patch'], '/{id}', 'ArticleController@update')->name('articles.update');
+    Route::delete('/{id}', 'ArticleController@delete')->name('articles.delete');
 });

routes/api/users.php

@@ -3,5 +3,5 @@
 use Illuminate\Support\Facades\Route;
 
 Route::group(['middleware' => 'auth:api'], function() {
-    Route::patch('/{id}', 'UserController@update')->name('users.update');
+    Route::match(['put', 'patch'], '/{id}', 'UserController@update')->name('users.update');
 });