renderBody: function(){
var image = stores.ImageStore.get(Number(this.getParams().imageId)),
tags = stores.TagStore.getAll(),
hasLoggedInUser = context.hasLoggedInUser(),
providers = hasLoggedInUser ? stores.ProviderStore.getAll() : null,
identities = hasLoggedInUser ? stores.IdentityStore.getAll() : null;
if(!image || !tags) return <div className='loading'></div>;
// If the user isn't logged in, display the public view, otherwise
// wait for providers and instances to be fetched
if (!hasLoggedInUser) {
return (
<ImageDetailsView
image={image}
tags={tags}
/>
);
}
if (!providers || !identities) return <div className='loading'></div>;
return (
<ImageDetailsView
image={image}
providers={providers}
identities={identities}
tags={tags}
/>
);
},
render: function() {
if (!show_public_site && !context.hasLoggedInUser()) {
//Users who ARE logged in, but without an identity
//cannot be handled in the application, currently.
//These users are punted now.
var username = context.profile.get('username'),
errorText = 'User <' + username + '> was authenticated, but has no available, active identities. Contact your Cloud Administrator.',
error_status = encodeURIComponent(errorText);
window.location = '/forbidden?banner=' + error_status;
}
var maintenanceMessages = stores.MaintenanceMessageStore.getAll() || new Backbone.Collection(),
marginTop = maintenanceMessages.length * 24 + 'px';
return (
<div>
<Header profile={ context.profile } currentRoute={ ['projects'] } maintenanceMessages={ maintenanceMessages } />
<div id="main" style={ { 'marginTop': marginTop } }>
<RouteHandler/>
</div>
<Footer text={ globals.SITE_FOOTER } profile={ context.profile } />
</div>
);
}
componentDidMount: function () {
// subscribe to all Stores
Object.keys(stores).forEach(function (storeName) {
stores[storeName].addChangeListener(this.updateState);
}.bind(this));
// The code below is only relevant to logged in users
if (!context.hasLoggedInUser()) return;
// IMPORTANT! We get one shot at this. If the instances and volumes aren't
// fetched before this component is mounted we miss our opportunity to migrate
// the users resources (so make sure they're fetched in the Splash Screen)
var instances = stores.InstanceStore.getInstancesNotInAProject(),
volumes = stores.VolumeStore.getVolumesNotInAProject(),
nullProject = new NullProject({instances: instances, volumes: volumes});
if (!modernizrTest.unsupported()) {
showUnsupportedModal.showModal(this.closeUnsupportedModal);
}
if (modernizrTest.unsupported()) {
if (!nullProject.isEmpty()) {
actions.NullProjectActions.migrateResourcesIntoProject(nullProject);
} else {
actions.NullProjectActions.moveAttachedVolumesIntoCorrectProject();
}
}
if (globals.BADGES_ENABLED){
this.loadBadgeData();
}
},
renderRoute: function(name, linksTo, icon, requiresLogin) {
if (requiresLogin && !context.hasLoggedInUser()) return null;
return (
<li key={ name }>
<Router.Link to={ linksTo }>
<Glyphicon name={ icon } />
<span>{ name }</span>
</Router.Link>
</li>
)
},
render: function() {
// only attempt to get bookmarks if there is a profile that might have them ...
let userLoggedIn = context.hasLoggedInUser();
let images = stores.ImageStore.getAll();
let routes;
if (!userLoggedIn) {
routes = [
this.renderRoute('Search', 'search', 'search', false),
this.renderRoute('Tags', 'tags', 'tags', false)
];
} else {
let profile = stores.ProfileStore.get();
let favoritedImages = stores.ImageBookmarkStore.getBookmarkedImages();
let userImages = stores.ImageStore.fetchWhere({
created_by__username: profile.get('username')
});
if (!userImages || !favoritedImages) {
return <div className="loading"></div>
}
let myImagesText = `My Images (${userImages.length})`;
let myFavoritedImagesText = `Favorites (${favoritedImages.length})`;
routes = [
this.renderRoute('Search', 'search', 'search', false),
this.renderRoute(myFavoritedImagesText, 'favorites', 'bookmark', true),
this.renderRoute(myImagesText, 'authored', 'user', true),
this.renderRoute('My Image Requests', 'my-image-requests', 'export', true),
this.renderRoute('Tags', 'tags', 'tags', false),
];
}
return (
<div>
<div className="secondary-nav">
<div className="container">
<ul className="secondary-nav-links">
{ routes }
</ul>
</div>
</div>
</div>
);
}