Merge pull request #16 from christophechevalier/refactor

Refactor structure app for release v0.1
christophechevalier · Nov 24, 2016 · d852033 · d852033
2 parents 27dd052 + c5910a2
commit d852033
Show file tree

Hide file tree

Showing 80 changed files with 9,103 additions and 673 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ezaw",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
@@ -12,34 +12,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "2.1.1",
-    "@angular/compiler": "2.1.1",
-    "@angular/core": "2.1.1",
-    "@angular/forms": "2.1.1",
-    "@angular/http": "2.1.1",
+    "@angular/common": "2.2.1",
+    "@angular/compiler": "2.2.1",
+    "@angular/core": "2.2.1",
+    "@angular/forms": "2.2.1",
+    "@angular/http": "2.2.1",
     "@angular/material": "2.0.0-alpha.9-3",
-    "@angular/platform-browser": "2.1.1",
-    "@angular/platform-browser-dynamic": "2.1.1",
-    "@angular/router": "3.1.1",
+    "@angular/platform-browser": "2.2.1",
+    "@angular/platform-browser-dynamic": "2.2.1",
+    "@angular/router": "3.2.1",
     "@ngrx/core": "1.2.0",
     "@ngrx/effects": "2.0.0",
     "@ngrx/store": "2.2.1",
+    "@ngrx/store-devtools": "3.2.2",
     "@types/hammerjs": "2.0.33",
-    "angular2-google-maps": "^0.15.0",
+    "angular-material": "1.1.1",
+    "angular2-google-maps": "0.15.0",
     "core-js": "2.4.1",
     "hammerjs": "2.0.8",
     "immutable": "3.8.1",
     "material-design-icons": "3.0.1",
-    "ng2-translate": "3.1.3",
-    "rxjs": "5.0.0-rc.1",
+    "ng2-translate": "4.0.1",
+    "rxjs": "5.0.0-rc.4",
     "ts-helpers": "1.1.2",
     "typed-immutable-record": "0.0.6",
     "zone.js": "0.6.26"
   },
   "devDependencies": {
-    "@types/jasmine": "2.5.35",
+    "@types/jasmine": "2.5.38",
     "angular-cli": "1.0.0-beta.18",
-    "codelyzer": "1.0.0-beta.3",
+    "codelyzer": "1.0.0-beta.4",
     "jasmine-core": "2.5.2",
     "jasmine-spec-reporter": "2.7.0",
     "karma": "1.3.0",
@@ -48,9 +50,10 @@
     "karma-jasmine": "1.0.2",
     "karma-phantomjs-launcher": "1.0.2",
     "karma-remap-istanbul": "0.2.1",
-    "protractor": "4.0.9",
-    "ts-node": "1.6.0",
+    "ngrx-store-freeze": "0.1.4",
+    "protractor": "4.0.11",
+    "ts-node": "1.7.0",
     "tslint": "3.15.1",
-    "typescript": "2.0.6"
+    "typescript": "2.0.10"
   }
 }
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -13,18 +13,25 @@ import { MaterialModule } from '@angular/material';
 // angular-translate
 import { TranslateStaticLoader, TranslateLoader, TranslateModule } from 'ng2-translate';
 
-// ngrx - store
-import { StoreModule } from '@ngrx/store';
+// ngrx
+import { StoreModule, combineReducers } from '@ngrx/store';
+import { compose } from '@ngrx/core/compose';
+import { EffectsModule } from '@ngrx/effects';
+import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
 // our effects
 import { UserEffects } from './shared-module/effects/user.effects';
 
+// store freeze
+import { storeFreeze } from 'ngrx-store-freeze';
+
 // our reducers
 import { UserReducer } from './shared-module/reducers/user.reducer';
 import { ConfigReducer } from './shared-module/reducers/config.reducer';
 
 // our services
 import { UserService } from './shared-module/services/user.service';
