Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular Directives versus React Components
'use strict';
/**
* @ngdoc object
* @name dashboard.controller:DashboardCtrl
*
* @description
*
*/
angular
.module('dashboard')
.controller('DashboardCtrl', function (DashboardService) {
var vm = this;
vm.ctrlName = 'DashboardCtrl';
vm.user = {
name: '',
imgsrc: '',
repos: []
};
vm.isSearchValid = true;
vm.searchUser = function (query) {
DashboardService.searchUser(query)
.success(function (res) {
vm.isSearchValid = true;
if(!res.total_count) {
vm.isSearchValid = false;
}
vm.user.name = res.items[0].login;
vm.user.imgsrc = res.items[0].avatar_url;
getUserRepos(vm.user.name);
});
};
function getUserRepos(user) {
DashboardService.searchRepos(user).success(function (res) {
vm.user.repos = res;
});
}
});
<div class="dashboard">
<div class="ui action input">
<form ng-submit="dashboard.searchUser(dashboard.searchInput)">
<input type="text" ng-model="dashboard.searchInput" placeholder="Search Github User Profiles..."/>
<div class="ui button" ng-click="dashboard.searchUser(dashboard.searchInput)">Search</div>
</form>
</div>
<div class="result" ng-show="dashboard.isSearchValid">
<div>
<label>{{dashboard.user.name}}</label>
<br/>
<img id="gravitar-image" ng-src="{{dashboard.user.imgsrc}}"/>
</div>
<div class="repo-list">
<ul>
<li ng-repeat="repo in dashboard.user.repos">
{{repo.name}}
</li>
</ul>
</div>
</div>
<h1 ng-hide="dashboard.isSearchValid">No results match your query.</h1>
<div class='search-results'>
</div>
</div>
/** @jsx React.DOM */
var React = require('react');
var Reflux = require('reflux');
var store = require('../../stores/githubStore');
var actions = require('../../actions/githubActions');
var SearchInput = React.createClass({
handleSearch(event) {
actions.searchUser(this.refs.searchInput.getDOMNode().value);
},
render() {
return (
<div className='dashboard'>
<div className="ui action input">
<form onSubmit={this.handleSearch}>
<input type="text" ref="searchInput" placeholder="Search Github User Profiles..."/>
<div className="ui button" onClick={this.handleSearch}>Search</div>
</form>
</div>
<SearchResults/>
</div>
)
}
});
var SearchResults = React.createClass({
mixins: [Reflux.connect(store,"searchResults")],
getInitialState() {
return {
searchResults: {
repos: [],
user: {}
}
};
},
render() {
var results;
if(this.state.searchResults && this.state.searchResults.user) {
results = (
<div className="result">
<UserInfo name={this.state.searchResults.user.login} imgSrc={this.state.searchResults.user.avatar_url} />
<div className="repo-list">
<ul>
{this.state.searchResults && this.state.searchResults.repos && this.state.searchResults.repos.map((repo) => {
return <li key={repo.id}>{repo.name}</li>
})}
</ul>
</div>
</div>
)
} else {
results = <h1>No results match your query.</h1>
}
return (
<div className='search-results'>
{results}
</div>
)
}
});
var UserInfo = React.createClass({
render() {
return (
<div>
<label>{this.props.name}</label>
<br/>
<img id="gravitar-image" src={this.props.imgSrc}/>
</div>
);
}
});
module.exports = SearchInput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.