feat(storage): store user in storage

Author: lanceli

config.xml

@@ -1,43 +1,44 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<?xml version='1.0' encoding='utf-8'?>
 <widget id="com.lanceli.cnodejs" version="3.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-  <name display="CNode社区">CNodeJs</name>
-  <description>
+    <name display="CNode社区">CNodeJs</name>
+    <description>
     Ionic app for https://cnodejs.org
   </description>
-  <author email="[email protected]" href="http://github.com/lanceli">
+    <author email="[email protected]" href="http://github.com/lanceli">
     Lance Li
   </author>
-  <content src="index.html"/>
-  <access origin="*"/>
-  <allow-navigation href="http://ionic.local/*"/>
-  <allow-intent href="http://*/*"/>
-  <allow-intent href="https://*/*"/>
-  <allow-intent href="tel:*"/>
-  <allow-intent href="sms:*"/>
-  <allow-intent href="mailto:*"/>
-  <allow-intent href="geo:*"/>
-  <platform name="android">
-    <allow-intent href="market:*"/>
-  </platform>
-  <platform name="ios">
-    <allow-intent href="itms:*"/>
-    <allow-intent href="itms-apps:*"/>
-  </platform>
-  <preference name="webviewbounce" value="false"/>
-  <preference name="UIWebViewBounce" value="false"/>
-  <preference name="DisallowOverscroll" value="true"/>
-  <preference name="android-minSdkVersion" value="16"/>
-  <preference name="BackupWebStorage" value="none"/>
-  <preference name="SplashMaintainAspectRatio" value="true"/>
-  <preference name="FadeSplashScreenDuration" value="300"/>
-  <preference name="SplashShowOnlyFirstTime" value="false"/>
-  <feature name="StatusBar">
-    <param name="ios-package" onload="true" value="CDVStatusBar"/>
-  </feature>
-  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
-  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
-  <plugin name="cordova-plugin-console" spec="1.0.5"/>
-  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
-  <plugin name="cordova-plugin-device" spec="1.1.4"/>
-  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
+    <content src="index.html" />
+    <access origin="*" />
+    <allow-navigation href="http://ionic.local/*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <platform name="android">
+        <allow-intent href="market:*" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+    </platform>
+    <preference name="webviewbounce" value="false" />
+    <preference name="UIWebViewBounce" value="false" />
+    <preference name="DisallowOverscroll" value="true" />
+    <preference name="android-minSdkVersion" value="16" />
+    <preference name="BackupWebStorage" value="none" />
+    <preference name="SplashMaintainAspectRatio" value="true" />
+    <preference name="FadeSplashScreenDuration" value="300" />
+    <preference name="SplashShowOnlyFirstTime" value="false" />
+    <feature name="StatusBar">
+        <param name="ios-package" onload="true" value="CDVStatusBar" />
+    </feature>
+    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
+    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
+    <plugin name="cordova-plugin-console" spec="1.0.5" />
+    <plugin name="cordova-plugin-statusbar" spec="2.2.1" />
+    <plugin name="cordova-plugin-device" spec="1.1.4" />
+    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
+    <plugin name="cordova-sqlite-storage" spec="~2.0.3" />
 </widget>

config/webpack.common.js

@@ -0,0 +1,8 @@
+var webpack = require('webpack');
+
+module.exports = {
+  plugins: [
+    new webpack.EnvironmentPlugin(['IONIC_ENV'])
+  ]
+};
+

config/webpack.config.js

@@ -0,0 +1,9 @@
+const webpackMerge = require('webpack-merge');
+
+const commonConfig = require('./webpack.common.js');
+const ionicConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config.js');
+
+module.exports = webpackMerge(
+  commonConfig,
+  ionicConfig
+);

package.json

@@ -28,6 +28,7 @@
     "ionicons": "3.0.0",
     "rxjs": "5.1.1",
     "sw-toolbox": "3.4.0",
