thumbnails loading

src/App.js

@@ -2,22 +2,10 @@ import React from 'react';
 
 import { HashRouter, Switch, Route } from 'react-router-dom';
 
-import ExperimentsService from './services/proxy/experiments-service.js';
-
 import EntryPage from './components/entry-page/entry-page.js';
 import ExperimentList from './components/experiment-list/experiment-list.js';
 
 class App extends React.Component {
-  async componentDidMount() {
-    try {
-      const experiments = await ExperimentsService.instance.getExperiments();
-      console.log(experiments);
-    }
-    catch (error) {
-      console.error(`Failed to fetch the list of experiments. Error: ${error}`);
-    }
-  }
-
   render() {
     return (
       <HashRouter>

src/components/experiment-list/experiment-list-element.js

 import React from 'react';
 import timeDDHHMMSS from '../../app/scripts/common/filters/time-filter.js';
+import ExperimentsService from '../../services/proxy/experiments-service.js';
 
 import './experiment-list-element.css';
 
+//import config from '../../config.json';
+//import endpoints from '../../services/proxy/data/endpoints.json';
+
 export default class ExperimentListElement extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  async componentDidMount() {
+    // retrieve the experiment thumbnail
+    let thumbnail = await ExperimentsService.instance.getThumbnail(this.props.experiment);
+    this.setState({thumbnail: URL.createObjectURL(thumbnail)});
+  }
+
   render() {
     const exp = this.props.experiment;
     const config = this.props.experiment.configuration;
@@ -12,7 +27,7 @@ export default class ExperimentListElement extends React.Component {
     return (
       <div className='list-entry-container left-right' style={{position:'relative'}}>
         <div className='list-entry-left' style={{position:'relative'}}>
-          <img className='entity-thumbnail' src={exp.configuration.thumbnail} alt='' />
+          <img className='entity-thumbnail' src={this.state.thumbnail} alt='' />
         </div>
         <div className='list-entry-middle list-entry-container up-down'>
           <div className='list-entry-container left-right title-line'>

src/components/experiment-list/experiment-list.js

@@ -21,6 +21,7 @@ export default class ExperimentList extends React.Component {
     // replace the token here with a token found in your database in ~/.opt/nrpStorage/FS_db/users for testing
     try {
       const experiments = await ExperimentsService.instance.getExperiments();
+      console.info(experiments);
       this.setState({
         experiments: experiments
       });

src/services/http-service.js

@@ -49,7 +49,7 @@ export class HttpService {
       return response;
     }
 
-    return response.json();
+    return response;
   };
 
   /**

src/services/proxy/data/endpoints.json

@@ -3,6 +3,9 @@
         "experiments": {
             "url": "/storage/experiments"
         },
+        "experimentImage": {
+            "url": "/experimentImage"
+        },
         "identity": {
             "url": "/identity",
             "me": {
@@ -11,6 +14,9 @@
                     "url": "/identity/me/groups"
                 }
             }
+        },
+        "storage": {
+            "url": "/storage"
         }
     }
 }
\ No newline at end of file

src/services/proxy/experiments-service.js

@@ -34,15 +34,23 @@ class ExperimentsService extends HttpService {
    *
    * @return experiments - the list of template experiments
    */
-  getExperiments = () => {
+  async getExperiments() {
     if (!this.experiments) {
       const proxyEndpoint = endpoints.proxy;
       const experimentsUrl = `${config.api.proxy.url}${proxyEndpoint.experiments.url}`;
-      this.experiments = this.httpRequestGET(experimentsUrl);
+      let response = await this.httpRequestGET(experimentsUrl);
+      this.experiments = response.json();
     }
 
     return this.experiments;
   };
+
+  async getThumbnail(experiment) {
+    let url = config.api.proxy.url + endpoints.proxy.storage.url + '/' + experiment.name + '/' + experiment.configuration.thumbnail + '?byname=true';
+    let response = await this.httpRequestGET(url);
+    let image = await response.blob();
+    return image;
+  }
 }
 
 export default ExperimentsService;

src/services/proxy/nrp-user-service.js

@@ -40,7 +40,8 @@ class NrpUserService extends HttpService {
    * @returns {promise} Request for the user
    */
   async getUser(userID) {
-    return await this.httpRequestGET(this.IDENTITY_BASE_URL + '/' + userID);
+    let response = await this.httpRequestGET(this.IDENTITY_BASE_URL + '/' + userID);
+    return response.json();
   }
 
   /**
@@ -61,7 +62,8 @@ class NrpUserService extends HttpService {
    */
   async getCurrentUser() {
     if (!this.currentUser) {
-      this.currentUser = await this.httpRequestGET(this.IDENTITY_ME_URL);
+      let response = await this.httpRequestGET(this.IDENTITY_ME_URL);
+      this.currentUser = response.json();
     }
 
     return this.currentUser;
@@ -74,9 +76,8 @@ class NrpUserService extends HttpService {
    */
   async getCurrentUserGroups() {
     if (!this.currentUserGroups) {
-      this.currentUserGroups = await this.httpRequestGET(
-        this.IDENTITY_ME_GROUPS_URL
-      );
+      let response = await this.httpRequestGET(this.IDENTITY_ME_GROUPS_URL);
+      this.currentUserGroups = response.json();
     }
 
     return this.currentUserGroups;