JSFiddle - React, Tailwind, and code Playground

by Aleh Krutsikau

HTML

<div ng-app="myApp" ng-controller="ServiceController">
    <label for="username">Type in a GitHub username</label>
    <input type="text" ng-model="username" placeholder="Enter a GitHub username" />
    <ul>
        <li ng-repeat="event in events">
            <!--
            event.actor and event.repo are returned
            by the github API. To view the raw
            API, uncomment the next line:
            -->
            <!-- {{ event | json }} -->
            {{ event.actor.login }} {{ event.repo.name }}
        </li>
    </ul>
</div>

JavaScript

angular.module('myApp.services', []).factory('githubService', function($http) {
    var githubUrl = 'https://api.github.com';
    var runUserRequest = function(username, path) {
        // Return the promise from the $http service
        // that calls the Github API using JSONP
        return $http({
            method: 'JSONP',
            url: githubUrl + '/users/' + username + '/' + path + '?callback=JSON_CALLBACK'
        });
    }
    // Return the service object with a single function
    // events
    return {
        events: function(username) {
            return runUserRequest(username, 'events');
        }
    };
});

angular.module('myApp', ['myApp.services'])
.controller('ServiceController', function($scope, $timeout, githubService) {
    
    var timeout;
    
    $scope.$watch('username', function(newUsername) {
        
        if (newUsername) {
            if (timeout) 
                $timeout.cancel(timeout);
            
            timeout = $timeout(function() {
                githubService.events(newUsername).success(function(data, status, headers) {
                    $scope.events = data.data;
                });
            }, 1000);
        }
    });
});

var githubDecorator = function($delegate, $log) {
    var events = function(path) {
        var startedAt = new Date();
        var events = $delegate.events(path);
        // Events is a promise
        events.finally(function() {
            $log.info("Fetching events" + " took " + (new Date() - startedAt) + "ms");
        });
        return events;
    }
    
    return {
        events: events
    };
}

angular.module('myApp')
.config(function($provide) {
    $provide.decorator('githubService',githubDecorator);
});