+    "webpack-merge": "^4.1.0",
     "zone.js": "0.8.4"
   },
   "devDependencies": {
@@ -50,5 +51,8 @@
       "locator": "ios"
     }
   ],
+  "config": {
+    "ionic_webpack": "./config/webpack.config.js"
+  },
   "description": "cnodejs-ionic2: An Ionic project"
 }

src/app/app.component.ts

@@ -3,6 +3,8 @@ import { Nav, Platform, AlertController } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
+import { ConfigService } from '../providers/config-service';
+
 import { TabsService } from '../providers/tabs-service';
 import { UserService } from '../providers/user-service';
 import { MessageService } from '../providers/message-service';
@@ -32,6 +34,7 @@ export class MyApp {
     public platform: Platform,
     statusBar: StatusBar,
     splashScreen: SplashScreen,
+    private configService: ConfigService,
     private tabsService: TabsService,
     private userService: UserService,
     private messageService: MessageService,
@@ -51,6 +54,9 @@ export class MyApp {
   ngAfterViewInit() {
     console.log('ng after view init');
 
+    this.userService.getCurrentUser().then((user) => {
+      this.user = user;
+    });
     this.tabs = this.tabsService.getTabs();
   }
 
@@ -89,36 +95,43 @@ export class MyApp {
 
   login() {
     console.log('login');
-    let alert = this.alertCtrl.create({
-      title: '输入Access Token',
-      subTitle: 'PC端登录cnodejs.org后，在设置页可以找到Access Token',
-      inputs: [
-        {
-          name: 'token',
-          placeholder: 'Token'
-        }
-      ],
-      buttons: [
-        {
-          text: '取消',
-          role: 'cancel',
-          handler: data => {
-            console.log('Cancel clicked');
+    // login automatic if have token
+    if (this.configService.token) {
+      this.userService.login(this.configService.token).then((response) => {
+        this.loginCallback(response);
+      });
+    } else {
+      let alert = this.alertCtrl.create({
+        title: '输入Access Token',
+        subTitle: 'PC端登录cnodejs.org后，在设置页可以找到Access Token',
+        inputs: [
+          {
+            name: 'token',
+            placeholder: 'Token'
           }
-        },
-        {
-          text: '提交',
-          handler: data => {
-            console.log(data);
-            if (data.token) {
-              this.userService.login(data.token).then((response) => {
-                this.loginCallback(response);
-              });
+        ],
+        buttons: [
+          {
+            text: '取消',
+            role: 'cancel',
+            handler: data => {
+              console.log('Cancel clicked');
+            }
+          },
+          {
+            text: '提交',
+            handler: data => {
+              console.log(data);
+              if (data.token) {
+                this.userService.login(data.token).then((response) => {
+                  this.loginCallback(response);
+                });
+              }
             }
           }
-        }
-      ]
-    });
-    alert.present();
+        ]
+      });
+      alert.present();
+    }
   }
 }

src/app/app.module.ts

@@ -2,12 +2,14 @@ import { NgModule, ErrorHandler } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule } from '@angular/http';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { IonicStorageModule } from '@ionic/storage';
 import { MomentModule } from 'angular2-moment';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { MyApp } from './app.component';
+import { ConfigService } from '../providers/config-service';
 
 @NgModule({
   declarations: [
@@ -17,6 +19,7 @@ import { MyApp } from './app.component';
     BrowserModule,
     HttpModule,
     MomentModule,
+    IonicStorageModule.forRoot(),
     IonicModule.forRoot(MyApp, {
       locationStrategy: 'hash'
     })
@@ -28,7 +31,8 @@ import { MyApp } from './app.component';
   providers: [
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    ConfigService
   ]
 })
 export class AppModule {}

src/providers/config-service.ts

@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+declare const process: any; // Typescript compiler will complain without this
+@Injectable()
+
+export class ConfigService {
+  public api:string;
+  public token:string;
+  constructor() {
+    console.log(process);
+    if (process.env.IONIC_ENV === 'prod') {
+      this.api = 'https://cnodejs.org/api/v1/';
+    } else {
+      this.api = 'http://localhost:3000/api/v1/';
+      this.token = ' 08bb9fe1-d42a-44ca-bae5-7c90585f8d7b';
+    }
+  }
+}
+

src/providers/message-service.ts

@@ -3,6 +3,7 @@ import { Http } from '@angular/http';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 
+import { ConfigService } from './config-service';
 import { Message, Messages } from '../classes/message';
 import { UserService } from './user-service';
 
@@ -14,41 +15,45 @@ import { UserService } from './user-service';
 */
 @Injectable()
 export class MessageService {
-  private countUrl: string = 'https://cnodejs.org/api/v1/message/count'
-  private messagesUrl: string = 'https://cnodejs.org/api/v1/messages'
+  private countUrl: string
+  private messagesUrl: string
 
-  constructor(public http: Http, private userService: UserService) {
+  constructor(public http: Http, public configService: ConfigService, private userService: UserService) {
     console.log('Hello MessageService Provider');
+    this.countUrl = this.configService.api + 'message/count';
+    this.messagesUrl = this.configService.api + 'messages';
   }
 
   getMessageCount(): Promise<any> {
 
     console.log('get messages count');
-    let currentUser = this.userService.getCurrentUser();
-    return this.http.get(this.countUrl, {
-        params: {
-          accesstoken: currentUser.accesstoken
-        }
-      }).toPromise().then(
-        (resposne) => {
-          console.log(resposne);
-          return resposne.json().data;
-        }
-      )
+    return this.userService.getCurrentUser().then((currentUser) => {
+      return this.http.get(this.countUrl, {
+          params: {
+            accesstoken: currentUser.accesstoken
+          }
+        }).toPromise().then(
+          (resposne) => {
+            console.log(resposne);
+            return resposne.json().data;
+          }
+       );
+    });
   }
 
   getMessages(): Promise<Messages> {
     console.log('get messages');
-    let currentUser = this.userService.getCurrentUser();
-    return this.http.get(this.messagesUrl, {
-        params: {
-          accesstoken: currentUser.accesstoken
-        }
-      }).toPromise().then(
-        (resposne) => {
-          return resposne.json().data as Messages;
-        }
-    );
+    return this.userService.getCurrentUser().then((currentUser) => {
+      return this.http.get(this.messagesUrl, {
+          params: {
+            accesstoken: currentUser.accesstoken
+          }
+        }).toPromise().then(
+          (resposne) => {
+            return resposne.json().data as Messages;
+          }
+      );
+    });
   }
 
 }

src/providers/storage-service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+import 'rxjs/add/operator/map';
+
+/*
+  Generated class for the StorageService provider.
+
+  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
+  for more info on providers and Angular 2 DI.
+*/
+@Injectable()
+export class StorageService {
+
+  constructor(public http: Http) {
+    console.log('Hello StorageService Provider');
+  }
+
+}

src/providers/topic-service.ts

@@ -3,6 +3,7 @@ import { Http } from '@angular/http';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/toPromise';
 
+import { ConfigService } from '../providers/config-service';
 import { Topic } from '../classes/topic';
 
 /*
@@ -13,15 +14,17 @@ import { Topic } from '../classes/topic';
 */
 @Injectable()
 export class TopicService {
-  private topicsUrl: string = 'https://cnodejs.org/api/v1/topics'
-  private topicUrl: string = 'https://cnodejs.org/api/v1/topic'
+  private topicsUrl: string
+  private topicUrl: string
   currentTab: string = 'all'
   private nextPage: number = 2
   private hasNextPage: boolean = true
   topics: Topic[] = []
 
-  constructor(public http: Http) {
+  constructor(public http: Http, public configService: ConfigService) {
     console.log('Hello TopicService Provider');
+    this.topicsUrl = configService.api + 'topics';
+    this.topicUrl = configService.api + 'topic';
   }
 
   getTopicById(id: string): Promise<Topic>{