<commit_before>import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Blog, Post } from '../../data.types';
import { TumblrService } from '../../shared/tumblr.service';
import { FaviconService } from '../../shared/favicon.service';
import { Title } from '@angular/platform-browser';
import { SettingsService } from '../../shared/settings.service';

@Component({
    selector: 'post-list',
    template: `
        <div class="center">
            <h1 *ngIf="tagParam">#{{tagParam}}</h1>
            <a *ngIf="postId" [routerLink]="['/blog', blog.name]">
                <h1>{{blog.name}}</h1>
            </a>
        </div>
        
        <div class="pure-u-lg-1-5"></div>
        <div class="pure-u-1 pure-u-lg-3-5">
            <ul postSwitch [loadMoreItems]="onScroll.bind(this)"
            subPostSwitch [loadMoreItems]="onScroll.bind(this)"
            infinite-scroll [infiniteScrollDisabled]="loading" [infiniteScrollDistance]="4"
            [infiniteScrollThrottle]="200" (scrolled)="onScroll()">
                <li *ngFor="let post of posts" class="post {{isRecent(post) ? 'recent' : ''}}">
                    <complete-post [post]="post" [blog]="blog"></complete-post>
                </li>
            </ul>
        </div>
        
        <div class="center message">
            <h2 *ngIf="message">{{message}}</h2>
        </div>
    `,
    styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
    blog: Blog;
    posts: Post[];
    message: string;
    tagParam: string;
    postId: number;
    loading: boolean;
    private postCounter: number;
    private totalPosts: number;
    private updatedInDays: number = 0;
    constructor(private route: ActivatedRoute, private tumblrService: TumblrService,
                private faviconService: FaviconService, private titleService: Title,
                private settingsService: SettingsService) {
    }

    ngOnInit() {
        this.settingsService.getUpdatedInDays()
            .subscribe(updatedInDays => this.updatedInDays = updatedInDays);
        this.route.params.subscribe(params => {
            this.postCounter = 0;
            this.posts = [];
            this.blog = new Blog(params['name']);
            this.tagParam = params['tag'] ? decodeURIComponent(params['tag']) : null;
            this.postId = params['post'] ? parseInt(params['post'], 10) : null;
            this.faviconService.setFavicon('https://api.tumblr.com/v2/blog/'
                + params['name'] + '/avatar/16');

            this.loadPosts();
        });
    }

    isRecent(post: Post): boolean {
        return this.updatedInDays > 0
            && this.settingsService.isUpdatedInDays(post.date, this.updatedInDays);
    }

    onScroll(): Promise<any> {
        if (this.postCounter < this.totalPosts && !this.loading) {
            return this.loadPosts();
        }
        return new Promise((resolve, reject) => reject('Already loading or maximum reached'));
    }

    private loadPosts(): Promise<any> {
        this.loading = true;
        this.message = 'Loading ...';
        return new Promise((resolve, reject) => {
            this.tumblrService.getPosts(this.blog.name, this.postCounter, this.tagParam,
                 this.postId).subscribe(res => {
                this.blog = res.blog;
                this.posts = this.posts.concat(res.posts);<commit_msg>Cancel last http request before loading different posts<commit_after>import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Blog, Post } from '../../data.types';
import { TumblrService } from '../../shared/tumblr.service';
import { FaviconService } from '../../shared/favicon.service';
import { Title } from '@angular/platform-browser';
import { SettingsService } from '../../shared/settings.service';
import { Subscription } from 'rxjs';

@Component({
    selector: 'post-list',
    template: `
        <div class="center">
            <h1 *ngIf="tagParam">#{{tagParam}}</h1>
            <a *ngIf="postId" [routerLink]="['/blog', blog.name]">
                <h1>{{blog.name}}</h1>
            </a>
        </div>
        
        <div class="pure-u-lg-1-5"></div>
        <div class="pure-u-1 pure-u-lg-3-5">
            <ul postSwitch [loadMoreItems]="onScroll.bind(this)"
            subPostSwitch [loadMoreItems]="onScroll.bind(this)"
            infinite-scroll [infiniteScrollDisabled]="loading" [infiniteScrollDistance]="4"
            [infiniteScrollThrottle]="200" (scrolled)="onScroll()">
                <li *ngFor="let post of posts" class="post {{isRecent(post) ? 'recent' : ''}}">
                    <complete-post [post]="post" [blog]="blog"></complete-post>
                </li>
            </ul>
        </div>
        
        <div class="center message">
            <h2 *ngIf="message">{{message}}</h2>
        </div>
    `,
    styleUrls: ['./post-list.component.scss']
})
export class PostListComponent implements OnInit {
    blog: Blog;
    posts: Post[];
    message: string;
    tagParam: string;
    postId: number;
    loading: boolean;
    private postCounter: number;
    private totalPosts: number;
    private updatedInDays: number = 0;
    private subscription: Subscription;
    constructor(private route: ActivatedRoute, private tumblrService: TumblrService,
                private faviconService: FaviconService, private titleService: Title,
                private settingsService: SettingsService) {
    }

    ngOnInit() {
        this.settingsService.getUpdatedInDays()
            .subscribe(updatedInDays => this.updatedInDays = updatedInDays);
        this.route.params.subscribe(params => {
            this.postCounter = 0;
            this.posts = [];
            this.blog = new Blog(params['name']);
            this.tagParam = params['tag'] ? decodeURIComponent(params['tag']) : null;
            this.postId = params['post'] ? parseInt(params['post'], 10) : null;
            this.faviconService.setFavicon('https://api.tumblr.com/v2/blog/'
                + params['name'] + '/avatar/16');

            this.loadPosts();
        });
    }

    isRecent(post: Post): boolean {
        return this.updatedInDays > 0
            && this.settingsService.isUpdatedInDays(post.date, this.updatedInDays);
    }

    onScroll(): Promise<any> {
        if (this.postCounter < this.totalPosts && !this.loading) {
            return this.loadPosts();
        }
        return new Promise((resolve, reject) => reject('Already loading or maximum reached'));
    }

    private loadPosts(): Promise<any> {
        this.loading = true;
        this.message = 'Loading ...';
        return new Promise((resolve, reject) => {
            if (this.subscription) {
                this.subscription.unsubscribe();
            }
            this.subscription = this.tumblrService.getPosts(this.blog.name, this.postCounter,
                this.tagParam, this.postId).subscribe(res => {
                this.blog = res.blog;
                this.posts = this.posts.concat(res.posts);
{'fraction_non_alphanumeric': 0.15184351252462708, 'fraction_numerical': 0.00647340275823248, 'mean_word_length': 2.3319268635724333, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 63, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2136071', 'n_tokens_mistral': 2112, 'n_tokens_neox': 2012, 'n_words': 403}