Introduce cat and breed model objects

index.html

@@ -5,6 +5,8 @@
   <link rel="stylesheet" type="text/css" href="style.css">
   <script type="text/javascript" src="js/angular.js"></script>
   <script type="text/javascript" src="js/app.js"></script>
+  <script type="text/javascript" src="js/factories/breed.js"></script>
+  <script type="text/javascript" src="js/factories/cat.js"></script>
   <script type="text/javascript" src="js/filters.js"></script>
   <script type="text/javascript" src="js/controllers.js"></script>
 </head>
@@ -30,16 +32,17 @@ <h3>My kittens</h3>
   <div class="filter-form">
     Filter (on breed / name): <input ng-change="showMatches()" ng-model="filterMatchStr">
   </div>
-  
+
   <div id="cat-list">
     <div class="cat" ng-repeat="cat in cats track by $index">
       <div class="cat-pic">
         <img ng-src="{{cat.image_url}}">
       </div>
       <div class="cat-details">
-        <div>Name:{{cat.id}} {{cat.name}} </div>
+        <div>Name:{{cat.name}} </div>
         <div>Breed: {{cat.breed_name}} </div>
-        <div>Born: {{cat.born_on}} </div>
+        <div>Born on: {{cat.bornOn | date : 'dd-MMM-yyyy'}} </div>
+        <div>Age: {{cat.getAge()}} </div>
       </div>
     </div>
   </div>

js/controllers.js

@@ -1,14 +1,14 @@
 angular.module('steven').controller('MainController',
-  ['$http', '$filter', '$scope', function($http, $filter, $scope){
+  ['Breed', 'Cat', '$filter', '$scope', function(Breed, Cat, $filter, $scope){
 
-  $http.get('https://stark-harbor-5038.herokuapp.com/breeds')
-    .then(function(response){
-      $scope.breeds = response.data;
+  Breed.getBreeds()
+    .then(function(breeds){
+      $scope.breeds = breeds;
     });
 
-  $http.get('https://stark-harbor-5038.herokuapp.com/cats')
-    .then(function(response){
-      $scope.allCats = response.data;
+  Cat.getCats()
+    .then(function(cats){
+      $scope.allCats = cats;
       $scope.showMatches();
     });
 
@@ -19,10 +19,9 @@ angular.module('steven').controller('MainController',
   };
 
   $scope.addNewCat = function() {
-    $http.post('https://stark-harbor-5038.herokuapp.com/cats', $scope.newCat)
-    .then(function(response){
-      var savedCat = response.data;
+    Cat.create($scope.newCat).then(function(savedCat){
       $scope.allCats.unshift(savedCat);
+      $scope.showMatches();
     });
   };
 

js/factories/breed.js

@@ -0,0 +1,21 @@
+angular.module('steven').factory('Breed', function($http) {
+
+  var apiUrl = 'https://stark-harbor-5038.herokuapp.com/breeds';
+
+  var Breed = function(json) {
+    angular.extend(this, json);
+  };
+
+  Breed.getBreeds = function() {
+    return $http.get(apiUrl)
+      .then(function(response){
+        var result = [];
+        angular.forEach(response.data, function(json){
+          result.push(new Breed(json));
+        });
+        return result;
+      });
+  };
+
+  return Breed;
+});

js/factories/cat.js

@@ -0,0 +1,41 @@
+angular.module('steven').factory('Cat', function($http) {
+
+  var apiUrl = 'https://stark-harbor-5038.herokuapp.com/cats';
+
+  var Cat = function(json) {
+    angular.extend(this, json);
+    this.bornOn = new Date(json.born_on);
+    this.createdAt = new Date(json.created_at);
+    this.updatedAt = new Date(json.updted_at);
+  };
+
+  Cat.prototype.getAge = function() {
+    var today = new Date();
+    var age = today.getFullYear() - this.bornOn.getFullYear();
+    var m = today.getMonth() - this.bornOn.getMonth();
+    if (m < 0 || (m === 0 && today.getDate() < this.bornOn.getDate())) {
+        age--;
+    }
+    return age;
+  };
+
+  Cat.getCats = function() {
+    return $http.get('https://stark-harbor-5038.herokuapp.com/cats')
+      .then(function(response){
+        var result = [];
+        angular.forEach(response.data, function(json){
+          result.push(new Cat(json));
+        });
+        return result;
+      });
+  };
+
+  Cat.create = function(catProps) {
+    return $http.post('https://stark-harbor-5038.herokuapp.com/cats', catProps)
+    .then(function(response){
+      return new Cat(response.data);
+    });
+  };
+
+  return Cat;
+});