update starring without reloading repos

static/js/controllers.js

@@ -239,12 +239,14 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
   // Grab user namespaces
   UserService.load(function() {
     var user = UserService.currentUser();
-    $scope.namespaces = [user];
+    if (!user.anonymous) {
-    for (var i = 0; i < user.organizations.length; i++) {
+      $scope.namespaces = [user];
-      $scope.namespaces.push(user.organizations[i]);
+      for (var i = 0; i < user.organizations.length; i++) {
+        $scope.namespaces.push(user.organizations[i]);
+      }
+      loadStarredRepos();
+      loadRepos();
     }
-    loadStarredRepos();
-    loadRepos();
   });
 
 
@@ -254,34 +256,74 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
   //  loadRepos();
   //});
 
+  $scope.toggleStar = function(repo) {
+    if (repo.is_starred) {
+      unstarRepo(repo);
+    } else {
+      starRepo(repo);
+    }
+  }
 
-  $scope.starRepo = function(repo) {
+  var starRepo = function(repo) {
     var data = {
       'namespace': repo.namespace,
       'repository': repo.name
     };
     ApiService.createStar(data).then(function(result) {
-      loadStarredRepos();
+      addToStarred(repo);
-      loadRepos();
     }, function(result) {
-      loadStarredRepos();
+      // TODO(jzelinskie): have some kind of pop-up for star failure
-      loadRepos();
     });
   };
 
-  $scope.unstarRepo = function(repo) {
+  var unstarRepo = function(repo) {
     var data = {
       'repository': repo.namespace + '/' + repo.name
     };
     ApiService.deleteStar(null, data).then(function(result) {
-      loadStarredRepos();
+      removeFromStarred(repo);
-      loadRepos();
     }, function(result) {
-      loadStarredRepos();
+      // TODO(jzelinskie): have some kind of pop-up for star failure
-      loadRepos();
     });
   };
 
+  var findRepoInList = function(repoNamespace, repoName) {
+    var namespaceIndex = $scope.namespaces.map(function (n) {
+      return n.username || n.name;
+    }).indexOf(repoNamespace);
+
+    var namespace = $scope.namespaces[namespaceIndex]
+
+    var repoIndex = namespace.repositories.value.map(function (r) {
+      return r.namespace + '/' + r.name;
+    }).indexOf(repoNamespace + '/' + repoName);
+
+    return repoIndex != -1 ? namespace.repositories.value[repoIndex] : null;
+  }
+
+  var addToStarred = function(repository) {
+    $scope.starred_repositories.value.push(repository);
+
+    var repo = findRepoInList(repository.namespace, repository.name);
+    if (repo != null) {
+      repo.is_starred = true;
+    }
+  }
+
+  var removeFromStarred = function(repository) {
+    // Remove from the starred listings
+    var index = $scope.starred_repositories.value.map(function (r) {
+      return r.namespace + '/' + r.name;
+    }).indexOf(repository.namespace + '/' + repository.name);
+    $scope.starred_repositories.value.splice(index, 1);
+
+    // Set repo from the normal listings to unstarred.
+    var repo = findRepoInList(repository.namespace, repository.name);
+    if (repo != null) {
+      repo.is_starred = false;
+    }
+  };
+
   $scope.movePublicPage = function(increment) {
     if ($scope.publicPageCount == null) {
       return;
@@ -305,7 +347,10 @@ function RepoListCtrl($scope, $sanitize, Restangular, UserService, ApiService) {
     }
 
     $scope.starred_repositories = ApiService.listStarredReposAsResource().get(function(resp) {
-      return resp.repositories;
+      return resp.repositories.map(function (repo) {
+        repo.is_starred = true;
+        return repo;
+      });
     });
   };
 

static/partials/repo-list.html

@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row" ng-if="!user.anonymous">
   <div class="repo-list-sidebar col-lg-3 col-lg-push-9 col-md-3 col-md-push-9 col-sm-4 col-sm-push-8 col-xs-12">
     <div class="button-bar-right">
       <a href="/new/">
@@ -58,7 +58,7 @@
                       </a>
                     </div>
                     <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
-                      <i class="star-icon starred fa fa-star" ng-click="unstarRepo(repository)"></i>
+                      <i class="star-icon starred fa fa-star" ng-click="toggleStar(repository)"></i>
                     </div>
                   </div>
                   <!-- The description automatically gets put in a <p> which adds margin that throws off our .repo-panel padding -->
@@ -106,11 +106,9 @@
                         </a>
                       </div>
                       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
-                        <i ng-if="repository.is_starred" class="star-icon starred fa fa-star" ng-click="unstarRepo(repository)"></i>
+                        <i ng-class="repository.is_starred ? 'starred fa fa-star' : 'fa fa-star-o'" class="star-icon" ng-click="toggleStar(repository)"></i>
-                        <i ng-if="!repository.is_starred" class="star-icon fa fa-star-o" ng-click="starRepo(repository)"></i>
                       </div>
                     </div>
-                    <!-- The description automatically gets put in a <p> which adds margin that throws off our .repo-panel padding -->
                     <div class="description markdown-view" content="repository.description" first-line-only="true"></div>
                 </div>
               </div>