2018-01-30 09:00:02 -08:00
|
|
|
import React from 'react';
|
2018-02-04 16:40:28 -08:00
|
|
|
import PropTypes from 'prop-types';
|
2018-01-30 09:00:02 -08:00
|
|
|
import NavBar from 'containers/NavBar';
|
|
|
|
import AssetTitle from 'components/AssetTitle';
|
2018-02-06 19:00:52 -08:00
|
|
|
import AssetDisplay from 'containers/AssetDisplay';
|
2018-01-30 09:00:02 -08:00
|
|
|
import AssetInfo from 'components/AssetInfo';
|
|
|
|
|
2018-02-02 11:10:58 -08:00
|
|
|
class ShowAssetDetails extends React.Component {
|
2018-01-30 09:00:02 -08:00
|
|
|
render () {
|
2018-02-06 22:54:06 -08:00
|
|
|
const { error, claimData: { title, channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host }, shortId } = this.props;
|
2018-01-30 09:00:02 -08:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<NavBar/>
|
2018-02-06 22:54:06 -08:00
|
|
|
{error &&
|
2018-01-31 19:12:54 -08:00
|
|
|
<div className="row row--padded">
|
2018-02-06 22:54:06 -08:00
|
|
|
<p>{error}</p>
|
2018-01-31 19:12:54 -08:00
|
|
|
</div>
|
2018-01-30 17:15:23 -08:00
|
|
|
}
|
|
|
|
{this.props.claimData &&
|
|
|
|
<div className="row row--tall row--padded">
|
|
|
|
<div className="column column--10">
|
2018-02-06 22:54:06 -08:00
|
|
|
<AssetTitle title={title}/>
|
2018-01-30 17:15:23 -08:00
|
|
|
</div>
|
|
|
|
<div className="column column--5 column--sml-10 align-content-top">
|
|
|
|
<div className="row row--padded">
|
2018-02-06 19:00:52 -08:00
|
|
|
<AssetDisplay />
|
2018-01-30 17:15:23 -08:00
|
|
|
</div>
|
|
|
|
</div><div className="column column--5 column--sml-10 align-content-top">
|
|
|
|
<div className="row row--padded">
|
2018-01-31 19:12:54 -08:00
|
|
|
<AssetInfo
|
2018-02-06 22:54:06 -08:00
|
|
|
channelName={channelName}
|
|
|
|
certificateId={certificateId}
|
|
|
|
description={description}
|
|
|
|
name={name}
|
|
|
|
claimId={claimId}
|
|
|
|
fileExt={fileExt}
|
|
|
|
contentType={contentType}
|
|
|
|
thumbnail={thumbnail}
|
|
|
|
host={host}
|
|
|
|
shortId={shortId}
|
2018-01-31 19:12:54 -08:00
|
|
|
/>
|
2018-01-30 17:15:23 -08:00
|
|
|
</div>
|
2018-01-30 09:00:02 -08:00
|
|
|
</div>
|
|
|
|
</div>
|
2018-01-30 17:15:23 -08:00
|
|
|
}
|
2018-01-30 09:00:02 -08:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2018-02-04 16:40:28 -08:00
|
|
|
ShowAssetDetails.propTypes = {
|
|
|
|
error : PropTypes.string,
|
|
|
|
claimData: PropTypes.object.isRequired,
|
2018-02-04 17:43:02 -08:00
|
|
|
shortId : PropTypes.string.isRequired,
|
2018-02-04 16:40:28 -08:00
|
|
|
};
|
2018-01-30 11:46:22 -08:00
|
|
|
|
2018-02-02 11:10:58 -08:00
|
|
|
export default ShowAssetDetails;
|