Merge pull request #28 from NativeScript/update-demo-apps

Update demo apps

Author: angeltsvetkov

README.md

@@ -1,6 +1 @@
-<StackLayout>
-    <Label text="{{userId}}"></Label>
-    <FacebookLoginButton (login)="onLogin($event)" (logout)="onLogout($event)"></FacebookLoginButton>
-    <Button text="Custom Login Button" (tap)="manualLogin()"></Button>
-    <Button text="Custom Logout Button" (tap)="manualLogout()"></Button>
-</StackLayout>
+<page-router-outlet></page-router-outlet>

demo-angular/app/app.component.html

@@ -5,37 +5,4 @@ import * as Facebook from "nativescript-facebook";
     selector: "ns-app",
     templateUrl: "app.component.html",
 })
-export class AppComponent {
-    userId: string = "not logged in";
-
-    constructor(private ref: ChangeDetectorRef) {
-    }
-
-    onLogin = function (eventData: Facebook.LoginEventData) {
-        if (eventData.error) {
-            alert("Error during login: " + eventData.error);
-        } else {
-            this.userId = "UserId: " + eventData.loginResponse.userId;
-            this.ref.detectChanges();
-        }
-    };
-
-    manualLogin = function () {
-        Facebook.login((error, loginResponse) => {
-            this.userId = "UserId: " + loginResponse.userId;
-            this.ref.detectChanges();
-        });
-    };
-
-    manualLogout = function () {
-        Facebook.logout(() => {
-            this.userId = "not logged in";
-            this.ref.detectChanges();
-        });
-    };
-
-    public onLogout() {
-        this.userId = "not logged in";
-        this.ref.detectChanges();
-    }
-}
+export class AppComponent {}

demo-angular/app/app.component.ts

@@ -0,0 +1,3 @@
+export const config = {
+    FACEBOOK_GRAPH_API_URL: "https://graph.facebook.com/v2.9"
+};

demo-angular/app/app.config.ts

@@ -10,3 +10,4 @@ of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
 @import 'nativescript-theme-core/css/core.light.css';
+

demo-angular/app/app.css

@@ -1,23 +1,33 @@
-import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NgModule, NO_ERRORS_SCHEMA, NgModuleFactoryLoader } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
+import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";
 import { AppComponent } from "./app.component";
-
+import { LoginModule } from "./pages/login/login.module";
+import { HomeModule } from "./pages/home/home.module";
 import { NativeScriptFacebookModule } from "nativescript-facebook/angular";
-
 import * as application from 'application';
+import { routes } from "./app.routing";
+import { NavigationService } from "./services/navigation.service";
+
 let nsFacebook = require('nativescript-facebook');
 
 application.on(application.launchEvent, function (args) {
     nsFacebook.init("1771472059772879");
 });
 
 @NgModule({
-    bootstrap: [ AppComponent ],
+    bootstrap: [AppComponent],
     imports: [
         NativeScriptModule,
-        NativeScriptFacebookModule
+        NativeScriptFacebookModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forRoot(routes)
+    ],
+    providers: [
+        NavigationService,
+        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
     ],
-    declarations: [ AppComponent ],
-    schemas: [ NO_ERRORS_SCHEMA ]
+    declarations: [AppComponent],
+    schemas: [NO_ERRORS_SCHEMA]
 })
 export class AppModule { }

demo-angular/app/app.module.ts

@@ -0,0 +1,16 @@
+export const routes = [
+    {
+        path: "home",
+        loadChildren: "./pages/home/home.module#HomeModule"
+    },
+    {
+        path: "login",
+        loadChildren: "./pages/login/login.module#LoginModule"
+    },
+    {
+        path: "",
+        redirectTo: "login",
+        pathMatch: "full"
+    }
+
+];

demo-angular/app/app.routing.ts

@@ -0,0 +1,26 @@
+.label {
+    font-size: 10;
+    font-weight: bold;
+    padding-top: 10;
+}
+
+.home {
+    margin-left: 30;
+    margin-right: 30;
+    margin-top: 20%;
+}
+
+.home .buttons {
+    margin-top: 30%;
+}
+
+.home .info {
+    margin-top: 20;
+    horizontal-align: center;
+}
+
+.avatar {
+    border-radius: 100;
+    width: 150;
+    height: auto;
+}

demo-angular/app/pages/home/home.component.css

@@ -0,0 +1,13 @@
+<StackLayout class="home">
+    <Image *ngIf="avatarUrl" src="{{avatarUrl}}" class="avatar"></Image>
+    <StackLayout class="info">
+        <Label text="ID:" class="label"></Label>
+        <Label text="{{ userId }}"></Label>
+        <Label text="NAME:" class="label"></Label>
+        <Label text="{{ username }}"></Label>
+    </StackLayout>
+    <StackLayout class="buttons">
+        <FacebookLoginButton (logout)="onLogout($event)"></FacebookLoginButton>
+        <Button text="Log out (custom)" (tap)="logout()"></Button>
+    </StackLayout>
+</StackLayout>

demo-angular/app/pages/home/home.component.html

@@ -0,0 +1,55 @@
+import { Component, ChangeDetectorRef } from "@angular/core";
+import * as Facebook from "nativescript-facebook";
+import { NavigationService } from "../../services/navigation.service";
+import { config } from "../../app.config";
+let http = require("http");
+let appSettings = require("application-settings");
+
+@Component({
+    selector: "home",
+    moduleId: module.id,
+    templateUrl: "home.component.html",
+    styleUrls: ["home.component.css"]
+})
+export class HomeComponent {
+    accessToken: string = appSettings.getString("access_token");
+    userId: string;
+    username: string;
+    avatarUrl: string;
+
+    constructor(private ref: ChangeDetectorRef, private navigationService: NavigationService) {
+        // Get logged in user's info
+        http.getJSON(config.FACEBOOK_GRAPH_API_URL + "/me?access_token=" + this.accessToken).then((res) => {
+            this.username = res.name;
+            this.userId = res.id;
+
+            // Get logged in user's avatar
+            // ref: https://github.com/NativeScript/NativeScript/issues/2176
+            http.getJSON(config.FACEBOOK_GRAPH_API_URL + "/" + this.userId + "/picture?type=large&redirect=false&access_token=" + this.accessToken).then((res) => {
+                this.avatarUrl = res.data.url;
+                this.ref.detectChanges();
+            }, function (err) {
+                alert("Error getting user info: " + err);
+            });
+        }, function (err) {
+            alert("Error getting user info: " + err);
+        });
+    }
+
+    onLogout(eventData: Facebook.LoginEventData) {
+        if (eventData.error) {
+            alert("Error during login: " + eventData.error);
+        } else {
+            appSettings.clear();
+            this.navigationService.go(['login'], "slideRight");
+        }
+
+    }
+
+    logout() {
+        Facebook.logout(() => {
+            appSettings.clear();
+            this.navigationService.go(['login'], "slideRight");
+        });
+    }
+}