perf: refactor code fetching memeber and starred projects (#989)

* Take advantage of getProjects in getAllProjects. * Invoke getAllProjects for starred projects. * Prevent fetching user projects when browsing as anonymous. fix #986
SwissDataScienceCenter · Jul 22, 2020 · 7a47e6c · 7a47e6c
1 parent c6fced4
commit 7a47e6c
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 53 deletions.
diff --git a/src/api-client/project.js b/src/api-client/project.js
@@ -98,7 +98,7 @@ function getFilesTreeLazy(client, files, projectId, openFilePath, lfsFiles) {
 
 function addProjectMethods(client) {
 
-  client.getProjects = (queryParams = {}) => {
+  client.getProjects = async (queryParams = {}) => {
     let headers = client.getBasicHeaders();
     return client.clientFetch(`${client.baseUrl}/projects`, {
       method: "GET",
@@ -107,33 +107,22 @@ function addProjectMethods(client) {
     });
   };
 
-  client.getAllProjects = (extraParams = [],
-    { recursive = false, per_page = 100, page = 1, previousResults = [] } = {}
-  ) => {
-    let headers = client.getBasicHeaders();
+  client.getAllProjects = async (queryParams = {}) => {
+    let projects = [];
+    let page = 1;
+    let finished = false;
 
-    const queryParams = {
-      recursive,
-      per_page,
-      page,
-      ...extraParams
-    };
+    while (!finished) {
+      const resp = await client.getProjects({ ...queryParams, page });
+      projects = [...projects, ...resp.data];
 
-    return client.clientFetch(`${client.baseUrl}/projects`, {
-      method: "GET",
-      headers,
-      queryParams,
-    }).then(response => {
-      if (response.pagination.nextPageLink !== undefined) {
-        return client.getAllProjects(extraParams, {
-          recursive,
-          per_page,
-          previousResults: previousResults.concat(response.data),
-          page: response.pagination.nextPage
-        });
-      }
-      return previousResults.concat(response.data);
-    });
+      if (!resp.pagination.nextPageLink)
+        finished = true;
+      else
+        page = resp.pagination.nextPage;
+    }
+
+    return projects;
   };
 
   client.getAvatarForNamespace = (namespaceId = {}) => {

diff --git a/src/landing/Landing.js b/src/landing/Landing.js
@@ -66,7 +66,8 @@ class HomeProjects extends Component {
   }
 
   componentDidMount() {
-    this.projectsCoordinator.getFeatured();
+    if (this.props.user.logged)
+      this.projectsCoordinator.getFeatured();
   }
 
   mapStateToProps(state, ownProps) {

diff --git a/src/landing/NavBar.js b/src/landing/NavBar.js
@@ -216,7 +216,7 @@ class LoggedInNavBar extends Component {
           </button>
 
           <div className="collapse navbar-collapse flex-wrap" id="navbarSupportedContent">
-            <QuickNav client={this.props.client} model={this.props.model} />
+            <QuickNav client={this.props.client} model={this.props.model} user={this.props.user} />
 
             <div className="d-flex flex-grow-1">
               <ul className="navbar-nav mr-auto">
@@ -261,7 +261,7 @@ class AnonymousNavBar extends Component {
           </button>
 
           <div className="collapse navbar-collapse flex-wrap" id="navbarSupportedContent">
-            <QuickNav client={this.props.client} model={this.props.model} />
+            <QuickNav client={this.props.client} model={this.props.model} user={this.props.user} />
 
             <div className="d-flex flex-grow-1">
               <ul className="navbar-nav mr-auto">

diff --git a/src/project/Project.js b/src/project/Project.js
@@ -158,9 +158,11 @@ class View extends Component {
     this.projectCoordinator = new ProjectCoordinator(props.client, props.model.subModel("project"));
 
     // fetch useful projects data in not yet loaded
-    const featured = props.model.get("projects.featured");
-    if (!featured.fetched && !featured.fetching)
-      this.projectsCoordinator.getFeatured();
+    if (this.props.user.logged) {
+      const featured = props.model.get("projects.featured");
+      if (!featured.fetched && !featured.fetching)
+        this.projectsCoordinator.getFeatured();
+    }
   }
 
   componentDidMount() {

diff --git a/src/project/shared/Projects.state.js b/src/project/shared/Projects.state.js
@@ -51,25 +51,17 @@ class ProjectsCoordinator {
   }
 
   async getFeatured() {
-    if (this.model.get("featured.fetching")) return;
-    // set status to fetching and invoke both APIs
+    if (this.model.get("featured.fetching"))
+      return;
+    // set status to fetching, get all the projects and filter and invoke both APIs
     this.model.set("featured.fetching", true);
-    const promiseStarred = this.client.getProjects({ starred: true, order_by: "last_activity_at", per_page: 100 })
-      .then((projectResponse) => {
-        const projects = projectResponse.data.map((project) => this._starredProjectMetadata(project));
-        return projects;
-      })
-      .catch((error) => {
-        this.model.set("starredProjects", []);
-      });
-    const promiseMember = this.client.getAllProjects({ membership: true, order_by: "last_activity_at", per_page: 100 })
-      .then((projectResponse) => {
-        const projects = projectResponse.map((project) => this._starredProjectMetadata(project));
-        return projects;
-      })
-      .catch((error) => {
-        this.model.set("memberProjects", []);
-      });
+    const params = { order_by: "last_activity_at", per_page: 100 };
+    const promiseStarred = this.client.getAllProjects({ ...params, starred: true })
+      .then(resp => resp.map((project) => this._starredProjectMetadata(project)))
+      .catch(error => []);
+    const promiseMember = this.client.getAllProjects({ ...params, membership: true })
+      .then(resp => resp.map((project) => this._starredProjectMetadata(project)))
+      .catch(error => []);
 
     // set `featured` content and return only `starred` and `member` projects data
     return Promise.all([promiseStarred, promiseMember]).then(values => {

diff --git a/src/utils/quicknav/QuickNav.container.js b/src/utils/quicknav/QuickNav.container.js
@@ -45,9 +45,11 @@ class QuickNavContainerWithRouter extends Component {
     super(props);
     this.bar = new SearchBarModel(StateKind.REACT, this);
     this.projectsCoordinator = new ProjectsCoordinator(props.client, props.model.subModel("projects"));
-    const featured = this.projectsCoordinator.model.get("featured");
-    if (!featured.featured && !featured.fetching)
-      this.projectsCoordinator.getFeatured();
+    if (this.props.user.logged) {
+      const featured = this.projectsCoordinator.model.get("featured");
+      if (!featured.featured && !featured.fetching)
+        this.projectsCoordinator.getFeatured();
+    }
 
     this.callbacks = {
       onChange: this.onChange.bind(this),