Skip to content

Search repo by language feature #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ajeey wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Search repo by language feature #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@
"gulp-uglify": "~1.5.4",
"gulp-useref": "~3.1.0",
"jasmine-core": "~2.4.1",
"jquery": "^2.2.3",
"karma": "~1.1.0",
"karma-coverage": "~1.0.0",
"karma-ie-launcher": "^1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion src/app/app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<as-navbar [routes]="appRoutes" [brand]="appBrand"></as-navbar>
<div class="container" style="margin-top: 100px;">
<div class="container" style="margin-top: 100px; margin-bottom: 50px;">
<as-home></as-home>
</div>
29 changes: 23 additions & 6 deletions src/app/home/github.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,32 @@ export class GithubSearchService {

constructor (private http: Http) {}

formRepoUrl(username) {
return `https://api.github.com/users/${username}/repos`; // Tempate strings yay!
formRepoUrl(language, pageNumber) {
// return `https://api.github.com/users/${username}/repos`; // Tempate strings yay!
return `https://api.github.com/search/repositories?q=+language:${language}&page=${pageNumber}`; // Tempate strings yay!
}

getReposByUsername (username): Observable<any> {
return this.http.get(this.formRepoUrl(username))
.map(this.parseData)
getReposByUsername (language, pageNumber): Observable<any> {
return this.http.get(this.formRepoUrl(language, pageNumber))
.map(this.parseRepos)
.catch(this.handleError);
}

private parseData(res: Response) {
langaugeTagsUrl() {
return "https://gist.githubusercontent.com/mayurah/5a4d45d12615d52afc4d1c126e04c796/raw/ccbba9bb09312ae66cf85b037bafc670356cf2c9/languages.json";
}

getLanguageTags() {
return this.http.get(this.langaugeTagsUrl())
.map(this.parseTags)
.catch(this.handleError);
}

private parseTags(tags) {
return JSON.parse(tags._body);
}

private parseRepos(res: Response) {
let body = res.json();
return body || { };
}
Expand All @@ -29,4 +44,6 @@ export class GithubSearchService {
console.error(errMsg);
return Observable.throw(errMsg);
}


}
92 changes: 77 additions & 15 deletions src/app/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,130 @@
import { Component } from '@angular/core';
import { Component, ElementRef, AfterViewInit } from '@angular/core';
import { Search } from './search';
import { GithubSearchService } from './github.service';
import { CONSTANTS } from '../shared';

declare var $:any;

@Component({
selector: 'as-home',
templateUrl: 'app/home/home.html',
styleUrls: [
'app/home/home.css'
],
providers: [GithubSearchService]
directives: [ ],
providers: [ GithubSearchService ]
})
export class HomeComponent {
export class HomeComponent implements AfterViewInit {
public repos: Array<any> = [];

public originalRepos: Array<any> = [];
public languageTags: Array<any> = [];

public elementRef: ElementRef;
public strings;
public model = new Search('');
public fetching: Boolean = false;
public isError: Boolean = false;
public profileImage: string = "";
public isEmpty = null;

constructor(private githubSearchService: GithubSearchService) {
public repoCount = 0;
public pageNumber = 1;
public loadingMore = false;
public maxStarCount = 100;
public starSlider;

constructor(private githubSearchService: GithubSearchService, elementRef: ElementRef) {
this.elementRef = elementRef;
this.strings = CONSTANTS.MAIN.APP;
}

onSubmit() {
this.fetching = true;
this.githubSearchService.getReposByUsername(this.model.text)
this.clearRepos();
this.fetchRepos(this.pageNumber);
}

fetchRepos(pageNumber) {
this.githubSearchService.getReposByUsername(this.model.text, pageNumber)
.subscribe(
this.success.bind(this),
this.error.bind(this)
);
}

fetchNextPage() {
this.loadingMore = true;
this.pageNumber++;
this.fetchRepos(this.pageNumber);
}

clearRepos() {
this.repos = [];
this.originalRepos = [];
}

success(repos) {
this.repos = repos;
this.repos = this.repos.concat(repos.items);
this.originalRepos = this.repos;
this.repoCount = repos.total_count;

this.isError = false;

if(repos.length === 0) {
this.profileImage = "";
this.isEmpty = true;
} else {
this.isEmpty = false;
this.getImage();
this.getMaxStarCount();
}

this.fetching = false;
this.loadingMore = false;
}

error(error) {
console.log("errror", error);
this.handleError();
}

getImage() {
this.profileImage = this.repos[0].owner.avatar_url;
getMaxStarCount() {
this.maxStarCount = this.repos[0].stargazers_count;
this.starSlider.slider("option", "max", this.maxStarCount);
this.starSlider.slider("option", "value", this.maxStarCount);
}

handleError() {
this.fetching = false;
this.isError = true;
this.profileImage = null;
this.isEmpty = false;
this.repos = null;
}

// Slider Range Change detection
filterReposByStar(stars) {
this.repos = this.originalRepos.filter(function(repo) {
return repo.stargazers_count >= stars;
});

}

ngAfterViewInit() {
// Init Autocomplete
this.githubSearchService.getLanguageTags().subscribe(function(tags){
this.languageTags = tags;
$(this.elementRef.nativeElement).find(".search-text").autocomplete({
source: this.languageTags
});
}.bind(this), function(error){
console.error("Could not fetch language tags", error);
}.bind(this));

// Initialize Slider
this.starSlider = $(this.elementRef.nativeElement).find("#slider").slider({
range: false,
min: 0,
max: 20000,
value: this.maxStarCount,
slide: ( event, ui ) => {
this.maxStarCount = ui.value;
this.filterReposByStar(ui.value);
}
});
}
}
49 changes: 48 additions & 1 deletion src/app/home/home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
.search-container {
margin-bottom: 10px;
border-bottom: 1px solid black;
padding: 10px;
padding: 10px 10px 30px 10px;
}

.search-text {
Expand Down Expand Up @@ -142,6 +142,25 @@
text-overflow: ellipsis;
}

.stars {
float: left;
}

.language {
float: right;
font-style: italic;
}

.load-more {
width: 50%;
text-align: center;
display: block;
margin: auto;

position: absolute;
bottom: -30px;
}

@keyframes fadeIn {
0% {
opacity: 0;
Expand All @@ -154,4 +173,32 @@
100% {
opacity: 1;
}
}


/*Slider styles*/
.ui-slider {
background: #d8e0f3;
border-radius: 2px;
border-color: #d8e0f3;
height: 8px;
margin-top: 10px;
}

.sider-value {
margin-top: 10px;
margin-left: 100px;
opacity: 0.8;
}

.ui-slider > .ui-state-default {
cursor: pointer;
width: 32px;
height: 32px;
background: #0db9f0;
border: none;
top: -13px;
outline: 0;
border-radius: 50%;

}
16 changes: 12 additions & 4 deletions src/app/home/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,19 @@
<div class="col-lg-6 col-md-6">
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<input type="text" class="form-control search-text" required name="search" placeholder="Search GitHub User" autocomplete="off"
<input type="text" class="form-control search-text" required name="search" placeholder="Search By Language" autocomplete="off"
[(ngModel)]="model.text" >
</div>

<button type="submit" class="btn search-button" [disabled]="fetching" >Submit</button>
</form>
</div>

<div class="col-lg-6 col-md-6">
<div class="col-lg-3 col-md-3" >
<div id="slider"></div>
<label class="sider-value">{{maxStarCount}}</label>

<img [src]="profileImage" class="pull-right profile-image" [hidden]="!profileImage" />

</div>
</div>
</div>
Expand All @@ -36,13 +38,19 @@
<div class="name">{{repo.name}}</div>
<div class="details">
<div class="desc"><i class="fa fa-book" aria-hidden="true"></i> {{repo.description}}</div>
<div class="Stars"><i class="fa fa-star" aria-hidden="true"></i> {{repo.stargazers_count}}</div>
<div class="stars"><i class="fa fa-star" aria-hidden="true"></i> {{repo.stargazers_count}}</div>
<div class="language">{{repo.language}}</div>
</div>
<a [href]="repo.html_url" target="_blank" class="link">
{{strings.EXPLORE_PROJECT}}
</a>
</div>
</div>

<button (click)="fetchNextPage()" class="btn btn-info load-more" [disabled]="loadingMore">
<i class=" fa fa-spin fa-spinner fa-2" [hidden]="!loadingMore"></i>
Load More
</button>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/shared/constant/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export const MAIN = {
APP: {
BRAND: 'Angular 2 GitHub Search',
ERROR_MSG: 'Sorry could find the repos of the given user. Try again!',
EMPTY_REPOS: 'No Repos found for the user',
ERROR_MSG: 'Sorry could find repos. Try again!',
EMPTY_REPOS: 'No Repos!',
EXPLORE_PROJECT: 'EXPLORE PROJECT'
}
};
10 changes: 9 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,17 @@
<!-- build:css assets/bundle.css -->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/green/pace-theme-flash.min.css">

<!-- app:css -->
<link rel="stylesheet" href="/assets/styles/main.css">
<!-- endinject -->
<!-- endbuild -->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<as-myapp>
Expand All @@ -20,7 +27,6 @@
<!-- build:js assets/lib.js -->

<!-- Non-module JS libs -->
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js"></script>

<!-- Polyfill(s) for older browsers -->
Expand All @@ -29,6 +35,8 @@
<!-- Load libraries -->
<script src="../node_modules/zone.js/dist/zone.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>

<!-- endbuild -->

<!-- build:js assets/app.js -->
Expand Down
2 changes: 1 addition & 1 deletion tslint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"indent": [true, "spaces"],
"label-position": true,
"label-undefined": true,
"max-line-length": [true, 140],
"max-line-length": [true, 240],
"member-access": false,
"member-ordering": [true,
"public-before-private",
Expand Down