+import { RouteService } from './shared-module/services/route.service';
 
 // our mocks
 import { UserMockService } from './shared-module/mocks/user-mock.service';
@@ -38,6 +45,21 @@ import { FeatureModule } from './features-module/features-module.module';
 // shared module
 import { SharedModule } from './shared-module/shared-module.module';
 
+// opaque tokens
+import { AVAILABLE_LANGUAGES } from './shared-module/opaque-tokens/opaque-tokens';
+
+export function createTranslateLoader(http: Http) {
+  return new TranslateStaticLoader(http, './assets/i18n', '.json');
+}
+
+// define a meta reducer that prevent object mutation when dev env
+const metaReducers = !environment.production ? [storeFreeze, combineReducers] : [combineReducers];
+
+const store = compose(...metaReducers)({
+    config: ConfigReducer,
+    user: UserReducer
+});
+
 @NgModule({
   declarations: [
     AppComponent
@@ -49,26 +71,34 @@ import { SharedModule } from './shared-module/shared-module.module';
     FormsModule,
 
     // ngrx - store
-    StoreModule.provideStore({
-      config: ConfigReducer,
-      user: UserReducer
-    }),
+    StoreModule.provideStore(store),
 
-    // material design
-    MaterialModule.forRoot(),
+    // ngrx
+    StoreDevtoolsModule.instrumentOnlyWithExtension(),
+
+    // effects
+    EffectsModule.runAfterBootstrap(UserEffects),
 
     // translate
     TranslateModule.forRoot({
       provide: TranslateLoader,
-      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
+      useFactory: createTranslateLoader,
       deps: [Http]
     }),
+
+    // material design
+    MaterialModule.forRoot(),
   ],
   providers: [
-    UserEffects,
+    // services
+    RouteService,
     {
       provide: UserService,
       useClass: (environment.mock ? UserMockService : UserService)
+    },
+    {
+      provide: AVAILABLE_LANGUAGES,
+      useValue: ['en', 'fr']
     }
   ],
   bootstrap: [AppComponent]

diff --git a/frontend/src/app/app.state.ts b/frontend/src/app/app.state.ts
diff --git a/frontend/src/app/features-module/auth-module/auth-module.component.html b/frontend/src/app/features-module/auth-module/auth-module.component.html
@@ -1,10 +1,10 @@
-<div class="page-auth background-auth">
+<div layout="column" layout-align="center center" class="page-auth background-auth">
   <div class="background-logo-ezaw"></div>
   <md-card class="pnl-auth">
 
     <md-toolbar color="primary">
       <img class="logo-ezaw" src="/assets/img/ezaw-logo.png">
-      <span class="flex-space"></span>
+      <span flex></span>
       <button md-icon-button>
         <md-icon>supervisor_account</md-icon>
       </button>
@@ -13,15 +13,15 @@
     <md-toolbar-row>
       <md-tab-group #tabGroup (selectChange)="openTab(tabGroup.selectedIndex)">
         <md-tab *ngFor="let tab of tabs">
-          <template md-tab-label>{{tab.title}}</template>
+          <template md-tab-label>{{tab.title | translate}}</template>
         </md-tab>
       </md-tab-group>
     </md-toolbar-row>
 
     <router-outlet></router-outlet>
 
     <md-card-subtitle align="center">
-      <p>GPS, Cartes & Trafic</p>
+      <p>GPS, {{ 'MAPS' | translate }} & Trafic</p>
       <br>
     </md-card-subtitle>
   </md-card>

diff --git a/frontend/src/app/features-module/auth-module/auth-module.component.scss b/frontend/src/app/features-module/auth-module/auth-module.component.scss
@@ -32,11 +32,8 @@ md-card-content > * {
 
 .background-auth {
   background-color: rgba(224, 224, 224, .8);
-  position: fixed;
-  padding: auto;
-  width: 100%;
-  min-height: 100%;
-  flex: 1 1 auto;
+  display: flex;
+  min-height: 100vh;
 }
 
 .background-logo-ezaw {
@@ -52,7 +49,6 @@ md-card-content > * {
 md-toolbar-row {
   justify-content: space-between;
   width: 100%;
-  flex: 1 1 auto;
 }
 
 .flex-space {
@@ -65,14 +61,11 @@ md-toolbar-row {
 
 /* Mobile */
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 420px) {
   .background-auth {
     background-color: rgba(224, 224, 224, .8);
-    position: fixed;
-    padding: auto;
-    width: 100%;
-    min-height: 100%;
-    flex: 1 1 auto;
+    display: block;
+    min-height: 100vh;
   }
 
   .background-logo-ezaw {

diff --git a/frontend/src/app/features-module/auth-module/auth-module.component.ts b/frontend/src/app/features-module/auth-module/auth-module.component.ts
@@ -1,11 +1,19 @@
-import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+// angular modules
+import { Component, OnInit, OnDestroy, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 // ngrx - store
 import { Store } from '@ngrx/store';
 
-// our states
-import { AppState } from '../../app.state';
+// our interfaces
+import { IStore } from '../../shared-module/interfaces/store.interface';
+import { IUser, IUserRecord } from '../../shared-module/interfaces/user.interface';
+
+// rxjs
+import { Subscription } from 'rxjs/Rx';
+
+// reducer
+import { USR_IS_CONNECTING } from '../../shared-module/reducers/user.reducer';
 
 @Component({
   selector: 'app-auth',
@@ -15,17 +23,25 @@ import { AppState } from '../../app.state';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 
-export class AuthComponent implements OnInit {
+export class AuthComponent implements OnInit, OnDestroy {
   tabs: Array <{ title: string, url: string }>;
+  private user: IUser;
+  private userSub: Subscription;
+
+  constructor(private store$: Store<IStore>, private router: Router, private route: ActivatedRoute) {
+
+    this.userSub =
+      store$.select('user')
+        .map((userR: IUserRecord) => userR.toJS())
+        .subscribe((user: IUser) => this.user = user);
 
-  constructor(private store: Store<AppState>, private router: Router, private route: ActivatedRoute) {
     this.tabs = [
       {
-        title: 'Log In',
+        title: 'LOG_ME',
         url: 'login'
       },
       {
-        title: 'Register',
+        title: 'SIGN_UP',
         url: 'register'
       }
     ];
@@ -36,6 +52,15 @@ export class AuthComponent implements OnInit {
     this.route.params.subscribe(params => { });
   }
 
+  ngOnDestroy() {
+    this.userSub.unsubscribe();
+  }
+
+  connectUser(user: IUser) {
+    this.store$.dispatch({ type: USR_IS_CONNECTING, payload: user });
+  }
+
+
   openTab(index) {
     this.router.navigate(['/auth', this.tabs[index].url]);
   }

diff --git a/frontend/src/app/features-module/auth-module/auth-module.module.ts b/frontend/src/app/features-module/auth-module/auth-module.module.ts
@@ -1,14 +1,20 @@
 // angular modules
 import { NgModule } from '@angular/core';
-import { AuthComponent } from './auth-module.component';
+import { RouterModule } from '@angular/router';
 
 // our modules
 import { SharedModule } from '../../shared-module/shared-module.module';
 
+// our components
+import { AuthComponent } from './auth-module.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 
-import { RouterModule } from '@angular/router';
+const AUTH_COMPONENTS = [
+  AuthComponent,
+  LoginComponent,
+  RegisterComponent
+];
 
 
 @NgModule({
@@ -17,14 +23,10 @@ import { RouterModule } from '@angular/router';
     RouterModule
   ],
   declarations: [
-    AuthComponent,
-    LoginComponent,
-    RegisterComponent
+    ...AUTH_COMPONENTS
   ],
   exports: [
-    AuthComponent,
-    LoginComponent,
-    RegisterComponent
+    ...AUTH_COMPONENTS
   ]
 })