(1337programming#25) Hacker News

package.json

@@ -36,6 +36,7 @@
     "reflect-metadata": "^0.1.0",
     "rtts_assert": "2.0.0-alpha.34",
     "rx": "^2.5.3",
+    "firebase": "^2.2.4",
     "zone.js": "^0.5.2"
   },
   "devDependencies": {
@@ -68,6 +69,7 @@
     "url-loader": "^0.5.5",
     "webpack": "^1.10.5",
     "webpack-dev-server": "^1.10.1",
-    "webpack-stream": "^2.1.0"
+    "webpack-stream": "^2.1.0",
+    "moment": "^2.10.6"
   }
 }

src/app/components/example-modules/example-modules.ts

@@ -7,6 +7,7 @@ import {RouteConfig, routerDirectives} from 'angular2/router';
 import {Tictactoe} from './tictactoe-module/tictactoe';
 import {Search} from './search-module/search';
 import {Memory} from './memory-module/memory';
+import {HackerNews} from './hn-module/hn';
 // View
 let template = require('./example-modules.html');
 let styles = require('./example-modules.css')
@@ -17,7 +18,8 @@ let styles = require('./example-modules.css')
   { path: '/',              redirectTo: '/search' },
   { path: '/search',        as: 'search',        component: Search },
   { path: '/tictactoe',     as: 'tictactoe',     component: Tictactoe },
