From e647d91e8bfd3fa779c34de2846ce0e3ae6617b9 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Wed, 6 May 2015 19:15:03 -0400
Subject: [PATCH] Switch the repos page to use a single API call, rather than
 one per namespace + one for star repos

---
 endpoints/api/repository.py    |   3 +-
 static/css/pages/repo-list.css |   4 ++
 static/js/pages/repo-list.js   | 100 +++++++++++++++++----------------
 static/partials/repo-list.html |  25 +++++----
 4 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/endpoints/api/repository.py b/endpoints/api/repository.py
index aa7453554..4424ca2f4 100644
--- a/endpoints/api/repository.py
+++ b/endpoints/api/repository.py
@@ -103,7 +103,8 @@ class RepositoryList(ApiResource):
   @query_param('page', 'Offset page number. (int)', type=int)
   @query_param('limit', 'Limit on the number of results (int)', type=int)
   @query_param('namespace', 'Namespace to use when querying for org repositories.', type=str)
-  @query_param('public', 'Whether to include public repositories.', type=truthy_bool, default=True)
+  @query_param('public', 'Whether to include repositories not explicitly visible by the user.',
+                         type=truthy_bool, default=True)
   @query_param('private', 'Whether to include private repositories.', type=truthy_bool,
                default=True)
   @query_param('sort', 'Whether to sort the results.', type=truthy_bool, default=False)
diff --git a/static/css/pages/repo-list.css b/static/css/pages/repo-list.css
index ac0481c86..5088f36a7 100644
--- a/static/css/pages/repo-list.css
+++ b/static/css/pages/repo-list.css
@@ -3,6 +3,10 @@
   padding-top: 0px;
 }
 
+.repo-list .repo-list-panel.loading {
+  padding-top: 20px;
+}
+
 .repo-list .repo-list-namespaces h4 {
   margin: 6px;
   margin-bottom: 20px;
diff --git a/static/js/pages/repo-list.js b/static/js/pages/repo-list.js
index 9ea73e774..155074dc7 100644
--- a/static/js/pages/repo-list.js
+++ b/static/js/pages/repo-list.js
@@ -17,33 +17,46 @@
 
 
   function RepoListCtrl($scope, $sanitize, $q, Restangular, UserService, ApiService) {
-    $scope.namespace = null;
-    $scope.page = 1;
-    $scope.publicPageCount = null;
     $scope.allRepositories = {};
     $scope.loading = true;
+    $scope.namespaces = [];
+    $scope.namespaceMap = {};
 
     // When loading the UserService, if the user is logged in, create a list of
     // relevant namespaces and collect the relevant repositories.
     UserService.updateUserIn($scope, function(user) {
       $scope.loading = false;
+
+      var addNamespace = function(namespace) {
+        var name = namespace.username || namespace.name;
+        var namespaceInfo = {
+          'name': name,
+          'avatar': namespace.avatar,
+          'repositories': {
+            'loading': true,
+            'value': []
+          }
+        };
+
+        $scope.namespaceMap[name] = namespaceInfo;
+        $scope.namespaces.push(namespaceInfo);
+      };
+
       if (!user.anonymous) {
         // Add our user to our list of namespaces.
-        $scope.namespaces = [{
-          'name': user.username,
-          'avatar': user.avatar
-        }];
+        addNamespace(user);
 
         // Add each org to our list of namespaces.
         user.organizations.map(function(org) {
-          $scope.namespaces.push({
-            'name': org.name,
-            'avatar': org.avatar
-          });
+          addNamespace(org);
         });
 
-        // Load the repos.
-        loadStarredRepos();
+        $scope.starred_repositories = {
+          'loading': true,
+          'value': []
+        };
+
+        // Load the repositories.
         loadRepos();
       }
     });
@@ -62,46 +75,37 @@
       }
     };
 
-    // Finds a duplicate repo if it exists. If it doesn't, inserts the repo.
-    var findDuplicateRepo = function(repo) {
-      var found = $scope.allRepositories[repo.namespace + '/' + repo.name];
-      if (found) {
-        return found;
-      } else {
-        $scope.allRepositories[repo.namespace + '/' + repo.name] = repo;
-        return repo;
-      }
-    };
-
-    var loadStarredRepos = function() {
-      if (!$scope.user || $scope.user.anonymous) {
-        return;
-      }
-
-      $scope.starred_repositories = ApiService.listStarredReposAsResource().get(function(resp) {
-        return resp.repositories.map(function(repo) {
-          repo = findDuplicateRepo(repo);
-          repo.is_starred = true;
-          return repo;
-        });
-      });
-    };
-
     var loadRepos = function() {
-      if (!$scope.user || $scope.user.anonymous || $scope.namespaces.length == 0) {
+      if (!$scope.user || $scope.user.anonymous || $scope.loading) {
         return;
       }
 
-      $scope.namespaces.map(function(namespace) {
-        var options = {
-          'public': false,
-          'sort': true,
-          'namespace': namespace.name,
-        };
+      var options = {
+        'public': false,
+        'sort': true
+      };
 
-        namespace.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
-          return resp.repositories.map(findDuplicateRepo);
-        });
+      $scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
+        for (var i = 0; i < resp.repositories.length; ++i) {
+          var repository = resp.repositories[i];
+          var namespace = repository.namespace;
+          var namespaceInfo = $scope.namespaceMap[namespace];
+          if (!namespaceInfo) {
+            continue;
+          }
+
+          namespaceInfo.repositories.value.push(repository);
+          if (repository.is_starred) {
+            $scope.starred_repositories.value.push(repository);
+          }
+        }
+
+        for (var i = 0; i < $scope.namespaces.length; ++i) {
+          var namespaceInfo = $scope.namespaces[i];
+          namespaceInfo.repositories.loading = false;
+        }
+
+        $scope.starred_repositories.loading = false;
       });
     };
   }
diff --git a/static/partials/repo-list.html b/static/partials/repo-list.html
index 07590a0ac..b2ea75f6d 100644
--- a/static/partials/repo-list.html
+++ b/static/partials/repo-list.html
@@ -51,19 +51,22 @@
     </div>
 
     <div class="col-lg-9 col-lg-pull-3 col-md-9 col-md-pull-3 col-sm-12">
-      <div class="repo-list-panel co-main-content-panel">
-        <!-- Starred Repository Listing -->
-        <div class="repo-list-grid" repositories-resource="starred_repositories"
-             starred="true"
-             star-toggled="starToggled(repository)">
-        </div>
-
-        <!-- User and Org Repository Listings -->
-        <div ng-repeat="namespace in namespaces">
-          <div class="repo-list-grid" repositories-resource="namespace.repositories"
-               starred="false" user="user" namespace="namespace"
+      <div class="repo-list-panel co-main-content-panel"
+           ng-class="repositoriesResource.loading ? 'loading' : ''">
+        <div class="resource-view" resource="repositoriesResource" error-message="'Could not load repositories'">
+          <!-- Starred Repository Listing -->
+          <div class="repo-list-grid" repositories-resource="starred_repositories"
+               starred="true"
                star-toggled="starToggled(repository)">
           </div>
+
+          <!-- User and Org Repository Listings -->
+          <div ng-repeat="namespace in namespaces">
+            <div class="repo-list-grid" repositories-resource="namespace.repositories"
+                 starred="false" user="user" namespace="namespace"
+                 star-toggled="starToggled(repository)">
+            </div>
+          </div>
         </div>
       </div>
     </div>