github-api-widget

Github Api Widget

Show github select user principal info layout

Instructions

Install

npm install github-api-widget

Add css style

In src/styles.css @import "./../node_modules/github-api-widget/lib/assets/styles/styles.css";

Use in Angular

With default components (use search github user)

If not use search component.

Create component (github.component.ts) and copy/paste this code component

import { EMPTY } from 'rxjs';
import { Component, Input, OnInit } from '@angular/core';
import { User } from 'github-api-widget/lib/widgets/user/user.interface';
import * as api from 'proyecto-1b-api-github';

@Component({
  selector: 'app-github',
  templateUrl: './github.component.html',
  styleUrls: ['./github.component.css']
})
export class GithubComponent implements OnInit {
  user: User = null;
  error: boolean;
  @Input() searchUser: string;
  ngOnInit() {
    console.log(this.searchUser);
    this.takeUserData();
  }
  takeUserData() {
    console.log(this.searchUser);
    if (this.searchUser !== '' && this.searchUser !== undefined) {
      api.obtenerDatosDeUsuario(this.searchUser)
          .then(
            (respuesta: User) => {
              if (respuesta.login === undefined) {
                console.log('no data');
                this.error = true;
                this.user = null;
              } else {
                console.log(respuesta);
                this.user = respuesta;
                this.error = false;
              }
            }
          ).
          catch((error: any) => {
            console.log(error);
            console.log('error');
            this.user = null;
            this.error = true;
            return EMPTY;
          });
    } else {
      this.user = null;
      this.error = true;
    }
  }

}

In html template (github.component.html) you must add:

<app-github searchUser="<user github you want to show info>"></app-github>

Example:

<app-github searchUser="mugan86"></app-github>```

In app.component.html template you must add

<github-api-user *ngIf="user" [user]="user">

<github-api-error *ngIf="error">