Switch the repos page to use a single API call, rather than one per namespace + one for star repos

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)

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;

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 = [{
+        addNamespace(user);
-          'name': user.username,
-          'avatar': user.avatar
-        }];
 
         // Add each org to our list of namespaces.
         user.organizations.map(function(org) {
-          $scope.namespaces.push({
+          addNamespace(org);
-            'name': org.name,
-            'avatar': org.avatar
-          });
         });
 
-        // Load the repos.
+        $scope.starred_repositories = {
-        loadStarredRepos();
+          '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 = {
-        var options = {
+        'public': false,
-          'public': false,
+        'sort': true
-          'sort': true,
+      };
-          'namespace': namespace.name,
-        };
 
-        namespace.repositories = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
+      $scope.repositoriesResource = ApiService.listReposAsResource().withOptions(options).get(function(resp) {
-          return resp.repositories.map(findDuplicateRepo);
+        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;
       });
     };
   }

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">
+      <div class="repo-list-panel co-main-content-panel"
-        <!-- Starred Repository Listing -->
+           ng-class="repositoriesResource.loading ? 'loading' : ''">
-        <div class="repo-list-grid" repositories-resource="starred_repositories"
+        <div class="resource-view" resource="repositoriesResource" error-message="'Could not load repositories'">
-             starred="true"
+          <!-- Starred Repository Listing -->
-             star-toggled="starToggled(repository)">
+          <div class="repo-list-grid" repositories-resource="starred_repositories"
-        </div>
+               starred="true"
-
-        <!-- 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>
+
+          <!-- 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>