<commit_before>import { Component, OnInit } from '@angular/core';
import {SearchService} from './search.service';

@Component({
    moduleId: module.id,
    selector: 'search-bar',
    template: `
    <form (ngSubmit)="doSearch(searchText)" #searchBarForm="ngForm">
        <div class="input-wrapper">
            <input id="searchBar" [(ngModel)]="searchText" placeholder="Search for gifs">
        </div>
        <button type="submit">Search</button>
    </form>
    `,
    styles: [
        '.input-wrapper { margin-right: 72px; }',
        `button {
            padding: 6px 8px;
            margin-top: 1px;
            font-size: 14px;
        }`,
        `input {
            float: left;
            width: 100%;
            padding: 5px;
            margin-right: 5px;
            font-size: 14px;
        }`
    ],
})
export class SearchBarComponent implements OnInit {
    constructor(private searchService: SearchService) { }

    ngOnInit() { }

    doSearch(searchText) {
        this.searchService.doSearch(searchText);
    }

}<commit_msg>Add search error handling to `searchBar` component.<commit_after>import { Component, OnInit } from '@angular/core';
import {SearchService} from './search.service';
import { ResponseError } from './responseError';

@Component({
    moduleId: module.id,
    selector: 'search-bar',
    template: `
    <form (ngSubmit)="doSearch(searchText)" #searchBarForm="ngForm">
        <div class="input-wrapper">
            <input id="searchBar" [(ngModel)]="searchText" placeholder="Search for gifs">
        </div>
        <button type="submit">Search</button>
    </form>
    <div *ngIf="searchError">
        <p>{{searchError.message}}</p>
        <p *ngIf="searchError.imageUrl"><img [src]="searchError.imageUrl"></p>
    </div>
    `,
    styles: [
        '.input-wrapper { margin-right: 72px; }',
        `button {
            padding: 6px 8px;
            margin-top: 1px;
            font-size: 14px;
        }`,
        `input {
            float: left;
            width: 100%;
            padding: 5px;
            margin-right: 5px;
            font-size: 14px;
        }`
    ],
})
export class SearchBarComponent implements OnInit {
    searchError: ResponseError;

    constructor(private searchService: SearchService) { }

    ngOnInit() { }

    doSearch(searchText) {
        this.searchError = null;
        this.searchService.doSearch(searchText)
            .then((results: any) => {
                if (results.length === 0) {
                    this.searchError = new ResponseError('Could not find any gifs for that search term.', 'https://media3.giphy.com/media/l3V0HLYPfIKIVDyBG/giphy.gif');
                }
            })
            .catch(error => {
                this.searchError = error;
            });
    }
}
{'fraction_non_alphanumeric': 0.14183381088825214, 'fraction_numerical': 0.011461318051575931, 'mean_word_length': 2.0964523281596454, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 26, 'https://': 1, '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': '4987087', 'n_tokens_mistral': 861, 'n_tokens_neox': 813, 'n_words': 169}