(feat): implement newsfeed, tabview styling, notifications preview

app/App_Resources/Android/app.gradle

@@ -8,7 +8,7 @@
 android {
   defaultConfig {
     generatedDensities = []
-    applicationId = "com.minds.native"  
+    applicationId = "com.minds.native16"  
   }
   aaptOptions {
     additionalParameters "--no-version-vectors"

app/App_Resources/Android/values-v21/colors.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-	<color name="ns_accent">#3d5afe</color>
-</resources>
+	<color name="ns_accent">#FFF</color>
+</resources>

app/App_Resources/Android/values/colors.xml

@@ -2,6 +2,6 @@
 <resources>
     <color name="ns_primary">#F5F5F5</color>
 	<color name="ns_primaryDark">#757575</color>
-	<color name="ns_accent">#33B5E5</color>
+	<color name="ns_accent">#FFF</color>
     <color name="ns_blue">#272734</color>
-</resources>
+</resources>

app/App_Resources/Android/values/strings.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <string name="app_name">Hello!</string>
+    <string name="title_activity_kimera">Edge16</string>
+</resources>

app/app.component.css

@@ -1,11 +1,20 @@
+
 Page {
   background-color: white;
 }
 TextField {
   padding: 10;
   font-size: 13;
 }
-TextField, TextView {
-  background-color:transparent;
-  border-color: transparent;
+TextView {
+  background-color:#000;
+  border-color: #FFF;
+  border-width:0;
+  min-height:0;
+  padding:0;
+}
+
+
+.material-icon {
+   font-family: 'MaterialIcons-Regular';
 }

app/app.component.html

@@ -7,4 +7,5 @@
 </StackLayout>
 -->
 
+
 <page-router-outlet></page-router-outlet>

app/app.component.ts

@@ -1,4 +1,6 @@
 import {Component} from "@angular/core";
+import { Page } from "ui/page";
+
 
 @Component({
   selector: "minds-native-app",
@@ -8,6 +10,10 @@ import {Component} from "@angular/core";
 
 export class MindsNativeApp {
 
+  constructor(page : Page){
+    page.actionBarHidden = true;
+  }
+
   selectedIndex = 1;
 
   changedIndex(index){

app/app.css

@@ -0,0 +1,21 @@
+@import 'node_modules/nativescript-theme-core/css/core.light.css';
+
+Page {
+  background-color: white;
+}
+TextField {
+  padding: 10;
+  font-size: 13;
+}
+TextView {
+  background-color:#000;
+  border-color: #FFF;
+  border-width:0;
+  min-height:0;
+  padding:0;
+}
+
+
+.material-icon {
+   font-family: 'MaterialIcons-Regular';
+}

app/app.module.ts

@@ -5,23 +5,42 @@ import { NgModule } from "@angular/core";
 import { MindsNativeApp } from "./app.component";
 
 import { ApiModule } from './src/common/services/api.module';
+import { CacheModule } from './src/common/services/cache/cache.module';
+
 import { AuthModule } from './src/modules/auth/auth.module';
 import { TabsModule } from './src/modules/tabs/tabs.module';
 import { ChannelModule } from './src/modules/channel/channel.module';
+import { NotificationsModule } from './src/modules/notifications/notifications.module';
+
 
 import { routes } from "./app.routes";
 
+import { NSFRESCO_DIRECTIVES } from 'nativescript-fresco/angular';
+import * as frescoModule from "nativescript-fresco";
+import * as applicationModule from "application";
+
+if (applicationModule.android) {
+    applicationModule.on("launch", () => {
+        frescoModule.initialize();
+    });
+}
+
+import {registerElement} from "nativescript-angular/element-registry";
+registerElement("VideoPlayer", () => require("nativescript-videoplayer").Video);
+
 
 @NgModule({
-  declarations: [ MindsNativeApp ],
+  declarations: [ MindsNativeApp, NSFRESCO_DIRECTIVES ],
   bootstrap: [ MindsNativeApp ],
   imports: [
     NativeScriptModule,
     NativeScriptHttpModule,
     ApiModule,
+    CacheModule,
     AuthModule,
     TabsModule,
     ChannelModule,
+    NotificationsModule,
     NativeScriptRouterModule,
     NativeScriptRouterModule.forRoot(routes)
   ]

app/package.json

@@ -28,6 +28,7 @@
     "v8Flags": "--expose_gc"
   },
   "dependencies": {
-    "nativescript-pulltorefresh": "^1.1.8"
+    "nativescript-pulltorefresh": "^1.1.8",
+    "nativescript-theme-core": "^1.0.1"
   }
 }

app/src/common/pipes/image-cache.pipe.ts

@@ -5,7 +5,7 @@ import { Pipe } from '@angular/core';
 import * as applicationModule from "application";
 
 var cache = new imageCache.Cache();
-//cache.maxRequests = 10;
+cache.maxRequests = 10;
 //cache.placeholder = imageSource.fromFile("~/src/assets/full_logo.png");
 
 @Pipe({
@@ -16,17 +16,17 @@ export class ImageCachePipe {
 
   transform(src : string){
 
+    //android doesn't like/need it!
+    //if (applicationModule.android){
+      return src;
+    //}
+
     var image = cache.get(src);
 
     if (image){
       return image;
     }
 
-    //android doesn't like it!
-    if (applicationModule.android){
-      return cache.placeholder;
-    }
-
     cache.push({
       key: src,
       url: src,

app/src/common/services/cache/cache.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CacheService } from './cache.service';
+
+@NgModule({
+  providers: [{
+    provide: CacheService,
+    useFactory: () => {
+      return new CacheService
+    },
+    deps: []
+  }]
+})
+export class CacheModule { }

app/src/common/services/cache/cache.service.ts

@@ -0,0 +1,21 @@
+export class CacheService {
+
+  data : any = {};
+
+  get(key : string){
+    return this.data[key];
+  }
+
+  set(key, value, replace: boolean = true){
+    //if(key in this.data && !replace)
+    //  return; //already cached and can't update
+    //alert('set');
+    this.data[key] = value;
+
+  }
+
+  destroy(key){
+
+  }
+
+}

app/src/modules/channel/channel.component.html

@@ -1,4 +1,9 @@
 <StackLayout>
+  <StackLayout *ngIf="!channel">
+    <Label text="One moment..."
+      style="font-weight:bold"
+    ></Label>
+  </StackLayout>
   <StackLayout *ngIf="channel">
 
     <PullToRefresh #puller (refresh)="refresh(puller)">
@@ -8,7 +13,7 @@
 
           <StackLayout>
 
-            <AbsoluteLayout>
+            <AbsoluteLayout style="background-color: #333">
               <!-- Banner -->
               <Image
                 class="m-channel--banner"
@@ -63,8 +68,8 @@
           </StackLayout>
 
 
-          <StackLayout *ngIf="feed">
-            <activity [entity]="item" *ngFor="let item of feed"></activity>
+          <StackLayout>
+            <channel-feed [channel]="channel"></channel-feed>
           </StackLayout>
 
         </StackLayout>

app/src/modules/channel/channel.component.ts

@@ -2,6 +2,8 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Page } from "ui/page";
 import { Client } from '../../common/services/api/client';
+import { CacheService } from '../../common/services/cache/cache.service';
+import * as applicationModule from "application";
 
 @Component({
   moduleId: module.id,
@@ -16,8 +18,9 @@ export class ChannelComponent {
   guid : string = "me";
   channel;
 
-  constructor(private client : Client, private route: ActivatedRoute, page : Page){
-    page.actionBarHidden = false;
+  constructor(private client : Client, private route: ActivatedRoute, page : Page, private cache : CacheService){
+    if(applicationModule.android)
+      page.actionBarHidden = true;
   }
 
   ngOnInit(){
@@ -26,25 +29,25 @@ export class ChannelComponent {
       this.feed = [];
       this.guid = params['id'];
       this.load();
-      this.loadFeed();
+
     });
   }
 
+  //ngAfterViewInit() {
+    //this.loadFeed();
+  //}
+
   load(){
+    let _channel = this.cache.get('channel:' + this.guid);
+    if(_channel){
+      this.channel = _channel;
+      return true;
+    }
+
     this.client.get('api/v1/channel/' + this.guid)
       .then((response : any) => {
         this.channel = response.channel;
-      });
-  }
-
-  loadFeed(){
-    this.client.get('api/v1/newsfeed/personal/' + this.guid, { limit: 12, offset: ""})
-      .then((response : any) => {
-        console.log(response);
-        for(let activity of response.activity){
-          this.feed.push(activity);
-        }
-        //this.offset = response['load-next'];
+        this.cache.set('channel:' + this.guid, this.channel, true);
       });
   }
 

app/src/modules/channel/channel.module.ts

@@ -4,6 +4,7 @@ import { NativeScriptModule } from "nativescript-angular/platform";
 
 import { Client } from '../../common/services/api/client';
 import { ChannelComponent } from './channel.component';
+import { ChannelFeedComponent } from './feed.component';
 import { NewsfeedModule } from '../newsfeed/newsfeed.module';
 
 @NgModule({
@@ -24,7 +25,7 @@ import { NewsfeedModule } from '../newsfeed/newsfeed.module';
   ]*/
   imports: [ NativeScriptModule, NativeScriptRouterModule, NewsfeedModule ],
   providers: [ Client ],
-  declarations: [ ChannelComponent ],
+  declarations: [ ChannelComponent, ChannelFeedComponent ],
   exports: [ ChannelComponent ]
 })
 export class ChannelModule { }

app/src/modules/channel/feed.component.css

@@ -0,0 +1,15 @@
+.m-channel--banner{
+  background:#EEE;
+}
+.m-channel--name{
+  color:#FFF;
+  font-size:24;
+}
+
+.m-channel--stats-bar StackLayout{
+  padding:8;
+  text-align:center;
+}
+.m-channel--stats-bar StackLayout label{
+  color:#FFF;
+}

app/src/modules/channel/feed.component.html

@@ -0,0 +1,3 @@
+<StackLayout>
+  <activity [entity]="item" *ngFor="let item of feed"></activity>
+</StackLayout>

app/src/modules/channel/feed.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Page } from "ui/page";
+import { Client } from '../../common/services/api/client';
+import { CacheService } from '../../common/services/cache/cache.service';
+import * as applicationModule from "application";
+
+@Component({
+  moduleId: module.id,
+  selector: 'channel-feed',
+  templateUrl: 'feed.component.html',
+  styleUrls: [ 'feed.component.css' ]
+})
+
+export class ChannelFeedComponent {
+
+  feed : Array<any> = [];
+  @Input() channel;
+
+  constructor(private client : Client, private cache : CacheService){ }
+
+  ngOnInit(){
+    this.loadFeed();
+  }
+
+
+  loadFeed(){
+    this.client.get('api/v1/newsfeed/personal/' + this.channel.guid, { limit: 12, offset: ""})
+      .then((response : any) => {
+        //console.log(response);
+        for(let activity of response.activity){
+          this.feed.push(activity);
+        }
+        //this.offset = response['load-next'];
+      });
+  }
+
+  refresh(){
+
+  }
+
+}