-  { path: '/memory',        as: 'memory',        component: Memory }
+  { path: '/memory',        as: 'memory',        component: Memory },
+  { pathL '/hn',            as: 'hn',            component: HackerNews }
 ])
 @View({
   directives: [ routerDirectives, CSSClass ],

src/app/components/example-modules/hn-module/components/hn-item/hn-item.ts

@@ -0,0 +1,70 @@
+import { Component, View, For, If, Switch, SwitchWhen, SwitchDefault } from 'angular2/angular2';
+import { HNApi } from '../../services/hn-api';
+import { timeAgo } from '../../../../../services/time';
+import { DomainPipe } from './pipes/domain.pipe';
+
+let view = require('./views/hn-item.html');
+let styles = require('./styles/hn-item.less');
+
+var hnApi;
+
+@Component({
+  selector: 'hn-item',
+  viewBindings: [HNApi],
+  properties: {
+    newItemId: 'itemId',
+    newLoadChildren: 'loadChildren',
+    newTopLevel: 'topLevel'
+  }
+})
+@View({
+  template: view,
+  styles: [ styles ],
+  directives: [
+    For,
+    If,
+    Switch,
+    SwitchWhen,
+    SwitchDefault
+  ]
+})
+export class HNItem {
+  data: Object;
+  domainPipe: Object;
+  loadChildren: boolean;
+  topLevel: boolean;
+  itemId;
+  timeAgo;
+
+
+  constructor(hnApiInstance: HNApi) {
+    this.domainPipe = DomainPipe.transform;
+
+    // Default value.
+    this.loadChildren = true;
+
+    // Make accessible in other methods.
+    hnApi = hnApiInstance;
+
+    this.timeAgo = timeAgo;
+  }
+
+  set newItemId(itemId) {
+    this.itemId = itemId;
+    this.fetchData();
+  }
+
+  set newLoadChildren(loadChildren) {
+    this.loadChildren = loadChildren === 'true';
+  }
+
+  set newTopLevel(topLevel) {
+    this.topLevel = topLevel === 'true';
+  }
+
+  fetchData() {
+    hnApi.fetchItem(this.itemId).then(data => {
+      this.data = data;
+    });
+  }
+}

src/app/components/example-modules/hn-module/components/hn-item/pipes/domain.ts

@@ -0,0 +1,11 @@
+import { Pipes } from 'angular2/angular2';
+
+export class DomainPipe extends Pipes {
+  static transform(input) {
+    if (!input) {
+      return '';
+    }
+    var domain = input.split('/')[2];
+    return domain ? domain.replace('www.', '') : domain;
+  }
+}

src/app/components/example-modules/hn-module/components/hn-item/styles/hn-item.less

@@ -0,0 +1,33 @@
+hn-item {
+  display: block;
+  margin: 10px 0;
+}
+
+.hnItem-title {
+  font-size: 10pt;
+  color: #828282;
+}
+
+.hnItem > section {
+  font-size: 7pt;
+  &,
+  a:link,
+  a:visited {
+    color: #828282;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+
+.hnItem--comment {
+  margin: 15px 0;
+}
+
+.hnItem--coment-content {
+  margin-top: 5px;
+}
+
+.hnItem--comment-children {
+  margin-left: 50px;
+}

src/app/components/example-modules/hn-module/components/hn-item/views/hn-item.html

@@ -0,0 +1,69 @@
+<div class="hnItem-loading spinner" *if="!data">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>
+<div class="hnItem-container" *if="data">
+  <div [switch]="data.type">
+    <template [switch-when]="'comment'">
+      <div class="hnItem--comment">
+        <header>
+          <span class="u-pointer" (click)="collapsed = !collapsed" *if="!topLevel">
+            [{{collapsed ? '+' : '-'}}]
+          </span>
+          <a [href]="urlForUser(data.by)" class="hnItem-author">{{data.by}}</a>
+          <span>{{timeAgo(data.time)}}</span> |
+          <a [href]="urlForItem(data.id)">link</a>
+        </header>
+        <section class="hnItem--coment-content" [hidden]="!data || collapsed">{{data.text}}</section>
+        <div class="hnItem--comment-children" *if="loadChildren && data.kids" [hidden]="collapsed">
+          <div *for="#kidId of data.kids">
+            child id: {{kidId}}
+            <hn-item item-id="{{kidId}}"></hn-item>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template [switch-when]="'job'">
+      <div class="hnItem--story">
+        <header>
+          <a class="hnItem-title" [href]="data.url">{{data.title}}</a>
+          <span class="comhead" [hidden]="!data.url">({{domainPipe(data.url)}})</span>
+        </header>
+        <section [hidden]="!data">
+          <span>{{timeAgo(data.time)}}</span>
+        </section>
+      </div>
+    </template>
+    <template [switch-when]="'poll'">
+      <div class="hnItem--story">
+        <header>
+          <a class="hnItem-title" [href]="data.url">{{data.title}}</a>
+          <span class="comhead" [hidden]="!data.url">({{domainPipe(data.url)}})</span>
+        </header>
+        <section [hidden]="!data">
+          <span>{{data.score}} points</span> by
+          <a [href]="urlForUser(data.by)">{{data.by}}</a>
+          <span>{{timeAgo(data.time)}}</span> |
+          <a [href]="urlForItem(data.id)">comments</a>
+        </section>
+      </div>
+    </template>
+    <template [switch-default]>
+      <div class="hnItem--story">
+        <header>
+          <a class="hnItem-title" [href]="data.url">{{data.title}}</a>
+          <span class="comhead" [hidden]="!data.url">({{domainPipe(data.url)}})</span>
+        </header>
+        <section [hidden]="!data">
+          <span>{{data.score}} points</span> by
+          <a [href]="urlForUser(data.by)">{{data.by}}</a>
+          <span>{{timeAgo(data.time)}}</span> |
+          <a [href]="urlForItem(data.id)">comments</a>
+        </section>
+      </div>
+    </template>
+  </div>
+</div>

src/app/components/example-modules/hn-module/directives/home.ts

@@ -0,0 +1,28 @@
+import { Component, View, For } from 'angular2/angular2';
+import { HNApi } from '../services/hn-api';
+import { HNItem } from '../components/hn-item/hn-item';
+
+let view = require('../views/home.html');
+let styles = require('../styles/hn.less');
+
+@Component({
+  selector: 'page-home',
+  viewBindings: HNApi
+})
+@View({
+  directives: [
+    For,
+    HNItem
+  ],
+  styles: [ styles ],
+  template: view
+})
+export class HomePage {
+  topStories: Array<HNItem>;
+
+  constructor(public hnApi: HNApi) {
+    hnApi.fetchTopStories().then(() => {
+      this.topStories = hnApi.topStories;
+    });
+  }
+}

src/app/components/example-modules/hn-module/directives/item.ts

@@ -0,0 +1,27 @@
+import { Component, View, For } from 'angular2/angular2';
+import { HNApi } from '../services/hn-api';
+import { HNItem } from '../../components/hn-item';
+
+let view = require('../views/item.html');
+let styles = require('../styles/hn.less');
+
+@Component({
+  selector: 'page-item',
+  viewBindings: HNApi
+})
+@View({
+  directives: [
+    For,
+    HNItem
+  ],
+  template: view,
+  styles: [ styles ]
+})
+export class ItemPage {
+  childrenIds: Array;
+  itemId;
+
+  constructor(public hnApi: HNApi, id) {
+    this.itemId = id;
+  }
+}

src/app/components/example-modules/hn-module/directives/user.ts

@@ -0,0 +1,30 @@
+import { Component, View, For, If } from 'angular2/angular2';
+import { HNApi } from '../services/hn-api';
+import { timeAgo } from '../../../../../services/time';
+import { HNItem } from '../components/hn-item/hn-item';
+
+let view = require('../views/user.html');
+let styles = require('../styles/hn.less');
+
+@Component({
+  selector: 'page-user',
+  viewBindings: HNApi
+})
+@View({
+  directives: [
+    For,
+    If,
+    HNItem
+  ],
+  styles: [ styles ],
+  template: view
+})
+export class UserPage {
+  showSubmissions: boolean;
+  timeAgo;
+
+  constructor(hnApi: HNApi) {
+    this.timeAgo = timeAgo;
+    this.showSubmissions = false;
+  }
+}

src/app/components/example-modules/hn-module/hn.ts

@@ -0,0 +1,35 @@
+//import {zone} from 'zone.js';
+//window.zone = window.Zone = zone;
+
+let styles = require('./styles/hn.less');
+let view = require('/.views/hn.html');
+
+import {RouteConfig} from 'angular2/router';
+import {Component, View} from 'angular2/angular2';
+import {HomePage} from './directives/home'
+import {ItemPage} from './directives/item'
+import {UserPage} from './directives/user'
+import {HNItem} from './components/hn-item/hn-item';
+
+
+@Component({
+  selector: 'hacker-news'
+})
+@RouteConfig([
+  { path: '/',           redirectTo: '/hn' },
+  { path: '/hn',         as: 'hn',        component: HackerNews },
+  { path: '/hn-item',  as: 'hn-item',     component: HNItem },
+])
+@View({
+  template: view,
+  styles: [ styles ],
+  directives: [
+    HomePage,
+    ItemPage,
+    UserPage
+  ]
+})
+export class HackerNews {
+
+}
+