why react search is so slow in angular 2

184 views Asked by At

First I think it's my code problem. But I don't know why is that.

Here is what I want to do it:

enter image description here

You can see in my image: I input "ng2", get data from github api

then I change pagesize over and over again, waiting for UI update.

enter image description here

enter image description here

But UI is freeze for long time make me unbelievable.

somone would tell me, where is my code wrong?

Here is my code:

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

import { User } from '../../../model/user.model';

import { Observable } from 'rxjs/Rx';

import { UserService } from '../../../services/user.service'




@Component({
    selector: 'paginated-list',
    templateUrl: 'paginated-list.component.html',

})

export class PaginatedListComponent implements OnInit {

    //init data
    pageNumList: number[] = [1];

    pageSizeList: number[] = [10, 30, 50, 100];

    gitForm: FormGroup;

    errorMessage: string;

    gitRepStream: Observable<any>;

    totalCount: number;

    gitRepList: any[];

    constructor(private fb: FormBuilder, private _userService: UserService) {
    }

    ngOnInit(): void {
        this.buildForm();
    }

    buildForm(): void {

        this.gitForm = this.fb.group({
            'searchTerm': [''],
            'pageNum': this.pageNumList[0],
            'pageSize': this.pageSizeList[0]
        });

        this.gitRepStream = this.gitForm.valueChanges
            .debounceTime(1000)
            .distinctUntilChanged()
            .switchMap(this.mapSearchCondition.bind(this))
            .share();

        this.gitRepStream.subscribe((data: any) => {
            if (Object.keys(data.items).length > 0) {
                const tempList: any[] = data.items;

                this.gitRepList = Object.assign(tempList, data.items);

                this.totalCount = data.total_count;
                this.errorMessage = data.error;

                const ctrlPageNum = this.gitForm.get('pageNum') as FormControl;
                const ctrlPageSize = this.gitForm.get('pageSize') as FormControl;

                const tmpPageSize = ctrlPageSize.value as number;
                const totalPage = Math.round((this.totalCount + tmpPageSize - 1) / tmpPageSize);
                const tempPageNums: number[] = [1];
                Observable.range(2, totalPage)
                    .subscribe(
                    d => tempPageNums.push(d));
                this.pageNumList = tempPageNums;

                console.log(`pageNum is:${tmpPageSize} || pageIndex is ${ctrlPageNum.value}`);
            }
        });


    }

    mapSearchCondition(formValue: any): any {
        const params = {
            q: formValue['searchTerm'],
            page: formValue['pageNum'],
            per_page: formValue['pageSize']
        };
        if (params.q) {
            return this._userService.getGitHubRepositories(params)
                .catch((errMsg: string) => {
                    return Observable.of({ items: [], total_count: 0, error: errMsg });
                });
        }
        else {
            return Observable.of({ items: [], total_count: 0 });
        }
    }
}

1

There are 1 answers

0
jeffrey chan On BEST ANSWER

I found a bug, no specific to rxjs or angular. this line will output huge number:

const totalPage = Math.round((this.totalCount + tmpPageSize - 1) / tmpPageSize);