add UserService

codeBelt · codeBelt · commit e20087abaf3a · 2018-11-17T16:17:21.000-06:00
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
     "buildServer": "tsc -project tsconfig.server.json",
     "watchServer": "tsc -watch -project tsconfig.server.json",
     "removeAndBuildServer": "npm run clean && npm run buildServer",
-    "prestart": "npm run prod:build",
+    "build": "npm run prod:build",
     "start": "cross-env NODE_ENV=production node ./dist/server.js",
     "---------- DEVELOPMENT -------------------------------------------------------------------------": "",
     "predev": "npm run removeAndBuildServer",
@@ -61,6 +61,7 @@
     "@babel/preset-env": "7.1.6",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.1.0",
+    "@types/axios": "0.14.0",
     "@types/classnames": "2.2.6",
     "@types/hapi": "17.6.3",
     "@types/inert": "5.1.2",
@@ -107,6 +108,7 @@
     "write-file-webpack-plugin": "4.4.1"
   },
   "dependencies": {
+    "axios": "0.18.0",
     "babel-polyfill": "6.26.0",
     "bootstrap": "4.1.3",
     "classnames": "2.2.6",
diff --git a/src/constants/RequestMethodEnum.ts b/src/constants/RequestMethodEnum.ts
@@ -1,9 +1,9 @@
 enum RequestMethodEnum {
-    GET = 'GET',
-    POST = 'POST',
-    PUT = 'PUT',
-    PATCH = 'PATCH',
-    DELETE = 'DELETE',
+    Get = 'GET',
+    Post = 'POST',
+    Put = 'PUT',
+    Patch = 'PATCH',
+    Delete = 'DELETE',
 }
 
 export default RequestMethodEnum;
diff --git a/src/server/controllers/AssetsController.ts b/src/server/controllers/AssetsController.ts
@@ -7,7 +7,7 @@ export default class AssetsController implements IController {
 
     public mapRoutes(server: Hapi.Server): void {
         server.route({
-            method: RequestMethodEnum.GET,
+            method: RequestMethodEnum.Get,
             path: '/assets/{file*}',
             handler: (request: Hapi.Request, h: Hapi.ResponseToolkit): Hapi.ResponseObject => {
                 return h.file(path.resolve(__dirname, `../../public${request.path}`));
diff --git a/src/server/controllers/ReactController.tsx b/src/server/controllers/ReactController.tsx
@@ -21,7 +21,7 @@ export default class ReactController implements IController {
 
     public mapRoutes(server: Hapi.Server): void {
         server.route({
-            method: RequestMethodEnum.GET,
+            method: RequestMethodEnum.Get,
             path: '/{route*}',
             handler: async (request: Hapi.Request, h: Hapi.ResponseToolkit): Promise<Hapi.ResponseObject> => {
                 let initialState: Partial<IStore> = {renderReducer: this._getRenderReducer(request)};
diff --git a/src/stores/IStore.ts b/src/stores/IStore.ts
@@ -1,15 +1,13 @@
 import {RouterState} from 'connected-react-router';
 import {Store} from 'redux';
 import {FormReducer} from 'redux-form';
-import ILoadingReducerState from './loading/ILoadingReducerState';
 import IMetaReducerState from './meta/IMetaReducerState';
 import IUserReducerState from './user/IUserReducerState';
 import IRenderReducerState from './render/IRenderReducerState';
 import IModalReducerState from './modal/IModalReducerState';
 
 export default interface IStore extends Store<IStore> {
     readonly form: FormReducer;
-    readonly loadingReducer: ILoadingReducerState;
     readonly metaReducer: IMetaReducerState;
     readonly modalReducer: IModalReducerState;
     readonly renderReducer: IRenderReducerState;
diff --git a/src/stores/loading/ILoadingReducerState.ts b/src/stores/loading/ILoadingReducerState.ts
diff --git a/src/stores/loading/LoadingAction.ts b/src/stores/loading/LoadingAction.ts
diff --git a/src/stores/loading/LoadingReducer.ts b/src/stores/loading/LoadingReducer.ts
diff --git a/src/stores/rootReducer.ts b/src/stores/rootReducer.ts
@@ -1,7 +1,6 @@
 import {combineReducers, Reducer, ReducersMapObject} from 'redux';
 import {connectRouter} from 'connected-react-router';
 import UserReducer from './user/UserReducer';
-import LoadingReducer from './loading/LoadingReducer';
 import MetaReducer from './meta/MetaReducer';
 import {reducer as formReducer} from 'redux-form';
 import RenderReducer from './render/RenderReducer';
@@ -12,7 +11,6 @@ import {History} from 'history';
 export default (history: History): Reducer<IStore> => {
     const reducerMap: ReducersMapObject = {
         form: formReducer,
-        loadingReducer: LoadingReducer.reducer,
         metaReducer: MetaReducer.reducer,
         modalReducer: ModalReducer.reducer,
         renderReducer: RenderReducer.reducer,
diff --git a/src/stores/user/IUserReducerState.ts b/src/stores/user/IUserReducerState.ts
@@ -1,19 +1,6 @@
+import IUser from './models/IUser';
+
 export default interface IUserReducerState {
-    readonly name: {
-        title: string;
-        first: string;
-        last: string;
-    };
-    readonly email: string;
-    readonly dob: string;
-    readonly phone: string;
-    readonly id: {
-        name: string;
-        value: string;
-    };
-    readonly picture: {
-        large: string;
-        medium: string;
-        thumbnail: string;
-    };
+    readonly currentUser: IUser;
+    readonly isLoadingUser: boolean;
 }
diff --git a/src/stores/user/UserAction.ts b/src/stores/user/UserAction.ts
@@ -1,15 +1,22 @@
 import IAction from '../IAction';
+import IUser from './models/IUser';
 
 export default class UserAction {
 
     public static readonly LOAD_USER: string = 'UserAction.LOAD_USER';
     public static readonly LOAD_USER_SUCCESS: string = 'UserAction.LOAD_USER_SUCCESS';
-    public static readonly LOAD_USER_FAIL: string = 'UserAction.LOAD_USER_FAIL';
 
     public static loadUser(): IAction<void> {
         return {
             type: UserAction.LOAD_USER,
         };
     }
 
+    public static loadUserSuccess(model: IUser): IAction<IUser> {
+        return {
+            payload: model,
+            type: UserAction.LOAD_USER_SUCCESS,
+        };
+    }
+
 }
diff --git a/src/stores/user/UserReducer.ts b/src/stores/user/UserReducer.ts
@@ -1,42 +1,38 @@
 import UserAction from './UserAction';
 import IUserReducerState from './IUserReducerState';
 import IAction from '../IAction';
+import IUser from './models/IUser';
 
 export default class UserReducer {
 
     private static readonly _initialState: IUserReducerState = {
-        name: {
-            title: '',
-            first: '',
-            last: '',
-        },
-        email: '',
-        dob: '',
-        phone: '',
-        id: {
-            name: '',
-            value: '',
-        },
-        picture: {
-            large: '',
-            medium: '',
-            thumbnail: '',
-        },
+        currentUser: null,
+        isLoadingUser: false,
     };
 
     public static reducer(state: IUserReducerState = UserReducer._initialState, action: IAction<any>): IUserReducerState {
         switch (action.type) {
-            case UserAction.LOAD_USER_SUCCESS:
+            case UserAction.LOAD_USER:
                 return UserReducer._loadUser(state, action);
+            case UserAction.LOAD_USER_SUCCESS:
+                return UserReducer._loadUserSuccess(state, action);
             default:
                 return state;
         }
     }
 
-    private static _loadUser(state: IUserReducerState, action: IAction<IUserReducerState>): IUserReducerState {
+    private static _loadUser(state: IUserReducerState, action: IAction<IUser>): IUserReducerState {
+        return {
+            ...state,
+            isLoadingUser: true,
+        };
+    }
+
+    private static _loadUserSuccess(state: IUserReducerState, action: IAction<IUser>): IUserReducerState {
         return {
             ...state,
-            ...action.payload,
+            currentUser: action.payload,
+            isLoadingUser: false,
         };
     }
 
diff --git a/src/stores/user/UserSaga.ts b/src/stores/user/UserSaga.ts
@@ -1,39 +1,15 @@
-import {put} from 'redux-saga/effects';
-import UserAction from './UserAction';
-import LoadingAction from '../loading/LoadingAction';
 import IAction from '../IAction';
-import IUserReducerState from './IUserReducerState';
+import UserService from './UserService';
+import UserAction from './UserAction';
+import {put} from 'redux-saga/effects';
+import IUser from './models/IUser';
 
 export default class UserSaga {
 
     public static* loadUser(action: IAction<void> = null) {
-        yield put({
-            type: LoadingAction.SET_LOADING,
-            payload: true,
-        });
-
-        const response: Response = yield fetch('https://randomuser.me/api/?inc=picture,name,email,phone,id,dob');
-        const type: string = (response.status === 200) ? UserAction.LOAD_USER_SUCCESS : UserAction.LOAD_USER_FAIL;
-
-        let data: IUserReducerState = null;
-
-        if (response.status === 200) {
-            const json = yield response.json();
-
-            data = json.results[0];
-        }
-
-        yield put({
-            type,
-            payload: data,
-            meta: response,
-            error: response.statusText,
-        });
+        const responseModel: IUser = yield UserService.loadUser();
 
-        yield put({
-            type: LoadingAction.SET_LOADING,
-            payload: false,
-        });
+        yield put(UserAction.loadUserSuccess(responseModel));
     }
 
 }
diff --git a/src/stores/user/UserService.ts b/src/stores/user/UserService.ts
@@ -0,0 +1,16 @@
+import HttpUtility from '../../utilities/HttpUtility';
+import {AxiosResponse} from 'axios';
+import IUser from './models/IUser';
+
+export default class UserService {
+
+    private static _http: HttpUtility = new HttpUtility();
+
+    public static async loadUser(): Promise<IUser> {
+        const endpoint: string = 'https://randomuser.me/api/?inc=picture,name,email,phone,id,dob';
+        const response: AxiosResponse = await UserService._http.get(endpoint);
+
+        return response.data.results[0];
+    }
+
+}
diff --git a/src/stores/user/models/IUser.ts b/src/stores/user/models/IUser.ts
@@ -0,0 +1,19 @@
+export default interface IUser {
+    readonly name: {
+        title: string;
+        first: string;
+        last: string;
+    };
+    readonly email: string;
+    readonly dob: string;
+    readonly phone: string;
+    readonly id: {
+        name: string;
+        value: string;
+    };
+    readonly picture: {
+        large: string;
+        medium: string;
+        thumbnail: string;
+    };
+}
diff --git a/src/utilities/HttpUtility.ts b/src/utilities/HttpUtility.ts
@@ -0,0 +1,56 @@
+import axios, {AxiosResponse } from 'axios';
+import RequestMethodEnum from '../constants/RequestMethodEnum';
+
+// http://httpstat.us
+export default class HttpUtility {
+
+    public async get(endpoint: string): Promise<AxiosResponse<any>> {
+        const request = new Request(endpoint, {
+            method: RequestMethodEnum.Get,
+        });
+
+        return this._fetch(request);
+    }
+
+    // TODO: finish setting up
+    public async post(endpoint: string): Promise<AxiosResponse<any>> {
+        const request = new Request(endpoint, {
+            method: RequestMethodEnum.Post,
+        });
+
+        return this._fetch(request);
+    }
+
+    // TODO: finish setting up
+    public async put(endpoint: string): Promise<AxiosResponse<any>> {
+        const request = new Request(endpoint, {
+            method: RequestMethodEnum.Put,
+        });
+
+        return this._fetch(request);
+    }
+
+    // TODO: finish setting up
+    public async delete(endpoint: string): Promise<AxiosResponse<any>> {
+        const request = new Request(endpoint, {
+            method: RequestMethodEnum.Delete,
+        });
+
+        return this._fetch(request);
+    }
+
+    private async _fetch(request: Request, init?: any): Promise<AxiosResponse<any>> {
+        try {
+            return await axios({
+                data: init,
+                method: request.method,
+                url: request.url,
+            });
+        } catch (error) {
+            console.error(`error`, error);
+
+            return error;
+        }
+    }
+
+}
diff --git a/src/views/home/Home.tsx b/src/views/home/Home.tsx
diff --git a/yarn.lock b/yarn.lock
