Convert cat to resource

index.html

@@ -45,7 +45,7 @@ <h3>My kittens</h3>
       <div class="cat-details">
         <div>Name:{{cat.name}} </div>
         <div>Breed: {{cat.breed_name}} </div>
-        <div>Born on: {{cat.bornOn | date : 'dd-MMM-yyyy'}} </div>
+        <div>Born on: {{cat.getBornOn() | date : 'dd-MMM-yyyy'}} </div>
         <div>Age: {{cat.getAge()}} </div>
       </div>
     </div>

js/controllers.js

@@ -3,8 +3,9 @@ angular.module('steven').controller('MainController',
 
  $scope.breeds = Breed.all();
  console.log('Breed 1', Breed.find(1));
+ console.log('Cat 1', Cat.find(1));
 
-  Cat.getCats()
+  Cat.all() // we've made Cat.all return a promise using ngResource.$promise()
     .then(function(cats){
       $scope.allCats = cats;
       $scope.showMatches();
@@ -17,7 +18,7 @@ angular.module('steven').controller('MainController',
   };
 
   $scope.addNewCat = function() {
-    Cat.create($scope.newCat).then(function(savedCat){
+    new Cat($scope.newCat).save().then(function(savedCat){
       $scope.allCats.unshift(savedCat);
       $scope.showMatches();
     });

js/factories/breed.js

@@ -2,13 +2,13 @@ angular.module('steven').factory('Breed', function($resource) {
 
   var Breed = $resource('https://stark-harbor-5038.herokuapp.com/breeds/:id', { id: '@id' }, {
     // Add the PATCH method for update. ng-resource by default
-    // supplies only a save() which maps to a POST. We use that for 
+    // supplies only a save() which maps to a POST. We use that for
     // create and use this update() for updates.
     create: {
       method: 'POST'
     },
     update: {
-      method: 'PATCH' // this method issues a PATCH request
+      method: 'PATCH'
     }
   });
 

js/factories/cat.js

@@ -1,41 +1,57 @@
-angular.module('steven').factory('Cat', function($http) {
+angular.module('steven').factory('Cat', function($resource) {
 
-  var apiUrl = 'https://stark-harbor-5038.herokuapp.com/cats';
+  var apiUrl = 'https://stark-harbor-5038.herokuapp.com/cats/:id';
+  var Cat = $resource(apiUrl, { id: '@id' }, {
+    create: {
+      method: 'POST'
+    },
+    update: {
+      method: 'PATCH'
+    }
+  });
 
-  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.getBornOn = function() {
+    /*
+    The API returns e.g. 2010-04-05
+    new Date(2010-04-05) will be treated as a UTC date in ES5
+    and a local date in ES6. We want to force treatment as local
+    and ignore the TZ issue altogether. "new Date(y, m, d)"
+    will give us a local date. In that syntax month is zero-based
+    so we need to subtract 1 from the month in the string.
+    */
+    var parts = this.born_on.split('-');
+    return new Date(parts[0], parts[1] - 1, parts[2]);
+  }
 
   Cat.prototype.getAge = function() {
+    var bornOn = this.getBornOn();
     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())) {
+    var age = today.getFullYear() - bornOn.getFullYear();
+    var m = today.getMonth() - bornOn.getMonth();
+    if (m < 0 || (m === 0 && today.getDate() < 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.all = function() {
+    return Cat.query().$promise;
   };
 
-  Cat.create = function(catProps) {
-    return $http.post('https://stark-harbor-5038.herokuapp.com/cats', catProps)
-    .then(function(response){
-      return new Cat(response.data);
-    });
-  };
+  Cat.find = function(id) {
+    return Cat.get({id: id}).$promise;
+  }
+
+  Cat.prototype.save = function() {
+    if (this.id) {
+      console.log('updating');
+      return this.$update();
+    } else {
+      console.log('creating');
+      return this.$save();
+    }
+  }
+
 
   return Cat;
 });