├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── LICENCE ├── README.md ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── src ├── app │ ├── app-routing │ │ └── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── components │ │ ├── collapsible-list │ │ │ ├── collapsible-list.component.html │ │ │ ├── collapsible-list.component.scss │ │ │ ├── collapsible-list.component.spec.ts │ │ │ └── collapsible-list.component.ts │ │ ├── footer │ │ │ ├── footer.component.html │ │ │ ├── footer.component.scss │ │ │ ├── footer.component.spec.ts │ │ │ └── footer.component.ts │ │ ├── header │ │ │ ├── header.component.html │ │ │ ├── header.component.scss │ │ │ ├── header.component.spec.ts │ │ │ └── header.component.ts │ │ ├── story-feed-item-detail │ │ │ ├── story-feed-item-detail.component.html │ │ │ ├── story-feed-item-detail.component.scss │ │ │ ├── story-feed-item-detail.component.spec.ts │ │ │ └── story-feed-item-detail.component.ts │ │ ├── story-feed-item │ │ │ ├── story-feed-item.component.html │ │ │ ├── story-feed-item.component.scss │ │ │ ├── story-feed-item.component.spec.ts │ │ │ └── story-feed-item.component.ts │ │ ├── story-feed │ │ │ ├── story-feed.component.html │ │ │ ├── story-feed.component.scss │ │ │ ├── story-feed.component.spec.ts │ │ │ └── story-feed.component.ts │ │ └── user │ │ │ ├── user.component.html │ │ │ ├── user.component.scss │ │ │ ├── user.component.spec.ts │ │ │ └── user.component.ts │ └── services │ │ ├── hackernews-api.service.spec.ts │ │ └── hackernews-api.service.ts ├── assets │ ├── .gitkeep │ ├── LICENCE.txt │ ├── logo_HN.png │ └── spinner_HN.svg ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tsconfig.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "hackernews-clone" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "scss", 58 | "component": { 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /dist-server 6 | /tmp 7 | /out-tsc 8 | 9 | # dependencies 10 | /node_modules 11 | 12 | # IDEs and editors 13 | /.idea 14 | .project 15 | .classpath 16 | .c9/ 17 | *.launch 18 | .settings/ 19 | *.sublime-workspace 20 | 21 | # IDE - VSCode 22 | .vscode/* 23 | !.vscode/settings.json 24 | !.vscode/tasks.json 25 | !.vscode/launch.json 26 | !.vscode/extensions.json 27 | 28 | # misc 29 | /.sass-cache 30 | /connect.lock 31 | /coverage 32 | /libpeerconnection.log 33 | npm-debug.log 34 | yarn-error.log 35 | testem.log 36 | /typings 37 | 38 | # e2e 39 | /e2e/*.js 40 | /e2e/*.map 41 | 42 | # System Files 43 | .DS_Store 44 | Thumbs.db 45 | -------------------------------------------------------------------------------- /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Kapil Lamba 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hackernews clone using Angular 5 2 | 3 | [![Current Version](https://img.shields.io/badge/version-1.0.0-green.svg)](https://github.com/kapillamba4/hackernews-clone) [![Live Demo](https://img.shields.io/badge/demo-online-green.svg)](https://kapillamba4.github.io/hackernews-clone) 4 | 5 | This is an angular web app powered by RxJS that provides the most of the functionalities of hackernews without the login functionality 6 | 7 | ![Demo Preview](https://i.imgur.com/mqhA4E8.png) 8 | [Live Demo](https://kapillamba4.github.io/hackernews-clone) 9 | 10 | --- 11 | 12 | ## Features 13 | 14 | * Support for: 15 | * https://kapillamba4.github.io/hackernews-clone/newstories 16 | * https://kapillamba4.github.io/hackernews-clone/beststories 17 | * https://kapillamba4.github.io/hackernews-clone/askstories 18 | * https://kapillamba4.github.io/hackernews-clone/showstories 19 | * https://kapillamba4.github.io/hackernews-clone/jobstories 20 | * [View comments for a story feed](https://kapillamba4.github.io/hackernews-clone/item/16718285) 21 | * [View user data](https://kapillamba4.github.io/hackernews-clone/user/joshuacc) 22 | 23 | ## Setup 24 | 25 | Clone this repo to your desktop and run `npm install` to install all the dependencies. 26 | 27 | --- 28 | 29 | ## Usage 30 | 31 | Once the dependencies are installed, you can run `npm start` to start the application. 32 | 33 | App will be live at `localhost:4200` 34 | 35 | --- 36 | 37 | ## License 38 | 39 | > You can check out the full license [here](https://github.com/kapillamba4/hackernews-clone/blob/master/LICENCE) 40 | 41 | This project is licensed under the terms of the **MIT** license. 42 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('hackernews-clone App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hackernews-clone", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build --prod --build-optimizer --aot", 9 | "deploy": "ng build --prod --build-optimizer --aot --base-href https://kapillamba4.github.io/hackernews-clone/ && cp ./dist/index.html ./dist/404.html && ./node_modules/.bin/angular-cli-ghpages --no-silent", 10 | "surge": "npm run build && cp ./dist/index.html ./dist/404.html && surge -p dist/ -d https://hackernews-clone.surge.sh/ && xdg-open https://hackernews-clone.surge.sh/ >/dev/null", 11 | "test": "ng test", 12 | "lint": "ng lint", 13 | "e2e": "ng e2e" 14 | }, 15 | "private": false, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/kapillamba4/hackernews-clone.git" 19 | }, 20 | "dependencies": { 21 | "@angular/animations": "^5.2.0", 22 | "@angular/common": "^5.2.0", 23 | "@angular/compiler": "^5.2.0", 24 | "@angular/core": "^5.2.0", 25 | "@angular/forms": "^5.2.0", 26 | "@angular/http": "^5.2.0", 27 | "@angular/platform-browser": "^5.2.0", 28 | "@angular/platform-browser-dynamic": "^5.2.0", 29 | "@angular/router": "^5.2.0", 30 | "core-js": "^2.4.1", 31 | "font-awesome": "^4.7.0", 32 | "moment": "^2.21.0", 33 | "rxjs": "^5.5.6", 34 | "zone.js": "^0.8.19" 35 | }, 36 | "devDependencies": { 37 | "@angular/cli": "~1.7.3", 38 | "@angular/compiler-cli": "^5.2.0", 39 | "@angular/language-service": "^5.2.0", 40 | "@types/jasmine": "~2.8.3", 41 | "@types/jasminewd2": "~2.0.2", 42 | "@types/node": "~6.0.60", 43 | "angular-cli-ghpages": "^0.5.2", 44 | "codelyzer": "^4.0.1", 45 | "jasmine-core": "~2.8.0", 46 | "jasmine-spec-reporter": "~4.2.1", 47 | "karma": "~2.0.0", 48 | "karma-chrome-launcher": "~2.2.0", 49 | "karma-coverage-istanbul-reporter": "^1.2.1", 50 | "karma-jasmine": "~1.1.0", 51 | "karma-jasmine-html-reporter": "^0.2.2", 52 | "protractor": "~5.1.2", 53 | "ts-node": "~4.1.0", 54 | "tslint": "~5.9.1", 55 | "typescript": "~2.5.3" 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/app/app-routing/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { Route } from '@angular/router/src/config'; 4 | import { StoryFeedComponent } from '../components/story-feed/story-feed.component'; 5 | import { UserComponent } from '../components/user/user.component'; 6 | import { StoryFeedItemDetailComponent } from '../components/story-feed-item-detail/story-feed-item-detail.component'; 7 | 8 | const routes: Routes = [ 9 | { path: 'topstories', data: { feed: 'topstories' }, component: StoryFeedComponent }, 10 | { path: '', redirectTo: 'topstories', pathMatch: 'full' }, 11 | { path: 'newstories', data: { feed: 'newstories' }, component: StoryFeedComponent }, 12 | { path: 'beststories', data: { feed: 'beststories' }, component: StoryFeedComponent }, 13 | { path: 'askstories', data: { feed: 'askstories' }, component: StoryFeedComponent }, 14 | { path: 'showstories', data: { feed: 'showstories' }, component: StoryFeedComponent }, 15 | { path: 'jobstories', data: { feed: 'jobstories' }, component: StoryFeedComponent }, 16 | { path: 'user/:username', component: UserComponent }, 17 | { path: 'item/:itemId', component: StoryFeedItemDetailComponent } 18 | ]; 19 | 20 | @NgModule({ 21 | imports: [RouterModule.forRoot(routes)], 22 | exports: [RouterModule], 23 | declarations: [] 24 | }) 25 | export class AppRoutingModule {} 26 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | $ghost-white: rgb(239, 239, 247); 2 | @import url('https://fonts.googleapis.com/css?family=Roboto'); 3 | 4 | ng, 5 | body, 6 | html { 7 | margin: 0; 8 | background-color: $ghost-white; 9 | font-family: 'Roboto', sans-serif; 10 | } 11 | 12 | body { 13 | overflow-y: scroll; 14 | } 15 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewEncapsulation } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | encapsulation: ViewEncapsulation.None, 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'] 8 | }) 9 | export class AppComponent { 10 | title = 'app'; 11 | } 12 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { HttpClientModule } from '@angular/common/http'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { HeaderComponent } from './components/header/header.component'; 8 | import { FooterComponent } from './components/footer/footer.component'; 9 | import { StoryFeedComponent } from './components/story-feed/story-feed.component'; 10 | import { HackernewsApiService } from './services/hackernews-api.service'; 11 | 12 | import { AppRoutingModule } from './app-routing/app-routing.module'; 13 | import { StoryFeedItemComponent } from './components/story-feed-item/story-feed-item.component'; 14 | import { StoryFeedItemDetailComponent } from './components/story-feed-item-detail/story-feed-item-detail.component'; 15 | import { UserComponent } from './components/user/user.component'; 16 | import { CollapsibleListComponent } from './components/collapsible-list/collapsible-list.component'; 17 | 18 | @NgModule({ 19 | declarations: [ 20 | AppComponent, 21 | HeaderComponent, 22 | FooterComponent, 23 | StoryFeedComponent, 24 | StoryFeedItemComponent, 25 | StoryFeedItemDetailComponent, 26 | UserComponent, 27 | CollapsibleListComponent 28 | ], 29 | imports: [BrowserModule, AppRoutingModule, HttpClientModule, HttpModule], 30 | providers: [HackernewsApiService], 31 | bootstrap: [AppComponent] 32 | }) 33 | export class AppModule {} 34 | -------------------------------------------------------------------------------- /src/app/components/collapsible-list/collapsible-list.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/components/collapsible-list/collapsible-list.component.scss: -------------------------------------------------------------------------------- 1 | $light-grey: rgb(211, 211, 211); 2 | .comment-wrapper { 3 | border-bottom: 1px solid $light-grey; 4 | } 5 | .comment-header { 6 | font-weight: bold; 7 | } 8 | ul { 9 | padding: 8px; 10 | list-style: none; 11 | margin-left: 16px; 12 | } 13 | .comment-text { 14 | white-space: pre-wrap; 15 | word-wrap: break-word; 16 | } 17 | .comment-username { 18 | text-decoration: underline; 19 | &:hover { 20 | text-decoration: none; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/app/components/collapsible-list/collapsible-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CollapsibleListComponent } from './collapsible-list.component'; 4 | 5 | describe('CollapsibleListComponent', () => { 6 | let component: CollapsibleListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ CollapsibleListComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CollapsibleListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/components/collapsible-list/collapsible-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core'; 2 | import { HackernewsApiService } from '../../services/hackernews-api.service'; 3 | 4 | import * as moment from 'moment'; 5 | @Component({ 6 | selector: 'app-collapsible-list', 7 | templateUrl: './collapsible-list.component.html', 8 | styleUrls: ['./collapsible-list.component.scss'] 9 | }) 10 | export class CollapsibleListComponent implements OnInit { 11 | @Output() hasBeenDeleted: EventEmitter = new EventEmitter(); 12 | @Input() level: number; 13 | @Input() id: number; 14 | public by: string; 15 | public kids: string[]; 16 | public text: string; 17 | public time: string; 18 | public isActivated: boolean; 19 | public hasCommentTree: boolean; 20 | 21 | constructor(private _api: HackernewsApiService) {} 22 | 23 | ngOnInit() { 24 | this.isActivated = false; 25 | this.hasCommentTree = false; 26 | this._api.getCommentTree(this.id).subscribe( 27 | data => { 28 | Object.assign(this, data); 29 | if (data && data.deleted) { 30 | this.hasBeenDeleted.emit(this.id); 31 | } 32 | this.time = moment.unix(+this.time).fromNow(); 33 | this.hasCommentTree = true; 34 | }, 35 | error => console.log(error) 36 | ); 37 | } 38 | 39 | onDeleted(comment_id: any) { 40 | this.kids.splice(this.kids.indexOf(comment_id), 1); 41 | } 42 | 43 | toggleActivate() { 44 | this.isActivated = !this.isActivated; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | width: 100%; 3 | height: 40px; 4 | display: flex; 5 | justify-content: center; 6 | margin-top: 20px; 7 | #maintainer, 8 | #licence { 9 | &:hover { 10 | // font-family: italic; 11 | color: grey; 12 | text-decoration: none; 13 | } 14 | &:active { 15 | color: black; 16 | text-decoration: none; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /src/app/components/header/header.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |     5 | New 6 |     7 | Best 8 |     9 | Ask 10 |     11 | Show 12 |     13 | Jobs 14 |
15 |
16 | Built with Angular 5 17 |
18 |
-------------------------------------------------------------------------------- /src/app/components/header/header.component.scss: -------------------------------------------------------------------------------- 1 | $persian-red: rgb(200, 50, 50); 2 | $red-blend: rgb(213, 50, 52); 3 | $vivid-red: rgb(226, 50, 55); 4 | 5 | :host { 6 | display: flex; 7 | flex-direction: row; 8 | justify-content: center; 9 | height: 60px; 10 | width: 100%; 11 | background: $persian-red; 12 | color: white; 13 | position: sticky; 14 | top: 0; 15 | } 16 | 17 | #header-wrapper { 18 | width: 100%; 19 | max-width: 820px; 20 | display: flex; 21 | flex-direction: row; 22 | font-size: 1.125rem; 23 | } 24 | 25 | #header-left, 26 | #header-right { 27 | display: flex; 28 | flex-direction: row; 29 | align-items: center; 30 | margin-left: 8px; 31 | margin-right: 8px; 32 | } 33 | 34 | #header-right { 35 | margin-left: auto; 36 | } 37 | 38 | #logo-hn { 39 | background-image: url('../../../assets/logo_HN.png'); 40 | height: 40px; 41 | width: 40px; 42 | background-size: cover; 43 | background-repeat: no-repeat; 44 | background-position: center center; 45 | box-shadow: 0 0 4px 4px $red-blend inset; 46 | } 47 | a{ 48 | color: #FFFFFF; 49 | text-decoration: none; 50 | } 51 | 52 | @media only screen and (max-width: 600px) { 53 | #header-right { 54 | display: none; 55 | } 56 | 57 | * { 58 | font-size: 1rem; 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/app/components/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/components/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.scss'] 7 | }) 8 | export class HeaderComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /src/app/components/story-feed-item-detail/story-feed-item-detail.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

{{title}}

4 | 5 | ({{url}}) 6 | 7 | 

 8 |     {{score}} points by
 9 |       {{by}} | {{time}}
10 |   

11 |   

12 |     
    
13 |       
  • 
14 |         
15 |         
16 |       
    • 
17 |     

18 |   

19 | 



--------------------------------------------------------------------------------
/src/app/components/story-feed-item-detail/story-feed-item-detail.component.scss:
--------------------------------------------------------------------------------
 1 | $light-grey: rgb(211, 211, 211);
 2 | 
 3 | #story-item-detail-wrapper > * {
 4 |   width: calc(100% - 40px);
 5 |   max-width: 820px;
 6 |   margin-top: 20px;
 7 |   padding: 20px;
 8 |   margin-left: auto;
 9 |   margin-right: auto;
10 |   background-color: white;
11 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
12 | }
13 | 
14 | #story-item-detail-header {
15 |   min-height: 80px;
16 |   > #story-item-details {
17 |     border-bottom: 1px solid $light-grey;
18 |   }
19 | }
20 | 
21 | ul {
22 |   list-style: none;
23 |   margin: 0;
24 |   padding: 0;
25 | }
26 | 
27 | #story-item-details {
28 |   white-space: pre-wrap;
29 |   word-wrap: break-word;
30 | }
31 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed-item-detail/story-feed-item-detail.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { StoryFeedItemDetailComponent } from './story-feed-item-detail.component';
 4 | 
 5 | describe('StoryFeedItemDetailComponent', () => {
 6 |   let component: StoryFeedItemDetailComponent;
 7 |   let fixture: ComponentFixture;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ StoryFeedItemDetailComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(StoryFeedItemDetailComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed-item-detail/story-feed-item-detail.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Input } from '@angular/core';
 2 | import { HackernewsApiService } from '../../services/hackernews-api.service';
 3 | import { ActivatedRoute, Router } from '@angular/router';
 4 | 
 5 | import * as moment from 'moment';
 6 | 
 7 | @Component({
 8 |   selector: 'app-story-feed-item-detail',
 9 |   templateUrl: './story-feed-item-detail.component.html',
10 |   styleUrls: ['./story-feed-item-detail.component.scss']
11 | })
12 | export class StoryFeedItemDetailComponent implements OnInit {
13 |   public by: string;
14 |   public id: number;
15 |   public score: number;
16 |   public text: string;
17 |   public title: string;
18 |   public time: string;
19 |   public type: string;
20 |   public kids: string[];
21 |   public url: string;
22 |   public feedItemFetched: boolean;
23 | 
24 |   constructor(
25 |     private _api: HackernewsApiService,
26 |     private route: ActivatedRoute,
27 |     private router: Router
28 |   ) {}
29 | 
30 |   ngOnInit() {
31 |     this.route.params.subscribe(params => {
32 |       this.feedItemFetched = false;
33 |       this._api.getFeedItem(params.itemId).subscribe(
34 |         data => {
35 |           Object.assign(this, data);
36 |           this.time = moment.unix(+this.time).fromNow();
37 |           this.feedItemFetched = true;
38 |         },
39 |         error => console.log(error)
40 |       );
41 |     });
42 |   }
43 | 
44 |   onDeleted(comment_id: any) {
45 |     this.kids.splice(this.kids.indexOf(comment_id), 1);
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed-item/story-feed-item.component.html:
--------------------------------------------------------------------------------
 1 | 

 2 |   
{{index}}. {{title}}
 3 |     ({{domain}})
 4 |   

 5 |   {{ws}}
 6 |   {{score}} points by
 7 |     {{by}} | {{time}} |
 8 |     {{commentsCount}} comments
 9 |   
10 | 



--------------------------------------------------------------------------------
/src/app/components/story-feed-item/story-feed-item.component.scss:
--------------------------------------------------------------------------------
 1 | .feed-item-username,
 2 | .feed-item-comments-count {
 3 |   text-decoration: underline;
 4 |   &:hover {
 5 |     text-decoration: none;
 6 |   }
 7 | }
 8 | a{
 9 |   text-decoration: none;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed-item/story-feed-item.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { StoryFeedItemComponent } from './story-feed-item.component';
 4 | 
 5 | describe('StoryFeedItemComponent', () => {
 6 |   let component: StoryFeedItemComponent;
 7 |   let fixture: ComponentFixture;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ StoryFeedItemComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(StoryFeedItemComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed-item/story-feed-item.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Input } from '@angular/core';
 2 | @Component({
 3 |   selector: 'app-story-feed-item',
 4 |   templateUrl: './story-feed-item.component.html',
 5 |   styleUrls: ['./story-feed-item.component.scss']
 6 | })
 7 | export class StoryFeedItemComponent implements OnInit {
 8 |   @Input() index: number;
 9 |   @Input() id: number;
10 |   @Input() title: string;
11 |   @Input() url: string;
12 |   @Input() score: number;
13 |   @Input() by: string;
14 |   @Input() time: number;
15 |   @Input() commentsCount: number;
16 |   public domain: string;
17 |   public ws: string;
18 |   extractHostname(url) {
19 |     if (!url) return undefined;
20 |     let hostname;
21 |     if (url.indexOf('://') > -1) {
22 |       hostname = url.split('/')[2];
23 |     } else {
24 |       hostname = url.split('/')[0];
25 |     }
26 | 
27 |     return hostname.split(':')[0].split('?')[0];
28 |   }
29 | 
30 |   constructor() {}
31 | 
32 |   ngOnInit() {
33 |     this.domain = this.extractHostname(this.url);
34 |     this.ws = '\xa0\xa0'.repeat(this.index.toString().length + 1);
35 |   }
36 | 
37 |   openUrl() {
38 |     this.url ? window.open(this.url) : window.open(`/item/${this.id}`);
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed/story-feed.component.html:
--------------------------------------------------------------------------------
 1 | 
14 | 

15 | 
    
16 |   
  • 
17 |     
19 |   
    • 
20 | 



--------------------------------------------------------------------------------
/src/app/components/story-feed/story-feed.component.scss:
--------------------------------------------------------------------------------
 1 | $light-grey: rgb(211, 211, 211);
 2 | 
 3 | #spinner-hn {
 4 |     height: 160px;
 5 |     width: 160px;
 6 |     background-image: url('../../../assets/spinner_HN.svg');
 7 |     margin: auto;
 8 |     margin-top: 80px;
 9 |     margin-bottom: 80px;
10 |     background-size: cover;                      
11 |     background-repeat: no-repeat;
12 |     background-position: center center;
13 | }
14 | 
15 | #navigator {
16 |     height: 60px;
17 |     background-color: white;
18 |     text-align: center;
19 |     line-height: 60px;
20 |     position: sticky;
21 |     top: 60px;
22 |     box-shadow: 0px 3px 4px -4px rgba(0,0,0,0.75);
23 |     span {
24 |         &:nth-child(1) {
25 |             font-size: 1.825rem;;
26 |             // font-weight: 600;
27 |         }
28 |         &:nth-child(2), &:nth-child(3), &:nth-child(4) {
29 |             font-size: 2.125rem;
30 |         }
31 |         &:nth-child(5) {
32 |             font-size: 1.825rem;;
33 |             // font-weight: 600;
34 |         }
35 |     }
36 | }
37 | 
38 | 
39 | :host > ul {
40 |     display: block;
41 |     width: 100%;
42 |     max-width: 820px;
43 |     margin-top: 20px;
44 |     margin-left: auto;
45 |     margin-right: auto;
46 |     background-color: white;
47 |     padding: 0;
48 | 
49 |     box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
50 |     > li {
51 |         padding: 8px;
52 |         height: 80px;
53 |         display: flex;
54 |         flex-direction: column;
55 |         justify-content: center;
56 |         border-bottom: 1px solid $light-grey;
57 |     }
58 | }
59 | i {
60 |     vertical-align: center;
61 | }


--------------------------------------------------------------------------------
/src/app/components/story-feed/story-feed.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { StoryFeedComponent } from './story-feed.component';
 4 | 
 5 | describe('StoryFeedComponent', () => {
 6 |   let component: StoryFeedComponent;
 7 |   let fixture: ComponentFixture;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ StoryFeedComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(StoryFeedComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/story-feed/story-feed.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 2 | import { HackernewsApiService } from '../../services/hackernews-api.service';
 3 | import { ActivatedRoute, Router } from '@angular/router';
 4 | import { switchMap, map } from 'rxjs/operators';
 5 | import * as moment from 'moment';
 6 | 
 7 | @Component({
 8 |   selector: 'app-story-feed',
 9 |   templateUrl: './story-feed.component.html',
10 |   styleUrls: ['./story-feed.component.scss']
11 | })
12 | export class StoryFeedComponent implements OnInit {
13 |   private subscription: any;
14 |   public grabbingFeed: boolean;
15 |   public pagination: boolean;
16 |   public page: number;
17 |   public feedType: string;
18 |   public feed: Array;
19 |   public totalPages: number;
20 |   constructor(
21 |     private cdRef: ChangeDetectorRef,
22 |     private _api: HackernewsApiService,
23 |     private route: ActivatedRoute,
24 |     private router: Router
25 |   ) {}
26 | 
27 |   ngOnInit() {
28 |     this.grabbingFeed = true;
29 |     this.feedType = this.route.snapshot.data.feed;
30 |     this.pagination = false;
31 |     this.subscription = this.route.queryParams
32 |       .pipe(
33 |         switchMap(params => {
34 |           this.grabbingFeed = true;
35 |           this.feed = [];
36 |           this.page = +params.p || 1;
37 |           return this._api.getFeedItemInRange(this.feedType, this.page * 30 - 29, this.page * 30);
38 |         })
39 |       )
40 |       .pipe(
41 |         map(data => {
42 |           data.item.time = moment.unix(data.item.time).fromNow();
43 |           return data;
44 |         })
45 |       )
46 |       .subscribe(
47 |         data => {
48 |           this.feed.push(data.item);
49 |           this.totalPages = Math.floor((data.feedCount + 29) / 30);
50 |           this.pagination = true;
51 |           this.grabbingFeed = false;
52 |           this.cdRef.detectChanges();
53 |         },
54 |         error => console.log(error)
55 |       );
56 |   }
57 | 
58 |   ngOnDestroy() {
59 |     this.subscription.unsubscribe();
60 |   }
61 | 
62 |   nextPage() {
63 |     this.router.navigate([`/${this.feedType}`], {
64 |       queryParams: {
65 |         p: Math.min(this.totalPages, this.page + 1)
66 |       }
67 |     });
68 |   }
69 | 
70 |   prevPage() {
71 |     this.router.navigate([`/${this.feedType}`], {
72 |       queryParams: {
73 |         p: Math.max(1, this.page - 1)
74 |       }
75 |     });
76 |   }
77 | }
78 | 


--------------------------------------------------------------------------------
/src/app/components/user/user.component.html:
--------------------------------------------------------------------------------
 1 | 

 2 |     
User: {{userData.id}}

 3 |     
Created: {{userData.created}}

 4 |     

 5 |     
Karma: {{userData.karma}}

 6 |     

 7 |     

 8 |     

 9 |     

10 |         submissions |
11 |         comments |
12 |         favorites
13 |     

14 | 

15 | 
16 | 

17 | 



--------------------------------------------------------------------------------
/src/app/components/user/user.component.scss:
--------------------------------------------------------------------------------
 1 | #user-wrapper {
 2 |   width: 100vw;
 3 |   min-height: 140px;
 4 |   max-width: 820px;
 5 |   margin-top: 20px;
 6 |   padding: 20px;
 7 |   margin-left: auto;
 8 |   margin-right: auto;
 9 |   background-color: white;
10 |   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.23);
11 |   > #user-about {
12 |     color: grey;
13 |     white-space: pre-wrap;
14 |     word-wrap: break-word;
15 |   }
16 |   > div {
17 |     > #user-submissions,
18 |     > #user-comments,
19 |     > #user-favorites {
20 |       font-weight: 900;
21 |       text-decoration: underline;
22 |       &:hover {
23 |         text-decoration: none;
24 |       }
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/app/components/user/user.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { UserComponent } from './user.component';
 4 | 
 5 | describe('UserComponent', () => {
 6 |   let component: UserComponent;
 7 |   let fixture: ComponentFixture;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [ UserComponent ]
12 |     })
13 |     .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(UserComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should create', () => {
23 |     expect(component).toBeTruthy();
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/src/app/components/user/user.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { HackernewsApiService } from '../../services/hackernews-api.service';
 3 | import { ActivatedRoute, Router } from '@angular/router';
 4 | import * as moment from 'moment';
 5 | 
 6 | @Component({
 7 |   selector: 'app-user',
 8 |   templateUrl: './user.component.html',
 9 |   styleUrls: ['./user.component.scss']
10 | })
11 | export class UserComponent implements OnInit {
12 |   public userData: any;
13 | 
14 |   constructor(
15 |     private _api: HackernewsApiService,
16 |     private route: ActivatedRoute,
17 |     private router: Router
18 |   ) {}
19 | 
20 |   ngOnInit() {
21 |     this.route.params.subscribe(params => {
22 |       this._api.getUser(params.username).subscribe(
23 |         data => {
24 |           this.userData = {
25 |             id: data.id,
26 |             karma: data.karma,
27 |             about: data.about,
28 |             created: moment.unix(parseInt(data.created)).fromNow()
29 |           };
30 |         },
31 |         error => console.log(error)
32 |       );
33 |     });
34 |   }
35 | 
36 |   openExternalUrl(type) {
37 |     window.open(`https://news.ycombinator.com/${type}?id=${this.userData.id}`);
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/app/services/hackernews-api.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, inject } from '@angular/core/testing';
 2 | 
 3 | import { HackernewsApiService } from './hackernews-api.service';
 4 | 
 5 | describe('HackernewsApiService', () => {
 6 |   beforeEach(() => {
 7 |     TestBed.configureTestingModule({
 8 |       providers: [HackernewsApiService]
 9 |     });
10 |   });
11 | 
12 |   it('should be created', inject([HackernewsApiService], (service: HackernewsApiService) => {
13 |     expect(service).toBeTruthy();
14 |   }));
15 | });
16 | 


--------------------------------------------------------------------------------
/src/app/services/hackernews-api.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { Http, Headers, RequestOptions } from '@angular/http';
 3 | import { Observable } from 'rxjs/Observable';
 4 | import { map, mergeMap, tap, switchMap, flatMap, filter, retry } from 'rxjs/operators';
 5 | import { forkJoin } from 'rxjs/observable/forkJoin';
 6 | import { combineLatest } from 'rxjs/observable/combineLatest';
 7 | import { from } from 'rxjs/observable/from';
 8 | import { merge } from 'rxjs/observable/merge';
 9 | 
10 | @Injectable()
11 | export class HackernewsApiService {
12 |   private cacheFeed: string[];
13 |   private cacheFeedSize: number;
14 |   constructor(private _api: Http) {}
15 | 
16 |   getFeed(feedType): Observable {
17 |     return this._api
18 |       .get(`https://hacker-news.firebaseio.com/v0/${feedType}.json`)
19 |       .pipe(retry(3))
20 |       .pipe(map(data => data.json()))
21 |       .pipe(tap(data => ((this.cacheFeed = data), (this.cacheFeedSize = data.length))));
22 |   }
23 | 
24 |   getFeedItem(itemId): Observable {
25 |     return this._api
26 |       .get(`https://hacker-news.firebaseio.com/v0/item/${itemId}.json`)
27 |       .pipe(retry(3))
28 |       .pipe(map(data => data.json()));
29 |   }
30 | 
31 |   getFeedItemInRange(feedType, startCount, endCount): Observable {
32 |     return this.getFeed(feedType)
33 |       .pipe(map(data => data.slice(startCount - 1, Math.min(startCount + 29, this.cacheFeedSize))))
34 |       .pipe(flatMap(data => from(data)))
35 |       .pipe(flatMap(data => this.getFeedItem(data)))
36 |       .pipe(
37 |         map(data => ({
38 |           item: data,
39 |           feedCount: this.cacheFeedSize
40 |         }))
41 |       );
42 |   }
43 | 
44 |   getUser(userId): Observable {
45 |     return this._api
46 |       .get(`https://hacker-news.firebaseio.com/v0/user/${userId}.json`)
47 |       .pipe(retry(3))
48 |       .pipe(map(data => data.json()));
49 |   }
50 | 
51 |   getCommentTree(commentId): Observable {
52 |     return this._api
53 |       .get(`https://hacker-news.firebaseio.com/v0/item/${commentId}.json`)
54 |       .pipe(retry(3))
55 |       .pipe(map(data => data.json()));
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapillamba4/hackernews-clone/97885d070aeb302c0d5de925bc4852cdbc0243cd/src/assets/.gitkeep


--------------------------------------------------------------------------------
/src/assets/LICENCE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Kapil Lamba
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/assets/logo_HN.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapillamba4/hackernews-clone/97885d070aeb302c0d5de925bc4852cdbc0243cd/src/assets/logo_HN.png


--------------------------------------------------------------------------------
/src/assets/spinner_HN.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   
 6 | 
 7 | 
 8 | 
 9 | 
10 | 
11 |   
12 |   
13 | 
14 | 
15 | 
16 | 
17 | 
18 |   
19 |   
20 | 
21 | 
22 | 
23 | 
24 | 
25 |   
26 |   
27 | 
28 | 
29 | 
30 | 
31 | 
32 |   
33 |   
34 | 
35 | 
36 | 
37 | 
38 | 
39 |   
40 |   
41 | 
42 | 
43 | 
44 | 
45 | 
46 |   
47 |   
48 | 
49 | 
50 | 
51 | 
52 | 
53 |   
54 |   
55 | 
56 | 
57 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kapillamba4/hackernews-clone/97885d070aeb302c0d5de925bc4852cdbc0243cd/src/favicon.ico


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   HackernewsClone
 6 |   
 7 | 
 8 |   
 9 |   
10 | 
11 | 
12 |   
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Required to support Web Animations `@angular/platform-browser/animations`.
51 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 |  **/
53 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
54 | 
55 | /**
56 |  * By default, zone.js will patch all possible macroTask and DomEvents
57 |  * user can disable parts of macroTask/DomEvents patch by setting following flags
58 |  */
59 | 
60 |  // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
61 |  // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
62 |  // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
63 | 
64 |  /*
65 |  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
66 |  * with the following flag, it will bypass `zone.js` patch for IE/Edge
67 |  */
68 | // (window as any).__Zone_enable_cross_context_check = true;
69 | 
70 | /***************************************************************************************************
71 |  * Zone JS is required by default for Angular itself.
72 |  */
73 | import 'zone.js/dist/zone';  // Included with Angular CLI.
74 | 
75 | 
76 | 
77 | /***************************************************************************************************
78 |  * APPLICATION IMPORTS
79 |  */
80 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | @import 'https://use.fontawesome.com/releases/v5.0.7/css/all.css';
3 | a {
4 |   color: inherit;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015",
 7 |     "types": []
 8 |   },
 9 |   "exclude": [
10 |     "test.ts",
11 |     "**/*.spec.ts"
12 |   ]
13 | }
14 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   },
12 |   "files": [
13 |     "test.ts"
14 |   ],
15 |   "include": [
16 |     "**/*.spec.ts",
17 |     "**/*.d.ts"
18 |   ]
19 | }
20 | 


--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "es2017",
16 |       "dom"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-blacklist": [
 20 |       true,
 21 |       "rxjs",
 22 |       "rxjs/Rx"
 23 |     ],
 24 |     "import-spacing": true,
 25 |     "indent": [
 26 |       true,
 27 |       "spaces"
 28 |     ],
 29 |     "interface-over-type-literal": true,
 30 |     "label-position": true,
 31 |     "max-line-length": [
 32 |       true,
 33 |       140
 34 |     ],
 35 |     "member-access": false,
 36 |     "member-ordering": [
 37 |       true,
 38 |       {
 39 |         "order": [
 40 |           "static-field",
 41 |           "instance-field",
 42 |           "static-method",
 43 |           "instance-method"
 44 |         ]
 45 |       }
 46 |     ],
 47 |     "no-arg": true,
 48 |     "no-bitwise": true,
 49 |     "no-console": [
 50 |       true,
 51 |       "debug",
 52 |       "info",
 53 |       "time",
 54 |       "timeEnd",
 55 |       "trace"
 56 |     ],
 57 |     "no-construct": true,
 58 |     "no-debugger": true,
 59 |     "no-duplicate-super": true,
 60 |     "no-empty": false,
 61 |     "no-empty-interface": true,
 62 |     "no-eval": true,
 63 |     "no-inferrable-types": [
 64 |       true,
 65 |       "ignore-params"
 66 |     ],
 67 |     "no-misused-new": true,
 68 |     "no-non-null-assertion": true,
 69 |     "no-shadowed-variable": true,
 70 |     "no-string-literal": false,
 71 |     "no-string-throw": true,
 72 |     "no-switch-case-fall-through": true,
 73 |     "no-trailing-whitespace": true,
 74 |     "no-unnecessary-initializer": true,
 75 |     "no-unused-expression": true,
 76 |     "no-use-before-declare": true,
 77 |     "no-var-keyword": true,
 78 |     "object-literal-sort-keys": false,
 79 |     "one-line": [
 80 |       true,
 81 |       "check-open-brace",
 82 |       "check-catch",
 83 |       "check-else",
 84 |       "check-whitespace"
 85 |     ],
 86 |     "prefer-const": true,
 87 |     "quotemark": [
 88 |       true,
 89 |       "single"
 90 |     ],
 91 |     "radix": true,
 92 |     "semicolon": [
 93 |       true,
 94 |       "always"
 95 |     ],
 96 |     "triple-equals": [
 97 |       true,
 98 |       "allow-null-check"
 99 |     ],
100 |     "typedef-whitespace": [
101 |       true,
102 |       {
103 |         "call-signature": "nospace",
104 |         "index-signature": "nospace",
105 |         "parameter": "nospace",
106 |         "property-declaration": "nospace",
107 |         "variable-declaration": "nospace"
108 |       }
109 |     ],
110 |     "unified-signatures": true,
111 |     "variable-name": false,
112 |     "whitespace": [
113 |       true,
114 |       "check-branch",
115 |       "check-decl",
116 |       "check-operator",
117 |       "check-separator",
118 |       "check-type"
119 |     ],
120 |     "directive-selector": [
121 |       true,
122 |       "attribute",
123 |       "app",
124 |       "camelCase"
125 |     ],
126 |     "component-selector": [
127 |       true,
128 |       "element",
129 |       "app",
130 |       "kebab-case"
131 |     ],
132 |     "no-output-on-prefix": true,
133 |     "use-input-property-decorator": true,
134 |     "use-output-property-decorator": true,
135 |     "use-host-property-decorator": true,
136 |     "no-input-rename": true,
137 |     "no-output-rename": true,
138 |     "use-life-cycle-interface": true,
139 |     "use-pipe-transform-interface": true,
140 |     "component-class-suffix": true,
141 |     "directive-class-suffix": true
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------